前端该如何优雅地 Mock 数据

语言: CN / TW / HK

一、什么是 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
      );
    });

写在最后

  • 作为一个前端开发,学会 Mock 是最基本的事情,不仅可以提高开发效率还可以把接口信息掌握在自己的手上。
  • 关于 mock 还有其他的的功能,这次只是简单的示例分享,有兴趣深挖的建议自行百度学习。

源码附件已经打包好上传到百度云了,大家自行下载即可~

链接: https://pan.baidu.com/s/14G-b...

提取码: yu27

百度云链接不稳定,随时可能会失效,大家抓紧保存哈。如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~

开源地址

码云地址: http://github.crmeb.net/u/defu

Github 地址: http://github.crmeb.net/u/defu