vue Mock数据

Vue.js是一个MVVM前端框架，在项目的开发过程中，我们可以使用mock数据来模拟后台数据。

• 通过在vue-cli中build/dev-server.js中的express下搭建一个后台服务器读取本地的json文件，为前端提供数据
• 前端通过vue-resource插件的ajax方式获取数据

1. 在vue-cli本地存储一个json格式的数据文件data.json
2. 在build/dev-server.js搭建服务器

var express = require('express')var app = express()var appData = require('../data.json') //引入json文件var seller = appData.seller //数据模块var goods = appData.goodsvar ratings = appData.ratingsvar apiRoutes = express.Router() //定义routerapiRoutes.get('/seller', function(req,res){  res.json({    errno: 0,    seller: seller  })})apiRoutes.get('/goods',function(req,res){  res.json({    errno: 0,    goods: goods  })})apiRoutes.get('/ratings',function(req,res){  res.json({    errno: 0,    ratings: ratings  })})app.use('/api',apiRoutes)//定义域名下的访问路径

1. 这样就实现了mock数据的建立，通过’当前域名/api/xxxx’获取数据，也可以通过vue-resource插件中的this.$http.get(‘url’).then()获取，在aaa.vue组件中定义：

<script>  export default {    methods: {      getPrice () {        this.$http.get('/api/seller')          .then((res) => {            console.log(res.data.seller)          })      }    },    created () {      this.getPrice()    }  }</script>