Esercitazioni per le vacanze estive web front-end e back-end development-notes

Esercitati nello sviluppo web front-end e back-end durante le vacanze estive - note

2024-07-12

(Principalmente sviluppo front-end, non back-end. Vorrei innanzitutto presentare un progetto che implementa front-end e back-end)

1. Installa ed esegui il progetto MoreMall

1.Introduzione al progetto MoreMall

Il front-end e il back-end possono interagire tra loro, front-end: client, back-end: server; il database può essere scritto in mall.sql.

2.Configurazione dell'ambiente

1) Installa Node.js: Node.js è unAmbiente di esecuzione JavaScript , per creare applicazioni lato server. Scarica e installa la versione appropriata di Node.js sul sito Web ufficiale [Node.js](https://nodejs.org/). La configurazione dell'ambiente di node.js è relativamente complessa.

2) Installa mysql
3) Installa le dipendenze: esegui `npm install` nella directory root del progetto, che verrà eseguitaIl file `package.json` installa tutte le dipendenze richieste per il progetto.

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

2. Crea un progetto Vue

1. Crea un progetto utilizzando Vue CLI

1) Installa e crea il progetto vue: crea una nuova cartella per inserire il file di progetto - cmd nella directory dei file - `vue create my-project`
2) Struttura della directory del progetto: La directory "src" contiene sottodirectory come "components" e "views", che vengono utilizzate per memorizzare componenti e pagine.

3) dentro<template>Scrittura dei dati nello script
- **Definisci dati**: nel componente Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Visualizza dati**: nel componente Vue`<template> `Uso parziale delle espressioni di interpolazione`{{ }}` o il comando `v-bind` ecc. per visualizzare i dati.

Esempio: componente—foo.vue


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

3. Installa e utilizza vue-router

Qui è mostrato il routetest del progetto

1. Installa vue-router

1) Installazione: cmd nella directory del file di progetto in cui vuoi aggiungere questa cosa - `npm install vue-router`
2) Configura il routing: configura le regole di routing in `src/router/index.js` per mappare percorsi diversi a componenti diversi.

Esempio:

Codice nel file 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) Utilizzare<router-link>E<router-view>
<router-link>: Utilizzato per creare collegamenti di navigazione, che possono essere spostati alla pagina di routing corrispondente dopo aver fatto clic.
<router-view>: Utilizzato per visualizzare i componenti di instradamento corrispondenti.

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

Visualizzazione della pagina: (prestare attenzione al numero di porta)

Barra dei clic: Allora perché il mio numero di porta si chiama "/bar"?

Perché ricordi dove è configurato il router, qual è il percorso. Il nome qui può essere scelto casualmente, ma generalmente è coerente con il nome del componente e il nome del componente non può essere modificato e il nome corrispondente è componente-xx.vue. .

Perché fare clic per saltare? Per questo motivo<router-link> ,E<router-view> La funzione specifica della pagina verrà discussa in seguito.

4. Costruisci la prima applet Element-Plus

1. Utilizzare il router+elemento-più sopra

element-plus può essere inteso come una serie di pacchetti pacchettizzati per il rendering della pagina front-end (il pacchetto universale può essere inteso in questo modo, i programmatori non sono programmatori, siamo solo portatori di pacchetti)

2. Come utilizzare il codice componente

Clicca sul sito ufficialePanoramica Panoramica dei componenti |. Element Plus (element-plus.org)

3.Installare element-plus

1) Installazione: cmd—`npm install element-plus` nel file di progetto che desideri utilizzare.
2) Introduci element-plus: Introduci Element Plus e i file di stile in `main.js`


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

3) Utilizzare i componenti: utilizzare i componenti dell'interfaccia utente Element Plus nei componenti Vue, come `<el-button> ",".<el-input> "Aspetta."

Esempio: App.vue, comunque, con<el->L'inizio è


<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) Spiegalo qui<router-view> effetto:

Vedi dove è andato il numero "3" nell'immagine sopra dopo aver regolato la sua posizione. Inteso come segnaposto.


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

4. Anche qui viene implementato il salto di pagina, come

1) Configurazione del routing: configura il routing in `src/router/index.js`, ogni percorso corrisponde a un componente.

Esempio: A proposito, se il percorso è '/', significa che la prima pagina che arriva è questa.

Non sembra dire come eseguire il progetto: cmd-npm run serve nella directory del file di progetto


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) Collegamenti di navigazione: utilizzare `<router-link> `Crea un collegamento di navigazione, fai clic su di esso per passare alla pagina corrispondente, utilizza`<router-view> `Visualizza i componenti di routing.


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

5. Uso combinato di Vue-router, element-plus e axios

1. Installare Axios

1) Come sopra, comando di installazione: `npm install axios`
2) Configura axios: configura l'istanza di axios in `main.js`, imposta il baseURL predefinito e altre configurazioni globali.

2. Implementare mini programmi front-end e back-end

- **Interfaccia di definizione**: definisce l'interfaccia API sul lato server, elabora la richiesta front-end e restituisce i dati.
- **Dati richiesta front-end**: utilizzare axios nel componente front-end per inviare una richiesta, ottenere dati e visualizzarli sulla pagina.
- **Commutazione dinamica dei dati**: combina i componenti Element Plus e Vue Router per realizzare la commutazione dinamica dei dati del menu, ad esempio la visualizzazione di contenuti diversi in base alle diverse voci di menu.

Passaggi specifici:
1) Crea un'istanza axios e configura:


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) Utilizzare axios nel componente Vue per inviare la richiesta:


<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) Combina Element Plus e Vue Router per implementare il menu dinamico: come spiegato in precedenza.

3.Cosa fa axios?

Axios è un client HTTP basato su Promise per richieste HTTP nei browser e negli ambienti Node.js. Consente di inviare richieste asincrone in modo più conveniente ed elaborare i dati di risposta. In un progetto Vue.js, puoi utilizzare Axios per comunicare con l'API back-end, ad esempio ottenendo dati, inviando dati di moduli, elaborando caricamenti di file e altre operazioni. axios fornisce una semplice API che supporta intercettatori di richieste e risposte, cancellazione di richieste, configurazione globale e altre funzioni, rendendo l'interazione dei dati tra front-end e back-end più efficiente e controllabile.

1) Per prima cosa aggiungi un src/server/index.js basato sul progetto precedente come 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}`);  
});

Descrizione di questo codice:

Questo frammento di codice utilizza Node.js e il framework Express per creare un semplice server. Ecco una spiegazione riga per riga del codice:

1. **Importa il modulo Express e crea un'istanza dell'applicazione**:
```javascript
const express = require('espresso');
const app = express();
```

- "express" è un framework per la creazione di applicazioni web. Qui viene importato tramite `require('express')` e viene creata un'istanza dell'applicazione tramite `express()`.

2. **Imposta la porta di ascolto del server**:
```javascript
const port = 3000; // Puoi scegliere qualsiasi porta non occupata
```

- La variabile `port` definisce il numero di porta su cui è in ascolto il server, qui è impostato su "3000".

3. **Impostazioni del middleware che consentono richieste tra domini**:
```javascript
app.use((req, res, next) => {
res.header("Origine-consenti-controllo-accesso", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
Prossimo();
});
```

- Questo codice configura un middleware per consentire richieste multiorigine (CORS). Consente richieste da qualsiasi origine e consente determinati campi di intestazione. La funzione "next()" garantisce che la richiesta continui al middleware successivo o al gestore del percorso.

4. **Definire percorsi e risposte**:
```javascript
app.get('/', (req, res) => {
//Crea un oggetto contenente i dati che desideri restituire
dati costanti = [
{ id: 1, nome: 'Alice', età: 18, email: '[email protected]' },
{ id: 2, nome: 'Bob', età: 19, email: '[email protected]' },
// ...più utenti
];

// Utilizza il metodo res.json() per inviare la risposta JSON
res.json(dati);
});
```

- `app.get('/', ...)` definisce un percorso per le richieste GET. Quando il client accede al percorso root `/`, verrà chiamata questa funzione di gestione.
- La funzione del gestore crea un oggetto "data" contenente i dati dell'utente e lo restituisce al client come risposta JSON utilizzando "res.json(data)".

5. **Avvia il server**:
```javascript
app.listen(porta, () => {
console.log(`Il server è in esecuzione su http://localhost:${port}`);
});
```

- `app.listen(port, ...)` avvia il server e lo lascia in ascolto sulla porta definita.
- Quando il server si avvia correttamente, viene visualizzato un messaggio sulla console che indica che il server è in esecuzione ed è accessibile tramite "http://localhost:3000".

Riepilogo: questo frammento di codice crea un semplice server Express che risponde alle richieste GET nel percorso root "/" e restituisce una risposta JSON contenente i dati dell'utente. Viene inoltre configurato un middleware per consentire richieste interdominio. Eseguendo questo server sulla porta "3000", puoi utilizzare un browser o un altro client HTTP per accedere a "http://localhost:3000" e visualizzare i dati JSON restituiti.

2) Correre

cmd: nodo index.js nella directory dei file del server

Può vedere i dati in background

Quindi esegui cmd-npm run serve nella directory del file di progetto e puoi vedere che ci sono dati! !

Come gestisco i dati di backend?

Proprio nel file server/index.js appena aggiunto:


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

Sulla base di sei e cinque, più il backend

Come eseguire i cinque progetti insieme al backend del primo progetto MoreMall consiste nel combinare il front-end e il back-end.

1. Prepara due cose

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

Mettilo nel file scr, ma può anche essere messo in parallelo. L'ho lasciato andare prima e non l'ho cancellato. Comunque, npm run serve è possibile anche in directory di file diverse.

Due file sotto il server:

(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

illustrare:

Lo scopo di questo codice è utilizzare Node.js e il modulo "mysql" per creare un pool di connessioni a un database MySQL ed esportarlo per l'utilizzo in altri moduli.

La spiegazione specifica è la seguente:

1. **Importa il modulo `mysql`**:
```javascript
lascia mysql = require('mysql');
```
Questa riga di codice importa il modulo "mysql", che è una libreria Node.js utilizzata per connettersi e gestire i database MySQL.

2. **Crea un pool di connessioni**:
```javascript
lascia db = mysql.createPool({
host: '127.0.0.1',
utente: 'root',
porta: '3306',
password: 'root',
banca dati: 'prova'
});
```
Questo codice crea un pool di connessioni utilizzando il metodo `mysql.createPool`. Un pool di connessioni è un insieme di connessioni al database che possono essere condivise e riutilizzate da più client. La creazione di un pool di connessioni può migliorare le prestazioni poiché evita di ristabilire la connessione al database a ogni richiesta.

- `host: '127.0.0.1'`: l'indirizzo host del server del database. Questo è il server locale.
- `utente: 'root'`: nome utente del database.
- `port: '3306'`: numero di porta del database. La porta predefinita per MySQL è 3306.
- `password: 'root'`: password del database.
- `database: 'test'`: il nome del database da connettere.

3. **Esporta pool di connessioni**:
```javascript
modulo.esportazioni = db;
```
Questa riga di codice esporta l'oggetto del pool di connessioni "db" in modo che altri moduli possano importare e utilizzare questo pool di connessioni tramite il metodo "require".

Utilizzando questo pool di connessioni, è possibile introdurlo in altri moduli e utilizzarlo per eseguire query sul database. Per esempio:

```javascript
//Introdurre il pool di connessioni al database
const db = require('./percorso/verso/questo/modulo');

//Esegue la query del database
db.query('SELECT * FROM utente', (err, risultati) => {
se (erro) {
console.error('Errore durante l'esecuzione della query:', err);
ritorno;
}
console.log('Risultati della query:', risultati);
});
```

Questo metodo semplifica la gestione e l'utilizzo delle connessioni al database, soprattutto nelle applicazioni che richiedono un accesso frequente al database.

(2) indice.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. Integra la conoscenza dei principianti

Se non capisci, leggi di più:/

Terminale di servizio：

Crea un server Express e imposta un pool di connessioni al database.
Configurare un middleware che consenta richieste tra domini.
Definire un percorso GET per interrogare il database e restituire dati.

cliente：

Utilizza Axios per inviare richieste HTTP al server nel componente Vue.
Ottieni i dati e visualizzali sulla pagina.

"Utilizzando questo pool di connessioni, puoi introdurlo in altri moduli e utilizzarlo per eseguire query sul database." - Quali sono gli altri moduli?

È il codice lato server nel server.

In questo contesto, "altri moduli" si riferisce solitamente ad altri file JavaScript nel tuo progetto Node.js, non all'interno del file `.vue` del componente Vue. Nello specifico, questi altri moduli sono in genere codice lato server che gestisce le richieste HTTP e le interazioni del database.

Una tipica struttura di progetto potrebbe assomigliare a questa:

```
progetto/
├── server/
│ ├── db.js // Il codice del pool di connessione al database che hai fornito
│ ├── rotte.js // Modulo che definisce il routing API
│ └── server.js // Il file che avvia il server, quello a cui corrispondo qui è
└── cliente/
├── origine/
│ ├── componenti/
│ │ ├── YourComponent.vue // Il tuo componente Vue
│ ├── main.js // File di ingresso del progetto Vue
│ └── ... // Altri file front-end
└── pacchetto.json
```

In questa struttura, la cartella "server/" contiene il codice lato server, mentre la cartella "client/" contiene il codice Vue front-end.

### Esempio: utilizzo del pool di connessioni al database sul lato server

Supponendo che tu abbia già un file `server/db.js` che definisce un pool di connessioni al database, puoi introdurlo e utilizzarlo nel file `server/routes.js`:

```javascript
// server/routes.js
const express = require('espresso');
const db = require('./db'); //Introduce il pool di connessioni al database

const router = express.Router();//Non mi serve questa sezione di routers.js Le altre parti sono messe insieme in index.js e insieme realizziamo "l'introduzione di un pool di connessione al database che imposta le impostazioni tra domini". in base alle esigenze" Accesso? -Imposta routing-(scopo finale) avvia server"

//Definisce un percorso di esempio
router.get('/utenti', (req, res) => {
db.query('SELECT * FROM utente', (err, risultati) => {
se (erro) {
restituisci res.status(500).json({ errore: err.message });
}
res.json(risultati);
});
});

modulo.esportazioni = router;
```

Quindi, configura e avvia il server Express nel file `server/server.js` e utilizza i percorsi definiti:

```javascript
// server/server.js
const express = require('espresso');
const app = express();
const percorsi = require('./routes'); //Introduce percorsi definiti

app.use('/api', Routes); // Usa il routing

porta costante = 3000;
app.listen(porta, () => {
console.log(`Il server è in esecuzione su http://localhost:${port}`);
});
```

### Utilizzo dell'API nei componenti Vue

Nel tuo componente Vue, puoi utilizzare Axios per inviare richieste HTTP all'API definita sopra:

```vista
<template>
<div>
<h2>Utenti</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{nome.utente}} - {{ utente.email }}
</li>
</ul>
</div>
</template>

<script>
importa axios da 'axios';

esporta predefinito {
dati() {
ritorno {
utenti: []
};
},
montato() {
axios.get('http://localhost:3000/api/utenti')
.then(risposta => {
questo.utenti = risposta.dati;
})
.catch(errore => {
console.error('Errore durante il recupero degli utenti:', error);
});
}
};
</script>
```

In questo modo, separando la logica front-end e back-end, è possibile organizzare e gestire al meglio il codice, garantendo al tempo stesso che il lato server gestisca le interazioni con il database, mentre il front-end gestisca l'acquisizione e la visualizzazione dei dati tramite API.

3.

1) Il server deve essere in ascolto! ! Solo durante il monitoraggio puoi eseguire il progetto e vedere i dati in background. Solo i seguenti passaggi:

Comando Project/src/sserver/——cmd——node index.js, avvia la visualizzazione

Un corretto monitoraggio evidenzia:

In secondo luogo, ho scoperto che potevo usarehttp://localhost:3000/api/utentiVedo i dati JSON corretti, ma non riesco a utilizzare http://localhost:3000 La soluzione è la seguente:

Modifica opzioneOne.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. Come aggiungere la pagina di accesso

Innanzitutto, aggiungi alla cartella asset: img è l'immagine della pagina a cui hai effettuato l'accesso all'inizio e la cartella css

Quindi aggiungi Login.vue, il router di Login

L'ultimo passo è aggiustare la pagina precedente, separare App.vue (totale), incapsularlo, disegnare una cornice sul lato sinistro della pagina per creare una Bar.vue separata, e poi se vuoi vedere questa barra su ogni pagina, è necessario aggiungerlo ad ogni pagina. Aggiungere un riferimento a Bar.vue nel file .vue.