快捷導(dǎo)航

vue 運(yùn)用mock數(shù)據(jù)的示例代碼

更新時(shí)間：2017年11月07日 10:41:39 作者：mir_yan

本篇文章主要介紹了vue 運(yùn)用mock數(shù)據(jù)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

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

話不用啰嗦，首先初始化你的項(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)求，訪問(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 依賴的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)求