前端该如何优雅地 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
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
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
