前端负责用户界面展示和交互体验，后端负责业务逻辑和数据处理。这里后端使用文件替代数据库，
前端使用引入式VUE3和JS原生的Fetch请求，充分使用await/async/promises，主要目标是打通数据传输，尽可能简化其他，合理使用中文变量名加速理解。
- 前端:Vue3+Fetch请求
- 后端:Express5.0+JSON文件(数据源)
- 数据:JSON格式传输
项目《人物数据》展示
一、后端 Node.js
1. json数据文件(代替数据库)
[
{ "id": "11", "num": "202411", "name": "刘备", "gender": "男" },
{ "id": "12", "num": "202412", "name": "甘夫人", "gender": "女" },
{ "id": "13", "num": "202413", "name": "关羽", "gender": "男" },
{ "id": "14", "num": "202414", "name": "糜夫人", "gender": "女" },
{ "id": "15", "num": "202415", "name": "张飞", "gender": "男" },
{ "id": "16", "num": "202416", "name": "孙夫人", "gender": "女" },
{ "id": "17", "num": "202417", "name": "诸葛亮", "gender": "男" },
{ "id": "18", "num": "202418", "name": "黄月英", "gender": "女" },
{ "id": "19", "num": "202419", "name": "赵云", "gender": "男" },
{ "id": "20", "num": "202420", "name": "张星彩", "gender": "女" },
{ "id": "21", "num": "202421", "name": "孙权", "gender": "男" },
{ "id": "22", "num": "202422", "name": "大乔", "gender": "女" },
{ "id": "23", "num": "202423", "name": "周瑜", "gender": "男" },
{ "id": "24", "num": "202424", "name": "小乔", "gender": "女" },
{ "id": "25", "num": "202425", "name": "陆逊", "gender": "男" },
{ "id": "26", "num": "202426", "name": "步练师", "gender": "女" },
{ "id": "27", "num": "202427", "name": "吕蒙", "gender": "男" },
{ "id": "28", "num": "202428", "name": "徐盛", "gender": "女" },
{ "id": "29", "num": "202429", "name": "甘宁", "gender": "男" },
{ "id": "30", "num": "202430", "name": "潘璋", "gender": "女" }
]
2. 启动服务器并访问首页
需要使用pnpm工具安装第三方模块express和cors
express 用于构建 Web 应用程序的 Node.js 轻量框架，
cors 用于处理跨域请求的中间件。
pnpm install express
pnpm install cors
node API
注：以上终端窗口请勿关闭，关闭=服务器关闭页面无法访问
3. 服务器API完整代码
主要监听
首页 http://127.0.0.1:3000/
const express = require('express') //pnpm install express
const app = express()
const port = 3000
const cors = require('cors') //pnpm install cors
const fsPro = require('fs/promises')
// 使用cors中间件，允许所有域名的跨域请求
app.use(cors());
app.get('/', (req, res) => {
console.log(` 有人访问 ${Math.random()}`)
res.send(`你好!`)
})
app.get('/stu/:id',async (req, res) => {
const id = req.params.id;
if ( !['1','2','3','4','5'].includes(id) ) {
return res.status(404).json({ error: '不存在这样的数据' });
}
let 数据 =await 读取JSON(`${id}班.json`);
res.send(数据)
});
app.listen(port, () => {
console.log(`http://127.0.0.1:${port}/ 服务器工作在端口： ${port}`)
})
async function 读取JSON(文件路径) {
try {
// 读取文件内容
const 原始数据 = await fsPro.readFile(文件路径, 'utf-8');
// 解析JSON数据
const 解析后的数据 = JSON.parse(原始数据);
return 解析后的数据;
} catch (错误) {
// 处理错误
console.error('读取或解析文件时发生错误:', 错误);
}
}
4. 访问数据接口
数据接口 http://127.0.0.1:3000/stu/5
当用户访问时，服务器调用Node.js代码返回JSON格式数据
二、前端 Vue3
1. 运行效果
2. 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端测试页</title>
<script src="https://unpkg.com/vue@3.2.8/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click = getStu(5)>拿到5班</button>
<button @click = getStu(1)>拿到1班</button>
<button @click = getStu(2)>拿到2班</button>
<ul style="border: 5px solid red;padding: 10px;">
<li v-for="one in arr">
{{ one.name }}
</li>
</ul>
</div>
<script>
let 数据 ={
arr:[]
}
const App = {
data() { return 数据 },
methods:{
async getStu(n){
this.arr = await 获取(n)
}
},
async mounted(){
}
}
Vue.createApp(App).mount('#app')
async function 获取(n=1){
let 响应 = await fetch(`http://127.0.0.1:3000/stu/${n}`)
let 数据 = await 响应.json()
console.log(数据)
return 数据
}
</script>
</body>
</html>
