vue2用vue-cli搭建项目时模拟后台数据

PS:这是在学习一个外卖平台项目案例:

第一步:在build目录下的webpack.dev.conf.js文件下添加:

// demoData start
const express = require('express');
const app = express();
const appData = require('../data.json');
const seller = appData.seller;
const goods = appData.goods;
const ratings = appData.ratings;
const apiRoutes = express.Router();
app.use('/api', apiRoutes);
// demoData end

第二步:在当前js文件下找到DevServer,在后面添加以下代码:

,
before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })
  }),
    app.get('/api/goods', (req, res) => {
      res.json({
        errno: 0,
        data: goods
      })
    }),
    app.get('/api/ratings', (req, res) => {
      res.json({
        errno: 0,
        data: ratings
      })
    })
}

第三步:在vue页面中发起请求:

methods: {
  getData () {
    this.$http.get('/api/goods').then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    });
  }
},
created () {
  this.getData();
}

console.log()结果:

1. {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
   1. config:{adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout: 0, xsrfCookieName: "XSRF-TOKEN", …}
   2. data:
      1. data:(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
      2. errno:0
      3. __proto__:Object
   3. headers:{date: "Mon, 23 Apr 2018 08:42:33 GMT", content-encoding: "gzip", x-powered-by: "Express", etag: "W/"5fe4-dUYKKMmjkxwopmP0y1GBMm05AC0"", vary: "Accept-Encoding", …}
   4. request:XMLHttpRequest {onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
   5. status:200
   6. statusText:"OK"
   7. __proto__:Object

请求成功!