[技术探索]前端实现后端数据模拟的几种方法
2018-09-10 本文已影响0人
杨山炮
1.0 MockJs
- 用法简单：符合直觉的接口。
- 前后端分离：让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性：通过随机数据，模拟各种场景。
- 开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
- 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
- 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。
2.0 json-server
- 安装json-server
npm install -g json-server
- 手动创建模拟的数据 users.json
{
"usergroup": [
{"id":1,"name":"yyyyy","age":25},
{"id":2,"name":"yyyyy","age":205},
{"id":3,"name":"yyyyy","age":250},
{"id":4,"name":"yyyyy","age":215}
]
}
- 在数据文件目录下开启数据模拟接口服务
json-server users.json
Loading users.json
Done
Resources
http://localhost:3000/usergroup
Home
http://localhost:3000
- 浏览器中输入地址http://localhost:3000/users就能看到输出user.json的内容
-
开启服务器代理参考http-proxy-middle模块
json-server效果图.jpg
3.0 Charles工具
下载Charles工具》Tool》Map Local》enable Map local》Add
Charles映射本地数据文件.jpg
Protocol协议,Host:一般localhost,Port：端口自定义，query:查询字符，path:路径。LocalPath：本地的数据文件
charles工具效果图.jpg
