溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文介紹了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啟動項目
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
