前端该如何优雅地 Mock 数据

作者：CRMEB

2022 年 8 月 09 日
陕西
本文字数：1153 字
阅读完需：约 4 分钟

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

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-bpVthImHD4eosZUNSFA?pwd=yu27提取码: yu27

复制代码

百度云链接不稳定，随时可能会失效，大家抓紧保存哈。

如果百度云链接失效了的话，请留言告诉我，我看到后会及时更新～

开源地址

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

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

发布于: 刚刚阅读数: 3

CRMEB

关注

还未添加个人签名 2021.11.02 加入

CRMEB就是客户关系管理+营销电商系统实现公众号端、微信小程序端、H5端、APP、PC端用户账号同步，能够快速积累客户、会员数据分析、智能转化客户、有效提高销售、会员维护、网络营销的一款企业应用

发布

暂无评论

创作场景

前端该如何优雅地 Mock 数据

一、什么是 Mock

二、Mock 的好处

三、实现 Mock

请求参数处理

写在最后

开源地址

CRMEB

评论