前後端分離–MockJS模擬API返回數據
- 2019 年 12 月 10 日
- 筆記
其實，我們都知道前後端分離已經逐漸成為業界項目開發標準方式。在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_project express 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
