前端该如何优雅地Mock数据

77 阅读 0 评论 51 点赞

我是靠谱客的博主着急嚓茶，这篇文章主要介绍前端该如何优雅地Mock数据，现在分享给大家，希望可以做个参考。

一、什么是Mock

Mock在软件开发领域，我们将其理解成 “模拟数据”、“虚假数据”。

二、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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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

请求参数处理

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

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
    );
});