[技术探索]前端实现后端数据模拟的几种方法

1.0 MockJs

Mock官网案例

• 用法简单：符合直觉的接口。
• 前后端分离：让前端攻城师独立于后端进行开发。
• 增加单元测试的真实性：通过随机数据，模拟各种场景。
• 开发无侵入：不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

2.0 json-server

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

在线Mock数据接口

• https://www.easy-mock.com/
• YApi-高效、易用、功能强大的可视化接口管理平台