用vue框架mock数据

用vue 2.0 mock数据

方法一

webpack打包的项目中能够依赖express

var express = require('express')；
var app = express()；

var appData = require("../data.json");
var seller = appData.seller;

var apiRouter = express.Router();

apiRouter.get("/seller", function (req, res) {
  res.json({
    errno: 0,//经过errno为0这个字段代表数据是正常的
    data: seller
  });
});

app.use('/api', apiRouter);

而后npm run dev启动这个项目，浏览器输入http://localhost:8080/api/ratings，能够看到返回的json对象

 

方法二

能够使用推荐的axios。

HTML页面加载CDN地址axios文件。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

建立一个vue的实例，经过mounted钩子和methods中的方法来模拟数据

mounted: function () {
        this.$nextTick(function () {
            this.getCartData();
        })
    },
methods: {
        getCartData: function () {
            var _this = this;
            axios.get('data/cartData.json').then(function (res) {
                _this.cartList = res.data.result.list;// res.data就是返回的json对象
            }).catch(function (error) {
                console.log(error);
            })
        },
    }