Práctica de vacaciones de verano desarrollo web front-end y back-end-notes

Practique el desarrollo web front-end y back-end durante las vacaciones de verano: notas

2024-07-12

(Principalmente desarrollo front-end, no back-end. Primero, permítanme presentarles un proyecto que implementa front-end y back-end)

1. Instalar y ejecutar el proyecto MoreMall

1.Introducción al proyecto MoreMall

El front-end y el back-end pueden interactuar entre sí, front-end: cliente, back-end: servidor, la base de datos se puede escribir en mall.sql;

2.Configuración del entorno

1) Instale Node.js: Node.js es unEntorno de ejecución de JavaScript , para crear aplicaciones del lado del servidor. Descargue e instale la versión apropiada de Node.js en el sitio web oficial [Node.js](https://nodejs.org/). La configuración del entorno de node.js es relativamente compleja.

2) instalar mysql
3) Instalar dependencias: ejecute `npm install` en el directorio raíz del proyecto, lo queEl archivo `package.json` instala todas las dependencias necesarias para el proyecto.

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

2. Crea un proyecto de Vue

1. Cree un proyecto usando Vue CLI

1) Instale y cree el proyecto vue: cree una nueva carpeta para colocar el archivo del proyecto - cmd en el directorio de archivos - `vue create my-project`
2) Estructura del directorio del proyecto: el directorio `src` contiene subdirectorios como `componentes` y `vistas`, que se utilizan para almacenar componentes y páginas.

3 en<template>Escribir datos en script
- **Definir datos**: en el componente Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Mostrar datos**: en el componente Vue`<template> `Uso parcial de expresiones de interpolación`{{ }}` o comando `v-bind`, etc. para mostrar datos.

Ejemplo: componente—foo.vue


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

3. Instale y use vue-router

Aquí se muestra la prueba de ruta del proyecto.

1. Instale el enrutador vue

1) Instalación: cmd en el directorio de archivos del proyecto donde desea agregar esto: `npm install vue-router`
2) Configurar el enrutamiento: configure las reglas de enrutamiento en `src/router/index.js` para asignar diferentes rutas a diferentes componentes.

Ejemplo:

Código en el archivo 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) uso<router-link>y<router-view>
<router-link>: Se utiliza para crear enlaces de navegación, que se pueden cambiar a la página de ruta correspondiente después de hacer clic.
<router-view>: Se utiliza para mostrar los componentes de enrutamiento coincidentes.

Ejemplo: aplicación.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>

Visualización de página: (preste atención al número de puerto)

Haga clic en la barra: Entonces, ¿por qué mi número de puerto se llama '/bar'?

Porque recuerda dónde está configurado el enrutador, cuál es la ruta. El nombre aquí se puede elegir de manera informal, pero generalmente es consistente con el nombre del componente, y el nombre del componente no se puede cambiar, y el nombre correspondiente es componente-xx.vue. .

¿Por qué hacer clic para saltar? Por eso<router-link> ,y<router-view> La función específica de la página se analizará más adelante.

4. Construya el primer subprograma de elemento más

1. Utilice el enrutador+elemento-plus anterior

element-plus puede entenderse como una serie de paquetes empaquetados para la representación de la página de inicio (el paquete universal puede entenderse de esta manera, los programadores no son programadores, solo somos portadores de paquetes)

2. Cómo utilizar el código de su componente

Haga clic en el sitio web oficialDescripción general de los componentes Element Plus (element-plus.org)

3.Instalar elemento plus

1) Instalación: cmd—`npm install element-plus` en el archivo del proyecto que desea utilizar.
2) Introducir element-plus: Introducir Element Plus y archivos de estilo en `main.js`


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

3) Utilice componentes: utilice componentes UI de Element Plus en componentes Vue, como `<el-button> `,`<el-input> "Espera.

Ejemplo: App.vue, de todos modos, con<el->El comienzo es


<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) Explica aquí<router-view> efecto:

Verá dónde quedó '3' en la imagen de arriba después de que ajusté su posición. Entendido como marcador de posición.


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

4. Aquí también se implementa el salto de página, ¿cómo?

1) Configuración de enrutamiento: configure el enrutamiento en `src/router/index.js`, cada ruta corresponde a un componente.

Ejemplo: Por cierto, si la ruta es '/', significa que la primera página que entra es esta.

No parece decir cómo ejecutar el proyecto: cmd-npm run server en el directorio de archivos del proyecto


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) Enlaces de navegación: utilice `<router-link> `Cree un enlace de navegación, haga clic en él para saltar a la página correspondiente, use`<router-view> `Mostrar componentes de enrutamiento.


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

5. Uso combinado de Vue-router, element-plus y axios

1. Instalar axios

1) Igual que arriba, comando de instalación: `npm install axios`
2) Configurar axios: configure la instancia de axios en `main.js`, establezca la URL base predeterminada y otras configuraciones globales.

2. Implementar miniprogramas de front-end y back-end

- **Interfaz de definición**: define la interfaz API en el lado del servidor, procesa la solicitud de front-end y devuelve datos.
- **Datos de solicitud de front-end**: utilice axios en el componente de front-end para enviar una solicitud, obtener datos y mostrarlos en la página.
- **Conmutación dinámica de datos**: combine los componentes de Element Plus y Vue Router para realizar una conmutación dinámica de datos del menú, como mostrar contenido diferente según los diferentes elementos del menú.

Pasos específicos:
1) Cree una instancia de axios y configure:


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) Utilice axios en el componente Vue para enviar la solicitud:


<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) Combine Element Plus y Vue Router para implementar un menú dinámico: como se explicó anteriormente.

3.¿Qué hace axios?

Axios es un cliente HTTP basado en Promise para solicitudes HTTP en navegadores y entornos Node.js. Le permite enviar solicitudes asincrónicas de manera más conveniente y procesar datos de respuesta. En un proyecto Vue.js, puede utilizar Axios para comunicarse con la API de back-end, como obtener datos, enviar datos de formulario, procesar cargas de archivos y otras operaciones. axios proporciona una API simple que admite interceptores de solicitudes y respuestas, cancelación de solicitudes, configuración global y otras funciones, lo que hace que la interacción de datos entre el front-end y el back-end sea más eficiente y controlable.

1) Primero agregue un src/server/index.js basado en el proyecto anterior de la siguiente manera


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}`);  
});

Descripción de este código:

Este fragmento de código utiliza Node.js y el marco Express para crear un servidor simple. Aquí hay una explicación línea por línea del código:

1. **Importe el módulo Express y cree una instancia de aplicación**:
``javascript
const express = require('express');
constante aplicación = express();
```

- `express` es un marco para crear aplicaciones web. Aquí se importa mediante `require('express')` y se crea una instancia de aplicación mediante `express()`.

2. **Configure el puerto de escucha del servidor**:
``javascript
const port = 3000; // Puedes elegir cualquier puerto desocupado
```

- La variable `port` define el número de puerto en el que escucha el servidor, aquí se establece en `3000`.

3. **Configuraciones de middleware que permiten solicitudes entre dominios**:
``javascript
aplicación.use((req, res, siguiente) => {
res.header("Control-de-Acceso-Permitir-Origen", "*");
res.header("Control-de-Acceso-Permitir-Encabezados", "Origen, X-Solicitado-Con, Tipo-De-Contenido, Aceptar");
próximo();
});
```

- Este código configura un middleware para permitir solicitudes de origen cruzado (CORS). Permite solicitudes de cualquier origen y permite ciertos campos de encabezado. La función `next()` garantiza que la solicitud continúe hasta el siguiente middleware o controlador de ruta.

4. **Definir rutas y respuestas**:
``javascript
aplicación.get('/', (req, res) => {
//Crea un objeto que contenga los datos que deseas devolver
datos constantes = [
{ id: 1, nombre: 'Alice', edad:18, correo electrónico: '[email protected]' },
{ id: 2, nombre: 'Bob', edad:19, correo electrónico: '[email protected]' },
// ...más usuarios
];

// Usa el método res.json() para enviar la respuesta JSON
res.json(datos);
});
```

- `app.get('/', ...)` define una ruta para solicitudes GET Cuando el cliente accede a la ruta raíz `/`, se llamará a esta función de controlador.
- La función del controlador crea un objeto `datos` que contiene los datos del usuario y lo devuelve al cliente como una respuesta JSON usando `res.json(data)`.

5. **Inicie el servidor**:
``javascript
aplicación.listen(puerto, () => {
console.log(`El servidor se está ejecutando en http://localhost:${port}`);
});
```

- `app.listen(port, ...)` inicia el servidor y le permite escuchar en el puerto definido.
- Cuando el servidor se inicia correctamente, se envía un mensaje a la consola indicando que el servidor se está ejecutando y se puede acceder a él a través de `http://localhost:3000`.

Resumen: este fragmento de código crea un servidor Express simple que responde a solicitudes GET a la ruta raíz `/` y devuelve una respuesta JSON que contiene los datos del usuario. También se configura un middleware para permitir solicitudes entre dominios. Al ejecutar este servidor en el puerto `3000`, puede usar un navegador u otro cliente HTTP para acceder a `http://localhost:3000` y ver los datos JSON devueltos.

2) correr

cmd: nodo index.js en el directorio de archivos del servidor

Puede ver datos de fondo

Luego ejecute cmd-npm run save en el directorio de archivos del proyecto y podrá ver que hay datos. !

¿Cómo administro los datos de backend?

Justo en el archivo server/index.js recién agregado:


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

Sobre la base de seis y cinco, más el backend.

La forma de ejecutar los cinco proyectos junto con el backend del primer proyecto MoreMall es combinar el front-end y el backend.

1. Prepara dos cosas

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) servidor

Póngalo debajo del archivo scr, pero también puede ser paralelo. Lo dejé ir antes y no lo eliminé. De todos modos, npm run server también es posible en diferentes directorios de archivos.

Dos archivos en el servidor:

(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

ilustrar:

El propósito de este código es usar Node.js y el módulo `mysql` para crear un grupo de conexiones a una base de datos MySQL y exportarlo para usarlo en otros módulos.

La explicación específica es la siguiente:

1. **Importar módulo `mysql`**:
``javascript
deje que mysql = require('mysql');
```
Esta línea de código importa el módulo `mysql`, que es una biblioteca Node.js utilizada para conectarse y operar bases de datos MySQL.

2. **Crea un grupo de conexiones**:
``javascript
deje db = mysql.createPool({
anfitrión: '127.0.0.1',
usuario: 'root',
puerto: '3306',
contraseña: 'root',
base de datos: 'prueba'
});
```
Este código crea un grupo de conexiones utilizando el método `mysql.createPool`. Un grupo de conexiones es un conjunto de conexiones de bases de datos que varios clientes pueden compartir y reutilizar. La creación de un grupo de conexiones puede mejorar el rendimiento porque evita restablecer la conexión de la base de datos con cada solicitud.

- `host: '127.0.0.1'`: La dirección de host del servidor de la base de datos. Este es el servidor local.
- `usuario: 'root'`: nombre de usuario de la base de datos.
- `puerto: '3306'`: número de puerto de la base de datos. El puerto predeterminado para MySQL es 3306.
- `contraseña: 'root'`: contraseña de la base de datos.
- `base de datos: 'prueba'`: El nombre de la base de datos a conectar.

3. **Exportar grupo de conexiones**:
``javascript
módulo.exportaciones = db;
```
Esta línea de código exporta el objeto del grupo de conexiones `db` para que otros módulos puedan importar y usar este grupo de conexiones a través del método `require`.

Usando este grupo de conexiones, puede introducirlo en otros módulos y usarlo para realizar consultas a la base de datos. Por ejemplo:

``javascript
//Introducir el grupo de conexiones de la base de datos
const db = require('./ruta/a/este/módulo');

//Ejecutar consulta a la base de datos
db.query('SELECT * FROM usuario', (err, resultados) => {
si (err) {
console.error('Error al ejecutar la consulta:', err);
devolver;
}
console.log('Resultados de la consulta:', resultados);
});
```

Este método facilita la administración y el uso de conexiones de bases de datos, especialmente en aplicaciones que requieren acceso frecuente a la base de datos.

(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. Complementar los conocimientos de los principiantes

Si no lo entiendes, lee más:/

Terminal de servicio：

Cree un servidor Express y configure un grupo de conexiones de base de datos.
Configure middleware que permita solicitudes entre dominios.
Defina una ruta GET para consultar la base de datos y devolver datos.

cliente：

Utilice Axios para enviar solicitudes HTTP al servidor en el componente Vue.
Obtenga los datos y muéstrelos en la página.

"Al usar este grupo de conexiones, puede introducirlo en otros módulos y usarlo para realizar consultas a la base de datos". - ¿Cuáles son los otros módulos?

Es el código del lado del servidor en el servidor.

En este contexto, "otros módulos" generalmente se refiere a otros archivos JavaScript en su proyecto Node.js, no dentro del archivo `.vue` del componente Vue. Específicamente, estos otros módulos suelen ser código del lado del servidor que maneja solicitudes HTTP e interacciones de bases de datos.

Una estructura de proyecto típica podría verse así:

```
proyecto/
├── servidor/
│ ├── db.js // El código del grupo de conexiones de la base de datos que proporcionaste
│ ├── route.js // Módulo que define el enrutamiento API
│ └── server.js // El archivo que inicia el servidor, al que le correspondo aquí es
└── cliente/
├── fuente/
│ ├── componentes/
│ │ ├── YourComponent.vue // Tu componente Vue
│ ├── main.js // Archivo de entrada del proyecto Vue
│ └── ... // Otros archivos front-end
└── paquete.json
```

En esta estructura, la carpeta `server/` contiene el código del lado del servidor, mientras que la carpeta `client/` contiene el código de Vue del front-end.

### Ejemplo: uso del grupo de conexiones de base de datos en el lado del servidor

Suponiendo que ya tiene un archivo `server/db.js` que define un grupo de conexiones de base de datos, puede introducirlo y usarlo en el archivo `server/routes.js`:

``javascript
//servidor/rutas.js
const express = require('express');
const db = require('./db'); //Introducir el grupo de conexiones de la base de datos

const router = express.Router();// No tengo uso para esta sección de routers.js. Las otras partes están juntas en index.js, y juntas nos damos cuenta de "introducir una configuración de dominio cruzado de configuración de grupo de conexión de base de datos". según necesidades" ¿Acceso? -Establecer enrutamiento-(propósito final) iniciar servidor"

//Definir una ruta de ejemplo
enrutador.get('/usuarios', (req, res) => {
db.query('SELECT * FROM usuario', (err, resultados) => {
si (err) {
devolver res.status(500).json({ error: err.message });
}
res.json(resultados);
});
});

módulo.exports = enrutador;
```

Luego, configure e inicie el servidor Express en el archivo `server/server.js` y use las rutas definidas:

``javascript
// servidor/servidor.js
const express = require('express');
constante aplicación = express();
const rutas = require('./routes'); //Introduce rutas definidas

app.use('/api', rutas); // Usar enrutamiento

constante puerto = 3000;
aplicación.listen(puerto, () => {
console.log(`El servidor se está ejecutando en http://localhost:${port}`);
});
```

### Uso de API en componentes de Vue

En su componente Vue, puede usar Axios para enviar solicitudes HTTP a la API definida anteriormente:

``vista
<template>
<div>
<h2>Usuarios</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ nombre de usuario }} - {{ usuario.email }}
</li>
</ul>
</div>
</template>

<script>
importar axios desde 'axios';

exportar por defecto {
datos() {
devolver {
usuarios: []
};
},
montado() {
axios.get('http://localhost:3000/api/usuarios')
.then(respuesta => {
esto.usuarios = respuesta.datos;
})
.catch(error => {
console.error('Error al obtener usuarios:', error);
});
}
};
</script>
```

De esta manera, al separar la lógica de front-end y back-end, puede organizar y administrar mejor el código, al tiempo que garantiza que el lado del servidor maneje las interacciones de la base de datos, mientras que el front-end maneja la adquisición y visualización de datos a través de la API.

3.

1) ¡El servidor debe estar escuchando! ! Solo durante el monitoreo se puede ejecutar el proyecto y ver los datos de fondo. Sólo los siguientes pasos:

Project/src/sserver/——cmd——comando node index.js, comience a ver

El seguimiento correcto muestra:

En segundo lugar, descubrí que podía utilizarhttp://localhost:3000/api/usuariosVeo los datos JSON correctos, pero no puedo usar http://localhost:3000. La solución es la siguiente:

Modificar opciónOne.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. Cómo agregar una página de inicio de sesión

Primero, agregue a la carpeta de activos: img es la imagen de la página en la que inició sesión al principio y la carpeta css

Luego agregue Login.vue, el enrutador de inicio de sesión.

El último paso es ajustar la página anterior, separar App.vue (total), encapsularlo, dibujar un marco en el lado izquierdo de la página para crear un Bar.vue separado y luego, si desea ver esta barra en cada página, debe agregarla a cada página. Agregue una referencia a Bar.vue en el archivo .vue.