[配置]vue中mockjs的配置和使用
阿新 • • 發佈:2018-12-21
需求:
前後端分離的開發中,需要前後端同時開發,但是在後端完成前,暫時是沒有資料返回給前端使用的,如果先寫靜態後面再改,就有重複工作的內耗存在。所以我們需要一種簡單快速的模擬資料的模組,本文選的是mockjs。
配置:
1,npm安裝依賴
npm install mockjs --save-dev
2,新建mock資料夾,裡面再新建index.js檔案和MyInfo.js檔案,index.js作為mock索引,MyInfo.js用於存放資料。
檔案結構圖如下:
MyInfo.js程式碼如下:
const page1 = [ { code: 200, data: ['中學時暗戀班花,被同班的女漢子知道了,連忙請她保密,本以為向來爽朗不羈的她是不屑告密的,結果丫飛快的把我出賣了。 後來想想,也可能是我拜託她的方式不對,不該說什麼這是男人之間的約定。'] } ] const res = { page1 } export default res
index.js程式碼如下:
import Mock from 'mockjs'
import MyInfo from './MyInfo.js'
Mock.mock('http://127.0.0.1/main.php?cid=1', 'post', () => {
return MyInfo.page1
})
3,main.js增加如下程式碼(開發中上測試環境和後端聯調,需要禁用mock時,註釋這段程式碼就可以):
require('./mock/index.js')
驗證:
home.vue請求中新增如下程式碼輸出到控制檯驗證:
//資料請求計數 this.num+=1; //請求資料 const res = await this.$http.post('http://127.0.0.1/main.php?cid='+this.num); console.log(this.num,res);
備註:
此設定已驗證OK,需要看原始碼的同學,可以克隆如下專案檢視(請求在home.vue中,其他在main.js和mock資料夾中):
demo的github地址:https://github.com/tom-wong666/xiaoa.git