Kesälomaharjoittelu web-etu- ja taustakehitys-notes

Harjoittele web-etu- ja taustakehitystä kesäloman aikana - huomautuksia

2024-07-12

(Pääasiassa etupään kehitystä, ei taustaa. Haluan ensin esitellä projektin, joka toteuttaa käyttöliittymän ja taustan)

1. Asenna ja suorita MoreMall-projekti

1. Johdatus MoreMall-projektiin

Front-end ja back-end voivat olla vuorovaikutuksessa keskenään, front-end: asiakas, back-end: palvelin voidaan kirjoittaa mall.sql;

2.Ympäristöasetukset

1) Asenna Node.js: Node.js on aJavaScript-ajoympäristö , palvelinpuolen sovellusten rakentamiseen. Lataa ja asenna asianmukainen Node.js-versio viralliselta verkkosivustolta [Node.js] (https://nodejs.org/). Node.js:n ympäristökonfiguraatio on suhteellisen monimutkainen.

2) Asenna mysql
3) Asenna riippuvuudet: Suorita "npm install" projektin juurihakemistossa, jokaPackage.json-tiedosto asentaa kaikki projektiin tarvittavat riippuvuudet.

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

2. Luo Vue-projekti

1. Luo projekti Vue CLI:n avulla

1) Asenna ja luo vue-projekti: luo uusi kansio laittaaksesi projektitiedoston - cmd tiedostohakemistoon - `vue create my-project`
2) Projektin hakemistorakenne: "src"-hakemisto sisältää alihakemistoja, kuten "komponentit" ja "näkymät", joita käytetään komponenttien ja sivujen tallentamiseen.

3) sisään<template>Tietojen kirjoittaminen skriptillä
- **Määritä tiedot**: Vue-komponentissa <script>`部分定义数据，通过`data`函数返回数据对象。
- **Näyttötiedot**: Vue-komponentissa`<template> `Interpolaatiolausekkeiden osittainen käyttö`{{ }}` tai komento `v-bind` jne. tietojen näyttämiseksi.

Esimerkki: komponentti-foo.vue


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

3. Asenna vue-router ja käytä sitä

Tässä näkyy projektin reittitesti

1. Asenna vue-reititin

1) Asennus: cmd sen projektitiedostohakemiston alle, johon haluat lisätä tämän asian - `npm install vue-router`
2) Määritä reititys: Määritä reitityssäännöt tiedostossa `src/router/index.js', jotta voit yhdistää eri polut eri komponentteihin.

Esimerkki:

Koodi src/router/index.js-tiedostossa:


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) Käytä<router-link>ja<router-view>
<router-link>: Käytetään luomaan navigointilinkkejä, jotka voidaan siirtyä vastaavalle reitityssivulle napsautuksen jälkeen.
<router-view>: Käytetään vastaavien reitityskomponenttien näyttämiseen.

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

Sivun näyttö: (kiinnitä huomiota portin numeroon)

Napsautuspalkki: Miksi sitten porttinumeroni on nimeltään '/bar'?

Koska muistat, missä reititin on määritetty, mikä on polku. Tässä oleva nimi voidaan valita satunnaisesti, mutta se on yleensä yhdenmukainen komponentin nimen kanssa, eikä komponentin nimeä voi muuttaa, ja vastaava nimi on komponentti-xx.vue. .

Miksi klikkaa hypätäksesi - sen takia<router-link> ,ja<router-view> Sivun erityistä toimintoa käsitellään myöhemmin.

4. Rakenna ensimmäinen element-plus-sovelma

1. Käytä yllä olevaa reititin+elementti-plus-toimintoa

element-plus voidaan ymmärtää sarjana paketoituja paketteja etusivun hahmontamiseen (yleinen paketti voidaan ymmärtää näin, ohjelmoijat eivät ole ohjelmoijia, olemme vain pakettien kantajia)

2. Kuinka käyttää niiden komponenttikoodia

Napsauta virallista verkkosivustoaYleiskatsaus Komponenttien yleiskatsaus |. Element Plus (element-plus.org)

3. Asenna element-plus

1) Asennus: cmd—`npm install element-plus` projektitiedostossa, jota haluat käyttää.
2) Ota käyttöön element-plus: esittele Element Plus ja tyylitiedostot main.js-tiedostossa


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

3) Käytä komponentteja: Käytä Vue-komponenteissa Element Plus UI -komponentteja, kuten `<el-button> `,`<el-input> `Odota.

Esimerkki: App.vue joka tapauksessa kanssa<el->Alku on


<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) Selitä tässä<router-view> vaikutus:

Näet, minne '3' yllä olevassa kuvassa meni, kun säädin sen sijaintia. Ymmärretty paikkamerkkinä.


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

4. Sivuhyppy on myös toteutettu täällä, miten

1) Reitityksen määritys: Määritä reititys tiedostossa "src/router/index.js", jokainen reitti vastaa komponenttia.

Esimerkki: Muuten, jos polku on '/', se tarkoittaa, että ensimmäinen saapuva sivu on tämä.

Se ei näytä sanovan, kuinka projekti suoritetaan: cmd-npm run palvella projektitiedostohakemistossa


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) Navigointilinkit: käytä `<router-link> `Luo navigointilinkki, napsauta sitä siirtyäksesi vastaavalle sivulle, käytä`<router-view> `Näytä reitityskomponentit.


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

5. Vue-reitittimen, element-plus:n ja aksioiden yhdistetty käyttö

1. Asenna aksiot

1) Sama kuin yllä, asennuskomento: `npm install axios`
2) Määritä aksiot: Määritä axios-instanssi `main.js:ssä', aseta oletusarvoinen baseURL-osoite ja muut yleiset asetukset.

2. Toteuta etu- ja taustaminiohjelmat

- **Määritelmärajapinta**: Määritä API-liittymä palvelinpuolella, käsittele käyttöliittymäpyyntö ja palauta tiedot.
- **Front-end-pyyntötiedot**: Käytä käyttöliittymäkomponentin aksioita pyynnön lähettämiseen, tietojen hankkimiseen ja sen näyttämiseen sivulla.
- **Dynaaminen tiedonvaihto**: Yhdistä Element Plus -komponentit ja Vue Router toteuttaaksesi valikon dynaamisen tiedonvaihdon, kuten eri sisällön näyttämisen eri valikkokohtien mukaan.

Tietyt vaiheet:
1) Luo axios-instanssi ja määritä:


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) Käytä Vue-komponentin aksioita pyynnön lähettämiseen:


<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) Yhdistä Element Plus ja Vue Router toteuttaaksesi dynaaminen valikko: Kuten aiemmin selitettiin.

3. Mitä axios tekee?

Axios on Promise-pohjainen HTTP-asiakas HTTP-pyyntöjä varten selaimissa ja Node.js-ympäristöissä. Sen avulla voit lähettää asynkronisia pyyntöjä kätevämmin ja käsitellä vastaustietoja. Vue.js-projektissa voit käyttää Axiosta kommunikointiin tausta-API:n kanssa, kuten tietojen hankkimiseen, lomaketietojen lähettämiseen, tiedostojen latausten käsittelyyn ja muihin toimintoihin. axios tarjoaa yksinkertaisen sovellusliittymän, joka tukee pyyntöjen ja vastausten sieppaajia, pyyntöjen peruuttamista, globaalia konfigurointia ja muita toimintoja, mikä tekee tiedonvuorovaikutuksesta etu- ja takapään välillä tehokkaampaa ja hallittavampaa.

1) Lisää ensin src/server/index.js edellisen projektin perusteella seuraavasti


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

Tämän koodin kuvaus:

Tämä koodinpätkä käyttää Node.js:ää ja Express-kehystä yksinkertaisen palvelimen luomiseen. Tässä on rivi riviltä selitys koodista:

1. **Tuo Express-moduuli ja luo sovellusesiintymä**:
``` javascript
const express = vaatia('express');
const app = express();
```

- "Express" on kehys verkkosovellusten rakentamiseen. Täällä se tuodaan "require('express')" -komennolla ja sovellusesiintymä luodaan "express()"-komennolla.

2. **Aseta palvelimen kuunteluportti**:
``` javascript
const port = 3000 // Voit valita minkä tahansa vapaan portin
```

- Muuttuja "portti" määrittää portin numeron, jota palvelin kuuntelee. Tässä se on asetettu arvoon "3000".

3. **Väliohjelmistoasetukset, jotka sallivat verkkotunnusten väliset pyynnöt**:
``` javascript
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
Seuraava();
});
```

- Tämä koodi määrittää väliohjelmiston sallimaan cross-origin-pyynnöt (CORS). Se sallii pyynnöt mistä tahansa lähteestä ja sallii tietyt otsikkokentät. Funktio "next()" varmistaa, että pyyntö jatkuu seuraavaan väliohjelmistoon tai reitinkäsittelijään.

4. **Määrittele reitit ja vastaukset**:
``` javascript
app.get('/', (req, res) => {
//Luo objekti, joka sisältää palautettavat tiedot
const data = [
{ id: 1, name: 'Liisa', ikä:18, email: '[email protected]' },
{ id: 2, name: "Bob", ikä: 19, email: "[email protected]" },
// ...lisää käyttäjiä
];

// Käytä res.json()-menetelmää JSON-vastauksen lähettämiseen
res.json(data);
});
```

- `app.get('/', ...)' määrittää reitin GET-pyyntöille Kun asiakas käyttää juuripolkua `/`, tämä käsittelijätoiminto kutsutaan.
- Käsittelijätoiminto luo käyttäjätiedot sisältävän objektin "data" ja palauttaa sen asiakkaalle JSON-vastauksena käyttämällä "res.json(data)".

5. **Käynnistä palvelin**:
``` javascript
app.listen(port, () => {
console.log(`Palvelin toimii osoitteessa http://localhost:${port}`);
});
```

- `app.listen(port, ...)` käynnistää palvelimen ja antaa sen kuunnella määritettyä porttia.
- Kun palvelin käynnistyy onnistuneesti, konsoliin lähetetään sanoma, joka ilmoittaa, että palvelin on käynnissä ja käytettävissä osoitteessa `http://localhost:3000`.

Yhteenveto: Tämä koodinpätkä luo yksinkertaisen Express-palvelimen, joka vastaa GET-pyyntöihin juuripolkuun `/` ja palauttaa käyttäjätiedot sisältävän JSON-vastauksen. Väliohjelmisto on myös määritetty sallimaan verkkotunnusten väliset pyynnöt. Kun käytät tätä palvelinta portissa 3000, voit käyttää selainta tai muuta HTTP-asiakasta päästäksesi osoitteeseen http://localhost:3000 ja tarkastellaksesi palautettuja JSON-tietoja.

2) Juokse

cmd—solmu index.js palvelimen tiedostohakemistossa

Voi nähdä taustatiedot

Suorita sitten cmd-npm run serve projektitiedostohakemistossa ja näet, että dataa on! !

Kuinka hallitsen taustatietoja?

Juuri lisätyssä server/index.js-tiedostossa:


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

Kuuden ja viiden perusteella sekä taustaosa

Kuinka ajaa viisi projektia yhdessä ensimmäisen projektin takaosan kanssa MoreMall on yhdistää etu- ja takapäät.

1. Valmista kaksi asiaa

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

Laita se scr-tiedoston alle, mutta se voidaan myös rinnastaa, enkä poistanut sitä.

Kaksi tiedostoa palvelimen alla:

(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

havainnollistaa:

Tämän koodin tarkoitus on käyttää Node.js:ää ja `mysql`-moduulia yhteyspoolin luomiseen MySQL-tietokantaan ja viemiseen käytettäväksi muissa moduuleissa.

Tarkka selitys on seuraava:

1. **Tuo mysql-moduuli**:
``` javascript
anna mysql = vaatia('mysql');
```
Tämä koodirivi tuo mysql-moduulin, joka on Node.js-kirjasto, jota käytetään yhteyden muodostamiseen MySQL-tietokantoihin ja niiden käyttämiseen.

2. **Luo yhteyspooli**:
``` javascript
anna db = mysql.createPool({
isäntä: '127.0.0.1',
käyttäjä: 'root',
portti: '3306',
salasana: 'root',
tietokanta: "testi"
});
```
Tämä koodi luo yhteyspoolin käyttämällä "mysql.createPool"-menetelmää. Yhteyspooli on joukko tietokantayhteyksiä, joita useat asiakkaat voivat jakaa ja käyttää uudelleen. Yhteyspoolin luominen voi parantaa suorituskykyä, koska se välttää tietokantayhteyden uudelleenmuodostamisen jokaisen pyynnön yhteydessä.

- `host: '127.0.0.1'`: Tietokantapalvelimen isäntäosoite. Tämä on paikallinen palvelin.
- `user: 'root': tietokannan käyttäjänimi.
- `portti: '3306': Tietokannan portin numero. MySQL:n oletusportti on 3306.
- `salasana: 'root': tietokannan salasana.
- `tietokanta: 'testi'`: yhdistettävän tietokannan nimi.

3. **Vientiyhteysallas**:
``` javascript
module.exports = db;
```
Tämä koodirivi vie yhteyspooliobjektin "db", jotta muut moduulit voivat tuoda ja käyttää tätä yhteyspoolia "require"-menetelmän avulla.

Tämän yhteyspoolin avulla voit ottaa sen käyttöön muissa moduuleissa ja käyttää sitä tietokantakyselyjen suorittamiseen. Esimerkiksi:

``` javascript
//Ota käyttöön tietokantayhteyspooli
const db = vaatia('./polku/tähän/moduuliin');

//Suorita tietokantakysely
db.query('SELECT * FROM user', (err, tulokset) => {
jos (err) {
console.error('Virhe suoritettaessa kyselyä:', err);
palata;
}
console.log('Kyselyn tulokset:', tulokset);
});
```

Tällä menetelmällä on helppo hallita ja käyttää tietokantayhteyksiä, erityisesti sovelluksissa, jotka vaativat usein pääsyä tietokantoihin.

(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. Täydennä noviisi tietämystä

Jos et ymmärrä, lue lisää :/

Palvelu-pääte：

Luo Express-palvelin ja määritä tietokantayhteyspooli.
Määritä väliohjelmisto, joka sallii verkkotunnusten väliset pyynnöt.
Määritä GET-reitti tietokannan kyselyä ja tietojen palauttamista varten.

asiakas：

Käytä Axiosta HTTP-pyyntöjen lähettämiseen Vue-komponentin palvelimelle.
Hanki tiedot ja näytä ne sivulla.

"Käyttämällä tätä yhteyspoolia voit ottaa sen käyttöön muissa moduuleissa ja käyttää sitä tietokantakyselyjen suorittamiseen - Mitä muut moduulit ovat?

Se on palvelimen palvelinpuolen koodi.

Tässä yhteydessä "muut moduulit" viittaavat yleensä muihin Node.js-projektisi JavaScript-tiedostoihin, eivät Vue-komponentin .vue-tiedostoon. Erityisesti nämä muut moduulit ovat tyypillisesti palvelinpuolen koodeja, jotka käsittelevät HTTP-pyyntöjä ja tietokantavuorovaikutuksia.

Tyypillinen projektirakenne voi näyttää tältä:

```
projekti/
├── palvelin/
│ ├── db.js // Antamasi tietokantayhteyspoolikoodi
│ ├── routes.js // Moduuli, joka määrittää API-reitityksen
│ └── server.js // Tiedosto, joka käynnistää palvelimen, mitä vastaan tässä on
└── asiakas/
├── src/
│ ├── komponentteja/
│ │ ├── YourComponent.vue // Vue-komponenttisi
│ ├── main.js // Vue-projektin syöttötiedosto
│ └── ... // Muut käyttöliittymätiedostot
└── package.json
```

Tässä rakenteessa "server/"-kansio sisältää palvelinpuolen koodin, kun taas "client/"-kansio sisältää käyttöliittymän Vue-koodin.

### Esimerkki: Tietokantayhteyspoolin käyttäminen palvelinpuolella

Olettaen, että sinulla on jo "server/db.js"-tiedosto, joka määrittää tietokantayhteyspoolin, voit ottaa sen käyttöön ja käyttää sitä "server/routes.js"-tiedostossa:

``` javascript
// server/routes.js
const express = vaatia('express');
const db = vaatia('./db'); //Ota käyttöön tietokantayhteyspooli

const reititin = express.Router();//Minulla ei ole käyttöä tälle routers.js-osalle. Muut osat on koottu index.js-tiedostoon, ja yhdessä ymmärrämme, että "otamme käyttöön tietokantayhteyden pool-asetuksen verkkotunnusten väliset asetukset. tarpeiden mukaan" Pääsy? -Aseta reititys-(lopullinen tarkoitus) käynnistä palvelin"

//Määritä esimerkkireitti
router.get('/users', (req, res) => {
db.query('SELECT * FROM user', (err, tulokset) => {
jos (err) {
return res.status(500).json({ virhe: err.message });
}
res.json(tulokset);
});
});

module.exports = reititin;
```

Asenna ja käynnistä sitten Express-palvelin tiedostossa "server/server.js" ja käytä määritettyjä reittejä:

``` javascript
// palvelin/palvelin.js
const express = vaatia('express');
const app = express();
const routes = vaatia('./routes'); //Ota käyttöön määritellyt reitit

app.use('/api', routes); // Käytä reititystä

const portti = 3000;
app.listen(port, () => {
console.log(`Palvelin toimii osoitteessa http://localhost:${port}`);
});
```

### API:n käyttö Vue-komponenteissa

Vue-komponentissasi voit käyttää Axiosta HTTP-pyyntöjen lähettämiseen yllä määritellylle API:lle:

``` vue
<template>
<div>
<h2>Käyttäjät</h2>
<ul>
<li v-for="user in users" :key="user.id">
{{ käyttäjätunnus }} - {{ user.email }}
</li>
</ul>
</div>
</template>

<script>
tuoda aksioita "aksioista";

vie oletusarvo {
data() {
return {
käyttäjät: []
};
},
asennettu() {
axios.get('http://localhost:3000/api/users')
.then(response => {
this.users = vastaus.data;
})
.catch(error => {
console.error('Virhe haettaessa käyttäjiä:', virhe);
});
}
};
</script>
```

Tällä tavalla erottamalla käyttöliittymän ja taustan logiikka voit paremmin järjestää ja hallita koodia varmistaen samalla, että palvelinpuoli käsittelee tietokantavuorovaikutuksia, kun taas käyttöliittymä käsittelee tiedonkeruun ja -näytön API:n kautta.

3.

1) Palvelimen täytyy kuunnella! ! Vain monitoroinnin aikana voit ajaa projektin ja nähdä taustatiedot. Vain seuraavat vaiheet:

Project/src/sserver/——cmd——node index.js-komento, aloita katselu

Oikea seuranta näyttää:

Toiseksi huomasin, että voin käyttäähttp://localhost:3000/api/usersNäen oikeat JSON-tiedot, mutta en voi käyttää osoitetta http://localhost:3000. Ratkaisu on seuraava:

Muokkaa optionOne.vue:ta:


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. Kirjautumissivun lisääminen

Lisää ensin resurssikansioon: img on sivun kuva, joka kirjattiin sisään alussa, ja css-kansio

Lisää sitten Login.vue, sisäänkirjautumisen reititin

Viimeinen vaihe on säätää edellistä sivua, erottaa App.vue (yhteensä), kapseloida se, piirtää kehys sivun vasempaan reunaan erillisen Bar.vue:n luomiseksi, ja sitten jos haluat nähdä tämän palkin jokaisella sivulle, sinun on lisättävä se jokaiselle sivulle Lisää viittaus Bar.vue-tiedostoon .vue.