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

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

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

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

初始化你的項目

話不用啰嗦，首先初始化你的項目，最簡單的就是使用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直接產生mock數(shù)據(jù)

請看這里Vue.prototype

請看這里mockjs

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

在build/dev-server.js文件中

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

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

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

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

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

然后當我們調用api的時候app.use('/api', apiRoutes)，就能正常使用這個服務了

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

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

打開瀏覽器的控制臺的network，你會發(fā)現(xiàn)已經產生了網(wǎng)絡請求