前後端分離--MockJS模擬API返回數據

其實，我們都知道前後端分離已經逐漸成爲業界項目開發標準方式。在Web開發前後端不分離的時代，開發人員既要開發前端，還得開發後端，而且視圖和業務邏輯混合在一起，這時候一般我們一個完整的開發流程是這樣的：前端根據UI設計稿設計html界面，然後後端實現服務接口，等服務接口實現完畢後，後端將前端的html改成jsp並集成後端開發的服務接口，最終測試進行上線。這種方式缺點很明顯，前端無法單獨進行調試而且前端jsp代碼混雜後端業務邏輯，而且前端工作嚴重依賴於後端。

所以慢慢衍生出以重新的架構模式，在開發階段前後端約定好Restful API的返回格式，然後後端業務邏輯設計Restful API，前端按照約定好的返回格式協同開發前端並獨立完成測試工作。等前後端工作都完成後，前後端一起進行聯調測試。這樣做的優點在於將前後端進行分離，代碼可維護性變強，而且前後端可以協同開發，開發效率更是可以大大提高。而剛纔也說到了前後端可以協同開發，那前端如果開發完成如何在API還沒有完成的情況下機型模擬數據測試呢？所以本篇文章介紹一個前端開發利器---mockJS模擬Restful API 返回數據。

簡介

MochJS實際上就是一個模擬數據生成工具，可以模擬各種業務場景返回不同格式的數據。支持生成隨機文本、數字、日期、郵箱、顏色、圖片等。而且使用非常簡單，我們使用MockJS就可以實現後端Restful API還未提供的情況下前端完成模擬測試。

安裝

MockJS安裝其實很簡單，我們使用npm安裝下依賴就可以，使用命令：

npm install mockjs --save

MockJS語法規則

MockJS基本語法其實很簡單，我們可以使用Mock.mock()指定一個測試url，然後指定返回格式的模板，格式模板按照和後端返回的格式去設計。同時我們還可以使用Mock.setup()設置配置信息如超時時間等,目前Mock.setup()僅能用於配置ajax請求。

Mock.mock(url, template);
Mock.setup(setting);

MockJS簡單使用

其實使用Mock一般有兩種方案，前端直接使用Mock以及使用Node搭建一個可停止服務的Mock服務。這兩種方案有什麼區別呢？我們先來看看第一種方案，在前端項目中直接引用Mock。首先我們先創建一個api.js用於配置Mock的基本配置信息：

import Mock from 'mockjs';
const url = {    testUrl: 'http://api.niyueling.cn/test/testOne',}module.exports = [    Mock.mock(url.testUrl, {        "userInfo|4": [{ //生成num個userInfo的數據            "id|+1": 1, //數字從1開始後續依次加一            "name": "@cname", //名字爲隨機中文名字            "ago|18-28": 25, //年齡爲18-28之間的隨機數字            "sex|1": ["男", "女"], //性別是數組中的一個，隨機的            "job|1": ["web", "UI", "python", "php"] //工作是數組中的一個        }]    })]

然後接下來我們去頁面組件中調用我們剛纔配置的url。看看有什麼效果：

var that = this;
this.$req({    method: "get",    url: 'http://api.niyueling.cn/test/testOne',    data: {
    }}).then(function(res) {    console.log(res);}).catch(function(e) {    _this.$message.error('服務器可能出現異常!');});

然後我們可以看看控制檯打印的信息：

{  userInfo: [    { id: 1, name: '閻傑', ago: 24, sex: '男', job: 'python' },    { id: 2, name: '杜軍', ago: 18, sex: '男', job: 'UI' },    { id: 3, name: '秦秀蘭', ago: 24, sex: '男', job: 'php' },    { id: 4, name: '周剛', ago: 26, sex: '女', job: 'python' }  ]}

按照我們想要的效果返回數據了，可以發現mock的使用很簡單，但是這種集成在前端項目裏面存在一個問題：如果後端Restful API實現完畢，前端需要將這部分調用mock的代碼註釋掉，不然真正的API調用會被mock攔截掉。這樣前端會改動來改動去工作量大還不好維護。所以我們可以使用第二種方案：使用Node搭建一個簡單的可停止運行的Mock服務。考慮到一部分人沒使用過Node，不知道什麼是express，什麼是路由，所以我們可以直接使用express構建器快速搭建一個小型express項目，express項目裏面項目路由都是配置成功的，我們可以直接實現Mock接口服務：

//全局安裝express-genetator項目構建器npm install -g express-generator
//使用全局構建器創建一個express項目，名稱爲demo_projectexpress demo_project
//進入項目安裝依賴cd demo_project && npm install

接着我們就可以開始設計Mock服務，express項目默認給我們配置好兩個路由，我們可以打開routes/users.js實現第一個Mock路由：

var Mock = require('mockjs')
xlsMallRouters.testMock = function (req, res) {    var par = paramAll(req);
    return res.json(new PKG(Mock.mock({        "userInfo|4": [{ //生成|num個如下格式名字的數據            "id|+1": 1, //數字從當前數開始後續依次加一            "name": "@cname", //名字爲隨機中文名字            "ago|18-28": 25, //年齡爲18-28之間的隨機數字            "sex|1": ["男", "女"], //性別是數組中的一個，隨機的            "job|1": ["web", "UI", "python", "php"] //工作是數組中的一個        }]    })));}router.post('/testMock', xlsMallRouters.testMock);

然後通過app.js文件，我們可以定位到項目運行於9000端口，routes/users.js這個路由文件對應路由爲users, 上面代碼使用router.post表示應該是post請求，所以這個Mock服務的完整url應該如下：

http://127.0.0.1:9000/users/testMock  POST

我們可以調用Mock服務地址測試返回結果：

{    "status": 200,    "payload": {        "userInfo": [            {                "id": 1,                "name": "葉洋",                "ago": 22,                "sex": "女",                "job": "web"            },            {                "id": 2,                "name": "秦超",                "ago": 22,                "sex": "男",                "job": "python"            },            {                "id": 3,                "name": "程傑",                "ago": 27,                "sex": "男",                "job": "php"            },            {                "id": 4,                "name": "潘娟",                "ago": 22,                "sex": "女",                "job": "UI"            }        ]    }}

數據格式返回和剛纔完全一致，但是多了一個優點在於後端Restful API還未實現，而前端需要測試，我們就可以使用npm run start命令你個啓動這個Mock服務獲取返回數據進行測試，當後端API實現完成，我們就停止這個Mock服務的運行，就不需要頻繁改動前端的代碼。比如我們需要實現登錄功能，我們可以略微改動返回格式，將返回格式改爲返回用戶信息即可：

xlsMallRouters.testMock = function (req, res) {    var par = paramAll(req);
    return res.json(new PKG(Mock.mock({        "userInfo|1": [{ //登錄成功返回用戶信息            "id|+1": 1, //數字從當前數開始後續依次加一            "name": "@cname", //名字爲隨機中文名字            "ago|18-28": 25, //年齡爲18-28之間的隨機數字            "sex|1": ["男", "女"], //性別是數組中的一個，隨機的            "job|1": ["web", "UI", "python", "php"], //工作是數組中的一個            token: "TKN:R:r:D:QZtyGm5HDZAxi:lxy" //用戶登錄憑證        }]    })));}router.post('/testMock', xlsMallRouters.testMock);

關於Mock的基本使用有很多封裝好的隨機數方法，不過語法都比較簡單，有需要的自己查看官方文檔，貼下官方文檔地址：

https://github.com/nuysoft/Mock/wiki/Getting-Started

歡迎關注公衆號：程序猿周先森。查看更多精彩文章。

推薦閱讀

實時會話系統實現(1) --- http輪詢方式

實時會話系統實現(2) --- express-ws改寫會話系統

談談小程序文件上傳下載那些事~

服務端文件上傳

本文分享自微信公衆號 - 程序猿周先森（zhanyue_org）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。