码迷,mamicode.com
首页 > 其他好文 > 详细

用vue框架mock数据

时间:2017-06-08 21:32:56      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:UI   mount   tca   json对象   框架   getc   ror   errno   com   

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

 

用vue框架mock数据

标签:UI   mount   tca   json对象   框架   getc   ror   errno   com   

原文地址:http://www.cnblogs.com/hello-wuhan/p/6964641.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!