--- theme: vue-pro --- ### 效果图-车辆登记的表格 ![16.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/fd2125c180ab4be59580a7987af0bd83~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zq-6YGT5aW55Zac5qyi5oiR:q75.awebp?rk3s=f64ab15b&x-expires=1766445454&x-signature=mfM1eViXY69RbRkV37jxClWDIOI%3D) ![17.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dd4337341f0b43e3ab9c985ba1759028~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zq-6YGT5aW55Zac5qyi5oiR:q75.awebp?rk3s=f64ab15b&x-expires=1766445454&x-signature=ye02sgAjysKxuR%2BWoLb4cBuV1Nc%3D) ![18.PNG](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8affcbba23594f53b5a7f540c0aa1644~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6Zq-6YGT5aW55Zac5qyi5oiR:q75.awebp?rk3s=f64ab15b&x-expires=1766445454&x-signature=q0sZyyNmNnMn3NA3tKFEtqvTzPY%3D) ### 首先，要安装下面的几个库 `npm install axios express cors uuid element-plus` * **axios**：Axios是一个HTTP客户端，用于发送网络请求。 * **express**：Express是一个Web应用框架，用于构建Web应用。(这里用于模拟后端服务) * **cors**：CORS是一个标准，用于允许跨源请求。 * **uuid**：UUID是一种标准，用于生成全局唯一的标识符。(用于生成id) * **element-plus**：Element Plus是一个基于Vue的组件库，用于构建用户界面。 ### 配置代理(proxy) ```vue.config.js // 引入@vue/cli-service模块 const { defineConfig } = require('@vue/cli-service') // 导出配置 module.exports = defineConfig({ // 转译依赖 transpileDependencies: true, // 开发服务器配置 devServer: { // 代理配置 proxy: { // 代理路径 '/api': { // 目标地址 target: 'http://localhost:3000', // 是否改变源地址 changeOrigin: true, // 路径重写 pathRewrite: { // 将/api替换为空字符串 '^/api': '' } } } } }) ``` ### 表格数据存储 ```vehicle.json [ { "id": "fb81e40d-a4af-4311-9179-4f0e3ec9d342", "date": "2024/10/28", "number": "粤A12348", "brand": "奥迪", "type": "suv", "owner": "张三", "creator": "admin" }, { "id": "b60cbe58-a7fa-43f1-b97d-a947fd200779", "date": "2024/10/28", "number": "京B67890", "brand": "奔驰", "type": "mpv", "owner": "李四", "creator": "admin" }, { "id": "11dd2336-3cb9-4a8a-aa2d-9b181f9f4540", "date": "2024/10/28", "number": "沪C54321", "brand": "宝马", "type": "sedan", "owner": "王五", "creator": "admin" }, ] ``` ### 模拟后端服务 ```server.js const express = require("express"); // 引入express模块 const bodyParser = require("body-parser"); // 引入body-parser模块 const cors = require("cors"); // 引入cors模块 const fs = require("fs").promises; // 引入fs模块 const app = express(); // 创建express实例 const port = 3000; // 设置端口号 const { v4: uuidv4 } = require("uuid"); // 引入uuid模块 app.use(cors());// 使用cors模块解决跨域问题 app.use(bodyParser.json());// 使用body-parser模块解析请求体 // 读取车辆信息 async function getVehicle() { try { const data = await fs.readFile("./vehicle.json", "utf8"); return JSON.parse(data); } catch (error) { console.error("读取文件时发生错误:", error); throw error; } } // 获取车辆信息 app.get("/vehicle", async (req, res) => { try { const vehicle = await getVehicle(); res.json(vehicle); } catch (error) { console.error("Error reading file:", error); } }); // 添加车辆信息 app.post("/vehicle", async (req, res) => { try { const { number, brand, type, owner } = req.body; if (!number || !brand || !type || !owner) { return res.status(400).json({ message: "请填写完整信息" }); } const vehicle = await getVehicle(); const newVehicle = { id: uuidv4(), date: new Date().toLocaleDateString(), number, brand, type, owner, creator: "admin", }; vehicle.push(newVehicle); await fs.writeFile( "./vehicle.json", JSON.stringify(vehicle, null, 2), "utf8" ); return res.status(200).json({ message: "添加成功" }); } catch (error) { return res.status(500).json({ message: "服务器错误" }); } }); // 删除车辆信息 app.delete("/vehicle/:id", async (req, res) => { try { const { id } = req.params; const vehicle = await getVehicle(); const index = vehicle.findIndex((item) => item.id === id); if (index === -1) { return res.status(404).json({ message: "车辆未找到" }); } vehicle.splice(index, 1); await fs.writeFile( ".vehicle.json", JSON.stringify(vehicle, null, 2), "utf8" ); return res.status(200).json({ message: "删除成功" }); } catch (error) { console.error("服务器错误:", error); return res.status(500).json({ message: "服务器错误" }); } }); // 更新车辆信息 app.put("/vehicle/:id", async (req, res) => { try { const { id } = req.params; const { newNumber, newBrand, newType, newOwner } = req.body; if (!newNumber || !newBrand || !newType || !newOwner) { return res.status(400).json({ message: "请填写完整信息" }); } const vehicle = await getVehicle(); const index = vehicle.findIndex((item) => item.id === id); if (index === -1) { return res.status(404).json({ message: "车辆未找到" }); } vehicle[index] = { ...vehicle[index], number: newNumber, brand: newBrand, type: newType, owner: newOwner, }; await fs.writeFile( "./vehicle.json", JSON.stringify(vehicle, null, 2), "utf8" ); return res.status(200).json({ message: "更新成功" }); } catch (error) { console.error("服务器错误:", error); return res.status(500).json({ message: "服务器错误" }); } }); // 启动服务器 app.listen(port, () => { console.log(`服务器运行在 http://localhost:${port}`); }); ``` ### 实现表格 ```vehicle.vue ``` ***ok，以上就是全部过程，有不懂的，评论区讨论 <(￣ c￣)y▂ξ***