實例詳解vue 運用mock數據

本文主要介紹了vue 運用mock資料的範例程式碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

話不用囉嗦，先初始化你的項目，最簡單的就是使用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資料

請看這裡Vue.prototype

請看這裡mockjs

##在專案開發中，前後台分離，做了假數據，專案使用vue2.0重構，後台也推到重來了，為了不耽誤開發進程，我做了虛擬的數據請求，使用vue- cli腳手架搭建的專案檔案中dev-server建立虛擬api請求，存取自己mock的假資料虛擬請求後台的模式，具體做法如下

在build/dev-server.js檔案中

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

// 本地json-server服务器搭建代码
// 引入数据库文件
var appData = require('../mock.json')
// 引入数据库
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法来创建连接时候的请求
apiRoutes.post('/getBoardList', function (req, res) {
 res.json({
 errno: 0 ,
 data: getBoardList
 });
})
// 调用api
app.use('/api', apiRoutes)

其中appData 依賴的mock.json文件是自己mock的假數據的文件，根據前後台需求自己mock或用mock.js製作假資料

getBoardList是一個接口，var getBoardList = appData.getBoardList 就是在appData定義了這一個介面資料。

var apiRoutes = express.Router() 是創建了一個api的路由，apiRoutes.post是創建一個post接口，這個post接口有一個req和一個res參數，分別執行請求和返回，當回傳的時候會給我們一個json，這個json包含一個狀態碼errno和回傳的資料data（data指向了介面資料getBoardList）。

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

#這裡我使用了vue2.0推薦的axios請求數據，程式碼如下

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

開啟瀏覽器的控制台的network，你會發現已經產生了網路請求

# #同時，數據也愉快的返回回來了：

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

注意，每次更改dev-server.js後需要重新npm run dev啟動專案

#相關推薦:

Node.js伺服器環境下使用Mock.js攔截AJAX請求的教學

##Node.js測試中的Mock檔案系統詳解

##PHP實作的簡單mock json腳本分享_PHP教程

以上是實例詳解vue 運用mock數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！