用vue框架mock数据

Posted 2020-09-22 寒枫归尘

用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);
            })
        },
    }