前端项目mock数据

需要用的库

• express（模拟后端代码） https://www.expressjs.com.cn/
• axios（请求api） https://www.kancloud.cn/yunye/axios/234845
• mock.js（模拟假数据） http://mockjs.com/

(1)、项目根目录下新建文件server.js
注：更多mock语法请参考官方：http://mockjs.com/

const express = require("express");
var Mock = require("mockjs");
const app = express();
app.get("/api/info", (req, res) => {
  var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    "list|1-10": [
      {
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        "id|+1": 1,
      },
    ],
  });
  res.json(JSON.stringify(data, null, 2));
});
app.listen("9000");  //暴露端口号

(2)、webpack配置代理注：代理的端口号应和server.js暴露的端口保持一致

devServer: {
    proxy: {
      "/api": "http://localhost:9000",
    },
  }

(3)、启动项目的同时，在命令行用node启动后端服务

node server.js

(4)、然后就能在业务里调用接口模拟数据啦

import axios from "axios";
axios.get("/api/info").then((res) => {
  console.log("返回结果", res.data);
});