vuejs2-3獲取api數據

1 build/dev-server.js (模擬后台對地址的處理)

//模擬后台對前台地址請求的處理
var appData = require('../data.json') // 獲取data.json對象
var seller = appData.seller // 獲取這個對象[seller]的內容
var goods = appData.goods // 獲取這個對象[goods]的內容
var ratings = appData.ratings // 獲取這個對象 [ratings]的內容

var apiRoutes = express.Router();

// 對前台/seller的處理
apiRoutes.get('/seller', function (req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});

// 對前台/goods的處理
apiRoutes.get('/goods', function (req, res) {
  res.json({
    errno: 0,
    data: goods
  })
});
// 對前台/ratings的處理
apiRoutes.get('/ratings', function (req, res) {
  res.json({
    errno: 0,
    data: ratings
  });
});

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

2 src/App.vue獲取數據

<script>
  import header from 'components/header/header.vue'; // 引入header組件
  import {urlParse} from 'common/js/urlParse';
                              // 引入urlParse.js文件 window.loacation.search操作
  const ERR_OK = 0;

  export default {
    data() {
      return {
        seller: {
          id: (() => {
            let queryParam = urlParse(); // 獲取地址中的查詢字符串
            return queryParam.id;
          })()
        }
      };
    },
    created() {
      let url = '/api/seller?id=' + this.seller.id;
      this.$http.get(url).then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          console.log(response);
          this.seller = Object.assign({}, this.seller, response.data); // 擴展seller對象
        }
      });
    },
    components: { // 注冊header組件
      'v-header': header
    }
  };
</script>

data.json數據

3 檢測是否獲取到數據（前台通過請求/api/seller已經獲取到數據，后台並添加了errno:0表示數據可用）