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

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

話不用啰嗦，首先初始化你的項(xiàng)目，最簡單的就是使用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ù)

請看這里Vue.prototype

請看這里mockjs

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

在build/dev-server.js文件中

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

// 本地json-server服務(wù)器搭建代碼
// 引入數(shù)據(jù)庫文件
var appData = require('../mock.json')
// 引入數(shù)據(jù)庫
var getBoardList = appData.getBoardList
var apiRoutes = express.Router()
// 使用api的方法來創(chuàng)建連接時(shí)候的請求
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ù)前后臺需求自己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í)行請求和返回，當(dāng)返回的時(shí)候會給我們一個(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請求數(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)已經(jīng)產(chǎn)生了網(wǎng)絡(luò)請求

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

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

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

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

最新評論