隨著前端框架的不斷發展，越來越多的公司選擇使用前後端分離的開發模式。在這種情況下，前端需要模擬後台資料請求來測試自己所開發的頁面，以確保在與後台聯調時能夠順利地進行下去。本文將介紹在使用Vue框架下，如何模擬後台資料請求本地資料配置。
一、Vue-cli 3.x腳手架搭建專案
首先需要使用 Vue-cli 3.x的鷹架來建立專案。這裡本文就不再贅述。接著，在建立好的專案中，可以在 src 目錄下新建一個 mock 目錄，用來存放類比資料。
二、安裝與設定Mock.js
#在專案目錄下使用以下命令列安裝Mock.js：
npm install mockjs -D
在工程目錄下的src/mock 目錄下建立mock.js 文件，並在其中設定：
import Mock from 'mockjs'
//这是模拟数据示例
Mock.mock('/api/getList', 'get', {
code: 0,
message: 'ok',
data: {
list: [
{ id: 1, name: '兰博基尼', price: '1亿', color: 'red' },
{ id: 2, name: '法拉利', price: '2亿', color: 'blue' },
{ id: 3, name: '奥迪', price: '3亿', color: 'black' },
{ id: 4, name: '宝马', price: '4亿', color: 'white' }
]
}
})Mock.mock('/ api/getList', 'get', {}) 中，'/api/getList' 是請求的介面位址；'get' 是請求方法（POST、GET等）；{}是介面傳回的資料。
在main.js 中引入mock.js 文件，並在Vue.prototype上綁定Mock 方法，以便在呼叫元件API的時候使用：
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './mock/mock.js'
Vue.config.productionTip = false
//将mock绑定到Vue实例的原型上
Vue.prototype.$Mock = Mock
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')三、呼叫模擬資料
在元件裡呼叫模擬資料可以使用Vue.prototype.$Mock.mock() 方法
//示例中的调用请求
methods: {
getData() {
this.$Mock.mock('/api/getList', 'get', {});
this.$http.get('/api/getList').then(res => {
//响应成功操作
console.log(res);
}, error => {
//响应失败操作
console.log(error);
})
}
}這樣就可以在頁面中使用this.$http.get('/api/getList') 請求後台數據，而在聯調之前，先在mock.js 檔案內進行模擬請求。這樣就能夠在開發過程中充分測試程式碼的正確性，同時避免在聯調時可能碰到的問題。
總結：
在前後端分離開發的時代，前端更需要與後端的介面聯調，但在軟體開發過程中，聯調往往存在一定的問題。除了聯調時的兼容問題之外，還需要解決前後端不可同時開發的問題。因此，可以引入 Mock.js 來模擬後端資料請求來解決這個問題。簡單的說就是：「模擬後端接口，讓前端可以獨立測試前端頁面的邏輯正確性。這樣就充分的提高了前端的開發效率，節省了開發成本，減少了多人協作開發的出錯率，也避免了模擬數據時不必要的麻煩。
以上是vue如何模擬後台資料請求本地資料配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！
