小編給大家分享一下vue+mock.js實(shí)現(xiàn)前后端分離的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比蒲江縣網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式蒲江縣網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋蒲江縣地區(qū)。費(fèi)用合理售后完善，十多年實(shí)體公司更值得信賴。

在vue中使用mock.js實(shí)現(xiàn)前后端分離。

安裝：

npm install mockjs

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

然后案例講完后我們講具體的規(guī)范使用

那么一起來(lái)看看這個(gè)案例吧：

首先引入了mock.js，然后定義了一個(gè)方法，用axios請(qǐng)求后臺(tái)數(shù)據(jù)，在創(chuàng)建后調(diào)用此方法，然后我在創(chuàng)建后使用mock.js攔截請(qǐng)求，模擬數(shù)據(jù)（這里我模擬的是一個(gè)5位長(zhǎng)度的users數(shù)組），只要mock的url地址和請(qǐng)求的地址相同，就會(huì)自動(dòng)攔截請(qǐng)求。

我們打印了一下請(qǐng)求的結(jié)果response：

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

但是每個(gè)請(qǐng)求都這樣在vue頁(yè)面中去寫mock，后期刪除起來(lái)也不方便，可維護(hù)性低，高耦合，所以我們這里就涉及到規(guī)范的寫法。

1、安裝：

npm install mockjs

2、手動(dòng)新建mock.js文件（當(dāng)然新建文件夾把它抽離出來(lái)也是可以的）

內(nèi)容如下（根據(jù)實(shí)際需求更改）：

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

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

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

4、頁(yè)面中使用：

以此我們就完成了抽離mock.js，之后只要往mock的js文件中添加請(qǐng)求即可，后續(xù)只要等后端接口寫好，把main.js中的引入mock.js注釋（刪除）即可。

還有一種更直接的方法，因?yàn)閙ock只是我們生產(chǎn)環(huán)境需要的東西，當(dāng)我們發(fā)布上線肯定不需要這部分請(qǐng)求，都會(huì)換成實(shí)際請(qǐng)求地址和數(shù)據(jù)，所以直接把mock.js配置到生產(chǎn)環(huán)境，上線部署打包不打包這部分即可，就和vue中的代理部分，上線是不會(huì)打包這部分的一樣。

看完了這篇文章，相信你對(duì)“vue+mock.js實(shí)現(xiàn)前后端分離的方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：vue+mock.js實(shí)現(xiàn)前后端分離的方法-創(chuàng)新互聯(lián)
URL標(biāo)題：http://weahome.cn/article/psoii.html