前端该如何优雅地 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 还有其他的的功能,这次只是简单的示例分享,有兴趣深挖的建议自行百度学习。
源码附件已经打包好上传到百度云了,大家自行下载即可~
链接: http://pan.baidu.com/s/14G-b...
提取码: yu27
百度云链接不稳定,随时可能会失效,大家抓紧保存哈。如果百度云链接失效了的话,请留言告诉我,我看到后会及时更新~
开源地址
码云地址: http://github.crmeb.net/u/defu
Github 地址: http://github.crmeb.net/u/defu
「其他文章」
- 天翼云全场景业务无缝替换至国产原生操作系统CTyunOS!
- 以羊了个羊为例,浅谈小程序抓包与响应报文修改
- 这几种常见的 JVM 调优场景,你知道吗?
- 如此狂妄,自称高性能队列的Disruptor有啥来头?
- 为什么要学习GoF设计模式?
- 827. 最大人工岛 : 简单「并查集 枚举」运用题
- 手把手教你如何使用 Timestream 实现物联网时序数据存储和分析
- 850. 矩形面积 II : 扫描线模板题
- Java 并发编程解析 | 基于JDK源码解析Java领域中的并发锁,我们可以从中学习到什么内容?
- 【手把手】光说不练假把式,这篇全链路压测实践探索
- 大厂钟爱的全链路压测有什么意义?四种压测方案详细对比分析
- 写个续集,填坑来了!关于“Thread.sleep(0)这一行‘看似无用’的代码”里面留下的坑。
- 857. 雇佣 K 名工人的最低成本 : 枚举 优先队列(堆)运用题
- Vue3 实现一个自定义toast(小弹窗)
- 669. 修剪二叉搜索树 : 常规树的遍历与二叉树性质
- 读完 RocketMQ 源码,我学会了如何优雅的创建线程
- 性能调优——小小的log大大的坑
- 1582. 二进制矩阵中的特殊位置 : 简单模拟题
- elementui源码学习之仿写一个el-switch
- 646. 最长数对链 : 常规贪心 DP 运用题