【重點突破】—— Easy Mock的使用及Mock.js規範
阿新 • • 發佈：2019-01-09
前言：線上使用Easy Mock視覺化工具，可以提供快速生成“模擬資料”的持久化服務；
Mock.js是一個JS外掛，指定了一套規範，而Easy Mock工具就遵循這些規範。
一、Easy Mock的使用
官網
- 官網地址：https://www.easy-mock.com/login
- 未註冊使用者直接登入便可註冊
使用
- 建立個人專案
- 自定義專案
- 建立完成
- 建立介面
- 介面設定
- 資料規則定義
- 編輯介面
- 更改資料
- 介面設定更新
- 預覽資料
二、Mock.js規範
官網
- 官網地址：http://mockjs.com/
- github地址：https://github.com/nuysoft/Mock/wiki/Getting-Started
- 文件地址：https://github.com/nuysoft/Mock/wiki
Node中使用
- 安裝
npm install mockjs
-
使用
// 使用 Mock var Mock = require('mockjs') var data = Mock.mock({ // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素 'list|1-10': [{ // 屬性 id 是一個自增數，起始值為 1，每次增 1 'id|+1': 1 }] }) // 輸出結果 console.log(JSON.stringify(data, null, 4))
Easy Mock中使用
- 常用語法
{ "cname": "@cname",//中文人名 "id": "@id",//生成20 位數字 "title": "@ctitle",//中文title "city": "@city",//中文城市 "ip": "@ip",//ip 地址 "email": "@email",//email "url": "@url",//url "cfirst": "@cfirst",//姓名，姓 "clast": "@clast",//姓名，名 "cword": "@cword('123456')",//123456 從中選取一個字元 "csentence": "@csentence(1,5)",//文字文段 "csentence5": "@csentence(5)",//文字文段 "cparagraph": "@cparagraph(1,3)",//文字文段 "string": "@string(11)",//輸出11 個字元長度的字串 "float": "@float(0,10)",//0 到 10 的浮點數 "int": "@integer(60,70)",//60 到 70 之間的整數 "boolean": "@boolean",//boolean 型別 true,false "array|1-3": [{ "id": "@integer(1,10)",//整數 1到10 取整數 "name": "cname" }],//陣列（隨機 1 到3個） "array_sort_add|+1": ["1", "2", "3"],//陣列1，2，3輪詢輸出 "boolean|1-2": true,//boolean 型別 true,false "actionType|1": ['click_url', 'open_resource_detail', 'open_resource_search'], "payload": function() { var returnClickUrl = { "linkUrl": "http://tob.zhisland.com/apph5" }; var returnResourceDetail = { "resourceId": "606" }; var returnResourceSearch = { "keyWords": "", "tagCategory": "1", "tag": "1" }; var s = this.actionType == 'click_url' ? returnClickUrl : this.actionType == 'open_resource_detail' ? returnResourceDetail : returnResourceSearch; return s; }//function 返回設定返回的資料 } -
生成資料結果
HTTP/1.1 200 OK Connection: keep-alive Content-Length: 642 Content-Type: application/json; charset=utf-8 Date: Wed, 02 Jan 2019 10:47:09 GMT Rate-Limit-Remaining: 0 Rate-Limit-Reset: 1546426030 Rate-Limit-Total: 2 Server: Tengine Vary: Accept, Origin X-Request-Id: 1a7e52b1-1545-4d50-b116-e6f502367067 { "cname": "戴明", "id": "140000199106198361", "title": "備名廠廣是", "city": "晉城市", "ip": "87.190.38.52", "email": "[email protected]", "url": "nntp://byw.no/mbvxjmqsig", "cfirst": "葉", "clast": "麗", "cword": "1", "csentence": "辦號。", "csentence5": "辦號。", "cparagraph": "問影系標直放則地織理值已進特長。義百變速社證展越具至日命管示事幾來。交往節史或日將及整毛有片路年且。", "string": "OmEZeo*%7bR", "float": 5.97002, "int": 69, "boolean": false, "array": [ { "id": 6, "name": "cname" }, { "id": 6, "name": "cname" } ], "array_sort_add": "1", "actionType": "open_resource_detail", "payload": { "resourceId": "606" } } -
專案示例
{ "code": 0, "msg": "", "list|10": [{ //生成10組資料 "id|+1": 1, //自增長 "userName": '@cname', //隨機生成中文名 "sex|1-2": 1, //在1-2中隨機選擇 "state|1-5": 1, "interest|1-8": 1, "birthday": '2019-01-01', "address": '西虹市海淀區桃花公園', "time": '07:00' }], page: 1, page_size: 10, total_count: 30 } -
預覽效果
HTTP/1.1 200 OK Connection: keep-alive Content-Length: 1490 Content-Type: application/json; charset=utf-8 Date: Wed, 02 Jan 2019 11:04:43 GMT Rate-Limit-Remaining: 0 Rate-Limit-Reset: 1546427084 Rate-Limit-Total: 2 Server: Tengine Vary: Accept, Origin X-Request-Id: eba7dba0-9771-42cd-914c-069b1b0d802e { "code": 0, "msg": "", "list": [ { "id": 1, "userName": "楊磊", "sex": 1, "state": 4, "interest": 2, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 2, "userName": "謝平", "sex": 2, "state": 3, "interest": 2, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 3, "userName": "金磊", "sex": 1, "state": 4, "interest": 1, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 4, "userName": "張磊", "sex": 2, "state": 3, "interest": 7, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 5, "userName": "文偉", "sex": 2, "state": 5, "interest": 6, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 6, "userName": "何濤", "sex": 2, "state": 2, "interest": 3, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 7, "userName": "龔霞", "sex": 2, "state": 3, "interest": 8, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 8, "userName": "吳芳", "sex": 1, "state": 4, "interest": 4, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 9, "userName": "夏芳", "sex": 1, "state": 2, "interest": 2, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" }, { "id": 10, "userName": "廖豔", "sex": 1, "state": 2, "interest": 4, "birthday": "2019-01-01", "address": "西虹市海淀區桃花公園", "time": "07:00" } ], "page": 1, "page_size": 10, "total_count": 30 }
注：轉載請註明出處