欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端使用 easyMock 和 Mock.js 实现模拟数据

程序员文章站 2022-07-10 10:38:58
...

通常的开发都是前后端分离的,而前端的小伙伴需要一些数据来开发页面,这时我们可以使用 mock 进行数据的模拟。


使用的方法也很简单。

登录 easy-mock 官网 https://www.easy-mock.com/login
前端使用 easyMock 和 Mock.js 实现模拟数据
注册自己的账号

前端使用 easyMock 和 Mock.js 实现模拟数据
前端使用 easyMock 和 Mock.js 实现模拟数据
点击创建之后的新项目

前端使用 easyMock 和 Mock.js 实现模拟数据
创建你需要的接口
前端使用 easyMock 和 Mock.js 实现模拟数据
这里可以使用 Mock.js 的规则填写,使得接口的创建更加方便快捷

Mock.js 官网 http://mockjs.com/

例如这样填写

{
  "code": 0,
  "result": {
    "page": 1,
    "page_size": 10,
    "total_count": 60,
    "page_count": 6,
    "item_list|10": [{
      "id|+1": 1,
      "name": "@city",
      "mode|1-2": 1,
      "op_mode|1-2": 1,
      "franchisee_id": 77,
      "franchisee_name": "松果白鹭",
      "city_admins|1-2": [{
        "user_name": "@cname",
        "user_id|+1": 10001
      }],
      "open_time": "@datetime",
      "sys_user_name": "@cname",
      "update_time": 1520476737000
    }]
  }
}

具体的语法规范可以参照 Mock.js 官网 https://github.com/nuysoft/Mock/wiki/Syntax-Specification