首頁 > web前端 > js教程 > 主體

vue如何呼叫mock數據

php中世界最好的语言
發布: 2018-04-14 17:21:27
原創
3032 人瀏覽過

這次帶給大家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啟動項目

#相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

在ES6裡範本字串使用詳解

js 實作毫秒天時分秒轉換

Bootstrap的表單驗證功能使用詳解

#

以上是vue如何呼叫mock數據的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!