vue本地開發mock數據.md
目錄
- 一、為什麽要mock數據?
- 二、如何mock數據?
- 三、webpack本地代理配置
- 四、mockjs使用
- 五、easymock使用
一、為什麽要mock數據?
VUE項目開發過程中,前後端是完全分離,後端負責提供數據,前端負責數據展示,因此就會存在這種情況:前端需要用到數據接口的時候,後端還沒開發出來,此時前端就要掛起嗎?當然不是了,我們要解決的就是如何給前端模擬數據?從而實現前後端完全獨立開發。
二、如何mock數據?
在團隊協作過程中,在人員角色分工明確的情況下,我們可以先根據產品功能文檔,定義好一份前後端交互的api文檔,開發人員可根據api文檔獨立編碼;後端比較簡單,按api文檔實現相應的接口,並為接口編寫單元測試,mock前端請求參數即可;而前端可以引入第三者,mock接口返回結果。
如何搭建Mock API:
- 本地json文件
這是最原始的方法了,直接將接口返回的結果,寫死在本地文本文件中,如user.json,這種方式也是可以,只是會汙染到我們的代碼,到了項目上線的,需要修改代碼請求接口; - 本地mock api或遠程mock api
本地用mockjs,遠程用easymock,這兩種都可以,可以非常靈活的模擬真實api請求交互,如:http://mockapi/user模擬http://restapi/user,前後端開發完成後,可以通過修改api host一鍵切換至我們的api。
三、webpack本地代理配置
我們在本地開發的時候,調用遠程api,存在ajax跨域請求的問題,此時可通過webpack proxy配置,實現本地請求轉發至遠程,解決跨域問題。
找到config/index.js修改proxyTable,如下:
proxyTable: {
‘/refundApi‘: {
target: ‘https://easy-mock.com/mock/5af0f80305d45458a763bc65‘, // 接口的域名
// secure: false, // 如果是https接口,需要配置這個參數
changeOrigin: true, // 如果接口跨域,需要進行這個參數配置
pathRewrite: {
‘^/refundApi‘: ‘‘
}
}
},
假如vue的啟動端口是8081,即http://localhost:8081
http://localhost:8081/refundApi/user
會轉發至https://easy-mock.com/mock/5af0f80305d45458a763bc65/user
。
四、mockjs使用
Mock.js is a simulation data generator to help the front-end to develop and prototype separate from the back-end progress and reduce some monotony particularly while writing automated tests.
The official site: http://mockjs.com
- vue安裝mockjs
npm install mockjs
- vue中使用mockjs
示例:http://mockjs.com/examples.html
數據模板格式:
‘name|rule‘: value
屬性名|生成規則: 屬性值
定義mock api:
// mock/user.js
import Mock from ‘mockjs‘;//es6語法引入mock模塊
Mock.mock(‘/test/‘, {
// 屬性 list 的值是一個數組,其中含有5個元素
‘list|5‘: [{
‘url‘: ‘@url‘
}]
});
調用mock api:
// use in test.vue
import axios from ‘axios‘
import data from ‘../mock/user.js‘
axios.get(‘/test/‘).then(function(res){
var data = res.data;
console.log(JSON.stringify(data));
}).catch(function(err){
console.log(err);
});
請求成功,輸出結果:
{
"list": [
{
"url": "http://pqibpj.gt/tqreffku"
},
{
"url": "tn3270://huqptk.tv/wejcc"
},
{
"url": "mid://kncn.bt/hpjutggpn"
}
]
}
五、easymock使用
mockjs確實可以滿足我的需求,不過在無意間發現了easymock,就喜歡上這個工具了,easymock其實就是一個在線的mockjs,提供可視化管理界面,能快速配置api地址,生成模擬數據,而其實接觸mockjs那會我就有想基於mockjs自己搭建一個專門的mock api服務,沒想到早就有人這麽幹了。
並且easymock還基於GPL3.0開放了源碼,企業或個人可下載源碼進行私有化部署。
github地址:https://github.com/easy-mock/easy-mock
在線服務:https://easy-mock.com
vue本地開發mock數據.md