本地前端开发-模拟接口快速搭建 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);
});