本文介紹了vue 運(yùn)用mock數(shù)據(jù)的示例代碼，分享給大家，具體如下：

初始化你的項(xiàng)目

話(huà)不用啰嗦，首先初始化你的項(xiàng)目，最簡(jiǎn)單的就是使用vue-cli啦

vue init webpack

引入mock.js

安裝 mockjs

npm install --save-dev mockjs

引入到Vue原型上，方便使用

 import mockjs from 'mockjs'
 Vue.prototype.$mock = Vue.$mock = mockjs.mock

以上引入到Vue原型上，可以使用 this.$mock直接產(chǎn)生mock數(shù)據(jù)

請(qǐng)看這里Vue.prototype

請(qǐng)看這里mockjs

在項(xiàng)目開(kāi)發(fā)中，前后臺(tái)分離，做了假數(shù)據(jù)，項(xiàng)目使用vue2.0重構(gòu)，后臺(tái)也推到重來(lái)了，為了不耽誤開(kāi)發(fā)進(jìn)程，我做了虛擬的數(shù)據(jù)請(qǐng)求，使用vue-cli腳手架搭建的項(xiàng)目文件中dev-server搭建虛擬api請(qǐng)求，訪(fǎng)問(wèn)自己mock的假數(shù)據(jù)虛擬請(qǐng)求后臺(tái)的模式，具體做法如下

在build/dev-server.js文件中

在var app = express()這個(gè)實(shí)例的下面添加如下代碼

// 本地json-server服務(wù)器搭建代碼
// 引入數(shù)據(jù)庫(kù)文件
var appData = require('../mock.json')
// 引入數(shù)據(jù)庫(kù)
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法來(lái)創(chuàng)建連接時(shí)候的請(qǐng)求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 調(diào)用api
app.use('/api', apiRoutes)

其中 appData 依賴(lài)的mock.json文件是自己mock的假數(shù)據(jù)的文件，根據(jù)前后臺(tái)需求自己mock或者使用mock.js制作假數(shù)據(jù)

getBoardList是一個(gè)接口，var getBoardList = appData.getBoardList 就是在appData定義了這一個(gè)接口數(shù)據(jù)。

var apiRoutes = express.Router() 是創(chuàng)建了一個(gè)api的路由，apiRoutes.post是創(chuàng)建一個(gè)post接口，這個(gè)post接口有一個(gè)req和一個(gè)res參數(shù)，分別執(zhí)行請(qǐng)求和返回，當(dāng)返回的時(shí)候會(huì)給我們一個(gè)json，這個(gè)json包括一個(gè)狀態(tài)碼errno和返回的數(shù)據(jù)data（data指向了接口數(shù)據(jù)getBoardList）。

然后當(dāng)我們調(diào)用api的時(shí)候app.use('/api', apiRoutes)，就能正常使用這個(gè)服務(wù)了

這里我使用了vue2.0推薦的axios請(qǐng)求數(shù)據(jù)，代碼如下

this.$http.post('/api/getBoardList')
 .then(function (response) {
  console.log(response.data.data);
  alert('成功了');
 })
 .catch(function (code) {
  alert('失敗了');
  console.log(code);
 });

打開(kāi)瀏覽器的控制臺(tái)的network，你會(huì)發(fā)現(xiàn)已經(jīng)產(chǎn)生了網(wǎng)絡(luò)請(qǐng)求

同時(shí)，數(shù)據(jù)也愉快的返回回來(lái)了：

如果想添加接口數(shù)據(jù)，繼續(xù)在dev-server.js中添加就可以了，post，get等等都可以。

注意，每次更改dev-server.js后需要重新npm run dev啟動(dòng)項(xiàng)目

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論