关于前端:前端该如何优雅地-Mock-数据

47次阅读

共计 1513 个字符，预计需要花费 4 分钟才能阅读完成。

一、什么是 MockMock
在软件开发畛域，咱们将其了解成“模仿数据”、“虚伪数据”。
二、Mock 的益处
益处有很多，一句话概括，有了 Mock，前后端人员只须要定义好接口文档就能够开始并行工作，互不影响。

三、实现 Mock
1. 装置 node.js
2. 装置其余依赖包

express (express 框架): npm install express -g
express-generator (express 我的项目生成插件): npm install express-generator -g
mockjs (模仿数据生成库): npm install mockjs
3. 生成新的 express 我的项目并编写服务端

新建 server.ts

import express, {
Express,
Router,
Request,
Response,
NextFunction,
} from "express";
import Mock, {Random} from "mockjs";
const app: Express = express();

const router: Router = express.Router();

app.use("*", (req: Request, res: Response, next: NextFunction) => {res.header("Access-Control-Allow-Origin", "*");
next();});

app.use("/api", router);

router.get("/list", (req: Request, res: Response) => {
let currPage = req.query;
res.json(
    Mock.mock({
      "data|10": [
        {
          "id|+1": 1,
          name: "@cname",
          time: "@datetime", // 日期先疏忽
          "source|80-100": Random.natural(80, 100),
        },
      ],
    })
  );
});

app.listen(9000, (): void => {console.log("success serve");
});

开命令行，输出 node server.js

在浏览器中输出：http:localhost:9000/api/list

申请参数解决

router.get("/index", (req: Request, res: Response) => {console.log(req.query);
  let num = req.query.num;
  let name_query = req.query.name;

  let res_body = {
      "code": 200,
      "msg": "胜利",
      "data": {}}

  if (num=='0'){
      res_body.data={"query_value_name" : name_query}
  }else{
      res_body.data={"body_value_name" : '小何'}
  }

  res.json(res_body);
});

写在最初