vue+vue-router+axios+element-ui構建vue實戰項目之六（渲染index.vue列表）

在上一節《vue+vue-router+axios+element-ui構建vue實戰項目之五（配置axios api接口調用）》中，咱們配置完成axios後，成功訪問https://unpkg.com/axios@0.18.0/dist/axios.min.js接口並返回了數據。

好，這節開始，咱們來寫點「真」東西。

 

編寫src/page/index.vue 文件

很少說，直接上代碼

 1 <template>
 2   <div>
 3     <ul>
 4       <li v-for="item in getList">
 5         <span>{{item.create_at}}</span>
 6         <router-link :to="'/content/'+item.id" :target="'_blank'">
 7           {{item.title}}
 8         </router-link>
 9       </li>
10     </ul>
11   </div>
12 </template>
13 <script>
14   export default {
15     data () {
16       return {
17         getList: []
18       }
19     },
20     mounted () {
21       this.getTopics()
22     },
23     methods: {
24       getTopics (){
25         this.$http.get('/topics')
26           .then(res => {
27             console.log(res)
28             res.data.success && (this.getList = res.data.data)
29           })
30           .catch(err =>{
31             console.log(err)
32           })
33       }
34     }
35   }
36 </script>
37 <style lang="scss">
38   @import "../style/style";
39 </style>

src/style/style.scss代碼

1 ul>li{list-style: decimal}

瀏覽器顯示效果，如圖

 

 這裏要說一下，爲何接口只寫了「/topics」，而完整的接口路徑爲「https://cnodejs.org/api/v1/topics」

1 this.$http.get('/topics')
2           .then(res => {
3             console.log(res)
4             res.data.success && (this.getList = res.data.data)
5           })
6           .catch(err =>{
7             console.log(err)
8           })

通常咱們作開發的時候，接口的路徑基原本自同一個地址，若是每次都這麼寫的話，重複工做太多，而且後續若是接口變了，修改起來也麻煩。

因此，咱們須要在main.js裏面添加一句：

1 //設置全局訪問接口
2 axios.defaults.baseURL = 'https://cnodejs.org/api/v1'

 後續，調用來自同一個地方的接口時，只須要寫接口的方法便可。

可能有人要問，代碼中 res => {} 是什麼意思，這是es6的箭頭函數，上面的代碼等同於

1 this.$http.get('/topics')
2           .then(function (res) {
3             console.log(res)
4             res.data.success && (this.getList = res.data.data)
5           })
6           .catch(function (err) {
7             console.log(err)
8           })

若是對es6有其餘疑問，能夠移步阮一峯老師的《ES6入門》教程，裏面有詳細介紹。

因爲有了前面幾篇文章的積累，這裏就比較好理解了。

咱們從接口拿到了 res.data 的數據，讓咱們本身定義的 this.getList等於這個數據，而後咱們在模板中就能夠用 getList 進行渲染了。

這裏體現了 vue 的數據雙向綁定的特性。

 

建立一個公用工具處理文件

以下面的圖片所示，因爲拿到的數據是一個標準的時間格式，直接渲染在頁面上，這個效果不是很理想。

所以，咱們能夠把時間給處理一下，而後再渲染出來。

編寫 src/utils/index.js 文件

 1 export default {
 2   //格式化日期
 3   formatDate (str){
 4     let result = ''
 5     const date = new Date(str).toLocaleDateString()
 6     const hour = new Date(str).getHours()
 7     const minute = new Date(str).getMinutes()
 8     const second = new Date(str).getSeconds()
 9     result = date.replace(/\//g,'-') + ' ' + hour + ':' + minute + ':' + second
10     return result
11   }
12 
13 }

寫好代碼以後，咱們保存文件，可是此時，咱們還不能使用咱們的這個方法函數，咱們必須在 main.js 中將咱們的方法函數給綁定上。

以下代碼：

1 引用utils工具文件
2 import utils from './utils'
3 //全局註冊utils
4 Vue.prototype.$utils = utils

好了，這樣，咱們寫的這個函數，就能夠隨便被咱們調用了。

咱們再來修改一下咱們上面的 index.vue 中的代碼，將 span 調整爲：

1 <span>{{$utils.formatDate(item.create_at)}}</span>

按照上面的步驟修改代碼後，咱們再來看結果

好，咱們已經看到，時間已經搞好了。

不知道你們有沒有發現，咱們在 script 區域，引用一個函數是使用 this.getTopics或者 this.getList 這樣的代碼引用的。可是在 template 中，咱們是不加 this 的。

在 js 中，關於 this 的論文就不少，這裏不深刻講解了，具體的你們去看vue的官方文檔。

好，列表已經渲染出來了。下一節，咱們渲染content.vue文件。

 

若是文章中存在錯誤的地方，麻煩請你們在評論中指正，以避免誤人子弟，謝謝！