Κοινή χρήση τεχνολογίας

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

(Κυρίως ανάπτυξη front-end, όχι back-end. Επιτρέψτε μου πρώτα να σας παρουσιάσω ένα έργο που υλοποιεί front-end και back-end)

1. Εγκαταστήστε και εκτελέστε το έργο MoreMall

1.Εισαγωγή στο έργο MoreMall

Το front-end και το back-end μπορούν να αλληλεπιδράσουν μεταξύ τους.

2.Ρύθμιση περιβάλλοντος

1) Εγκατάσταση Node.js: Το Node.js είναι έναΠεριβάλλον χρόνου εκτέλεσης JavaScript , για τη δημιουργία εφαρμογών από την πλευρά του διακομιστή. Κατεβάστε και εγκαταστήστε την κατάλληλη έκδοση του Node.js στον επίσημο ιστότοπο [Node.js](https://nodejs.org/). Η διαμόρφωση περιβάλλοντος του node.js είναι σχετικά πολύπλοκη.

2) Εγκαταστήστε το mysql
3) Εγκατάσταση εξαρτήσεων: Εκτελέστε το «npm install» στον ριζικό κατάλογο του έργου, ο οποίος θαΤο αρχείο «package.json» εγκαθιστά όλες τις εξαρτήσεις που απαιτούνται για το έργο.

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

2. Δημιουργήστε ένα έργο Vue

1. Δημιουργήστε ένα έργο χρησιμοποιώντας το Vue CLI

1) Εγκαταστήστε και δημιουργήστε το έργο vue: δημιουργήστε έναν νέο φάκελο για να τοποθετήσετε το αρχείο του έργου - cmd στον κατάλογο αρχείων - `vue create my-project`
2) Δομή καταλόγου έργου: Ο κατάλογος `src` περιέχει υποκαταλόγους όπως «components» και «views», οι οποίοι χρησιμοποιούνται για την αποθήκευση στοιχείων και σελίδων.

3) σε<template>Εγγραφή δεδομένων σε σενάριο
- **Ορισμός δεδομένων**: στο στοιχείο Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Δεδομένα εμφάνισης**: στο στοιχείο Vue`<template> "Μερική χρήση εκφράσεων παρεμβολής"{{ }}` ή εντολή "v-bind" κ.λπ. για εμφάνιση δεδομένων.

Παράδειγμα: component—foo.vue

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

3. Εγκαταστήστε και χρησιμοποιήστε το vue-router

Εδώ εμφανίζεται η δοκιμή διαδρομής του έργου

1. Εγκαταστήστε το vue-router

1) Εγκατάσταση: cmd κάτω από τον κατάλογο αρχείων του έργου όπου θέλετε να προσθέσετε αυτό το πράγμα - `npm install vue-router`
2) Διαμόρφωση δρομολόγησης: Διαμορφώστε τους κανόνες δρομολόγησης στο `src/router/index.js` για να αντιστοιχίσετε διαφορετικές διαδρομές σε διαφορετικά στοιχεία.

Παράδειγμα:

Κωδικός στο αρχείο 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) Χρήση<router-link>και<router-view>
<router-link>: Χρησιμοποιείται για τη δημιουργία συνδέσμων πλοήγησης, οι οποίοι μπορούν να μεταβούν στην αντίστοιχη σελίδα δρομολόγησης αφού κάνετε κλικ.
<router-view>: Χρησιμοποιείται για την εμφάνιση των αντιστοιχισμένων στοιχείων δρομολόγησης.

Παράδειγμα: 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>

Εμφάνιση σελίδας: (προσοχή στον αριθμό θύρας)

Γραμμή κλικ: Τότε γιατί ο αριθμός θύρας μου ονομάζεται '/bar';

Επειδή θυμάστε πού έχει ρυθμιστεί ο δρομολογητής, που είναι η διαδρομή Το όνομα εδώ μπορεί να επιλεγεί τυχαία, αλλά γενικά είναι συνεπές με το όνομα του στοιχείου και το όνομα του στοιχείου δεν μπορεί να αλλάξει και το αντίστοιχο όνομα είναι component-xx.vue. .

Γιατί κάντε κλικ για άλμα - γι' αυτό<router-link> ,και<router-view> Η συγκεκριμένη λειτουργία στη σελίδα θα συζητηθεί αργότερα.

4. Δημιουργήστε την πρώτη μικροεφαρμογή στοιχείο-συν

1. Χρησιμοποιήστε το router+element-plus παραπάνω

Το element-plus μπορεί να γίνει κατανοητό ως μια σειρά από συσκευασμένα πακέτα για απόδοση σελίδας στο μπροστινό μέρος (το καθολικό πακέτο μπορεί να γίνει κατανοητό με αυτόν τον τρόπο, οι προγραμματιστές δεν είναι προγραμματιστές, είμαστε απλώς αχθοφόροι πακέτων)

2. Πώς να χρησιμοποιήσετε τον κωδικό συστατικού τους

Κάντε κλικ στον επίσημο ιστότοποΕπισκόπηση στοιχείου Επισκόπηση Element Plus (element-plus.org)

 

3.Εγκατάσταση στοιχείου-συν

1) Εγκατάσταση: cmd—`npm install element-plus` στο αρχείο έργου που θέλετε να χρησιμοποιήσετε.
2) Εισαγωγή στοιχείου-συν: Εισαγωγή Element Plus και αρχεία στυλ στο `main.js`

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

3) Χρήση στοιχείων: Χρησιμοποιήστε στοιχεία διεπαφής χρήστη Element Plus σε στοιχεία Vue, όπως `<el-button> `,`<el-input> «Περίμενε.

Παράδειγμα: App.vue, ούτως ή άλλως, με<el->Η αρχή είναι

<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) Εξηγήστε εδώ<router-view> αποτέλεσμα:

Βλέπετε πού πήγε το '3' στην παραπάνω εικόνα αφού προσάρμοσα τη θέση του. Κατανοείται ως κράτησης θέσης.

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

4. Το άλμα σελίδας εφαρμόζεται επίσης εδώ, πώς

1) Διαμόρφωση δρομολόγησης: Διαμορφώστε τη δρομολόγηση στο `src/router/index.js`, κάθε διαδρομή αντιστοιχεί σε ένα στοιχείο.

Παράδειγμα: Παρεμπιπτόντως, αν η διαδρομή είναι '/', σημαίνει ότι η πρώτη σελίδα που μπαίνει είναι αυτή.

Δεν φαίνεται να λέει πώς να εκτελέσετε το έργο: cmd-npm εκτέλεση υπηρεσίας στον κατάλογο αρχείων του έργου

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) Σύνδεσμοι πλοήγησης: χρησιμοποιήστε το `<router-link> "Δημιουργήστε έναν σύνδεσμο πλοήγησης, κάντε κλικ σε αυτόν για να μεταβείτε στην αντίστοιχη σελίδα, χρησιμοποιήστε".<router-view> `Εμφάνιση στοιχείων δρομολόγησης.

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

5. Συνδυαστική χρήση Vue-router, element-plus και axios

1. Εγκαταστήστε το axios

1) Όπως παραπάνω, εντολή εγκατάστασης: `npm install axios`
2) Διαμόρφωση axios: Διαμορφώστε την παρουσία του axios στο «main.js», ορίστε το προεπιλεγμένο baseURL και άλλες καθολικές διαμορφώσεις.

2. Εφαρμόστε μίνι προγράμματα front-end και back-end

- **Διεπαφή ορισμού**: Ορίστε τη διεπαφή API στην πλευρά του διακομιστή, επεξεργαστείτε το αίτημα διεπαφής και επιστρέψτε δεδομένα.
- **Δεδομένα αιτήματος μπροστινής πλευράς**: Χρησιμοποιήστε το axios στο στοιχείο διεπαφής για να στείλετε ένα αίτημα, να λάβετε δεδομένα και να το εμφανίσετε στη σελίδα.
- **Dynamic Data Switching**: Συνδυάστε στοιχεία Element Plus και Vue Router για να πραγματοποιήσετε δυναμική εναλλαγή δεδομένων του μενού, όπως εμφάνιση διαφορετικού περιεχομένου σύμφωνα με διαφορετικά στοιχεία μενού.

Ειδικά βήματα:
1) Δημιουργήστε μια παρουσία axios και διαμορφώστε:

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) Χρησιμοποιήστε το axios στο στοιχείο Vue για να στείλετε το αίτημα:
  

<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) Συνδυάστε το Element Plus και το Vue Router για να εφαρμόσετε το δυναμικό μενού: Όπως εξηγήθηκε προηγουμένως.

3.Τι κάνει το axios;

Το Axios είναι ένας πελάτης HTTP που βασίζεται σε Promise για αιτήματα HTTP σε προγράμματα περιήγησης και περιβάλλοντα Node.js. Σας επιτρέπει να στέλνετε ασύγχρονα αιτήματα πιο άνετα και να επεξεργάζεστε δεδομένα απόκρισης. Σε ένα έργο Vue.js, μπορείτε να χρησιμοποιήσετε το Axios για επικοινωνία με το back-end API, όπως λήψη δεδομένων, αποστολή δεδομένων φόρμας, επεξεργασία μεταφορτώσεων αρχείων και άλλες λειτουργίες. Το axios παρέχει ένα απλό API που υποστηρίζει υποκλοπές αιτημάτων και απόκρισης, ακύρωση αιτημάτων, καθολική διαμόρφωση και άλλες λειτουργίες, κάνοντας την αλληλεπίδραση δεδομένων μεταξύ του μπροστινού και του πίσω άκρου πιο αποτελεσματική και ελεγχόμενη.

1) Πρώτα προσθέστε ένα src/server/index.js με βάση το προηγούμενο έργο ως εξής

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

Περιγραφή αυτού του κώδικα:

Αυτό το απόσπασμα κώδικα χρησιμοποιεί το Node.js και το πλαίσιο Express για τη δημιουργία ενός απλού διακομιστή. Ακολουθεί μια εξήγηση γραμμή προς γραμμή του κώδικα:

1. **Εισαγάγετε τη λειτουργική μονάδα Express και δημιουργήστε μια παρουσία εφαρμογής**:
`` Javascript
const express = απαιτώ ('express');
const app = express();
   ```

- Το «express» είναι ένα πλαίσιο για τη δημιουργία διαδικτυακών εφαρμογών. Εδώ εισάγεται μέσω του «require('express')» και δημιουργείται ένα παράδειγμα εφαρμογής μέσω του «express()».

2. **Ρυθμίστε τη θύρα ακρόασης διακομιστή**:
`` Javascript
const port = 3000 // Μπορείτε να επιλέξετε οποιαδήποτε μη κατειλημμένη θύρα
   ```

- Η μεταβλητή "port" ορίζει τον αριθμό θύρας που ακούει ο διακομιστής, εδώ ορίζεται σε "3000".

3. **Ρυθμίσεις μεσαίου λογισμικού που επιτρέπουν αιτήματα μεταξύ τομέων**:
`` Javascript
app.use((απαιτ., ανταπόκριση, επόμενο) =&gt; {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
Επόμενο();
   });  
   ```

- Αυτός ο κώδικας δημιουργεί ένα ενδιάμεσο λογισμικό για να επιτρέπει αιτήματα πολλαπλής προέλευσης (CORS). Επιτρέπει αιτήματα από οποιαδήποτε προέλευση και επιτρέπει ορισμένα πεδία κεφαλίδας. Η συνάρτηση «next()» διασφαλίζει ότι το αίτημα συνεχίζεται στο επόμενο ενδιάμεσο λογισμικό ή χειριστή διαδρομής.

4. **Ορίστε διαδρομές και απαντήσεις**:
`` Javascript
app.get('/', (απαιτ., res) =&gt; {
//Δημιουργήστε ένα αντικείμενο που περιέχει τα δεδομένα που θέλετε να επιστρέψετε
const δεδομένα = [
{ id: 1, όνομα: 'Alice', ηλικία: 18, email: '[email protected]' },
{ id: 2, όνομα: 'Bob', ηλικία: 19, email: '[email protected]' },
// ...περισσότεροι χρήστες
     ];  
     
// Χρησιμοποιήστε τη μέθοδο res.json() για να στείλετε απάντηση JSON
res.json(data);
   });  
   ```

- Το "app.get('/', ...)' ορίζει μια διαδρομή για αιτήματα GET Όταν ο πελάτης αποκτήσει πρόσβαση στη διαδρομή ρίζας `/`, αυτή η συνάρτηση χειριστή θα κληθεί.
- Η συνάρτηση χειριστή δημιουργεί ένα αντικείμενο «δεδομένα» που περιέχει τα δεδομένα χρήστη και το επιστρέφει στον πελάτη ως απάντηση JSON χρησιμοποιώντας το «res.json(data)».

5. **Εκκινήστε τον διακομιστή**:
`` Javascript
app.listen(port, () =&gt; {
console.log(`Ο διακομιστής εκτελείται στο http://localhost:${port}`);
   });  
   ```

- Το `app.listen(port, ...)` ξεκινά τον διακομιστή και του επιτρέπει να ακούει στην καθορισμένη θύρα.
- Όταν ο διακομιστής ξεκινήσει με επιτυχία, βγαίνει ένα μήνυμα στην κονσόλα που υποδεικνύει ότι ο διακομιστής εκτελείται και είναι προσβάσιμος μέσω του `http://localhost:3000`.

Περίληψη: Αυτό το απόσπασμα κώδικα δημιουργεί έναν απλό διακομιστή Express που ανταποκρίνεται σε αιτήματα GET στη διαδρομή ρίζας `/` και επιστρέφει μια απάντηση JSON που περιέχει τα δεδομένα χρήστη. Ένα ενδιάμεσο λογισμικό έχει επίσης ρυθμιστεί για να επιτρέπει αιτήματα μεταξύ τομέων. Εκτελώντας αυτόν τον διακομιστή στη θύρα `3000`, μπορείτε να χρησιμοποιήσετε ένα πρόγραμμα περιήγησης ή άλλο πρόγραμμα-πελάτη HTTP για να αποκτήσετε πρόσβαση στο `http://localhost:3000` και να προβάλετε τα επιστρεφόμενα δεδομένα JSON.

2) Τρέξε

cmd—κόμβος index.js στον κατάλογο αρχείων διακομιστή

Μπορεί να δει δεδομένα φόντου

Στη συνέχεια, εκτελέστε το cmd-npm run serve στον κατάλογο αρχείων του έργου και μπορείτε να δείτε ότι υπάρχουν δεδομένα! !

Πώς διαχειρίζομαι τα δεδομένα υποστήριξης;

Μόλις στο αρχείο 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]' },  
  // ...更多用户  
  ];  

Με βάση το έξι και το πέντε, συν το backend

Πώς να εκτελέσετε τα πέντε έργα μαζί με το backend του πρώτου έργου MoreMall είναι να συνδυάσετε το μπροστινό και το πίσω άκρο.

1. Ετοιμάστε δύο πράγματα

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) διακομιστής

Βάλτε το κάτω από το αρχείο scr, αλλά μπορεί επίσης να γίνει παράλληλο. Το άφησα να πάει πριν και δεν το διέγραψα.

Δύο αρχεία κάτω από τον διακομιστή:

(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

εικονογραφώ:

Ο σκοπός αυτού του κώδικα είναι να χρησιμοποιήσει το Node.js και τη λειτουργική μονάδα `mysql` για τη δημιουργία ενός χώρου συγκέντρωσης σύνδεσης σε μια βάση δεδομένων MySQL και την εξαγωγή του για χρήση σε άλλες λειτουργικές μονάδες.

Η συγκεκριμένη εξήγηση έχει ως εξής:

1. **Εισαγωγή ενότητας `mysql`**:
`` Javascript
ας mysql = απαιτούν ('mysql');
   ```
Αυτή η γραμμή κώδικα εισάγει τη λειτουργική μονάδα `mysql`, η οποία είναι μια βιβλιοθήκη Node.js που χρησιμοποιείται για τη σύνδεση και τη λειτουργία βάσεων δεδομένων MySQL.

2. **Δημιουργήστε μια πισίνα σύνδεσης**:
`` Javascript
ας db = mysql.createPool({
οικοδεσπότης: '127.0.0.1',
χρήστης: 'root',
θύρα: '3306',
κωδικός πρόσβασης: 'root',
βάση δεδομένων: «δοκιμή»
   });
   ```
Αυτός ο κώδικας δημιουργεί μια ομάδα σύνδεσης χρησιμοποιώντας τη μέθοδο «mysql.createPool». Μια ομάδα σύνδεσης είναι ένα σύνολο συνδέσεων βάσης δεδομένων που μπορούν να κοινοποιηθούν και να επαναχρησιμοποιηθούν από πολλούς πελάτες. Η δημιουργία ενός χώρου συγκέντρωσης σύνδεσης μπορεί να βελτιώσει την απόδοση επειδή αποφεύγει την αποκατάσταση της σύνδεσης της βάσης δεδομένων με κάθε αίτημα.

- `host: '127.0.0.1'`: Η διεύθυνση κεντρικού υπολογιστή του διακομιστή βάσης δεδομένων. Αυτός είναι ο τοπικός διακομιστής.
- `user: 'root': όνομα χρήστη βάσης δεδομένων.
- `θύρα: '3306'`: Αριθμός θύρας βάσης δεδομένων. Η προεπιλεγμένη θύρα για τη MySQL είναι 3306.
- "password: "root": κωδικός πρόσβασης βάσης δεδομένων.
- `βάση δεδομένων: 'δοκιμή': Το όνομα της βάσης δεδομένων που πρόκειται να συνδεθεί.

3. **Εξαγωγή πισίνας σύνδεσης**:
`` Javascript
module.exports = db;
   ```
Αυτή η γραμμή κώδικα εξάγει το αντικείμενο του χώρου συγκέντρωσης σύνδεσης `db` έτσι ώστε άλλες μονάδες να μπορούν να εισάγουν και να χρησιμοποιούν αυτό το χώρο συγκέντρωσης σύνδεσης μέσω της μεθόδου `require`.

Χρησιμοποιώντας αυτό το χώρο συγκέντρωσης σύνδεσης, μπορείτε να το εισαγάγετε σε άλλες λειτουργικές μονάδες και να το χρησιμοποιήσετε για να εκτελέσετε ερωτήματα βάσης δεδομένων. Για παράδειγμα:

`` Javascript
//Εισαγωγή της πισίνας σύνδεσης βάσης δεδομένων
const db = require('./path/to/this/module');

//Εκτέλεση ερωτήματος βάσης δεδομένων
db.query('SELECT * FROM user', (err, results) =&gt; {
αν (λάθος) {
console.error('Σφάλμα κατά την εκτέλεση του ερωτήματος:', err);
ΕΠΙΣΤΡΟΦΗ;
    }
console.log('Αποτελέσματα ερωτήματος:', αποτελέσματα);
});
```

Αυτή η μέθοδος καθιστά εύκολη τη διαχείριση και τη χρήση συνδέσεων βάσης δεδομένων, ειδικά σε εφαρμογές που απαιτούν συχνή πρόσβαση στη βάση δεδομένων.

(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. Συμπληρώστε τις γνώσεις αρχαρίων

Αν δεν καταλαβαίνετε, απλά διαβάστε περισσότερα:/

• Service-Terminal：

  • Δημιουργήστε έναν διακομιστή Express και δημιουργήστε μια ομάδα σύνδεσης βάσης δεδομένων.
  • Ρυθμίστε ενδιάμεσο λογισμικό που επιτρέπει αιτήματα μεταξύ τομέων.
  • Καθορίστε μια διαδρομή GET για να κάνετε ερώτημα στη βάση δεδομένων και να επιστρέψετε δεδομένα.

• πελάτης：

  • Χρησιμοποιήστε το Axios για να στείλετε αιτήματα HTTP στον διακομιστή στο στοιχείο Vue.
  • Λάβετε τα δεδομένα και εμφανίστε τα στη σελίδα.

"Χρησιμοποιώντας αυτό το χώρο συγκέντρωσης σύνδεσης, μπορείτε να το εισαγάγετε σε άλλες λειτουργικές μονάδες και να το χρησιμοποιήσετε για να εκτελέσετε ερωτήματα βάσης δεδομένων - Ποιες είναι οι άλλες μονάδες;"

Είναι ο κώδικας από την πλευρά του διακομιστή στον διακομιστή.

Σε αυτό το πλαίσιο, το "άλλες λειτουργικές μονάδες" αναφέρεται συνήθως σε άλλα αρχεία JavaScript στο έργο Node.js και όχι στο αρχείο `.vue` του στοιχείου Vue. Συγκεκριμένα, αυτές οι άλλες λειτουργικές μονάδες είναι συνήθως κώδικας από την πλευρά του διακομιστή που χειρίζεται αιτήματα HTTP και αλληλεπιδράσεις βάσης δεδομένων.

Μια τυπική δομή έργου μπορεί να μοιάζει με αυτό:

```
έργο/
├── διακομιστής/
│ ├── db.js // Ο κωδικός συγκέντρωσης σύνδεσης βάσης δεδομένων που παρείχατε
│ ├── routes.js // Μονάδα που καθορίζει τη δρομολόγηση API
│ └── server.js // Το αρχείο που ξεκινά τον διακομιστή, αυτό στο οποίο αντιστοιχώ εδώ είναι
└── πελάτης/
├── src/
│ ├── συστατικά/
│ │ ├── YourComponent.vue // Το στοιχείο σας Vue
│ ├── main.js // Αρχείο καταχώρισης έργου Vue
│ └── ... // Άλλα αρχεία διεπαφής
└── πακέτο.json
```

Σε αυτήν τη δομή, ο φάκελος «διακομιστής/» περιέχει τον κώδικα από την πλευρά του διακομιστή, ενώ ο φάκελος «πελάτης/» περιέχει τον κωδικό Vue της διεπαφής.

### Παράδειγμα: Χρήση χώρου συγκέντρωσης σύνδεσης βάσης δεδομένων στην πλευρά του διακομιστή

Υποθέτοντας ότι έχετε ήδη ένα αρχείο «server/db.js» που ορίζει μια ομάδα σύνδεσης βάσης δεδομένων, τότε μπορείτε να το εισάγετε και να το χρησιμοποιήσετε στο αρχείο «server/routes.js»:

`` Javascript
// server/routes.js
const express = απαιτώ ('express');
const db = require('./db');

const router = express.Router();//Δεν έχω καμία χρήση για αυτήν την ενότητα του routers.js Τα άλλα μέρη συγκεντρώνονται στο index.js και μαζί συνειδητοποιούμε "εισάγοντας μια σύνδεση βάσης δεδομένων με ρυθμίσεις μεταξύ τομέων. σύμφωνα με τις ανάγκες" Πρόσβαση; -Ορισμός δρομολόγησης-(τελικός σκοπός) έναρξη διακομιστή"

//Ορίστε ένα παράδειγμα διαδρομής
router.get('/users', (req, res) =&gt; {
db.query('SELECT * FROM user', (err, results) =&gt; {
αν (λάθος) {
return res.status(500).json({ error: err.message });
        }
res.json(αποτελέσματα);
    });
});

module.exports = δρομολογητής;
```

Στη συνέχεια, ρυθμίστε και ξεκινήστε τον διακομιστή Express στο αρχείο `server/server.js` και χρησιμοποιήστε τις καθορισμένες διαδρομές:

`` Javascript
// server/server.js
const express = απαιτώ ('express');
const app = express();
const routes = require('./routes');

app.use('/api', διαδρομές // Χρήση δρομολόγησης).

const port = 3000;
app.listen(port, () =&gt; {
console.log(`Ο διακομιστής εκτελείται στο http://localhost:${port}`);
});
```

### Χρήση API σε στοιχεία Vue

Στο στοιχείο Vue, μπορείτε να χρησιμοποιήσετε το Axios για να στείλετε αιτήματα HTTP στο API που ορίζεται παραπάνω:

``vue
<template>
  <div>
<h2>Χρήστες</h2>
    <ul>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
  </div>
</template>

<script>
εισαγωγή axios από το 'axios'.

εξαγωγή προεπιλογή {
δεδομένα() {
ΕΠΙΣΤΡΟΦΗ {
χρήστες: []
    };
  },
mounted() {
axios.get('http://localhost:3000/api/users')
.then(response =&gt; {
this.users = answer.data;
      })
.catch(error =&gt; {
console.error('Σφάλμα ανάκτησης χρηστών:', σφάλμα);
      });
  }
};
</script>
```

Με αυτόν τον τρόπο, διαχωρίζοντας τη λογική του front-end και του back-end, μπορείτε να οργανώσετε και να διαχειριστείτε καλύτερα τον κώδικα, διασφαλίζοντας παράλληλα ότι η πλευρά του διακομιστή χειρίζεται τις αλληλεπιδράσεις της βάσης δεδομένων, ενώ το front-end χειρίζεται την απόκτηση και την εμφάνιση δεδομένων μέσω του API.

3.

1) Ο διακομιστής πρέπει να ακούει! ! Μόνο κατά την παρακολούθηση μπορείτε να εκτελέσετε το έργο και να δείτε τα δεδομένα παρασκηνίου. Μόνο τα παρακάτω βήματα:

Εντολή Project/src/sserver/——cmd——node index.js, έναρξη προβολής

Η σωστή παρακολούθηση δείχνει:

Δεύτερον, βρήκα ότι μπορούσα να χρησιμοποιήσωhttp://localhost:3000/api/usersΒλέπω τα σωστά δεδομένα JSON, αλλά δεν μπορώ να χρησιμοποιήσω το http://localhost:3000 Η λύση είναι η εξής:

Τροποποίηση 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. Πώς να προσθέσετε σελίδα σύνδεσης

Πρώτα, προσθέστε στο φάκελο assets: img είναι η εικόνα της σελίδας που ήταν συνδεδεμένη στην αρχή και ο φάκελος css

Στη συνέχεια, προσθέστε το Login.vue, τον δρομολογητή του Login

Το τελευταίο βήμα είναι να προσαρμόσετε την προηγούμενη σελίδα, να διαχωρίσετε το App.vue (σύνολο), να το ενθυλακώσετε, να σχεδιάσετε ένα πλαίσιο στην αριστερή πλευρά της σελίδας για να δημιουργήσετε ένα ξεχωριστό Bar.vue και, στη συνέχεια, αν θέλετε να δείτε αυτήν τη γραμμή σε κάθε σελίδα, πρέπει να την προσθέσετε σε κάθε σελίδα Προσθέστε μια αναφορά στο Bar.vue στο αρχείο .vue.

Παράδειγμα:

optionTwo.vue:

<template>
  <el-main>
    <el-container>
      <Bar />
        {{msg}}
        <!-- 根据当前的路由显示内容 -->
        <router-view></router-view>
    </el-container>
  </el-main>
</template>
 
<script>
import Bar from './Bar.vue';
 
export default {
  name: 'optionTwo',
  components:{
		Bar
  },
  data () {
    return {
      msg: 'Option Two'
    }
  }
}
</script>

optionOne.vue:

• Αν και<script>里面import了Bar，但是模块中也要用<Bar />
• Σχολιάστε την εισαγωγή axios επειδή αυτή η πρόταση έχει το ίδιο αποτέλεσμα με αυτήν.$http.get('/optionone').then(response =&gt;.
• Εάν θέλετε τα δεδομένα στη βάση δεδομένων να εμφανίζονται σωστά μετά τα ονόματα των στηλών, πρέπει να ορίσετε το πλάτος κατά τον ορισμό παραμέτρων για τα δύο πρώτα ονόματα στηλών και να μην ορίσετε πλάτος για το όνομα της τελευταίας στήλης.

<template>
  <el-main>
    <el-container>
      <Bar />
        <el-table :data="information">
          <el-table-column prop="users" label="Users" width="140" />
          <el-table-column prop="sex" label="Sex" width="140" />
          <el-table-column prop="mood" label="mood" />
        </el-table>
        <!-- 根据当前的路由显示内容 -->
        <router-view></router-view>
    </el-container>
  </el-main>
</template>
 
<script>
//import axios from 'axios';
import Bar from './Bar.vue';
 
export default {
  data() {
    return {
      information: []
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList() {
      this.$http.get('/optionone').then(response => {
        console.log(response.data);
        this.information = response.data;
      })
      .catch(error => {
        console.log(error);
      });
    }
  },
  // mounted() {
  //   axios.get('http://localhost:3000/api/users')
  //     .then(response => {
  //       this.users = response.data;
  //     })
  //     .catch(error => {
  //       console.error('Error fetching users:', error);
  //     });
  // },
  name: 'OptionOneComponent',
  components: {
    Bar
  }
};
</script>
 
<style>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>

Φυσικά, μπορώ να απαντήσω σε αυτές τις ερωτήσεις για εσάς:

### 1. Κατανοήστε το ρόλο κάθε αρχείου και πώς λειτουργούν μαζί

**db.js (αρχείο διαμόρφωσης βάσης δεδομένων υποστήριξης)**
- Λειτουργία: Δημιουργία και εξαγωγή μιας πισίνας σύνδεσης βάσης δεδομένων MySQL.
- Πώς συνεργάζονται: Χρησιμοποιείται από το index.js για την εκτέλεση λειτουργιών βάσης δεδομένων.

**index.js (κύριο αρχείο διακομιστή υποστήριξης)**
- Ρόλος: Ρύθμιση διακομιστή Express, διαμόρφωση δρομολόγησης και ενδιάμεσου λογισμικού και διαχείριση αιτημάτων API.
- Πώς να συνεργαστείτε: Χρησιμοποιήστε το db.js για να συνδεθείτε στη βάση δεδομένων και να απαντήσετε σε αιτήματα από τη διεπαφή.

**main.js (κύριο αρχείο διεπαφής)**
- Λειτουργία: Δημιουργήστε την εφαρμογή Vue, διαμορφώστε το Vue Router και το axios και προσαρτήστε την εφαρμογή.
- Πώς λειτουργεί μαζί: Χρησιμοποιήστε το Element Plus και το Vue Router για να βελτιώσετε τη διεπαφή χρήστη και την πλοήγηση, με axios που χρησιμοποιούνται για την επικοινωνία με το backend.

**index.js (αρχείο διαμόρφωσης Vue Router)**
- Λειτουργία: Καθορίστε τη δρομολόγηση στο front-end και καθορίστε στοιχεία Vue που αντιστοιχούν σε διαφορετικές διαδρομές.
- Πώς να συνεργαστείτε: Ενσωματώστε την παρουσία Vue στο main.js για να εφαρμόσετε τη δρομολόγηση σελίδων.

### 2. Δείξτε πώς να ξεκινήσετε τους διακομιστές backend και frontend

**Εκκίνηση του διακομιστή υποστήριξης**:
- Εκτελέστε το "node index.js" για να ξεκινήσετε τον διακομιστή Express.
- Βεβαιωθείτε ότι εκτελείται η υπηρεσία MySQL.

**Εκκίνηση του διακομιστή διεπαφής**:
- Εάν χρησιμοποιείτε το Vue CLI, εκτελέστε το «npm run serve» για να ξεκινήσετε τον διακομιστή ανάπτυξης που έχει φορτωθεί ξανά.
- Πρόσβαση στην καθορισμένη διεύθυνση στο πρόγραμμα περιήγησης (συνήθως localhost και μια συγκεκριμένη θύρα) για να προβάλετε την εφαρμογή front-end.

### 3. Εμφάνιση της αρχικής σελίδας και της διαδικασίας αλληλεπίδρασης με τον χρήστη

- Όταν ο χρήστης ανοίξει την εφαρμογή, το Vue Router θα αποδώσει το αντίστοιχο στοιχείο σύμφωνα με τη διεύθυνση URL.
- Ο χρήστης εκτελεί μια λειτουργία (όπως η συμπλήρωση μιας φόρμας σύνδεσης) και τα δεδομένα υποβάλλονται στο backend μέσω της φόρμας.
- Ο χρήστης βλέπει το αποτέλεσμα απόκρισης (επιτυχής ή αποτυχημένη σύνδεση) και πλοηγείται σε διαφορετικές σελίδες με βάση το αποτέλεσμα.

### 4. Εξηγήστε τη διαδικασία αιτήματος και απόκρισης API

- Η διεπαφή χρησιμοποιεί axios για την αποστολή αιτημάτων HTTP στο πίσω μέρος.
- Ο διακομιστής Express backend λαμβάνει το αίτημα και εκτελεί λειτουργίες βάσης δεδομένων.
- Το backend στέλνει τα αποτελέσματα ερωτημάτων της βάσης δεδομένων ή τις πληροφορίες σφάλματος πίσω στο frontend ως απάντηση.
- Η διεπαφή λαμβάνει την απάντηση και ενημερώνει την κατάσταση της σελίδας ή εμφανίζει πληροφορίες με βάση την απάντηση.

### 5. Συζητήστε τις βασικές τεχνολογίες που χρησιμοποιούνται στο έργο

- **Vue Router**: διαχειρίζεται τη δρομολόγηση στο front-end και υλοποιεί την πλοήγηση στη σελίδα σε εφαρμογές μιας σελίδας.
- **axios**: χρησιμοποιείται για την αποστολή αιτημάτων HTTP και την επεξεργασία απαντήσεων από το μπροστινό μέρος στο πίσω μέρος.
- **Express**: Πλαίσιο εφαρμογής ιστού Node.js, που χρησιμοποιείται για τη δημιουργία διακομιστών υποστήριξης και τη διαχείριση αιτημάτων API.
- **MySQL**: Σύστημα διαχείρισης σχεσιακών βάσεων δεδομένων, που χρησιμοποιείται για την αποθήκευση και την αναζήτηση δεδομένων.

### 6. Προετοιμάστε απαντήσεις σε μερικές συχνές ερωτήσεις

**Πώς να αντιμετωπίσετε το CORS; **
- Χρησιμοποιήστε το ενδιάμεσο λογισμικό cors για να επιτρέψετε σε συγκεκριμένους εξωτερικούς τομείς να έχουν πρόσβαση στο API.

** Πώς να εφαρμόσετε τον έλεγχο ταυτότητας χρήστη; **
- Το backend API μπορεί να ελέγξει τις πληροφορίες ελέγχου ταυτότητας (όπως τα διακριτικά JWT) στο αίτημα για επαλήθευση της ταυτότητας του χρήστη.

**Πώς να διασφαλιστεί η ασφάλεια των δεδομένων; **
- Μεταφέρετε δεδομένα κρυπτογραφημένα με χρήση HTTPS.
- Οι κωδικοί πρόσβασης χρήστη κατακερματίζονται και αποθηκεύονται.
- Επικυρώστε όλες τις εισαγωγές χρήστη για να αποτρέψετε επιθέσεις όπως η ένεση SQL.

Μέσα από τις παραπάνω απαντήσεις, θα πρέπει να είστε σε θέση να έχετε σαφή κατανόηση της αρχής λειτουργίας και της διαδικασίας υλοποίησης του έργου και να είστε έτοιμοι για την άμυνα.