大家都知道，我們主要提供的是前端可視化研發的，包括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數據模擬服務器