Latihan liburan musim panas web front-end dan back-end development-notes

Berlatih pengembangan web front-end dan back-end selama liburan musim panas - catatan

2024-07-12

(Terutama pengembangan front-end, bukan back-end. Izinkan saya memperkenalkan proyek yang mengimplementasikan front-end dan back-end)

1. Instal dan jalankan proyek MoreMall

1.Pengenalan proyek MoreMall

Front-end dan back-end dapat berinteraksi satu sama lain, front-end: klien, back-end: server; database dapat ditulis dalam mall.sql.

2.Pengaturan lingkungan

1) Instal Node.js: Node.js adalah aLingkungan waktu proses JavaScript , untuk membangun aplikasi sisi server. Unduh dan instal versi Node.js yang sesuai di situs resmi [Node.js](https://nodejs.org/). Konfigurasi lingkungan node.js relatif kompleks.

2) Instal mysql
3) Instal dependensi: Jalankan `npm install` di direktori root proyek, yang akanFile `package.json` menginstal semua dependensi yang diperlukan untuk proyek tersebut.

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

2. Buat proyek Vue

1. Buat proyek menggunakan Vue CLI

1) Instal dan buat proyek vue: buat folder baru untuk meletakkan file proyek - cmd di direktori file - `vue create my-project`
2) Struktur direktori proyek: Direktori `src` berisi subdirektori seperti `components` dan `views`, yang digunakan untuk menyimpan komponen dan halaman.

3) di<template>Menulis data dalam skrip
- **Tentukan data**: di komponen Vue` <script>`部分定义数据，通过`data`函数返回数据对象。
- **Menampilkan data**: di komponen Vue`<template> `Penggunaan sebagian ekspresi interpolasi`{{ }}` atau perintah `v-bind` dll. untuk menampilkan data.

Contoh: komponen—foo.vue


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

3. Instal dan gunakan vue-router

Yang ditampilkan di sini adalah uji rute proyek

1. Instal vue-router

1) Instalasi: cmd di bawah direktori file proyek tempat Anda ingin menambahkan benda ini - `npm install vue-router`
2) Konfigurasikan perutean: Konfigurasikan aturan perutean di `src/router/index.js` untuk memetakan jalur berbeda ke komponen berbeda.

Contoh:

Kode di 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) Gunakan<router-link>Dan<router-view>
<router-link>: Digunakan untuk membuat link navigasi, yang dapat dialihkan ke halaman perutean yang sesuai setelah mengklik.
<router-view>: Digunakan untuk menampilkan komponen perutean yang cocok.

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

Tampilan halaman: (perhatikan nomor port)

Click bar: Lalu kenapa nomor port saya disebut '/bar'?

Karena Anda ingat di mana router dikonfigurasi, yang merupakan jalurnya. Nama di sini dapat dipilih dengan santai, tetapi umumnya konsisten dengan nama komponen, dan nama komponen tidak dapat diubah, dan nama yang sesuai adalah komponen-xx.vue .

Mengapa klik untuk melompat - karena itu<router-link> ,Dan<router-view> Fungsi spesifik pada halaman tersebut akan dibahas nanti.

4. Bangun applet elemen-plus pertama

1. Gunakan router+elemen-plus di atas

element-plus dapat dipahami sebagai serangkaian paket yang dikemas untuk rendering halaman front-end (paket universal dapat dipahami seperti ini, pemrogram bukanlah pemrogram, kami hanyalah porter paket)

2. Cara menggunakan kode komponennya

Klik di situs resminyaIkhtisar Ikhtisar Komponen |.

3.Instal elemen-plus

1) Instalasi: cmd—`npm install element-plus` di file proyek yang ingin Anda gunakan.
2) Perkenalkan elemen-plus: Perkenalkan Element Plus dan gaya file di `main.js`


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

3) Gunakan komponen: Gunakan komponen Element Plus UI di komponen Vue, seperti `<el-button> `,`<el-input> 'Tunggu.

Contoh: App.vue, dengan<el->Awalnya adalah


<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) Jelaskan di sini<router-view> memengaruhi:

Anda lihat kemana perginya '3' pada gambar di atas setelah saya sesuaikan posisinya. Dipahami sebagai pengganti.


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

4. Page jump juga diterapkan disini, caranya

1) Konfigurasi perutean: Konfigurasikan perutean di `src/router/index.js`, setiap rute berhubungan dengan sebuah komponen.

Contoh: Oiya, kalau pathnya '/', berarti halaman pertama yang masuk adalah ini.

Tampaknya tidak disebutkan cara menjalankan proyek: cmd-npm jalankan serve di direktori file proyek


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) Tautan navigasi: gunakan `<router-link> `Buat tautan navigasi, klik untuk melompat ke halaman terkait, gunakan`<router-view> `Tampilkan komponen perutean.


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

5. Kombinasi penggunaan Vue-router, element-plus dan axios

1. Instal aksio

1) Sama seperti di atas, perintah instalasi: `npm install axios`
2) Konfigurasikan aksio: Konfigurasikan instance aksio di `main.js`, atur baseURL default dan konfigurasi global lainnya.

2. Mengimplementasikan mini program front-end dan back-end

- **Definisi antarmuka**: Tentukan antarmuka API di sisi server, proses permintaan front-end, dan kembalikan data.
- **Data permintaan front-end**: Gunakan aksio di komponen front-end untuk mengirim permintaan, mendapatkan data, dan menampilkannya di halaman.
- **Peralihan Data Dinamis**: Menggabungkan komponen Element Plus dan Vue Router untuk mewujudkan peralihan data dinamis pada menu, seperti menampilkan konten berbeda menurut item menu berbeda.

Langkah-langkah spesifik:
1) Buat instance axios dan konfigurasikan:


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) Gunakan aksio di komponen Vue untuk mengirim permintaan:


<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) Gabungkan Element Plus dan Vue Router untuk mengimplementasikan menu dinamis: Seperti yang dijelaskan sebelumnya.

3. Apa fungsi aksio?

Axios adalah klien HTTP berbasis Promise untuk permintaan HTTP di browser dan lingkungan Node.js. Ini memungkinkan Anda mengirim permintaan asinkron dengan lebih nyaman dan memproses data respons. Dalam proyek Vue.js, Anda dapat menggunakan Axios untuk berkomunikasi dengan API back-end, seperti memperoleh data, mengirim data formulir, memproses unggahan file, dan operasi lainnya. axios menyediakan API sederhana yang mendukung pencegat permintaan dan respons, pembatalan permintaan, konfigurasi global, dan fungsi lainnya, menjadikan interaksi data antara ujung depan dan belakang lebih efisien dan terkendali.

1) Pertama tambahkan src/server/index.js berdasarkan proyek sebelumnya sebagai berikut


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

Deskripsi kode ini:

Cuplikan kode ini menggunakan Node.js dan kerangka Express untuk membuat server sederhana. Berikut penjelasan kodenya baris demi baris:

1. **Impor modul Express dan buat instance aplikasi**:
Bahasa Inggris: ```Javascript
const express = memerlukan('express');
const aplikasi = ekspres();
```

- `express` adalah kerangka kerja untuk membangun aplikasi web. Ini diimpor melalui `require('express')` dan instance aplikasi dibuat melalui `express()`.

2. **Setel port pendengaran server**:
Bahasa Inggris: ```Javascript
const port = 3000; // Anda dapat memilih port mana pun yang kosong
```

- Variabel `port` menentukan nomor port yang didengarkan server, di sini disetel ke `3000`.

3. **Setelan middleware yang mengizinkan permintaan lintas domain**:
Bahasa Inggris: ```Javascript
app.gunakan((permintaan, res, berikutnya) => {
res.header("Kontrol-Akses-Izinkan-Asal", "*");
res.header("Akses-Kontrol-Izinkan-Header", "Asal, X-Diminta-Dengan, Tipe-Konten, Terima");
Berikutnya();
});
```

- Kode ini menyiapkan middleware untuk mengizinkan permintaan lintas asal (CORS). Ini mengizinkan permintaan dari asal mana pun dan mengizinkan bidang header tertentu. Fungsi `next()` memastikan bahwa permintaan berlanjut ke middleware atau pengendali rute berikutnya.

4. **Tentukan rute dan respons**:
Bahasa Inggris: ```Javascript
aplikasi.dapatkan('/', (permintaan, res) => {
//Buat objek berisi data yang ingin Anda kembalikan
konstanta data = [
{ id: 1, nama: 'Alice', usia: 18, email: '[email protected]' },
{ id: 2, nama: 'Bob', usia: 19, email: '[email protected]' },
// ...lebih banyak pengguna
];

// Gunakan metode res.json() untuk mengirim respons JSON
res.json(data);
});
```

- `app.get('/', ...)` mendefinisikan rute untuk permintaan GET. Saat klien mengakses jalur root `/`, fungsi pengendali ini akan dipanggil.
- Fungsi handler membuat objek `data` yang berisi data pengguna dan mengembalikannya ke klien sebagai respons JSON menggunakan `res.json(data)`.

5. **Mulai server**:
Bahasa Inggris: ```Javascript
aplikasi.mendengarkan(port, () => {
console.log(`Server berjalan di http://localhost:${port}`);
});
```

- `app.listen(port, ...)` memulai server dan membiarkannya mendengarkan pada port yang ditentukan.
- Ketika server berhasil dimulai, sebuah pesan dikeluarkan ke konsol yang menunjukkan bahwa server sedang berjalan dan dapat diakses melalui `http://localhost:3000`.

Ringkasan: Cuplikan kode ini membuat server Express sederhana yang merespons permintaan GET ke jalur root `/` dan mengembalikan respons JSON yang berisi data pengguna. Middleware juga disiapkan untuk mengizinkan permintaan lintas domain. Dengan menjalankan server ini pada port `3000`, Anda dapat menggunakan browser atau klien HTTP lain untuk mengakses `http://localhost:3000` dan melihat data JSON yang dikembalikan.

2) Jalankan

cmd—node index.js di direktori file server

Dapat melihat data latar belakang

Kemudian jalankan cmd-npm run serve di direktori file proyek, dan Anda dapat melihat bahwa ada data! !

Bagaimana cara mengelola data backend?

Tepat di file server/index.js yang baru ditambahkan:


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

Atas dasar enam dan lima, ditambah backend

Cara menjalankan kelima proyek bersama-sama dengan backend proyek pertama MoreMall adalah dengan menggabungkan bagian depan dan belakang.

1. Siapkan dua hal

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

Taruh di bawah file scr, tapi bisa juga diparalelkan. Saya biarkan sebelumnya dan saya tidak menghapusnya. Pokoknya, npm run serve juga bisa di direktori file yang berbeda.

Dua file di bawah 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

menjelaskan:

Tujuan dari kode ini adalah menggunakan Node.js dan modul `mysql` untuk membuat kumpulan koneksi ke database MySQL dan mengekspornya untuk digunakan di modul lain.

Penjelasan spesifiknya adalah sebagai berikut:

1. **Impor modul `mysql`**:
Bahasa Inggris: ```Javascript
biarkan mysql = memerlukan('mysql');
```
Baris kode ini mengimpor modul `mysql`, yang merupakan perpustakaan Node.js yang digunakan untuk terhubung ke dan mengoperasikan database MySQL.

2. **Buat kumpulan koneksi**:
Bahasa Inggris: ```Javascript
biarkan db = mysql.createPool({
tuan rumah: '127.0.0.1',
pengguna: 'root',
pelabuhan: '3306',
kata sandi: 'root',
basis data: 'uji'
});
```
Kode ini membuat kumpulan koneksi menggunakan metode `mysql.createPool`. Kumpulan koneksi adalah sekumpulan koneksi database yang dapat dibagikan dan digunakan kembali oleh banyak klien. Membuat kumpulan koneksi dapat meningkatkan kinerja karena menghindari pembuatan kembali koneksi database dengan setiap permintaan.

- `host: '127.0.0.1'`: Alamat host server database. Ini adalah server lokal.
- `pengguna: 'root'`: nama pengguna basis data.
- `port: '3306'`: nomor port basis data. Port default untuk MySQL adalah 3306.
- `kata sandi: 'root'`: kata sandi basis data.
- `database: 'test'`: Nama database yang akan dihubungkan.

3. **Ekspor kumpulan koneksi**:
Bahasa Inggris: ```Javascript
modul.ekspor = db;
```
Baris kode ini mengekspor objek kumpulan koneksi `db` sehingga modul lain dapat mengimpor dan menggunakan kumpulan koneksi ini melalui metode `require`.

Dengan menggunakan kumpulan koneksi ini, Anda dapat memperkenalkannya di modul lain dan menggunakannya untuk melakukan kueri database. Misalnya:

Bahasa Inggris: ```Javascript
//Memperkenalkan kumpulan koneksi database
const db = memerlukan('./path/menuju/modul/ini');

//Jalankan kueri basis data
db.query('PILIH * DARI pengguna', (err, hasil) => {
jika (salah) {
console.error('Kesalahan saat menjalankan perintah:', err);
kembali;
}
console.log('Hasil kueri:', results);
});
```

Metode ini memudahkan dalam mengelola dan menggunakan koneksi database, terutama pada aplikasi yang sering membutuhkan akses database.

(2)indeks.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. Melengkapi pengetahuan pemula

Kalau belum paham, baca saja selengkapnya:/

Terminal Layanan：

Buat server Ekspres dan siapkan kumpulan koneksi database.
Siapkan middleware yang mengizinkan permintaan lintas domain.
Tentukan rute GET untuk menanyakan database dan mengembalikan data.

klien：

Gunakan Axios untuk mengirim permintaan HTTP ke server di komponen Vue.
Dapatkan data dan tampilkan di halaman.

"Dengan menggunakan kumpulan koneksi ini, Anda dapat memperkenalkannya di modul lain dan menggunakannya untuk melakukan kueri database." - Apa saja modul lainnya?

Ini adalah kode sisi server di server.

Dalam konteks ini, "modul lain" biasanya mengacu pada file JavaScript lain di proyek Node.js Anda, bukan di dalam file `.vue` pada komponen Vue. Secara khusus, modul-modul lain ini biasanya merupakan kode sisi server yang menangani permintaan HTTP dan interaksi database.

Struktur proyek pada umumnya mungkin terlihat seperti ini:

```
proyek/
├── pelayan/
│ ├── db.js // Kode kumpulan koneksi database yang Anda berikan
│ ├── rute.js // Modul yang mendefinisikan perutean API
│ └── server.js // File yang memulai server, yang saya kaitkan di sini adalah
└── klien/
├── src/
│ ├── komponen/
│ │ ├── Komponen Anda.vue // Komponen Vue Anda
│ ├── main.js // File entri proyek Vue
│ └── ... // File front-end lainnya
└── paket.json
```

Dalam struktur ini, folder `server/` berisi kode sisi server, sedangkan folder `client/` berisi kode Vue front-end.

### Contoh: Menggunakan kumpulan koneksi database di sisi server

Dengan asumsi Anda sudah memiliki file `server/db.js` yang mendefinisikan kumpulan koneksi database, maka Anda dapat memperkenalkan dan menggunakannya di file `server/routes.js`:

Bahasa Inggris: ```Javascript
// server/rute.js
const express = memerlukan('express');
const db = require('./db'); //Memperkenalkan kumpulan koneksi database

const router = express.Router();//Saya tidak menggunakan bagian routers.js ini. Bagian lain disatukan di index.js, dan bersama-sama kita menyadari "memperkenalkan pengaturan lintas domain pengaturan kumpulan koneksi database sesuai kebutuhan" Akses? -Atur perutean-(tujuan akhir) memulai server"

//Tentukan contoh rute
router.dapatkan('/pengguna', (permintaan, res) => {
db.query('PILIH * DARI pengguna', (err, hasil) => {
jika (salah) {
kembalikan res.status(500).json({ error: err.message });
}
res.json(hasil);
});
});

modul.ekspor = router;
```

Kemudian, atur dan mulai server Express di file `server/server.js` dan gunakan rute yang ditentukan:

Bahasa Inggris: ```Javascript
// server/server.js
const express = memerlukan('express');
const aplikasi = ekspres();
const rute = require('./routes'); //Memperkenalkan rute yang ditentukan

app.use('/api', rute); // Gunakan perutean

konstanta port = 3000;
aplikasi.mendengarkan(port, () => {
console.log(`Server berjalan di http://localhost:${port}`);
});
```

### Menggunakan API di komponen Vue

Di komponen Vue, Anda dapat menggunakan Axios untuk mengirim permintaan HTTP ke API yang ditentukan di atas:

```melihat
<template>
<div>
<h2>Pengguna</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ nama belakang }} - {{ email pengguna }}
</li>
</ul>
</div>
</template>

<script>
impor axios dari 'axios';

ekspor bawaan {
data() {
kembali {
pengguna: []
};
},
dipasang() {
axios.get('http://localhost:3000/api/pengguna')
.lalu(respon => {
ini.pengguna = respons.data;
})
.tangkap(kesalahan => {
console.error('Kesalahan saat mengambil pengguna:', error);
});
}
};
</script>
```

Dengan cara ini, dengan memisahkan logika front-end dan back-end, Anda dapat mengatur dan mengelola kode dengan lebih baik, sekaligus memastikan bahwa sisi server menangani interaksi database, sedangkan front-end menangani akuisisi dan tampilan data melalui API.

3.

1) Server harus mendengarkan! ! Hanya ketika pemantauan Anda dapat menjalankan proyek dan melihat data latar belakang. Langsung saja berikut langkahnya:

Perintah Project/src/sserver/——cmd——node index.js, mulai melihat

Pemantauan yang benar menunjukkan:

Kedua, saya menemukan bahwa saya dapat menggunakannyahttp://localhost:3000/api/penggunaSaya melihat data JSON yang benar, tetapi tidak dapat menggunakan http://localhost:3000. Solusinya adalah sebagai berikut:

Ubah 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. Bagaimana cara menambahkan halaman login

Pertama, tambahkan ke folder aset: img adalah gambar halaman yang login di awal, dan folder css

Kemudian tambahkan Login.vue, router Login

Langkah terakhir adalah menyesuaikan halaman sebelumnya, memisahkan App.vue (total), merangkumnya, menggambar bingkai di sisi kiri halaman untuk membuat Bar.vue terpisah, dan kemudian jika Anda ingin melihat Bar ini di setiap halaman, Anda perlu menambahkannya ke setiap halaman. Tambahkan referensi ke Bar.vue di file .vue.