1. 配置import { defineConfig } from vite import vue from vitejs/plugin-vue import { resolve } from path export default defineConfig({ plugins: [vue()], resolve: { alias: { : resolve(__dirname, src) } }, server: { proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true, } } } })Vue 前端配置在/api路徑下配置代理將請(qǐng)求轉(zhuǎn)發(fā)到后端地址 http://127.0.0.1:8000/api/changeOrigin: true修改請(qǐng)求頭中的Origin為目標(biāo)地址避免后端因 Origin 校驗(yàn)拒絕請(qǐng)求。2. 接口格式// 加載圖書(shū)列表 1. 在掛載時(shí)加載 // const loadBook () { // axios.get(/api/book/?page${query.value.page}page_size${query.value.page_size}) // .then(res { // console.log(后端返回, res.data) // tableData.value res.data.data // totalNum.value res.data.count_total // }) // .catch(err console.error(err)) // }1. 方法一axios.get(調(diào)用路徑/?分頁(yè)參數(shù) 查詢條件).then請(qǐng)求成功后觸發(fā).then中的回調(diào)函數(shù)。.catch請(qǐng)求失敗后觸發(fā)。相當(dāng)于一個(gè) if-else 判斷如果成功執(zhí)行成功邏輯如果失敗則提示錯(cuò)誤。2. 方法二// 加載圖書(shū)列表 2. 在事件中加載 const loadBook () { axios.get(/api/book/, {params: query.value}) .then(res { console.log(res.data) tableData.value res.data.data totalNum.value res.data.count_total }) .catch(err console.error(err)) }在事件中加載時(shí)將參數(shù)放在請(qǐng)求體{params: query.value}中params中傳遞數(shù)據(jù)不在路由中傳遞。3. 添加、編輯接口!-- 新增、編輯共用彈窗 -- el-dialog v-modeldialogVisible title圖書(shū)表單 width520px el-form label-width90px el-form-item label書(shū)名 el-input v-modelform.name/el-input /el-form-item el-form-item label價(jià)格 el-input v-model.numberform.price/el-input /el-form-item el-form-item label庫(kù)存數(shù)量 el-input v-model.numberform.numbers/el-input /el-form-item !-- 分類下拉選擇 -- el-form-item label分類 el-select v-modelform.category_id placeholder請(qǐng)選擇分類 stylewidth: 100% el-option label文學(xué)小說(shuō) value1 / el-option label計(jì)算機(jī)編程 value2 / el-option label歷史人文 value3 / el-option label心理學(xué) value4 / el-option label美食菜譜 value5 / /el-select /el-form-item /el-form template #footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm確定提交/el-button /template /el-dialog組件定義彈窗變量dialogVisible false默認(rèn)未打開(kāi)點(diǎn)擊后打開(kāi)并顯示數(shù)據(jù)綁定form中的空數(shù)據(jù)。如果輸入數(shù)據(jù)就將輸入的數(shù)據(jù)放到form中對(duì)應(yīng)的字段中。添加接口、編輯接口const submitForm () { if (operateMode.value add) { // 新增 axios.post(/api/book/, form.value) .then(() { ElMessage.success(新增成功) dialogVisible.value false loadBook() }) .catch(err { ElMessage.error(新增失敗) console.error(err) }) } else { // 編輯 axios.put(/api/book/${editBookId.value}, form.value) .then(() { ElMessage.success(修改成功) dialogVisible.value false loadBook() }) .catch(err { ElMessage.error(修改失敗) console.error(err) }) } }因?yàn)榫庉嫼吞砑庸δ茉谝黄鹦枰扰袛喈?dāng)前窗口是添加還是編輯然后調(diào)用對(duì)應(yīng)的接口。將請(qǐng)求體發(fā)送到后端form中是添加的數(shù)據(jù)傳到后端后添加到 MySQL 數(shù)據(jù)庫(kù)中。添加或編輯成功后將dialogVisible.value false關(guān)閉窗口。修改時(shí)只傳遞修改后的數(shù)據(jù)然后傳到后端接口進(jìn)行修改。