vue的Mock數據(二) express.Router

Vue是一個MVVM模式的前端框架,在vue的開發過程當中能夠使用mock數據來模擬實際狀況,能夠經過express在vue-cli中的build/dev-server.js下搭建一個後端服務器經過讀取本地的json文件,爲前端提供數據,前端經過vue-resource插件中的ajax方式獲取數據。
因爲一個json文件中能夠有多種數據,分爲多個模塊,因此這裏採用express.router來實現不一樣路徑對應不一樣數據。html

相關文檔:[http://www.expressjs.com.cn/guide/routing.html][1]

1.在vue-cli本地存在一個json格式的數據文件前端

2.在build/dev-server.js下搭建一個服務器vue

var express = require('express');
var app = express()
var appData = require('../db.json')//引入文件
var getOrderList = appData.getOrderList//json數據模塊
var getNewsList = appData.getNewsList//數據模塊
var apiRouters = express.Router()//定義router
apiRouters.get('/getOrderList',function (req, res) {
  res.json({
     errno: 0,//返回值爲json格式,效驗碼編程時方便判斷返回狀態
     data: getOrderList
  });
})
apiRouters.get('/getNewsList',function (req, res) {
  res.json({
    errno: 0,
    data: getNewsList
  })
})
app.use('/apis', apiRouters)//域名下的訪問路徑

3.這樣就實現了mock數據的創建,經過‘當前域名’+apis/XXXX獲取,也能夠經過vue-resource插件中的this.$http.get('url').then()獲取
圖片描述ajax

相關文章
相關標籤/搜索