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

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

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

数据模拟

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

将 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

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

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

创建项目

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

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

点击按钮，转到添加项目的页面：

创建接口

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

点击该按钮，就可以创建一个数据接口，输入接口名称（地址），在左侧输入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之后，感觉其还是很方便的，功能也挺强大。但是其也有缺点：

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

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

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

更多优秀内容，欢迎关注公众号“ITman彪叔”。

搭建easy-mock数据模拟服务器相关推荐

Easy Mock - 数据模拟神器
开源公告由大搜车无线团队出品的 easy-mock 在线数据模拟服务上线至今已经有几个月时间了,近期网站刚更新了焕然一新的 2.0 版本,与此同时,我们还带来一个更重磅的消息: 今天正式将整个服务的 ...
vue前端用服务器上路径的图片展示_5分钟教你用nodeJS手写一个mock数据服务器
对于前端开发者而言,javascript正扮演着越来越重要的地位,它不仅能为浏览器端赋能,在web服务器方面也有很大的价值(我们可以用nodeJS来写服务端代码,启动web服务器),因此本文所要描述的 ...
linux搭建mcpe服务器_技术|如何搭建“我的世界”服务器
我们将通过一个一步步的.新手友好的教程来向你展示如何搭建一个"我的世界(Minecraft)"服务器.这将会是一个长期的多人游戏服务器,你可以与来自世界各地的朋友们一起玩,而不用在 ...
搭建git for windows服务器(100%可以成功)【转】
转自:http://blog.csdn.net/code_style/article/details/38764203 既然Git在linux下面非常好用,为什么还要搭建git windows的服务器 ...
nginx搭建rtmp协议流媒体服务器总结
最近在 ubuntu12.04+wdlinux(centos)上搭建了一个rtmp服务器,感觉还挺麻烦的,所以记录下. 大部分都是参考网络上的资料. 前提: 在linux下某个目录中新建一个nginx ...
搭建阿里云ecs服务器（一：购买）
搭建阿里云ecs服务器第一步:购买阿里云ecs服务器地域需要选择离自己比较近的,网速可能更快实例.服务器系统镜像.云盘存储根据自己的需求购买在网络和安全组中把80端口打开,其他可以默认在系统 ...
Nodejs中搭建一个静态Web服务器,通过读取文件获取响应类型
场景 Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览器等Web客户端提供文档,也可以放置网站文件让全世界浏览,还可以放置数据文件,让全世界下载.目前最主流的Web服务 ...
阿里云CentOS7.3搭建多用户私有git服务器(从安装git开始)
起因自己会有练手的不敢公开的项目,就自己搭建个服务器放自己的渣代码了. 在经历了连不上服务器.没有访问权限.没法提交以后,我打通了任督二脉. 我这个git服务器适合条件:1.就那么几个人小项目,不是 ...
使用移动自适应布局+easy mock实现移动界面的简单实现
一.使用easy mock模拟数据 easy mock链接地址二.自己写移动自适应布局自己编写主要是利用rem进行宽度栅格布局: html {/* 相当于一个界面适配器,pc以及移动端都可以进行设 ...

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