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