Prática de férias de verão web front-end e back-end development-notes

Pratique o desenvolvimento de front-end e back-end da web durante as férias de verão - notas

2024-07-12

(Principalmente desenvolvimento front-end, não back-end. Deixe-me primeiro apresentar um projeto que implementa front-end e back-end)

1. Instale e execute o projeto MoreMall

1.Introdução ao projeto MoreMall

O front-end e o back-end podem interagir entre si, front-end: cliente, back-end: servidor; o banco de dados pode ser escrito em mall.sql.

2. Configuração do ambiente

1) Instale o Node.js: Node.js é umAmbiente de execução JavaScript , para construir aplicativos do lado do servidor. Baixe e instale a versão apropriada do Node.js no site oficial [Node.js](https://nodejs.org/). A configuração do ambiente do node.js é relativamente complexa.

2) Instale o mysql
3) Instale dependências: Execute `npm install` no diretório raiz do projeto, que iráO arquivo `package.json` instala todas as dependências necessárias para o projeto.

（MySQL）：https://blog.csdn.net/chuci0910/article/details/138770174
（NodeJs）：https://zhuanlan.zhihu.com/p/686043568

2. Crie um projeto Vue

1. Crie um projeto usando Vue CLI

1) Instale e crie o projeto vue: crie uma nova pasta para colocar o arquivo do projeto - cmd no diretório do arquivo - `vue create my-project`
2) Estrutura de diretórios do projeto: O diretório `src` contém subdiretórios como `components` e `views`, que são usados para armazenar componentes e páginas.

3) em<template>Escrevendo dados em script
- **Definir dados**: no componente Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Exibir dados**: no componente Vue`<template> `Uso parcial de expressões de interpolação`{{ }}` ou comando `v-bind` etc. para exibir dados.

Exemplo: componente—foo.vue


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

3. Instale e use o roteador vue

Aqui é mostrado o projeto routetest

1. Instale o roteador vue

1) Instalação: cmd no diretório do arquivo do projeto onde você deseja adicionar esta coisa - `npm install vue-router`
2) Configurar roteamento: Configure regras de roteamento em `src/router/index.js` para mapear caminhos diferentes para componentes diferentes.

Exemplo:

Código no arquivo 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>e<router-view>
<router-link>: Usado para criar links de navegação, que podem ser alternados para a página de roteamento correspondente após clicar.
<router-view>: Usado para exibir os componentes de roteamento correspondentes.

Exemplo: 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>

Exibição da página: (preste atenção ao número da porta)

Barra de cliques: Então por que meu número de porta se chama '/bar'?

Porque você se lembra de onde o roteador está configurado, qual é o caminho. O nome aqui pode ser escolhido casualmente, mas geralmente é consistente com o nome do componente, e o nome do componente não pode ser alterado, e o nome correspondente é component-xx.vue. .

Por que clicar para pular - por causa disso<router-link> ,e<router-view> A função específica na página será discutida posteriormente.

4. Construa o primeiro miniaplicativo elemento mais

1. Use o roteador + elemento plus acima

element-plus pode ser entendido como uma série de pacotes para renderização de páginas front-end (o pacote universal pode ser entendido desta forma, programadores não são programadores, somos apenas carregadores de pacotes)

2. Como usar o código do componente

Clique no site oficialVisão geral Visão geral do componente Element Plus (element-plus.org)

3.Instale o elemento plus

1) Instalação: cmd—`npm install element-plus` no arquivo de projeto que você deseja usar.
2) Introduzir element-plus: Introduzir Element Plus e arquivos de estilo em `main.js`


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

3) Use componentes: Use componentes Element Plus UI em componentes Vue, como `<el-button> `,`<el-input> `Espere.

Exemplo: App.vue, de qualquer maneira, com<el->O começo é


<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) Explique aqui<router-view> efeito:

Você vê onde foi o '3' na imagem acima depois que ajustei sua posição. Entendido como um espaço reservado.


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

4. O salto de página também é implementado aqui, como

1) Configuração de roteamento: Configure o roteamento em `src/router/index.js`, cada rota corresponde a um componente.

Exemplo: Aliás, se o caminho for '/', significa que a primeira página que entra é esta.

Parece não dizer como executar o projeto: cmd-npm run serve no diretório do arquivo do projeto


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) Links de navegação: use `<router-link> `Crie um link de navegação, clique nele para ir para a página correspondente, use`<router-view> `Exibir componentes de roteamento.


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

5. Uso combinado de roteador Vue, element-plus e axios

1. Instale eixos

1) O mesmo que acima, comando de instalação: `npm install axios`
2) Configurar axios: Configure a instância do axios em `main.js`, defina o baseURL padrão e outras configurações globais.

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

- **Interface de definição**: Defina a interface API no lado do servidor, processe a solicitação de front-end e retorne dados.
- **Dados de solicitação de front-end**: Use axios no componente front-end para enviar uma solicitação, obter dados e exibi-los na página.
- **Troca dinâmica de dados**: Combine os componentes Element Plus e o Vue Router para realizar a troca dinâmica de dados do menu, como exibir conteúdo diferente de acordo com diferentes itens de menu.

Etapas específicas:
1) Crie uma instância do axios e 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) Use axios no componente Vue para enviar a solicitação:


<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 e Vue Router para implementar o menu dinâmico: Conforme explicado anteriormente.

3.O que os axios fazem?

Axios é um cliente HTTP baseado em Promise para solicitações HTTP em navegadores e ambientes Node.js. Ele permite enviar solicitações assíncronas de maneira mais conveniente e processar dados de resposta. Em um projeto Vue.js, você pode usar Axios para se comunicar com a API de back-end, como obter dados, enviar dados de formulário, processar uploads de arquivos e outras operações. axios fornece uma API simples que suporta interceptadores de solicitação e resposta, cancelamento de solicitação, configuração global e outras funções, tornando a interação de dados entre o front e o backend mais eficiente e controlável.

1) Primeiro adicione um src/server/index.js baseado no projeto anterior como segue


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

Descrição deste código:

Este trecho de código usa Node.js e a estrutura Express para criar um servidor simples. Aqui está uma explicação linha por linha do código:

1. **Importe o módulo Express e crie uma instância da aplicação**:
```javascript
const express = require('expresso');
const app = express();
```

- `express` é um framework para construção de aplicações web. Aqui ele é importado via `require('express')` e uma instância do aplicativo é criada via `express()`.

2. **Defina a porta de escuta do servidor**:
```javascript
const port = 3000; // Você pode escolher qualquer porta desocupada
```

- A variável `port` define o número da porta que o servidor escuta, aqui é definido como `3000`.

3. **Configurações de middleware que permitem solicitações entre domínios**:
```javascript
app.use((req, res, próximo) => {
res.header("Controle de acesso-Permitir-Origem", "*");
res.header("Access-Control-Allow-Headers", "Origem, X-Solicitado-Com, Tipo-de-Conteúdo, Aceitar");
próximo();
});
```

- Este código configura um middleware para permitir solicitações de origem cruzada (CORS). Ele permite solicitações de qualquer origem e determinados campos de cabeçalho. A função `next()` garante que a solicitação continue para o próximo middleware ou manipulador de rota.

4. **Defina rotas e respostas**:
```javascript
app.get('/', (req, res) => {
//Cria um objeto contendo os dados que você deseja retornar
dados constantes = [
{ id: 1, nome: 'Alice', idade: 18, e-mail: '[email protected]' },
{ id: 2, nome: 'Bob', idade: 19, e-mail: '[email protected]' },
// ...mais usuários
];

// Use o método res.json() para enviar resposta JSON
res.json(dados);
});
```

- `app.get('/', ...)` define uma rota para solicitações GET. Quando o cliente acessar o caminho raiz `/`, esta função manipuladora será chamada.
- A função manipuladora cria um objeto `data` contendo os dados do usuário e os retorna ao cliente como uma resposta JSON usando `res.json(data)`.

5. **Inicie o servidor**:
```javascript
app.listen(porta, () => {
console.log(`O servidor está sendo executado em http://localhost:${port}`);
});
```

- `app.listen(port, ...)` inicia o servidor e deixa-o escutar na porta definida.
- Quando o servidor inicia com sucesso, uma mensagem é enviada para o console indicando que o servidor está rodando e acessível via `http://localhost:3000`.

Resumo: Este trecho de código cria um servidor Express simples que responde às solicitações GET para o caminho raiz `/` e retorna uma resposta JSON contendo os dados do usuário. Um middleware também é configurado para permitir solicitações entre domínios. Ao executar este servidor na porta `3000`, você pode usar um navegador ou outro cliente HTTP para acessar `http://localhost:3000` e visualizar os dados JSON retornados.

2) Corra

cmd —node index.js no diretório de arquivos do servidor

Pode ver dados de segundo plano

Em seguida, execute cmd-npm run serve no diretório do arquivo do projeto e você verá que há dados! !

Como faço para gerenciar dados de back-end?

Apenas no arquivo server/index.js recém-adicionado:


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

Com base em seis e cinco, mais o back-end

Como executar os cinco projetos junto com o backend do primeiro projeto MoreMall é combinar o front e o backend.

1. Prepare duas coisas

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

Coloque-o no arquivo scr, mas também pode ser colocado em paralelo. Deixei-o ir antes e não o excluí. De qualquer forma, npm run serve também é possível em diferentes diretórios de arquivos.

Dois arquivos no 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:

O objetivo deste código é usar o Node.js e o módulo `mysql` para criar um pool de conexões para um banco de dados MySQL e exportá-lo para uso em outros módulos.

A explicação específica é a seguinte:

1. **Importar módulo `mysql`**:
```javascript
deixe mysql = require('mysql');
```
Esta linha de código importa o módulo `mysql`, que é uma biblioteca Node.js usada para conectar e operar bancos de dados MySQL.

2. **Crie um pool de conexões**:
```javascript
deixe db = mysql.createPool({
anfitrião: '127.0.0.1',
usuário: 'root',
porta: '3306',
senha: 'root',
banco de dados: 'teste'
});
```
Este código cria um pool de conexões usando o método `mysql.createPool`. Um pool de conexões é um conjunto de conexões de banco de dados que pode ser compartilhado e reutilizado por vários clientes. A criação de um pool de conexões pode melhorar o desempenho porque evita o restabelecimento da conexão com o banco de dados a cada solicitação.

- `host: '127.0.0.1'`: O endereço do host do servidor de banco de dados. Este é o servidor local.
- `user: 'root'`: nome de usuário do banco de dados.
- `porta: '3306'`: número da porta do banco de dados. A porta padrão do MySQL é 3306.
- `senha: 'root'`: senha do banco de dados.
- `database: 'test'`: O nome do banco de dados a ser conectado.

3. **Exportar pool de conexões**:
```javascript
módulo.exports = db;
```
Esta linha de código exporta o objeto do pool de conexões `db` para que outros módulos possam importar e usar este pool de conexões através do método `require`.

Usando este pool de conexões, você pode introduzi-lo em outros módulos e utilizá-lo para realizar consultas ao banco de dados. Por exemplo:

```Javascript
//Introduz o pool de conexões do banco de dados
const db = require('./caminho/para/este/módulo');

//Executa consulta ao banco de dados
db.query('SELECT * FROM usuário', (err, resultados) => {
se (errar) {
console.error('Erro ao executar consulta:', err);
retornar;
}
console.log('Resultados da consulta:', results);
});
```

Esse método facilita o gerenciamento e o uso de conexões de banco de dados, especialmente em aplicativos que exigem acesso frequente ao banco de dados.

（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. Complemente o conhecimento do novato

Se você não entendeu, é só ler mais :/

Terminal de serviço：

Crie um servidor Express e configure um pool de conexões de banco de dados.
Configure o middleware que permite solicitações entre domínios.
Defina uma rota GET para consultar o banco de dados e retornar dados.

cliente：

Use Axios para enviar solicitações HTTP ao servidor no componente Vue.
Obtenha os dados e exiba-os na página.

"Usando este pool de conexões, você pode introduzi-lo em outros módulos e utilizá-lo para realizar consultas ao banco de dados." - Quais são os outros módulos?

É o código do lado do servidor no servidor.

Neste contexto, "outros módulos" geralmente se referem a outros arquivos JavaScript em seu projeto Node.js, não dentro do arquivo `.vue` do componente Vue. Especificamente, esses outros módulos são normalmente códigos do lado do servidor que lidam com solicitações HTTP e interações de banco de dados.

Uma estrutura de projeto típica pode ser assim:

```
projeto/
├── servidor/
│ ├── db.js // O código do pool de conexão do banco de dados que você forneceu
│ ├── Routes.js // Módulo que define o roteamento da API
│ └── server.js // O arquivo que inicia o servidor, o que eu correspondo aqui é
└── cliente/
├── fonte/
│ ├── componentes/
│ │ ├── YourComponent.vue // Seu componente Vue
│ ├── main.js // arquivo de entrada do projeto Vue
│ └── ... // Outros arquivos front-end
└── pacote.json
```

Nesta estrutura, a pasta `server/` contém o código do lado do servidor, enquanto a pasta `client/` contém o código front-end Vue.

### Exemplo: Usando pool de conexões de banco de dados no lado do servidor

Supondo que você já tenha um arquivo `server/db.js` que define um pool de conexões de banco de dados, então você pode introduzi-lo e usá-lo no arquivo `server/routes.js`:

```Javascript
// servidor/rotas.js
const express = require('expresso');
const db = require('./db'); //Introduzir pool de conexão de banco de dados

const router = express.Router();//Não tenho utilidade para esta seção de routers.js. As outras partes são reunidas em index.js e, juntos, percebemos "a introdução de configurações de domínio cruzado para configuração de pool de conexão de banco de dados. de acordo com as necessidades" Acesso? -Definir roteamento-(objetivo final) iniciar servidor"

//Define um exemplo de rota
router.get('/usuários', (req, res) => {
db.query('SELECT * FROM usuário', (err, resultados) => {
se (errar) {
retornar res.status(500).json({ erro: err.message });
}
res.json(resultados);
});
});

módulo.exports = roteador;
```

Em seguida, configure e inicie o servidor Express no arquivo `server/server.js` e use as rotas definidas:

```Javascript
// servidor/servidor.js
const express = require('expresso');
const app = express();
const rotas = require('./routes'); //Introduzir rotas definidas

app.use('/api', rotas); // Usar roteamento

const porta = 3000;
app.listen(porta, () => {
console.log(`O servidor está sendo executado em http://localhost:${port}`);
});
```

### Usando API em componentes Vue

No seu componente Vue, você pode usar Axios para enviar solicitações HTTP para a API definida acima:

```ver
<template>
<div>
<h2>Usuários</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ nome de usuário }} - {{ usuário.email }}
</li>
</ul>
</div>
</template>

<script>
importar axios de 'axios';

exportar padrão {
dados() {
retornar {
Usuários: []
};
},
montado() {
axios.get('http://localhost:3000/api/users')
.então(resposta => {
this.usuários = resposta.dados;
})
.catch(erro => {
console.error('Erro ao buscar usuários:', error);
});
}
};
</script>
```

Dessa forma, ao separar a lógica de front-end e back-end, você pode organizar e gerenciar melhor o código, ao mesmo tempo em que garante que o lado do servidor lide com as interações do banco de dados, enquanto o front-end cuida da aquisição e exibição de dados por meio da API.

3.

1) O servidor deve estar ouvindo! ! Somente durante o monitoramento você poderá executar o projeto e ver os dados de segundo plano. Apenas as seguintes etapas:

Comando Project/src/sserver/——cmd——node index.js, comece a visualizar

O monitoramento correto mostra:

Em segundo lugar, descobri que poderia usarhttp://localhost:3000/api/usuáriosVejo os dados JSON corretos, mas não consigo usar http://localhost:3000. A solução é a seguinte:

Modifique 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. Como adicionar página de login

Primeiro, adicione à pasta assets: img é a imagem da página que foi logada no início, e a pasta css

Em seguida, adicione Login.vue, roteador de Login

O último passo é ajustar a página anterior, separar o App.vue (total), encapsulá-lo, desenhar um quadro no lado esquerdo da página para fazer um Bar.vue separado, e então se quiser ver esta Barra em cada página, você precisa adicioná-lo a cada página. Adicione uma referência a Bar.vue no arquivo .vue.