搭建easy-mock数据模拟服务器

大家都知道,我们主要提供的是前端可视化研发的,包括2d拓扑可视化,2d电力,工业组态可视化,三维可视化,大屏可视化等。大约效果是长这个样子吧:

搭建easy-mock数据模拟服务器
大屏 三维可视化
搭建easy-mock数据模拟服务器
网管拓扑
搭建easy-mock数据模拟服务器
电力组态

所谓可视化,肯定需要有数据支撑,一般来说,后期都会和客户的数据服务进行对接。

然而在开始开发的时候,一般都是开发人员自己模拟。很多时候一个项目的数据模拟也会占用不少的时间。

数据模拟

相信大家都有各自的办法。比如说,

  • 将 Mock 数据写在代码里
  • 利用请求拦截
  • 利用 Charles 等代理工具,将 URL Map 到本地文件

上面这些方法虽然可以解决我们的问题,但同样伴随着一些问题。比如说,

  • 脏代码
  • 依赖特定的框架
  • 增加切换成本
  • 接口数据结构重构需要手动更新
  • 效率低下
  • 无法优雅的进行协同编辑
  • 无法持久化

模拟数据服务器

因此,我们希望能够搭建一个可以配置的模拟数据的服务器。 大家都知道mockjs是一个功能很强大的数据模拟插件,首先我们想到的是自己搭建一个服务器,通过配置调用mockjs,来生成模拟数据。但是简单思考了下,发现工作量也不小。

最终考虑到使用easy-mock,这应该是最快捷的方式。easy-mock本身有个在线的服务。

但是建议大家如果是一些较正式的项目数据,不要使用在线的服务,因为我们之前就有一个项目使用了在线的easy-mock服务,一次客户要给领导演示,前面我们各种测试,没有问题。正式演示的时候,发现效果出不了了,经过查找,发现在线的easy-mock服务挂掉了。悲催,easy-mock服务经常会挂掉,不过也能理解 ,人家免费开源,够意思了还说啥呢。

因此,建议搭建自己的easy-mock服务势在必行。

搭建easy-mock服务器

下面介绍大家如何搭建easy-mock服务器,首先easy-mock的github地址如下:
https://github.com/easy-mock/easy-mock

在此页面(后面称之为官网吧),其实有简单的介绍如何搭建,不过是英文的。

安装nodejs、mogondb、redis

由于easy-mock依赖于nodejs、mogondb、redis。所以需要安装这三项。
其中  Node.js(v8.x,不支持 v10.x)& MongoDB(>= v3.4)& Redis(>= v4.0)。
(需要严格按照规定的版本号进行安装,否则可能出现不能启动的问题)

相关的安装说明,此处就不赘述了。相信

安装easy-mock

安装easy-mock 也比较简单,首先从git地址clone easy-mock到本地:

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

cd 到easy-mock目录,并调用npm install 安装相应的node 模块:

cd easy-mock
 npm install

实际过程发现用npm install 会出现很多错误,要不断的多修复几次才能成功;所以建议直接用cnpm install。

配置easy-mock

前面说了,easy-mock使用了mongodb和redis,所以最主要的是要配置他们的连接信息,找到config/default.json文件,修改如下图中的红框内的内容即可:

搭建easy-mock数据模拟服务器
配置

启动easy-mock

首先启动mongodb和redis服务,然后在easy-mock工程下,调用npm run dev 可以启动easy-mock服务。浏览器中输入发我地址即可访问:

搭建easy-mock数据模拟服务器
页面

如果未注册,直接输入任意用户名密码即可注册并登陆; 已经注册,输入注册的用户名及其密码即可登陆。

创建项目

easy-mock中,可以创建项目,其默认有一个演示项目。项目分为个人项目和团队项目,团队项目的可以添加团队成员,个人项目只属于个人。如下图所示:

无论是团队项目还是个人项目,点击添加按钮既可以添加项目:

搭建easy-mock数据模拟服务器
添加项目按钮

点击按钮,转到添加项目的页面:

搭建easy-mock数据模拟服务器
添加项目

创建接口

点击创建的项目,可以进入到项目的页面,在该页面上面,有一个创建接口的按钮,如下图所示:

搭建easy-mock数据模拟服务器
image.png

点击该按钮,就可以创建一个数据接口,输入接口名称(地址),在左侧输入mock语法来创建接口返回的随机数据:

搭建easy-mock数据模拟服务器
创建接口

mock 语法

再接口的地方,可以很方便的用mock语法来模拟数据。基本语法如下

基本语法

1. 属性值是字符串 String

‘name|min-max’: string:通过重复 string 生成一个字符串,重复次数大于等于 min,小于等于 max。
‘name|count’: string:通过重复 string 生成一个字符串,重复次数等于 count。

2. 属性值是数字 Number

‘name|+1’: number:属性值自动加 1,初始值为 number
‘name|min-max’: number:生成一个大于等于 min、小于等于 max 的整数,属性值 number 只是用来确定类型。
‘name|min-max.dmin-dmax’: number:生成一个浮点数,整数部分大于等于 min、小于等于 max,小数部分保留 dmin 到 dmax 位。

 'number1|1-100.1-10': 1,
    'number2|123.1-10': 1,
    'number3|123.3': 1,
    'number4|123.10': 1.123

// =>
{
    "number1": 12.92,
    "number2": 123.51,
    "number3": 123.777,
    "number4": 123.1231091814
}
3.属性值是布尔型 Boolean

‘name|1’: boolean:随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
‘name|min-max’: value:随机生成一个布尔值,值为 value 的概率是 min / (min + max),值为 !value 的概率是 max / (min + max)。

4.属性值是对象 Object

‘name|count’: object :从属性值 object 中随机选取 count 个属性
‘name|min-max’: object:从属性值 object 中随机选取 min 到 max 个属性。

5. 属性值是数组 Array

‘name|1’: array 从属性值 array 中随机选取 1 个元素,作为最终值。
‘name|+1’: array从属性值 array 中顺序选取 1 个元素,作为最终值。
‘name|min-max’: array通过重复属性值 array 生成一个新数组,重复次数大于等于 min,小于等于 max。
‘name|count’: array:通过重复属性值 array 生成一个新数组,重复次数为 count。

6.属性值是函数 Function

‘name’: function:执行函数 function,取其返回值作为最终的属性值,函数的上下文为属性 ‘name’ 所在的对象。

7. 属性值是正则表达式 RegExp

‘name’: regexp:根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

8. 示例

比如一个示例如下:

{
  "data": {
    'value1|1-3': 0,
    'value2|1-3': 0,
    'value3|1-3': 0,
    'total': function() {
      return this.value1 + this.value2 + this.value3
    },
  }
}

// 返回列表
{
  "data|1-10": [{
    'name': '@cname', // 中文名称
    'id|+1': 88, // 属性值自动加 1,初始值为88
    'age|18-28': 0, // 18至28以内随机整数, 0只是用来确定类型
    'birthday': '@date("yyyy-MM-dd")', // 日期
    'city': '@city(true)', // 中国城市
    'color': '@color', // 16进制颜色
    'isMale|1': true, // 布尔值
    'isFat|1-2': true, // true的概率是1/3
    'brother|1': ['jack', 'jim'], // 随机选取 1 个元素
    'sister|+1': ['jack', 'jim', 'lily'], // array中顺序选取元素作为结果
    'friends|2': ['jack', 'jim'], // 重复2次属性值生成一个新数组
    'func': function() {
      return this.name;
    }
  }]
}

{
  "data": {
    "string|1-10": "★",
    "string2|3": "★★",
    "number|+1": 202,
    "number2|1-100.1-10": 1,
    "boolean|1": true,
    "regexp": /[a-z][A-Z][0-9]/,
    "absolutePath": "@/string @/user/name",
    "user": {
      "name": "demo"
    },
    "object|2": {
      "310000": "上海市",
      "320000": "江苏省"
    },
    "array|1": ["AMD"]
  }
}

响应数据

如果能根据传入的参数动态返回数据该多好?Easy Mock 支持处理 Request 对象。也就是说我们可以通过 Request 对象的某些属性进行条件判断,从而实现 响应式数据。包括如下属性:

  • header
  • method
  • url
  • querystring
  • host
  • hostname
  • query
  • cookies

比如如下代码:

{
  success: true,
  data: {
    default: "hah",
    _req: function({
      _req
    }) {
      return _req
    },
    name: function({
      _req
    }) {
      return _req.query.name || this.default
    }
  }
}

通过 _req对象返回名称。

Restful

Easy Mock 支持 /restful/:id/list 或者 /restful/{id}/list 这样的接口地址。

接口代理

Easy Mock 支持url地址代理。比如直接输入地址:

https://api.m.sohu.com/autonews/pool/?n=%E6%96%B0%E9%97%BB&s=1

easy-mock的缺点

使用easy-mock之后,感觉其还是很方便的,功能也挺强大。 但是其也有缺点:

  1. 用户管理很弱,随便谁都可以登录,没有很好的控制;如果用户权限控制需求比较严格的,就不太适合。
    2.项目编号超长,而且不能修改,模拟数据的接口,都会带上项目编号。因此你想要记住地址是不可能的,只能登录easy-mock网站,去copy地址。

如果对以上两点要求很高,可以考虑自己修改开源代码。

总体来说 使用easy-mock,能够极大的减少前端模拟数据的工作量。

如果你觉得不错,请点赞和转发。

原文出处:微信公众号【 ITman彪叔 ITman彪叔】

原文链接:https://mp.weixin.qq.com/s/nxVGF_uivrp823Ld_QHocw

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论