Easy Mock的本地搭建和使用

Easy Mock 是一个可视化，并且能快速生成 模拟数据 的持久化服务。 忘掉下面这些实用但麻烦的 Mock 方式吧。在你用了 Easy Mock 之后，你肯定会爱不释手的。

1、解决的问题

开发时，后端还没完成数据输出，前端只好写静态模拟数据。

2、使用Easy Mock的优势

• 前后端分离：让前端工程师独立于后端进行开发。

• 增加单元测试的真实性：通过随机数据，模拟各种场景。

• 开发无侵入：不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。

• 用法简单：符合直觉的接口。

• 数据类型丰富：支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

• 方便扩展：支持支持扩展更多数据类型，支持自定义函数和正则。

• 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变url地址即可。

本地搭建easy-mock

搭建前提：需要已安装node.js，且版本是8.v的版本，其它版本有可能使用不了esay-mock

1、下载解压 easy-mock项目

https://github.com/easy-mock/easy-mock

注意：config下面的default.json中host:"0.0.0.0"改成  "host": "127.0.0.1",不改可能会访问不到。

注意：node.js要8.v的版本

2、使用VSCode打开项目后执行命令

npm install​​​​​​​

等待相关依赖下载完成。

3.安装monggoDB (版本>= v3.4 )

安装参考地址：https://www.runoob.com/mongodb/mongodb-window-install.html

安装完成后记得打开链接，验证是否能连接上monggoDB 。

4.安装 redis （版本>= v4.0）

安装参考地址：https://www.runoob.com/redis/redis-install.html

在redis安装目录按住shift+鼠标右键打开cmd 执行如下命令

redis-server.exe redis.windows.conf

另启一个 cmd 窗口测试redis，原来的不要关闭，不然就无法访问服务端了。

redis-cli.exe -h 127.0.0.1 -p 6379

set myKey abc

get myKey

测试完成，redis能正常使用。

5.运行Easy Mock

npn run dev

 

6.使用Easy Mock

输入任务用户名和密码进入系统，然后创建项目

7.Mock数据的JSON示例

{
  "success": true,
  "code": 20000,
  "message": "demo演示",
  "data": {
    //随机产生1-10条数据
    "items|1-10": [{
      //id自动生成
      "id": "@id",
      //c表示中文，不加c就默认产生英文的
      "name": "@cname",
      //随机的中文句子
      "intro": "@csentence",
      //随机的段落
      "career": "@cparagraph",
      //列表值中选一个
      "level|1": [1, 2, 3],
      //生成文字头像图片，宽高，背景色，前景色，文字
      "avator": "@image('200x100','#50B347','#FFF','Mock')",
      //排序字段，生成1-100直接的数据，示例1
      "sort|1-100": 1,
      //布尔值给一个值即可
      "deleted|1": true,
      //时间随机生成
      "gmtCreate": "@datetime",
      "gmtModified": "@datetime"
    }]
  }
}

上面是加了注释的版本，下面这个可以直接复制使用

{
  "success": true,
  "code": 20000,
  "message": "demo演示",
  "data": {
    "items|1-10": [{
      "id": "@id",
      "name": "@cname",
      "intro": "@csentence",
      "career": "@cparagraph",
      "level|1": [1, 2, 3],
      "avator": "@image('200x100','#50B347','#FFF','Mock')",
      "sort|1-100": 1,
      "deleted|1": true,
      "gmtCreate": "@datetime",
      "gmtModified": "@datetime"
    }]
  }
}

生成的图片访问测试：

Mock的接口访问测试：