Vue2+VueRouter2+webpack 構建項目實戰（四）：接通api，渲染列表

經過前面幾篇教程，咱們已經順利搭建起來了，而且已經組建好路由了。本章節，咱們須要作一個列表頁面，而後利用獲取 http://cnodejs.org/api 的公開API，渲染出來。

咱們打開src/page/index.vue文件，在這裏寫入下面的代碼：

<template>
  <div>
    <h1 class="logo">cnodejs Api Test</h1>
    <ul class="list">
      <li v-for="item in lists" v-text="item.title"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists:[{
        id:1,
        title:"test title 1"
      },{
        id:2,
        title:"test title 2"
      }]
    }
  }
}
</script>

經過瀏覽器，咱們能夠看到如圖所示的渲染結果：

使用scss寫樣式

新建文件， src/style/scss/_index.scss

而後在 src/style/style.scss中輸入

@import "scss/index";

而後，咱們就能夠在瀏覽器中，看到帶樣式的列表了,如圖所示：

注：個人習慣是，一個文件，一個樣式，文件位於src/page/文件夾下面，樣式位於src/style/scss下面。文件和樣式同名。若是文件位於子目錄，如src/page/user/pay.vue，那麼，對應的scss文件就是src/style/scss/user/_pay.scss這樣。

每個團隊的規範都是不同的，都是各有所長的，重要的是，條理性。

調用api.js

在第二節中，咱們在src/config目錄下面創建了一個api.js的空文件。在第三節中沒有使用。本節，咱們要開始使用了。

首先，咱們編輯 src/main.js ，引用 src/config/api.js。以下：

import api from './config/api'
Vue.prototype.$api = api

插入這兩行代碼，就引用好了api.js，而且，把它綁定到了全局，而後咱們就能夠在各類地方使用這個文件了。雖然這個文件是空的。

那麼src/main.js的完整代碼：

import Vue from 'vue'
import App from './App'
import router from './config/routes.js'

Vue.config.productionTip = false

import api from './config/api.js'
Vue.prototype.$api = api

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

安裝superagent組件

要請求接口，就必須有相對應的組件。若是你使用過jQuery，應該熟悉其中的AJAX方法。固然，在vue中，咱們就不考慮使用jquery了。咱們使用superagent這個組件。

安裝很是簡單，咱們首先跳轉到項目根目錄，而後輸入 npm install superagent -D進行安裝。

編寫api.js文件

有了工具了，咱們就須要來編寫api.js文件，使它能夠完成咱們想要的工做。

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1';
// 引用superagent
var request = require('superagent');
// 自定義判斷元素類型JS
function toType(obj) {
  return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 參數過濾函數
function filter_null(o) {
  for (var key in o) {
    if (o[key] == null) {
      delete o[key]
    }
    if (toType(o[key]) == 'string') {
      o[key] = o[key].trim()
      if (o[key].length == 0) {
        delete o[key]
      }
    }
  }
  return o
}
/*
  接口處理函數
  這個函數每一個項目都是不同的，我如今調整的是適用於
  https://cnodejs.org/api/v1 的接口，若是是其餘接口
  須要根據接口的參數進行調整。參考說明文檔地址：
  https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
*/
function _api_base(method, url, params, success, failure) {
  var r = request(method, url).type('text/plain')
  if (params) {
    params = filter_null(params);
    if (method === 'POST' || method === 'PUT') {
      if (toType(params) == 'object') {
        params = JSON.stringify(params);
      }
      r = r.send(params)
    } else if (method == 'GET' || method === 'DELETE') {
      r = r.query(params)
    }
  }
  r.end(function(err, res) {
    if (err) {
      alert('api error, HTTP CODE: ' + res.status);
      return;
    };
    if (res.body.success == true) {
      if (success) {
        success(res.body);
      }
    } else {
      if (failure) {
        failure(res.body);
      } else {
        alert('error: ' + JSON.stringify(res.body));
      }
    }
  });
};
// 返回在vue模板中的調用接口
export default {
  get: function(url, params, success, failure) {
    return _api_base('GET', root + '/' + url, params, success, failure)
  },
  post: function(url, params, success, failure) {
    return _api_base('POST', root + '/' + url, params, success, failure)
  },
  put: function(url, params, success, failure) {
    return _api_base('PUT', root + '/' + url, params, success, failure)
  },
  delete: function(url, params, success, failure) {
    return _api_base('DELETE', root + '/' + url, params, success, failure)
  },
}

這個文件就有點狂拽酷炫吊炸天了。目前，咱們測試cnodejs.org的接口，我調整得可使用。實際上在其餘的接口項目中，這個是須要調整的，要調整到你的項目合適的代碼。主要是根據接口返回的內容進行各類判斷和處理，其中主要的框架代碼是不用動的。

模板中調用api接口試試

編輯src/page/index.vue文件，代碼以下：

<template>
  <div>
    <h1 class="logo">cnodejs Api Test</h1>
    <ul class="list">
      <li v-for="item in lists" v-text="item.title"></li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      lists:[]
    }
  },
  created () {
    // 組件建立完後獲取數據，這裏和1.0不同，改爲了這個樣子
    this.get_data()
  },
  methods: {
    get_data: function(params) {
      var v = this
      if (!params) params = {}
      // 咱們這裏用全局綁定的 $api 方法來獲取數據，方便吧~
      v.$api.get('topics', params, function(r) {
        v.lists = r.data
      })
    },
  },
}
</script>

保存後，咱們在瀏覽器中，就能夠看到渲染出來的列表了。以下圖所示：

參考

參考地址：http://blog.csdn.net/fungleo/...