[VR 前後端交響曲Day15] Vue instance的lifecycle hook: mounted()

12th鐵人賽 vue.js instance lifecycle hooks vue

貓貓工程師 Ting Ting

2020-09-30 00:15:42

1333 瀏覽

昨天在理解Vue的生命週期時提到，Vue在前端處理上有一個透過掛載mounting的hook處理畫面渲染至瀏覽器前的階段。所以我們今天試著在Rails App裡來使用mounted()這個hook實作需求。

本日實作需求：

在做網站的時候通常會需要一些假資料（例如虛擬使用者的name，email，avatar頭像等等），以幫助我們更容易去想像畫面及實際開發功能。
而網路上有一些不錯的第三方API，可以幫助我們創建這些假資料～

我想透過axios從遠端伺服器取得的資料把這個 Face API內的使用者avatar頭像畫面，透過mounted()渲染在前端頁面上！
(今天就不掛其他的元件了，把重點focus在理解life cycle hook上)

大概4醬子的感結～～

什麼是`axios`?

axios是Vue官方推薦的非同步工具，使用get、post、 push等Restful(Representational State Transfer: 表現層狀態轉換)規範來取得第三方資料，.then表示取得資料後的處理動作。

常用的方法如下:

axios.request
axios.get
axios.delete
axios.head
axios.post
axios.put
axios.patch

(查資料時發現，另一個前端框架Angular本身有提供了一個簡化的 HTTP 客戶端 API $http，而axios就是之於Vue的類似角色。)

開始進行吧！

Step 0. 使用`yarn add`安裝並 `import` `axios-on-rails`

yarn add axios-on-rails

info Direct dependencies
└─ axios-on-rails@0.0.1
info All dependencies
├─ axios-on-rails@0.0.1
├─ axios@0.17.1
└─ rails-ujs@5.2.4
✨  Done in 5.22s.

Step 1. 在`mounted()` hook透過`axios`取得資料

在Vue instance的data選項物件，建立一個subscribers: []的空陣列
透過axios.get取得資料後放入陣列

home.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import Foot from "../components/foot"
import store from './store';
import axios from 'axios-on-rails'


Vue.use(TurbolinksAdapter)


document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");

  if (el){
    new Vue({
      store,
      el,
      data: {
        day: "第 14 天",
        topic: "Vue instance的 mounting 階段 mounted()： el指定的標籤已經掛載完成",
        audience: "訂閱這個鐵人賽系列文的觀眾：",
        subscribers: []
      },
      mounted() {
        var vm = this
          axios.get('https://tinyfac.es/api/users')
            .then((response) => {
                vm.subscribers = response.data
            })
      },
      components: { Foot }
    })
  }
})

這時console會出現錯誤訊：

Step 2. 解決使用API時，跨網域存取被拒絕問題

在前端開發時使用ajax、axios、fetch等HTTP Request來存取API資料時有時會遇到CORS(跨來源資源共用，Cross-Origin Resource Sharing)問題，導致無法正常讀取API內容。別擔心！在此使用cors-anywhere就可以順利解決。

程式碼稍加改寫一下:

document.addEventListener('turbolinks:load', () => {
  let el = document.querySelector("#content");
  const cors = 'https://cors-anywhere.herokuapp.com/';
  const url = 'https://tinyfac.es/api/users';

  if (el){
    new Vue({
      store,
      el,
      data: {
        day: "第 14 天",
        topic: "Vue instance的 mounting 階段 mounted()： el指定的標籤已經掛載完成",
        audience: "訂閱這個鐵人賽系列文的觀眾：",
        subscribers: []
      },
      mounted() {
        var vm = this
        // axios.get('https://tinyfac.es/api/users')
        axios.get(`${cors}${url}`)
            .then((response) => {
                vm.subscribers = response.data
            })
      },
      components: { Foot }
    })
  }
})

Step 3. 在Vue instance掛載點中，使用`v-for`把`avatar`頭像印出來

這個API裡有好大一包json檔，研究資料結構後發現取出img的url方式是user.avatars[0].url。
所以我們透過v-for，將每位user跑迴圈，並且透過v-bind將資料綁定HTML標籤屬性(不熟的看倌請複習第5天的鐵人賽)，img這個標籤裡的src網址與user.avatars[0].url做連動～

<div id="content">
  <div class="main-title">Vue.js x Rails第12屆鐵人賽專案：{{ day }}</div>
  <div class="main-body">本日主題：{{ topic }}</div>
  <div class="main-audience">{{ audience }}</div>  
  <div class="main-avatar" v-for="user in subscribers">
    <img class="avatar" :src="user.avatars[0].url">
  </div>
  <Foot></Foot>
</div>

備註：avatar的css可以設定為圓形～以符合一般社群網站頭像的顯示風格;)！

  .avatar{
    float: left;
    margin-top: 1em;
    margin-right: 1em;
    position: relative;
    height: 50px;
    width: 50px;

    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

順利show出訂閱本鐵人賽的忠實讀者頭像啦！（大誤）