Sommerferien üben Web-Front-End- und Back-End-Entwicklung-notes

Üben Sie die Web-Frontend- und Back-End-Entwicklung während der Sommerferien – Notizen

2024-07-12

(Hauptsächlich Front-End-Entwicklung, nicht Back-End. Lassen Sie mich zunächst ein Projekt vorstellen, das Front-End und Back-End implementiert.)

1. Installieren Sie das Projekt MoreMall und führen Sie es aus

1.Einführung in das Projekt MoreMall

Das Front-End und das Back-End können miteinander interagieren, Front-End: Client, Back-End: Server; die Datenbank kann in mall.sql geschrieben werden.

2. Umgebungseinrichtung

1) Node.js installieren: Node.js ist einJavaScript-Laufzeitumgebung , zum Erstellen serverseitiger Anwendungen. Laden Sie die entsprechende Version von Node.js von der offiziellen Website [Node.js](https://nodejs.org/) herunter und installieren Sie sie. Die Umgebungskonfiguration von node.js ist relativ komplex.

2) Installieren Sie MySQL
3) Abhängigkeiten installieren: Führen Sie „npm install“ im Stammverzeichnis des Projekts ausDie Datei „package.json“ installiert alle für das Projekt erforderlichen Abhängigkeiten.

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

2. Erstellen Sie ein Vue-Projekt

1. Erstellen Sie ein Projekt mit Vue CLI

1) Installieren und erstellen Sie das Vue-Projekt: Erstellen Sie einen neuen Ordner, um die Projektdatei – cmd – im Dateiverzeichnis abzulegen – „vue create my-project“.
2) Projektverzeichnisstruktur: Das Verzeichnis „src“ enthält Unterverzeichnisse wie „components“ und „views“, die zum Speichern von Komponenten und Seiten verwendet werden.

3) im<template>Daten im Skript schreiben
- **Daten definieren**: in der Vue-Komponente <script>`部分定义数据，通过`data`函数返回数据对象。
- **Daten anzeigen**: in der Vue-Komponente<template> „Teilweise Verwendung von Interpolationsausdrücken“{{ }}` oder Befehl `v-bind` usw., um Daten anzuzeigen.

Beispiel: Komponente – foo.vue


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

3. Installieren und verwenden Sie den Vue-Router

Hier ist das Projekt routetest zu sehen

1. Vue-Router installieren

1) Installation: cmd unter dem Projektdateiverzeichnis, in dem Sie dieses Ding hinzufügen möchten – „npm install vue-router“.
2) Routing konfigurieren: Konfigurieren Sie Routing-Regeln in „src/router/index.js“, um verschiedene Pfade verschiedenen Komponenten zuzuordnen.

Beispiel:

Code in der Datei 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) Verwendung<router-link>Und<router-view>
<router-link>: Wird zum Erstellen von Navigationslinks verwendet, die nach dem Klicken auf die entsprechende Routing-Seite umgeschaltet werden können.
<router-view>: Wird verwendet, um die übereinstimmenden Routing-Komponenten anzuzeigen.

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

Seitendarstellung: (Achten Sie auf die Portnummer)

Click bar: Warum heißt dann meine Portnummer „/bar“?

Da Sie sich daran erinnern, wo der Router konfiguriert ist, ist dies der Pfad. Der Name kann hier zufällig ausgewählt werden, stimmt jedoch im Allgemeinen mit dem Komponentennamen überein und der Komponentenname kann nicht geändert werden. Der entsprechende Name lautet „component-xx.vue“. .

Warum klicken, um zu springen? Aus diesem Grund<router-link> ,Und<router-view> Die spezifische Funktion auf der Seite wird später besprochen.

4. Erstellen Sie das erste Element-Plus-Applet

1. Verwenden Sie den Router+Element-Plus oben

element-plus kann als eine Reihe gepackter Pakete für das Rendern von Front-End-Seiten verstanden werden (das universelle Paket kann so verstanden werden: Programmierer sind keine Programmierer, wir sind nur Paketträger).

2. Verwendung ihres Komponentencodes

Klicken Sie auf die offizielle WebsiteÜbersicht Komponentenübersicht |. Element Plus (element-plus.org)

3. Element-Plus installieren

1) Installation: cmd – „npm install element-plus“ in der Projektdatei, die Sie verwenden möchten.
2) Element-Plus einführen: Element Plus und Style-Dateien in „main.js“ einführen


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

3) Komponenten verwenden: Verwenden Sie Element Plus-UI-Komponenten in Vue-Komponenten, z. B. „<el-button> `,`<el-input> „Warte.

Beispiel: App.vue jedenfalls mit<el->Der Anfang ist


<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) Erklären Sie es hier<router-view> Wirkung:

Sie sehen, wohin „3“ im Bild oben ging, nachdem ich ihre Position angepasst habe. Als Platzhalter verstanden.


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

4. Der Seitensprung wird auch hier implementiert, wie

1) Routing-Konfiguration: Konfigurieren Sie das Routing in „src/router/index.js“, jede Route entspricht einer Komponente.

Beispiel: Wenn der Pfad übrigens „/“ ist, bedeutet das, dass die erste Seite, die hereinkommt, diese ist.

Es scheint nicht zu sagen, wie das Projekt ausgeführt werden soll: „cmd-npm“ führt „serve“ im Projektdateiverzeichnis aus


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) Navigationslinks: Verwenden Sie „<router-link> „Navigationslink erstellen, darauf klicken, um zur entsprechenden Seite zu springen, verwenden“.<router-view> `Routing-Komponenten anzeigen.


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

5. Kombinierter Einsatz von Vue-Router, Element-Plus und Axios

1. Axios installieren

1) Wie oben, Installationsbefehl: „npm install axios“.
2) Axios konfigurieren: Axios-Instanz in „main.js“ konfigurieren, die Standard-BaseURL und andere globale Konfigurationen festlegen.

2. Implementieren Sie Front-End- und Back-End-Miniprogramme

- **Schnittstelle definieren**: Definieren Sie die API-Schnittstelle auf der Serverseite, verarbeiten Sie die Front-End-Anfrage und geben Sie Daten zurück.
- **Front-End-Anfragedaten**: Verwenden Sie Axios in der Front-End-Komponente, um eine Anfrage zu senden, Daten abzurufen und sie auf der Seite anzuzeigen.
- **Dynamische Datenumschaltung**: Kombinieren Sie Element Plus-Komponenten und Vue Router, um eine dynamische Datenumschaltung des Menüs zu realisieren, z. B. die Anzeige unterschiedlicher Inhalte je nach Menüpunkt.

Spezifische Schritte:
1) Erstellen Sie eine Axios-Instanz und konfigurieren Sie:


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) Verwenden Sie axios in der Vue-Komponente, um die Anfrage zu senden:


<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) Kombinieren Sie Element Plus und Vue Router, um ein dynamisches Menü zu implementieren: Wie bereits erläutert.

3.Was macht Axios?

Axios ist ein Promise-basierter HTTP-Client für HTTP-Anfragen in Browsern und Node.js-Umgebungen. Damit können Sie asynchrone Anfragen bequemer senden und Antwortdaten verarbeiten. In einem Vue.js-Projekt können Sie Axios verwenden, um mit der Back-End-API zu kommunizieren, z. B. Daten abzurufen, Formulardaten zu senden, Datei-Uploads zu verarbeiten und andere Vorgänge durchzuführen. axios bietet eine einfache API, die Anforderungs- und Antwort-Interceptoren, Anforderungsstornierung, globale Konfiguration und andere Funktionen unterstützt und so die Dateninteraktion zwischen Front- und Back-End effizienter und kontrollierbarer macht.

1) Fügen Sie zunächst wie folgt eine src/server/index.js basierend auf dem vorherigen Projekt hinzu


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

Beschreibung dieses Codes:

Dieses Code-Snippet verwendet Node.js und das Express-Framework, um einen einfachen Server zu erstellen. Hier ist eine zeilenweise Erklärung des Codes:

1. **Importieren Sie das Express-Modul und erstellen Sie eine Anwendungsinstanz**:
```Javascript
const express = erfordern('express');
const app = express();
```

- „Express“ ist ein Framework zum Erstellen von Webanwendungen. Hier wird über `require('express')` importiert und über `express()` eine Anwendungsinstanz erstellt.

2. **Legen Sie den Server-Überwachungsport fest**:
```Javascript
const port = 3000; // Sie können einen beliebigen freien Port auswählen
```

- Die Variable „port“ definiert die Portnummer, auf der der Server lauscht, hier ist sie auf „3000“ gesetzt.

3. **Middleware-Einstellungen, die domänenübergreifende Anfragen ermöglichen**:
```Javascript
app.use((req, res, next) => {
res.header("Zugriffskontrolle-Origin zulassen", "*");
res.header("Access-Control-Allow-Headers", "Ursprung, X-Requested-With, Inhaltstyp, Akzeptieren");
nächste();
});
```

– Dieser Code richtet eine Middleware ein, um Cross-Origin-Anfragen (CORS) zu ermöglichen. Es ermöglicht Anfragen von jedem Ursprung und erlaubt bestimmte Header-Felder. Die Funktion „next()“ stellt sicher, dass die Anfrage an die nächste Middleware oder den nächsten Routenhandler weitergeleitet wird.

4. **Routen und Reaktionen definieren**:
```Javascript
app.get('/', (req, res) => {
//Erstellen Sie ein Objekt mit den Daten, die Sie zurückgeben möchten
const Daten = [
{ ID: 1, Name: ‚Alice‘, Alter: 18, E-Mail: ‚[email protected]‘ },
{ ID: 2, Name: ‚Bob‘, Alter: 19, E-Mail: ‚[email protected]‘ },
// ...mehr Benutzer
];

// Verwenden Sie die Methode res.json(), um eine JSON-Antwort zu senden
res.json(Daten);
});
```

- „app.get('/', ...)“ definiert eine Route für GET-Anfragen. Wenn der Client auf den Root-Pfad „/“ zugreift, wird diese Handler-Funktion aufgerufen.
– Die Handler-Funktion erstellt ein Objekt „data“, das die Benutzerdaten enthält, und gibt es als JSON-Antwort mit „res.json(data)“ an den Client zurück.

5. **Starten Sie den Server**:
```Javascript
app.listen(port, () => {
console.log(`Der Server läuft auf http://localhost:${port}`);
});
```

- „app.listen(port, ...)“ startet den Server und lässt ihn den definierten Port abhören.
- Bei erfolgreichem Start des Servers wird eine Meldung an die Konsole ausgegeben, dass der Server läuft und über „http://localhost:3000“ erreichbar ist.

Zusammenfassung: Dieses Code-Snippet erstellt einen einfachen Express-Server, der auf GET-Anfragen an den Root-Pfad „/“ antwortet und eine JSON-Antwort mit den Benutzerdaten zurückgibt. Außerdem wird eine Middleware eingerichtet, um domänenübergreifende Anfragen zu ermöglichen. Wenn Sie diesen Server auf Port „3000“ ausführen, können Sie mit einem Browser oder einem anderen HTTP-Client auf „http://localhost:3000“ zugreifen und die zurückgegebenen JSON-Daten anzeigen.

2) Laufen

cmd – Knoten index.js im Serverdateiverzeichnis

Kann Hintergrunddaten sehen

Führen Sie dann cmd-npm run Serve im Projektdateiverzeichnis aus, und Sie können sehen, dass Daten vorhanden sind! !

Wie verwalte ich Backend-Daten?

Nur in der neu hinzugefügten Datei server/index.js:


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

Auf der Basis von sechs und fünf plus dem Backend

So führen Sie die fünf Projekte zusammen mit dem Backend des ersten Projekts aus. MoreMall besteht darin, das Front- und Backend zu kombinieren.

1. Bereiten Sie zwei Dinge vor

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

Legen Sie es unter die scr-Datei, aber ich habe es auch vorher losgelassen und es nicht gelöscht. Wie auch immer, npm runserv ist auch in anderen Dateiverzeichnissen möglich.

Zwei Dateien unter dem 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

veranschaulichen:

Der Zweck dieses Codes besteht darin, Node.js und das Modul „mysql“ zu verwenden, um einen Verbindungspool zu einer MySQL-Datenbank zu erstellen und ihn zur Verwendung in anderen Modulen zu exportieren.

Die konkrete Erklärung lautet wie folgt:

1. **MySQL-Modul importieren**:
```Javascript
Lassen Sie mysql = erfordern('mysql');
```
Diese Codezeile importiert das „mysql“-Modul, eine Node.js-Bibliothek, die zum Herstellen einer Verbindung zu und zum Betreiben von MySQL-Datenbanken verwendet wird.

2. **Erstellen Sie einen Verbindungspool**:
```Javascript
let db = mysql.createPool({
Host: '127.0.0.1',
Benutzer: 'root',
Port: '3306',
Passwort: „root“,
Datenbank: "Test"
});
```
Dieser Code erstellt einen Verbindungspool mit der Methode „mysql.createPool“. Ein Verbindungspool ist eine Reihe von Datenbankverbindungen, die von mehreren Clients gemeinsam genutzt und wiederverwendet werden können. Durch das Erstellen eines Verbindungspools kann die Leistung verbessert werden, da dadurch vermieden wird, dass die Datenbankverbindung bei jeder Anforderung erneut hergestellt werden muss.

- `host: '127.0.0.1'`: Die Hostadresse des Datenbankservers. Dies ist der lokale Server.
- `Benutzer: 'root'`: Datenbankbenutzername.
- `port: '3306'`: Datenbank-Portnummer. Der Standardport für MySQL ist 3306.
- `Passwort: 'root'`: Datenbankpasswort.
- `database: 'test'`: Der Name der Datenbank, die verbunden werden soll.

3. **Verbindungspool exportieren**:
```Javascript
modul.exporte = db;
```
Diese Codezeile exportiert das Verbindungspoolobjekt „db“, sodass andere Module diesen Verbindungspool über die Methode „require“ importieren und verwenden können.

Mithilfe dieses Verbindungspools können Sie ihn in andere Module einführen und zur Durchführung von Datenbankabfragen verwenden. Zum Beispiel:

```Javascript
//Datenbankverbindungspool einführen
const db = require('./Pfad/zu/diesem/Modul');

//Datenbankabfrage ausführen
db.query('SELECT * FROM Benutzer', (err, Ergebnisse) => {
wenn (Fehler) {
console.error('Fehler beim Ausführen der Abfrage:', err);
zurückkehren;
}
console.log('Abfrageergebnisse:', Ergebnisse);
});
```

Diese Methode vereinfacht die Verwaltung und Nutzung von Datenbankverbindungen, insbesondere in Anwendungen, die häufigen Datenbankzugriff erfordern.

(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. Ergänzen Sie das Anfängerwissen

Wenn Sie es nicht verstehen, lesen Sie einfach weiter:/

Service-Terminal：

Erstellen Sie einen Express-Server und richten Sie einen Datenbankverbindungspool ein.
Richten Sie Middleware ein, die domänenübergreifende Anfragen ermöglicht.
Definieren Sie eine GET-Route, um die Datenbank abzufragen und Daten zurückzugeben.

Klient：

Verwenden Sie Axios, um HTTP-Anfragen an den Server in der Vue-Komponente zu senden.
Holen Sie sich die Daten und zeigen Sie sie auf der Seite an.

„Mithilfe dieses Verbindungspools können Sie ihn in andere Module einführen und zur Durchführung von Datenbankabfragen verwenden.“ – Was sind die anderen Module?

Es handelt sich um den serverseitigen Code im Server.

In diesem Zusammenhang bezieht sich „andere Module“ normalerweise auf andere JavaScript-Dateien in Ihrem Node.js-Projekt, nicht auf die Datei „.vue“ der Vue-Komponente. Konkret handelt es sich bei diesen anderen Modulen typischerweise um serverseitigen Code, der HTTP-Anfragen und Datenbankinteraktionen verarbeitet.

Eine typische Projektstruktur könnte wie folgt aussehen:

```
Projekt/
├── Server/
│ ├── db.js // Der von Ihnen angegebene Datenbankverbindungspoolcode
│ ├── Routes.js // Modul, das API-Routing definiert
│ └── server.js // Die Datei, die den Server startet, was ich hier bespreche
└── Kunde/
├── Quelle/
│ ├── Komponenten/
│ │ ├── YourComponent.vue // Ihre Vue-Komponente
│ ├── main.js // Vue-Projekteintragsdatei
│ └── ... // Andere Frontend-Dateien
└── Paket.json
```

In dieser Struktur enthält der Ordner „server/“ den serverseitigen Code, während der Ordner „client/“ den Front-End-Vue-Code enthält.

### Beispiel: Verwendung des Datenbankverbindungspools auf der Serverseite

Angenommen, Sie haben bereits eine Datei „server/db.js“, die einen Datenbankverbindungspool definiert, dann können Sie diese in die Datei „server/routes.js“ einführen und verwenden:

```Javascript
// server/routes.js
const express = erfordern('express');
const db = require('./db'); //Datenbankverbindungspool einführen

const router = express.Router();//Ich habe keine Verwendung für diesen Abschnitt von routers.js. Die anderen Teile werden in index.js zusammengestellt, und zusammen realisieren wir „Einführung eines Datenbankverbindungspools, der domänenübergreifende Einstellungen festlegt“. je nach Bedarf" Zugriff? -Routing festlegen-(endgültiger Zweck) Server starten"

//Definieren Sie eine Beispielroute
router.get('/Benutzer', (req, res) => {
db.query('SELECT * FROM Benutzer', (err, Ergebnisse) => {
wenn (Fehler) {
return res.status(500).json({ Fehler: err.message });
}
res.json(Ergebnisse);
});
});

modul.exporte = Router;
```

Anschließend richten Sie den Express-Server in der Datei „server/server.js“ ein, starten ihn und verwenden die definierten Routen:

```Javascript
// server/server.js
const express = erfordern('express');
const app = express();
const Routen = require('./routes'); //Definierte Routen einführen

app.use('/api', Routen); // Routing verwenden

konstanter Port = 3000;
app.listen(port, () => {
console.log(`Der Server läuft auf http://localhost:${port}`);
});
```

### API in Vue-Komponenten verwenden

In Ihrer Vue-Komponente können Sie Axios verwenden, um HTTP-Anfragen an die oben definierte API zu senden:

```Ansicht
<template>
<div>
<h2>Benutzer</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ Nutzername }} - {{ Benutzer Email }}
</li>
</ul>
</div>
</template>

<script>
importiere Axios von „Axios“;

Standard exportieren {
Daten() {
zurückkehren {
Benutzer: []
};
},
montiert() {
axios.get('http://localhost:3000/api/users')
.dann(Antwort => {
diese.Benutzer = Antwort.Daten;
})
.catch(Fehler => {
console.error('Fehler beim Abrufen der Benutzer:', Fehler);
});
}
};
</script>
```

Auf diese Weise können Sie durch die Trennung der Front-End- und Back-End-Logik den Code besser organisieren und verwalten und gleichzeitig sicherstellen, dass die Serverseite die Datenbankinteraktionen abwickelt, während das Front-End die Datenerfassung und -anzeige über die API übernimmt.

3.

1) Der Server muss zuhören! ! Nur bei der Überwachung können Sie das Projekt ausführen und die Hintergrunddaten sehen. Nur die folgenden Schritte:

Project/src/sserver/——cmd——node index.js Befehl, Anzeige starten

Die richtige Überwachung zeigt:

Zweitens fand ich heraus, dass ich es gebrauchen konntehttp://localhost:3000/api/usersIch sehe die korrekten JSON-Daten, kann aber http://localhost:3000 nicht verwenden. Die Lösung lautet wie folgt:

Ändern Sie 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. So fügen Sie eine Anmeldeseite hinzu

Fügen Sie zunächst Folgendes zum Assets-Ordner hinzu: img ist das Seitenbild, das zu Beginn angemeldet war, und der CSS-Ordner

Fügen Sie dann Login.vue, den Router von Login, hinzu

Der letzte Schritt besteht darin, die vorherige Seite anzupassen, App.vue (gesamt) zu trennen, zu kapseln, einen Rahmen auf der linken Seite der Seite zu zeichnen, um eine separate Bar.vue zu erstellen, und dann, wenn Sie diese Bar auf jeder Seite sehen möchten Seite, müssen Sie es zu jeder Seite hinzufügen. Fügen Sie einen Verweis auf Bar.vue in der Datei .vue hinzu.