vue+mock.js實現(xiàn)前后端分離
之前都是介紹在普通項目中使用mock.js，那么本次就來介紹一下在vue中使用mock.js實現(xiàn)前后端分離。
安裝：
npm install mockjs
這里先寫個小案例介紹一下具體使用，寫法不規(guī)范，僅供參考。
然后案例講完后我們講具體的規(guī)范使用
那么一起來看看這個案例吧：
<script>
import Mock from "mockjs"
export default {
name: "FunctionsDbSource",
methods:{
// 接口測試
init(){
// 請求后端數(shù)據(jù),查詢數(shù)據(jù)源
this.axios({
method: "get",
url:`${this.baseURL}/GetAll`,
headers: {
Account: "Admin",
Password:"888888"
}
})
.then((response)=> {
console.log(response);
})
.catch((error)=> {
console.log(error);
});
}
},
created(){
Mock.mock(`${this.baseURL}/GetAll`, {
'users|5': [ {
'name': '@cname', //中文名稱
'age|1-100': 100, //100以內(nèi)隨機整數(shù)
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(true)' //中國城市
}]
});
this.init();
}
}
</script>
首先引入了mock.js，然后定義了一個方法，用axios請求后臺數(shù)據(jù)，在創(chuàng)建后調(diào)用此方法，然后我在創(chuàng)建后使用mock.js攔截請求，模擬數(shù)據(jù)（這里我模擬的是一個5位長度的users數(shù)組），只要mock的url地址和請求的地址相同，就會自動攔截請求。
我們打印了一下請求的結(jié)果response：
大家可以看到，和后端返回的數(shù)據(jù)格式一致，只是里面內(nèi)容是我們自己模擬的，所以，只要提前和后端商量好數(shù)據(jù)格式，我們自己進行模擬數(shù)據(jù)，完成界面得渲染，等到后端寫好數(shù)據(jù)接口，到時候只要把mock部分刪除，就是我們自己想要的結(jié)果了。
但是每個請求都這樣在vue頁面中去寫mock，后期刪除起來也不方便，可維護性低，高耦合，所以我們這里就涉及到規(guī)范的寫法。
1、安裝：
npm install mockjs
2、手動新建mock.js文件（當然新建文件夾把它抽離出來也是可以的）
內(nèi)容如下（根據(jù)實際需求更改）：
import Mock from 'mockjs' // 引入mockjs
let data = 'users|5': [ {
'name': '@cname', //中文名稱
'age|1-100': 100, //100以內(nèi)隨機整數(shù)
'birthday': '@date("yyyy-MM-dd")', //日期
'city': '@city(true)' //中國城市
}]
Mock.mock('/data/index', 'get', data) // 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)
3、main.js中引入(注意自己js文件的路徑)
// 引入mock
require('./mock.js');
4、頁面中使用：
<script>
import Mock from "mockjs"
export default {
name: "FunctionsDbSource",
methods:{
// 接口測試
init(){
// 請求后端數(shù)據(jù),查詢數(shù)據(jù)源
this.axios({
method: "get",
url:"data/index",
})
.then((response)=> {
console.log(response);
})
.catch((error)=> {
console.log(error);
});
}
},
created(){
this.init();
}
}
</script>
以此我們就完成了抽離mock.js，之后只要往mock的js文件中添加請求即可，后續(xù)只要等后端接口寫好，把main.js中的引入mock.js注釋（刪除）即可。
還有一種更直接的方法，因為mock只是我們生產(chǎn)環(huán)境需要的東西，當我們發(fā)布上線肯定不需要這部分請求，都會換成實際請求地址和數(shù)據(jù)，所以直接把mock.js配置到生產(chǎn)環(huán)境，上線部署打包不打包這部分即可，就和vue中的代理部分，上線是不會打包這部分的一樣。
感興趣的童鞋可以自己去研究研究哈。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了Vue中的反向代理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)移動端拖拽交換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了vue內(nèi)置組件Transition的詳解,簡單地說，就是當元素發(fā)生變化，比如消失、顯示時，添加動畫讓它更自然過渡，它是vue內(nèi)置組件，不需要引入注冊就可以直接使用，本文通過實例代碼介紹的非常詳細，需要的朋友可以參考下2023-09-09
npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案
這篇文章主要給大家介紹了關于npm?ERR!?code?E404在vscode安裝插件時報錯的兩種解決方案,關于這個問題,通常是由于插件名稱輸入錯誤、網(wǎng)絡問題或插件已被刪除引起的,文中將兩種解決方法都介紹的非常詳細,需要的朋友可以參考下2023-04-04
基于Vue的SPA動態(tài)修改頁面title的方法(推薦)
這篇文章主要介紹了基于Vue的SPA動態(tài)修改頁面title的方法,需要的朋友可以參考下2018-01-01
這篇文章主要介紹了vue中如何通過函數(shù)傳參數(shù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了vue運用之vuex持久化，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue雙向數(shù)據(jù)綁定指令v-model的用法
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定指令v-model的用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vuex中getters的基本用法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細分享一下vue3中動態(tài)組件遇到的問題,分別是動態(tài)組件綁定問題和動態(tài)組件的方法導出問題,有需要的小伙伴可以參考一下2024-12-12