Pratique des vacances d'été développement web front-end et back-end-notes

Pratiquez le développement Web front-end et back-end pendant les vacances d'été - notes

2024-07-12

(Principalement du développement front-end, pas back-end. Permettez-moi d'abord de vous présenter un projet qui implémente le front-end et le back-end)

1. Installez et exécutez le projet MoreMall

1.Introduction au projet MoreMall

Le front-end et le back-end peuvent interagir les uns avec les autres, front-end : client, back-end : serveur ; la base de données peut être écrite en mall.sql.

2.Configuration de l'environnement

1) Installez Node.js : Node.js est unEnvironnement d'exécution JavaScript , pour créer des applications côté serveur. Téléchargez et installez la version appropriée de Node.js sur le site officiel [Node.js](https://nodejs.org/). La configuration de l'environnement de node.js est relativement complexe.

2) Installez MySQL
3) Installer les dépendances : exécutez `npm install` dans le répertoire racine du projet, ce quiLe fichier `package.json` installe toutes les dépendances requises pour le projet.

(MySQL) : https://blog.csdn.net/chuci0910/article/details/138770174
(NodeJs) : https://zhuanlan.zhihu.com/p/686043568

2. Créez un projet Vue

1. Créez un projet à l'aide de Vue CLI

1) Installez et créez le projet vue : créez un nouveau dossier pour mettre le fichier projet - cmd dans le répertoire des fichiers - `vue create my-project`
2) Structure du répertoire du projet : le répertoire `src` contient des sous-répertoires tels que `components` et `views`, qui sont utilisés pour stocker les composants et les pages.

3) dans<template>Écrire des données dans un script
- **Définir les données** : dans le composant Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Afficher les données** : dans le composant Vue`<template> `Utilisation partielle des expressions d'interpolation`{{ }}` ou la commande `v-bind` etc. pour afficher les données.

Exemple : composant—foo.vue


<template>
	<div>{{msg}}</div>
</template>
 
<script>
export default{
	name:'foo',
	data(){
		return{
			msg:'foo page'
		}
	}
}
</script>
 
<style>
</style>

3. Installez et utilisez vue-router

Voici le test de route du projet

1. Installez vue-router

1) Installation : cmd sous le répertoire du fichier de projet où vous souhaitez ajouter cette chose - `npm install vue-router`
2) Configurer le routage : configurez les règles de routage dans `src/router/index.js` pour mapper différents chemins vers différents composants.

Exemple:

Code dans le fichier src/router/index.js :


import { createRouter, createWebHistory } from 'vue-router';
import Home from '../components/Home.vue'; // 示例组件路径，请根据实际情况调整
import Bar from '../components/Bar.vue'; // 示例组件路径，请根据实际情况调整
import Foo from '../components/Foo.vue'; // 示例组件路径，请根据实际情况调整
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/bar',
    name: 'Bar',
    component: Bar
  },
  {
    path: '/foo',
    name: 'Foo',
    component: Foo
  }
  // 其他路由配置
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
export default router;

3) Utiliser<router-link>et<router-view>
<router-link>: Utilisé pour créer des liens de navigation, qui peuvent être basculés vers la page de routage correspondante après avoir cliqué.
<router-view>: Utilisé pour afficher les composants de routage correspondants.

Exemple : App.vue :


<template>
  <div id="app">
      <router-link to="/bar">Bar</router-link>|
      <router-link to="/foo">Foo</router-link>  
    <router-view></router-view> <!-- 确保包含这个标签 -->
  </div>
</template>

Affichage de la page : (faites attention au numéro de port)

Barre de clic : Alors pourquoi mon numéro de port s'appelle-t-il « /bar » ?

Parce que vous vous souvenez de l'endroit où le routeur est configuré, qui est le chemin. Le nom ici peut être choisi avec désinvolture, mais il est généralement cohérent avec le nom du composant et le nom du composant ne peut pas être modifié.

Pourquoi cliquer pour sauter - à cause de ça<router-link> ,et<router-view> La fonction spécifique sur la page sera discutée plus tard.

4. Créez la première applet élément-plus

1. Utilisez le routeur + élément-plus ci-dessus

element-plus peut être compris comme une série de packages packagés pour le rendu des pages frontales (le package universel peut être compris de cette façon, les programmeurs ne sont pas des programmeurs, nous ne sommes que des porteurs de packages)

2. Comment utiliser leur code de composant

Cliquez sur le site officielPrésentation Présentation des composants | Element Plus (element-plus.org)

3.Installer l'élément-plus

1) Installation : cmd—`npm install element-plus` dans le fichier de projet que vous souhaitez utiliser.
2) Introduisez element-plus : introduisez Element Plus et les fichiers de style dans `main.js`


import ElementPlus from 'element-plus'//引入elementplus
import 'element-plus/dist/index.css'//引入elementplus样式文件

3) Utiliser des composants : utilisez les composants de l'interface utilisateur Element Plus dans les composants Vue, tels que `<el-button> `,`<el-input> `Attendez.

Exemple : App.vue, de toute façon, avec<el->Le début est


<template>
  <el-container class="layout-container-demo" style="height: 500px">
      <el-aside width="200px">
        <el-scrollbar>
          <el-menu :default-openeds="['1', '3']">
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Message /></el-icon>Navigator One
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="1-1">
					<router-link to="/optionOne">Option 1</router-link>
				</el-menu-item>
                <el-menu-item index="1-2">
					<router-link to="/optionTwo">Option 2</router-link>
				</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="1-3">
					<router-link to="/optionThree">Option 3</router-link>
				</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="1-4">
                <template #title>Option4</template>
                <el-menu-item index="1-4-1">Option 4-1
					<router-link to="/optionFour">Option4</router-link>
				</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><icon-menu /></el-icon>Navigator Two
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="2-1">Option 1</el-menu-item>
                <el-menu-item index="2-2">Option 2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="2-3">Option 3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="2-4">
                <template #title>Option 4</template>
                <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><setting /></el-icon>Navigator Three
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="3-1">Option 1</el-menu-item>
                <el-menu-item index="3-2">Option 2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="3-3">Option 3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="3-4">
                <template #title>Option 4</template>
                <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px">
                <setting />
              </el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>View</el-dropdown-item>
                  <el-dropdown-item>Add</el-dropdown-item>
                  <el-dropdown-item>Delete</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>Tom</span>
          </div>
        </el-header>
  
        <el-main>
          <el-scrollbar>
            <router-view></router-view>
          </el-scrollbar>
        </el-main>
		
      </el-container>
    </el-container>
</template>

4) Expliquez ici<router-view> effet:

Vous voyez où est passé le « 3 » dans l’image ci-dessus après avoir ajusté sa position. Compris comme un espace réservé.


        <el-main>
          <el-scrollbar>
            
          </el-scrollbar>
        </el-main>
		
      </el-container>
    </el-container>
	<router-view></router-view>
</template>

4. Le saut de page est également implémenté ici, comment

1) Configuration du routage : Configurez le routage dans `src/router/index.js`, chaque route correspond à un composant.

Exemple : Au fait, si le chemin est '/', cela signifie que la première page qui arrive est celle-ci.

Il ne semble pas indiquer comment exécuter le projet : cmd-npm run serve dans le répertoire du fichier du projet


import{createRouter,createWebHistory} from 'vue-router';//导入外部组件，声明vue路由
import HelloWorld from '../components/HelloWorld.vue';
import OptionOne from '../components/OptionOne.vue';
import OptionTwo from '../components/OptionTwo.vue';
import OptionThree from '../components/OptionThree.vue';
import OptionFour from '../components/OptionFour.vue';
 
const routes=[//路由器配置
	{
		path:'/',//这样的话就最先进入的是helloworld页面了
		name:'HelloWorld',
		component:HelloWorld
	},
	{
		path:'/optionOne',
		name:'OptionOne',
		component:OptionOne
	},
	{
		path:'/optionTwo',
		name:'OptionTwo',
		component:OptionTwo
	},
	{
		path:'/optionThree',
		name:'OptionThree',
		component:OptionThree
	},
	{
		path:'/optionFour',
		name:'OptionFour',
		component:OptionFour
	}
];
 
const router=createRouter({
	history: createWebHistory(process.env.Base_URL),
	routes
});
 
export default router;

2) Liens de navigation : utilisez `<router-link> `Créez un lien de navigation, cliquez dessus pour accéder à la page correspondante, utilisez`<router-view> `Afficher les composants de routage.


<el-menu-item index="1-3">
      <router-link to="/optionThree">Option 3</router-link>  
</el-menu-item>

5. Utilisation combinée de Vue-router, element-plus et axios

1. Installez axios

1) Comme ci-dessus, commande d'installation : `npm install axios`
2) Configurez axios : configurez l'instance axios dans `main.js`, définissez la baseURL par défaut et d'autres configurations globales.

2. Mettre en œuvre des mini-programmes front-end et back-end

- **Interface de définition** : définissez l'interface API côté serveur, traitez la requête frontale et renvoyez les données.
- **Données de requête frontale** : utilisez axios dans le composant front-end pour envoyer une requête, obtenir des données et les afficher sur la page.
- **Commutation dynamique des données** : combinez les composants Element Plus et Vue Router pour réaliser une commutation dynamique des données des menus, par exemple l'affichage de différents contenus en fonction de différents éléments de menu.

Étapes spécifiques :
1) Créez une instance axios et configurez :


import axios from 'axios';  
// 创建一个 axios 实例  
const http = axios.create({  
  baseURL: 'http://localhost:3000/',  
  // 其他配置...  
});  
  
// 创建一个 Vue 应用  
const app = createApp(App);  
  
// 将 axios 实例添加到 Vue 应用的原型上  
app.config.globalProperties.$http = http;  
  
// 挂载 Vue 应用  
app.mount('#app');

2) Utilisez axios dans le composant Vue pour envoyer la requête :


<script>
const tableData = [];
export default {
  name: 'HelloWorld',
  created() {
      this.getUserList();  
    }, 
    data() {  
        return {  
          // 假设我们从API获取的是一个用户列表  
          tableData
        };  
    }, 
    methods: {  
    getUserList() {
      this.$http.get('/').then(response => {  
            console.log(response.data)
            this.tableData = response.data; 
        })  
        .catch(error => {  
            console.log(error)  
        });  
    } 
    }
  
}
</script>

3) Combinez Element Plus et Vue Router pour implémenter un menu dynamique : comme expliqué précédemment.

3.Que fait axios ?

Axios est un client HTTP basé sur Promise pour les requêtes HTTP dans les navigateurs et les environnements Node.js. Il vous permet d'envoyer des requêtes asynchrones plus facilement et de traiter les données de réponse. Dans un projet Vue.js, vous pouvez utiliser Axios pour communiquer avec l'API backend, comme l'obtention de données, l'envoi de données de formulaire, le traitement des téléchargements de fichiers et d'autres opérations. axios fournit une API concise qui prend en charge les intercepteurs de requêtes et de réponses, l'annulation des requêtes, la configuration globale et d'autres fonctions, rendant l'interaction des données entre le front-end et le back-end plus efficace et contrôlable.

1) Ajoutez d’abord un src/server/index.js basé sur le projet précédent comme suit


const express = require('express');  
const app = express();  
const port = 3000; // 你可以选择任何未被占用的端口  
  
// 设置中间件以允许跨域请求（可选，根据你的需求）  
app.use((req, res, next) => {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
  next();  
});  
  
// 设置路由和响应  
app.get('/', (req, res) => {  
  // 创建一个对象，其中包含你想要返回的数据  
  const data = [  
  { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  // ...更多用户  
  ];  
  
  // 使用res.json()方法发送JSON响应  
  res.json(data);  
});  
  
// 启动服务器  
app.listen(port, () => {  
  console.log(`Server is running on http://localhost:${port}`);  
});

Description de ce code :

Cet extrait de code utilise Node.js et le framework Express pour créer un serveur simple. Voici une explication ligne par ligne du code :

1. **Importez le module Express et créez une instance d'application** :
```javascript
const express = require('express');
const app = express();
```

- `express` est un framework pour créer des applications Web. Ici, il est importé via `require('express')` et une instance d'application est créée via `express()`.

2. **Définissez le port d'écoute du serveur** :
```javascript
const port = 3000; // Vous pouvez choisir n'importe quel port inoccupé
```

- La variable `port` définit le numéro de port sur lequel le serveur écoute, ici il est fixé à `3000`.

3. **Paramètres du middleware autorisant les requêtes inter-domaines** :
```javascript
app.use((req, res, suivant) => {
res.header("Contrôle d'accès-Autoriser-Origine", "*");
res.header("Contrôle d'accès-Autoriser-En-têtes", "Origine, X-Demandé-Avec, Type-de-contenu, Accepter");
suivant();
});
```

- Ce code met en place un middleware pour autoriser les requêtes cross-origin (CORS). Il autorise les requêtes de n’importe quelle origine et autorise certains champs d’en-tête. La fonction `next()` garantit que la requête continue jusqu'au prochain middleware ou gestionnaire de route.

4. **Définir les itinéraires et les réponses** :
```javascript
app.get('/', (req, res) => {
//Créez un objet contenant les données que vous souhaitez renvoyer
données const = [
{ id: 1, nom: 'Alice', âge: 18, email: '[email protected]' },
{ id: 2, nom: 'Bob', âge: 19, email: '[email protected]' },
// ...plus d'utilisateurs
];

// Utilisez la méthode res.json() pour envoyer la réponse JSON
res.json(données);
});
```

- `app.get('/', ...)` définit une route pour les requêtes GET Lorsque le client accède au chemin racine `/`, cette fonction de gestionnaire sera appelée.
- La fonction de gestionnaire crée un objet `data` contenant les données utilisateur et les renvoie au client sous forme de réponse JSON en utilisant `res.json(data)`.

5. **Démarrez le serveur** :
```javascript
app.listen(port, () => {
console.log(`Le serveur s'exécute sur http://localhost:${port}`);
});
```

- `app.listen(port, ...)` démarre le serveur et le laisse écouter sur le port défini.
- Lorsque le serveur démarre avec succès, un message est affiché sur la console indiquant que le serveur est en cours d'exécution et accessible via `http://localhost:3000`.

Résumé : Cet extrait de code crée un serveur Express simple qui répond aux requêtes GET adressées au chemin racine `/` et renvoie une réponse JSON contenant les données utilisateur. Un middleware est également mis en place pour permettre les requêtes cross-domaines. En exécutant ce serveur sur le port « 3000 », vous pouvez utiliser un navigateur ou un autre client HTTP pour accéder à « http://localhost:3000 » et afficher les données JSON renvoyées.

2) Courir

cmd : nœud index.js dans le répertoire de fichiers du serveur

Peut voir les données d'arrière-plan

Ensuite, exécutez cmd-npm run serve dans le répertoire du fichier du projet, et vous pourrez voir qu'il y a des données ! !

Comment gérer les données back-end ?

Juste dans le fichier server/index.js nouvellement ajouté :


// 设置路由和响应  
app.get('/', (req, res) => {  
  // 创建一个对象，其中包含你想要返回的数据  
  const data = [  
  { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  // ...更多用户  
  ];

Sur la base de six et cinq, plus le backend

Comment exécuter les cinq projets avec le backend du premier projet MoreMall consiste à combiner le front-end et le back-end.

1. Préparez deux choses

1)mysql.sql


create database test;
use test;
CREATE TABLE user (  
    id INT AUTO_INCREMENT PRIMARY KEY,  
    name VARCHAR(255) NOT NULL, 
    password VARCHAR(255) NOT NULL,
    age VARCHAR(255) NOT NULL,
    email  VARCHAR(255) NOT NULL
);
INSERT INTO user (name, password,age,email) VALUES ('Bob', '123','23','[email protected]');
INSERT INTO user (name, password,age,email) VALUES ('Tom', '123','23','[email protected]');

2) serveur

Mettez-le sous le fichier scr, mais il peut également être mis en parallèle. Je l'ai laissé partir avant et je ne l'ai pas supprimé. Quoi qu'il en soit, npm run serve est également possible dans différents répertoires de fichiers.

Deux fichiers sous le serveur :

(1)db.js


let mysql = require('mysql')
//配置链接数据库的参数
let db = mysql.createPool({
    host: '127.0.0.1',
    user: 'root',
	port:'3306',
    password: 'root',
    database: 'test'
})
 
module.exports = db

illustrer:

Le but de ce code est d'utiliser Node.js et le module `mysql` pour créer un pool de connexions à une base de données MySQL et l'exporter pour une utilisation dans d'autres modules.

L'explication spécifique est la suivante :

1. **Importer le module `mysql`** :
```javascript
laissez mysql = require('mysql');
```
Cette ligne de code importe le module « mysql », qui est une bibliothèque Node.js utilisée pour se connecter et faire fonctionner les bases de données MySQL.

2. **Créez un pool de connexions** :
```javascript
laissez db = mysql.createPool({
hôte : '127.0.0.1',
utilisateur : 'root',
port: '3306',
mot de passe : 'root',
base de données : 'test'
});
```
Ce code crée un pool de connexions en utilisant la méthode `mysql.createPool`. Un pool de connexions est un ensemble de connexions à une base de données qui peuvent être partagées et réutilisées par plusieurs clients. La création d'un pool de connexions peut améliorer les performances car elle évite de rétablir la connexion à la base de données à chaque requête.

- `host : '127.0.0.1'` : L'adresse hôte du serveur de base de données. Il s'agit du serveur local.
- `user : 'root'` : nom d'utilisateur de la base de données.
- `port : '3306'` : numéro de port de la base de données. Le port par défaut pour MySQL est 3306.
- `password : 'root'` : mot de passe de la base de données.
- `database : 'test'` : Le nom de la base de données à connecter.

3. **Exporter le pool de connexions** :
```javascript
module.exports = base de données;
```
Cette ligne de code exporte l'objet pool de connexions « db » afin que d'autres modules puissent importer et utiliser ce pool de connexions via la méthode « require ».

Grâce à ce pool de connexions, vous pouvez l'introduire dans d'autres modules et l'utiliser pour effectuer des requêtes de base de données. Par exemple:

```javascript
//Introduire le pool de connexions à la base de données
const db = require('./chemin/vers/ce/module');

//Exécuter la requête de base de données
db.query('SELECT * FROM utilisateur', (err, résultats) => {
si (errer) {
console.error('Erreur lors de l'exécution de la requête :', err);
retour;
}
console.log('Résultats de la requête :', résultats);
});
```

Cette méthode facilite la gestion et l'utilisation des connexions aux bases de données, en particulier dans les applications nécessitant un accès fréquent aux bases de données.

(2)index.js


const express = require('express');  
const app = express();  
const port = 3000; // 你可以选择任何未被占用的端口  
const db = require('./db')
 
// 设置中间件以允许跨域请求（可选，根据你的需求）  
app.use((req, res, next) => {  
  res.header("Access-Control-Allow-Origin", "*");  
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");  
  next();  
});  
 
//配置对外接口
app.get('/', (req, res) => {
  var sql = 'select * from user'
  db.query(sql, (err, data) => {
      if(err) {
          return res.send({
            status: 400,
            message: "查询失败"
          })
      } else{
        console.log('查询结果：', data)
		res.json(data); 
      }
  })
});
 
// 设置路由和响应  
/*
app.get('/', (req, res) => {  
  // 创建一个对象，其中包含你想要返回的数据  
  const data = [  
  { id: 1, name: 'Alice', age:18, email: '[email protected]' },  
  { id: 2, name: 'Bob', age:19, email: '[email protected]' },  
  // ...更多用户  
  ];  
  
  // 使用res.json()方法发送JSON响应  
  res.json(data);  
});  
*/
// 启动服务器  
app.listen(port, () => {  
  console.log(`Server is running on http://localhost:${port}`);  
});

2. Compléter les connaissances des novices

Si vous ne comprenez pas, lisez la suite :/

Terminal de service：

Créez un serveur Express et configurez un pool de connexions à la base de données.
Configurez un middleware qui autorise les requêtes inter-domaines.
Définissez une route GET pour interroger la base de données et renvoyer les données.

client：

Utilisez Axios pour envoyer des requêtes HTTP au serveur dans le composant Vue.
Obtenez les données et affichez-les sur la page.

"En utilisant ce pool de connexions, vous pouvez l'introduire dans d'autres modules et l'utiliser pour effectuer des requêtes de base de données." - Quels sont les autres modules ?

Il s'agit du code côté serveur sur le serveur.

Dans ce contexte, « autres modules » fait généralement référence à d'autres fichiers JavaScript de votre projet Node.js, et non au fichier « .vue » du composant Vue. Plus précisément, ces autres modules sont généralement du code côté serveur qui gère les requêtes HTTP et les interactions avec la base de données.

Une structure de projet typique pourrait ressembler à ceci :

```
projet/
├── serveur/
│ ├── db.js // Le code du pool de connexion à la base de données que vous avez fourni
│ ├── routes.js // Module qui définit le routage API
│ └── server.js // Le fichier qui démarre le serveur, ce à quoi je correspond ici est
└── client/
├── src/
│ ├── composants/
│ │ ├── YourComponent.vue // Votre composant Vue
│ ├── main.js // Fichier d'entrée du projet Vue
│ └── ... // Autres fichiers frontaux
└── paquet.json
```

Dans cette structure, le dossier `server/` contient le code côté serveur, tandis que le dossier `client/` contient le code Vue front-end.

### Exemple : Utilisation du pool de connexions à la base de données côté serveur

En supposant que vous disposez déjà d'un fichier `server/db.js` qui définit un pool de connexions à la base de données, vous pouvez alors l'introduire et l'utiliser dans le fichier `server/routes.js` :

```javascript
// serveur/routes.js
const express = require('express');
const db = require('./db'); //Introduire le pool de connexions à la base de données

const router = express.Router();//Je n'ai aucune utilité pour cette section de routers.js. Les autres parties sont rassemblées dans index.js, et ensemble nous réalisons "l'introduction d'un pool de connexions à la base de données - la définition des paramètres inter-domaines". selon les besoins" Accès ? -Définir le routage-(objectif final) démarrer le serveur"

//Définir un exemple d'itinéraire
routeur.get('/utilisateurs', (req, res) => {
db.query('SELECT * FROM utilisateur', (err, résultats) => {
si (errer) {
renvoyer res.status(500).json({ erreur : err.message });
}
res.json(résultats);
});
});

module.exports = routeur;
```

Ensuite, configurez et démarrez le serveur Express dans le fichier `server/server.js` et utilisez les routes définies :

```javascript
// serveur/serveur.js
const express = require('express');
const app = express();
const routes = require('./routes'); //Introduire les routes définies

app.use('/api', routes); // Utiliser le routage

port constant = 3000;
app.listen(port, () => {
console.log(`Le serveur s'exécute sur http://localhost:${port}`);
});
```

### Utilisation de l'API dans les composants Vue

Dans votre composant Vue, vous pouvez utiliser Axios pour envoyer des requêtes HTTP à l'API définie ci-dessus :

```vue
<template>
<div>
<h2>Utilisateurs</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ nom d'utilisateur }} - {{ utilisateur.email }}
</li>
</ul>
</div>
</template>

<script>
importer axios depuis 'axios';

exportation par défaut {
données() {
retour {
utilisateurs: []
};
},
monté() {
axios.get('http://localhost:3000/api/users')
.then(réponse => {
ceci.utilisateurs = réponse.données;
})
.catch(erreur => {
console.error('Erreur lors de la récupération des utilisateurs :', error);
});
}
};
</script>
```

De cette façon, en séparant la logique du front-end et du back-end, vous pouvez mieux organiser et gérer le code, tout en garantissant que le côté serveur gère l'interaction avec la base de données, tandis que le front-end effectue l'acquisition et l'affichage des données via l'API.

3.

1) Le serveur doit être à l'écoute ! ! Ce n'est que lors de la surveillance que vous pouvez exécuter le projet et voir les données d'arrière-plan. Juste les étapes suivantes :

Commande Project/src/sserver/——cmd——node index.js, commencez à visualiser

Une surveillance correcte montre :

Deuxièmement, j'ai découvert que je pouvais utiliserhttp://localhost:3000/api/utilisateursJe vois les données JSON correctes, mais je ne peux pas utiliser http://localhost:3000. La solution est la suivante :

Modifier optionOne.vue :


export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
   // axios.get('http://localhost:3000/api/users')//服务端的信息
	axios.get('http://localhost:3000')//服务端的信息
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error('Error fetching users:', error);
      });
  }
};

4. Comment ajouter une page de connexion

Tout d'abord, ajoutez au dossier Assets : img est l'image de la page qui a été connectée au début et le dossier CSS.

Ajoutez ensuite Login.vue, le routeur de Login

La dernière étape consiste à ajuster la page précédente, à séparer App.vue (total), à l'encapsuler, à dessiner un cadre sur le côté gauche de la page pour créer un Bar.vue séparé, et ensuite si vous souhaitez voir cette barre sur chaque page, vous devez l'ajouter à chaque page. Ajoutez une référence à Bar.vue dans le fichier .vue.