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

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