1

Vue是一个MVVM模式的前端框架,在vue的开发过程中可以使用mock数据来模拟实际情况,可以通过express在vue-cli中的build/dev-server.js下搭建一个后端服务器通过读取本地的json文件,为前端提供数据,前端通过vue-resource插件中的ajax方式获取数据。
由于一个json文件中可以有多种数据,分为多个模块,所以这里采用express.router来实现不同路径对应不同数据。

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

1.在vue-cli本地存在一个json格式的数据文件

2.在build/dev-server.js下搭建一个服务器

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()获取
图片描述


AdamLambert
48 声望3 粉丝

程序员一枚