vue+mock.js實現前后端分離

來源：懂視網責編：小采時間：2020-11-27 21:53:24

vue+mock.js實現前后端分離

vue+mock.js實現前后端分離:之前都是介紹在普通項目中使用mock.js，那么本次就來介紹一下在vue中使用mock.js實現前后端分離。安裝： npm install mockjs 這里先寫個小案例介紹一下具體使用，寫法不規范，僅供參考。然后案例講完后我們講具體的規范使用那么一起來看看這個案例吧：

推薦度：

點擊下載本文 文檔為doc格式

導讀vue+mock.js實現前后端分離:之前都是介紹在普通項目中使用mock.js，那么本次就來介紹一下在vue中使用mock.js實現前后端分離。安裝： npm install mockjs 這里先寫個小案例介紹一下具體使用，寫法不規范，僅供參考。然后案例講完后我們講具體的規范使用那么一起來看看這個案例吧：

之前都是介紹在普通項目中使用mock.js，那么本次就來介紹一下在vue中使用mock.js實現前后端分離。

安裝：

npm install mockjs

這里先寫個小案例介紹一下具體使用，寫法不規范，僅供參考。

然后案例講完后我們講具體的規范使用

那么一起來看看這個案例吧：

<script>
 import Mock from "mockjs"
 export default {
 name: "FunctionsDbSource",
 methods:{
 // 接口測試
 init(){
 // 請求后端數據,查詢數據源
 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以內隨機整數
 'birthday': '@date("yyyy-MM-dd")', //日期
 'city': '@city(true)' //中國城市
 }]
 });
 this.init();
 }
 }
</script>

首先引入了mock.js，然后定義了一個方法，用axios請求后臺數據，在創建后調用此方法，然后我在創建后使用mock.js攔截請求，模擬數據（這里我模擬的是一個5位長度的users數組），只要mock的url地址和請求的地址相同，就會自動攔截請求。

我們打印了一下請求的結果response：

大家可以看到，和后端返回的數據格式一致，只是里面內容是我們自己模擬的，所以，只要提前和后端商量好數據格式，我們自己進行模擬數據，完成界面得渲染，等到后端寫好數據接口，到時候只要把mock部分刪除，就是我們自己想要的結果了。

但是每個請求都這樣在vue頁面中去寫mock，后期刪除起來也不方便，可維護性低，高耦合，所以我們這里就涉及到規范的寫法。

1、安裝：

npm install mockjs

2、手動新建mock.js文件（當然新建文件夾把它抽離出來也是可以的）

內容如下（根據實際需求更改）：

import Mock from 'mockjs' // 引入mockjs
 
let data = 'users|5': [ {
 'name': '@cname', //中文名稱
 'age|1-100': 100, //100以內隨機整數
 'birthday': '@date("yyyy-MM-dd")', //日期
 'city': '@city(true)' //中國城市
 }]
 
Mock.mock('/data/index', 'get', data) // 根據數據模板生成模擬數據

3、main.js中引入(注意自己js文件的路徑)

// 引入mock
require('./mock.js');

4、頁面中使用：

<script>
 import Mock from "mockjs"
 export default {
 name: "FunctionsDbSource",
 methods:{
 // 接口測試
 init(){
 // 請求后端數據,查詢數據源
 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文件中添加請求即可，后續只要等后端接口寫好，把main.js中的引入mock.js注釋（刪除）即可。

還有一種更直接的方法，因為mock只是我們生產環境需要的東西，當我們發布上線肯定不需要這部分請求，都會換成實際請求地址和數據，所以直接把mock.js配置到生產環境，上線部署打包不打包這部分即可，就和vue中的代理部分，上線是不會打包這部分的一樣。

感興趣的童鞋可以自己去研究研究哈。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com