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 文件

不多說，直接上代碼

<template>
  <div>
    <ul>
      <li v-for="item in getList">
        <span>{{item.create_at}}</span>
        <router-link :to="'/content/'+item.id" :target="'_blank'">
          {{item.title}}
        </router-link>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        getList: []
      }
    },
    mounted () {
      this.getTopics()
    },
    methods: {
      getTopics (){
        this.$http.get('/topics')
          .then(res => {
            console.log(res)
            res.data.success && (this.getList = res.data.data)
          })
          .catch(err =>{
            console.log(err)
          })
      }
    }
  }
</script>
<style lang="scss">
  @import "../style/style";
</style>

src/style/style.scss代碼

ul>li{list-style: decimal}

瀏覽器顯示效果，如圖

 

 這里要說一下，為什么接口只寫了“/topics”，而完整的接口路徑為“https://cnodejs.org/api/v1/topics”

this.$http.get('/topics')
          .then(res => {
            console.log(res)
            res.data.success && (this.getList = res.data.data)
          })
          .catch(err =>{
            console.log(err)
          })

一般我們做開發的時候，接口的路徑基本來自同一個地址，如果每次都這么寫的話，重復工作太多，並且后續如果接口變了，修改起來也麻煩。

所以，我們需要在main.js里面添加一句：

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

 后續，調用來自同一個地方的接口時，只需要寫接口的方法即可。

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

this.$http.get('/topics')
          .then(function (res) {
            console.log(res)
            res.data.success && (this.getList = res.data.data)
          })
          .catch(function (err) {
            console.log(err)
          })

如果對es6有其他疑問，可以移步阮一峰老師的《ES6入門》教程，里面有詳細介紹。

由於有了前面幾篇文章的積累，這里就比較好理解了。

我們從接口拿到了 res.data 的數據，讓我們自己定義的 this.getList等於這個數據，然后我們在模板中就可以用 getList 進行渲染了。

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

 

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

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

因此，我們可以把時間給處理一下，然后再渲染出來。

編寫 src/utils/index.js 文件

export default {
  //格式化日期
  formatDate (str){
    let result = ''
    const date = new Date(str).toLocaleDateString()
    const hour = new Date(str).getHours()
    const minute = new Date(str).getMinutes()
    const second = new Date(str).getSeconds()
    result = date.replace(/\//g,'-') + ' ' + hour + ':' + minute + ':' + second
    return result
  }

}

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

如下代碼：

引用utils工具文件
import utils from './utils'
//全局注冊utils
Vue.prototype.$utils = utils

好了，這樣，我們寫的這個函數，就可以隨便被我們調用了。

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

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

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

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

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

在 js 中，關於 this 的論文就很多，這里不深入講解了，具體的大家去看vue的官方文檔。

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

 

如果文章中存在錯誤的地方，麻煩請大家在評論中指正，以免誤人子弟，謝謝！