推薦我的vue教程：VUE系列教程目錄
前言
通過前面幾篇教程，我們已經順利搭建起來了項目，并且已經組建好路由了，安裝了我們需要的sass的模板。本章節，我們需要做一個列表頁面，為了方便起見，決定使用獲取 http://cnodejs.org/api 的公開API，渲染出來。
nodejs的公開API解讀
進入我放置的連接后，看到的如圖：
我們決定采用主題首頁，其實我們在剛進入這個頁面時會有不知道這是什么意思的疑問，比如這里寫以下 api 路徑均以 https://cnodejs.org/api/v1 為前綴，靠，這是什么？主題---get /topics 主題首頁這又是什么意思？
如果你再點開示例：/api/v1/topics:
靠，這又是什么？
其實我在剛剛入VUE時，他們只是告訴我：去自己用nodejs的公開API渲染一個頁面，這是nodejs的公開API地址。沒人告訴我這個是個什么東西，只是說你自己去看吧！（然后我就傻不拉幾的一邊呆著去了）看到這個滿是疑問。
對于不了解通過數據渲染頁面的同學來說，簡直不能理解，但是坑總是有人爬出來的，然后告訴你們這里有坑請注意（我是不是很高大上？），在這里講害怕大家不能理解，我就簡單提提，在把準備工作做完我會進行詳細的講解，這里說以下 api 路徑均以 https://cnodejs.org/api/v1 為前綴意思是：你請求nodeAPI上的頁面時所有的請求地址最前面是https://cnodejs.org/api/v1東西。
假設你要請求主題首頁，你看他寫的get /topics 主題首頁，你就發送get請求，請求的地址是https://cnodejs.org/api/v1/topics，這樣你就把有關主題首頁的數據就請求過來了。
到這大家應該大概明白了這個頁面想表達的意思，如果還不明白，那你就繼續往下看，結合后面的內容進行相應的思考。
制作列表頁面
對nodejs的公開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>
如上，我們通過自己寫的兩組數據，很輕松的將頁面渲染成功了。通過瀏覽器，我們可以看到效果。
在這里如果你看不懂沒關系，你可以現在去官網了解了解一些簡單的東西，比如模板語法，條件渲染，列表渲染等，你先灌灌耳音，這個方便你對后面的代碼的理解。當然如果你有足夠的耐心，你可以等待到我出對初始項目的解說也可以（但是這就得看我的心情了）
既然出來了，得配合點css
如果你不想看有關css的你可以調到下一個標題，也不會錯過什么，只是錯過了VUE怎么引用css（隨便啦）
這里，我著重強調的不是css如何去寫，而是我的組織項目的結構，我感覺我組織得還是很不錯的。
新建文件，src/style/scss/_index.scss
代碼走起：
.logo {color: red;}
.list {
line-height: 2;
li {border-bottom: 1px solid #ddd;}
}
然后在src/style/style.scss中引用新建的，輸入
@import "scss/index";
然后，我們就可以在瀏覽器中，看到帶樣式的列表了。
我的習慣是，一個文件，一個樣式，文件位于src/page/文件夾下面，樣式位于src/style/scss下面。文件和樣式同名。如果文件位于子目錄，如src/page/user/pay.vue，那么，對應的scss文件就是src/style/scss/user/_pay.scss這樣。
每一個團隊的規范都是不一樣的，都是各有所長的，重要的是：條理性。
調用node-api的準備工作
終于到了調用api的準備階段了，好緊張啊！
安裝superagent組件
在VUE中要請求接口，就必須有相對應的組件。如果你使用過jQuery，應該熟悉其中的AJAX方法。當然，在vue中，我們就不考慮使用jquery了。我們使用superagent這個組件。
還記得怎么安裝嗎？我們首先跳轉到項目根目錄，然后輸入npm install superagent -D進行安裝。
編寫api.js文件
安裝完superagent這個組件后，就該編寫api.js了，還記得api.js嗎？在我們搭建目錄的時候，在src/config/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的接口，我調整得可以使用。實際上在其他的接口項目中，這個是需要調整的，要調整到你的項目合適的代碼。主要是根據接口返回的內容進行各種判斷和處理，其中主要的框架代碼是不用動的。
如果你JS基礎過硬，一看就懂，如果不行，就慢慢看，慢慢理解吧。這里我提供它的調用方式：
// 請求類型你看代碼就知道：GET，POST，PUT，DELETE
vue.[調用api.js的綁定的方法名].[請求類型]('請求的配置API接口地址的后綴', params（參數）, function(r) {
// 請求完接口后的數據都存放在回調函數的參數中，這里我們以r為回調函數的參數
})
實在看不懂也沒有關系，你不需要知道它的內部原理只需要知道怎么調用就可以了。
調用api.js
既然寫了api.js，我們是不是需要把它放在全局環境它才能被任何需要請求的VUE模板所調用，這里大家如果有看過官方文檔的一定知道，如果沒看過你就只需要知道這么做就行了。
記住沒人會告訴你使用筷子和手機的原理是什么，但是你還是會用筷子和手機
在VUE中引入全局環境時我們需要把它放在main.js中，所以首先，我們編輯 src/main.js，引用src/config/api.js。如下：
import api from './config/api'
Vue.prototype.$api = api
插入這兩行代碼，就引用好了api.js，并且，把它綁定到了全局，然后我們就可以在各種地方使用這個文件了。
可能部分朋友不知道插入到文件的哪里去。我這里放上main.js的全部代碼：
// 1.引用 vue 沒什么要說的
import Vue from 'vue'
// 3.引用路由
import VueRouter from 'vue-router'
// 光引用不成，還得使用
Vue.use(VueRouter)
// 2.入口文件為 src/App.vue 文件 所以要引用
import App from './App.vue'
// 4.引用路由配置文件
import routes from './config/routes'
// 5.引用API文件
import api from './config/api'
// 6.將API方法綁定到全局
Vue.prototype.$api = api
// 使用配置文件規則
const router = new VueRouter({
routes
})
// 跑起來吧
new Vue({
router,
el: '#app',
render: (h) => h(App)
})
其實留心的小伙伴會發現，我在上一篇文章時已經把api.js引用了，當時我并沒有說明原因，這里講解后大家的疑問應該就打開了。
渲染列表
調用node-api的準備工作完成后，就該進行node-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不一樣，改成了這個樣子，這個就是VUE生命周期的創建完成周期
this.get_data()
},
methods: {
get_data: function(params) {
if (!params) params = {}
// 我們這里用全局綁定的 $api 方法來獲取數據，方便吧~
this.$api.get('topics', params, r => {
this.lists = r.data
})
}
}
}
</script>
這里對于沒有理解api.js的同學來說，這段代碼：
get_data: function(params) {
if (!params) params = {}
// 我們這里用全局綁定的 $api 方法來獲取數據，方便吧~
this.$api.get('topics', params, r => {
this.lists = r.data
})
}
調用api.js的方法名我們在全局綁定的是$api方法，我們需要請求node-API的主題首頁：使用get方法，https://cnodejs.org/api/v1前綴在api.js中配置了：
// 配置API接口地址
var root = 'https://cnodejs.org/api/v1';
node-API的主題首頁需要的topics，也在全局綁定的是$api方法中作為參數傳遞通過api.js中的export default {}拋出的方法在return中return _api_base('DELETE', root + '/' + url, params, success, failure)的root + '/' + url（即示例是'https://cnodejs.org/api/v1' + '/' + 'topics'）進行請求的拼接。
到這里大家的所有疑問應該得到解答了。
保存后，我們在瀏覽器中，就可以看到渲染出來的列表了。如下圖所示：
小結：
通過本節的學習，我們已經順利的從接口獲取到數據，并且渲染到我們的頁面當中了。這其實已經解決了絕大多數的問題了。
- 如何新建一個js文件，并且把這個文件引用，然后綁定到全局
- 學習理解superagent插件。
- 如何在vue模板中調用綁定的方法。
- 組件渲染完成時，執行函數。即created()，VUE生命周期的創建完成周期
到了這里新手也大都飽滿了大致的輪廓，如果有對我所說的上面四項有疑問的還是希望去，官網看看，在官網上產生疑問，再到我這里了解。因為只有配合各種各樣的輔助材料你才能徹底的自己明白到底這是怎么弄的，不要妄自聽信一家之言，博采眾議是一個非常好的習慣。
提示：在最近幾天我會慢慢附上VUE系列教程的其他后續篇幅，后面還有精彩敬請期待，請大家關注我的專題：web前端。如有意見可以進行評論，每一條評論我都會認真對待。
