本地前端开发-模拟接口快速搭建 nodejs
1.新建 server 文件夹,初始化并安装依赖
mkdir server && cd server npm init -y npm install express cors --save
2.创建 server/index.js 作为服务入口:
const express = require('express');
const cors = require('cors');
const app = express();
// 允许跨域
app.use(cors());
// 解析 JSON 请求体
app.use(express.json());
// 模拟活动列表接口
app.get('/api/activity', (req, res) => {
// 获取分页参数
const { page = 1, pageSize = 5 } = req.query;
const pageNum = parseInt(page);
const size = parseInt(pageSize);
// 模拟总数据(这里用数组模拟数据库)
const total = 20; // 假设总共有20条数据
const list = [];
for (let i = (pageNum - 1) * size; i < pageNum * size && i < total; i++) {
list.push({
id: i + 1,
title: `活动${i + 1}`,
time: `2024-10-${i % 30 + 1}`,
status: i % 3 === 0 ? '进行中' : i % 3 === 1 ? '已结束' : '未开始'
});
}
// 返回响应
res.json({
code: 200,
message: 'success',
data: { total, list }
});
});
// 启动服务
const port = 3001;
app.listen(port, () => {
console.log(`Mock server running at http://localhost:${port}`);
});3.启动服务:
node server/index.js
4. 前端请求时指定服务地址:
axios.get('http://localhost:3001/api/activity?page=1&pageSize=5').then(res => {
console.log(res.data);
});