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