Vue 的 axios 全域攔截器

本篇運用到 Vue Cli 以及 Vuex

以六角學院的 Vue 最終作業來說用到攔截器是為了搭配 Vue Loading Overlay 這個套件，平常在寫時執行每個 API 都會帶一次 true 和 false ，用攔截器的好處是可以省去 API 數量 * 2 行的程式碼，如果 API 有 50 個這樣就可以省去 100 行的狀態控制程式碼，並且也不用煩惱在製作測試時狀態控制碼有沒有被關好。

起手式

安裝 vue-axios

1

npm install --save axios vue-axios

main.js 寫入

1
2
3
4
5

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
 
Vue.use(VueAxios, axios)

安裝 vue-loading-overlay

1

npm install vue-loading-overlay --save

main.js 寫入

1
2
3
4

import Loading from 'vue-loading-overlay'
import 'vue-loading-overlay/dist/vue-loading.css'

Vue.component('Loading', Loading);

基本程式碼

通常我會很乾脆的放到 App.vue 裡面，可以省很多事，反正標題都寫全域了

App.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<template>
  <div id="app">
    <Loading :active.sync="isLoading"></Loading>
    <router-view/>
  </div>
</template>

<script>
export default {
  computed: {
    isLoading() {
      return this.$store.state.isLoading;
    }
  },
}
</script>

Vuex 的 store/index.js ，因為待會會用到所以先寫在這裡

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isLoading: false,
  },
  actions: {
    setLoading(context, payload) {
      context.commit('Set_Loading', payload);
    }
  },
  mutations: {
    Set_Loading(state, payload) {
      state.isLoading = payload;
    }
  },

})

變數名稱 isLoading ，控制 loading 畫面發動的時機，帶 Boolean : true or false

大部分在寫程式碼的時候會在 axios 請求中帶入 isLoading 的控制碼片段

1
2
3
4
5
6
7
8
9
10
11
12

// methods 中的方法
getTest(){
  this.$store.dispatch(setLoading, true); // 開始執行程式碼時打開 loading
  
  this.axios.get(APIurl).then((res)=>{
    console.log(res.data)
    ...
    ... //要執行的程式碼
    
    this.$store.dispatch(setLoading, false); // 執行完程式碼後關閉 loading
  });
}

像這樣的方式來控制 loading 畫面，如同前面所講的一個專案下如果有 50 個 API 要請，那就要寫 100 行控制碼來控制，作業感很重的感覺，下面來開始建立我們的 axios 攔截器吧。

建立攔截器

通常我會在 src 資料夾下面新增一個叫 JS 的資料夾，建立一個 axios.js 檔案，把剛剛在 store/index.js 寫好的狀態控制引進來

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import axios from 'axios'
import store from '@/store/index.js'

axios.interceptors.request.use(
  (confing) => {
    console.log('攔截請求');
    store.commit('Set_Loading', true);
    return confing;
  },
  (error) => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  (response) => {
    console.log('攔截回應');
    store.commit('Set_Loading', false)
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);
export default axios;

main.js

原本的

1

import axios from 'axios'

改為

1

import axios from '@/js/axios'

上面提到的 getTest(); 就可以簡略為

1
2
3
4
5
6
7
8

// methods 中的方法
getTest(){
  this.axios.get(APIurl).then((res)=>{
    console.log(res.data)
    ...
    ... //要執行的程式碼
  });
}

只要是使用 this.axios 發動請求就會自動帶入 loading 的狀態控制囉！

進階 API 管理

當專案 API 越來越多的時候，資料也從各種不同的網域取得時，就會想要把 API 放在同一支檔案裡集中管理，目前是用 export 和 import 的方式處理，在各個 vue 檔或是 store/index.js 我們只要引入變數就可以了。

變數引用

接下來一樣在 js 資料夾新增一個 api.js 的檔案。

寫入

1

export const getRandomUser = 'https://randomuser.me/api/'

在 vue 檔引入

1
2
3
4
5
6
7
8
9
10
11
12
13

<script>
import { getRandomUser } from "@/js/api.js";

export default {
  methods: {
    getTest() {
      this.axios.get(getRandomUser).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

簡易的引用就完成了

不同網域的時候

當 API 網域不同時，我就會採用這種方式， axios 提供了自訂義默認值的方法

1

axios.create({ });

目前我比較常使用 baseURL 和 timeout

1
2
3
4
5
6

axios.create({
  // 引用 .env 所設定的網域
  baseURL: process.env.VUE_APP_PATH,
  // 單位毫秒，請求超過 10 秒時，就不再等待請求。
  timeout: 10000, 
});

綜合前面所使用的攔截器方法，來看完整的 api.js 內容吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

import axios from 'axios';
import store from '@/store/index.js';

const eventsRequest = axios.create({
  baseURL: process.env.VUE_APP_PATH,
  timeout: 10000,
});

eventsRequest.interceptors.request.use(
  (config) => {
    console.log('攔截請求');
    store.commit('Set_Loading', true);
    return config
  },
  (err) => {
    console.log(err + '請求失敗')
  }
);

eventsRequest.interceptors.response.use(
  (res) => {
    console.log('攔截回應');
    store.commit('Set_Loading', false)
    return res
  },
  (err) => {
    console.log(err + '回應失敗')
  }
);

// get API
export const get_user = () => {
  return eventsRequest.get('/get_user/')
}

// post API
export const post_login = (obj) => {
  return eventsRequest.post('/login/', obj)
}

get API 實際上就等於

1

axios.get(process.env.VUE_APP_PATH + '/get-user/');

post API 同理

1

axios.post(process.env.VUE_APP_PATH + '/login/', obj);

vue 檔

把上面兩個變數引入到 vue 檔，就會是變數後面接 .then()

1

get_user().then((res)=>{ });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<script>
import { get_user, post_login } from "@/js/api.js";

export default {
  methods: {
    // get API
    getTest() {
      get_user().then((res) => {
        console.log(res.data);
      });
    },
    // post API
    postTest() {
      let obj = { a: 'abc'};
      post_login(obj).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

這樣就 OK 哩。

補充

因為接收到請求就會立即執行關閉的狀態控制，

1

store.commit('Set_Loading', false);

但有時候還有後續的程式碼要跑，使用者如果很急性的話 loading 一結束就按下功能鈕，可能會導致什麼錯誤也說不定，這邊我會再加上 setTimeout 延遲關閉的時間，留個緩衝的時間讓後續的程式碼跑完。

1

setTimeout(()=>{store.commit('Set_Loading', false)}, 1000);

結語

• 設定好 axios 攔截器就可以省略掉很多行 loading 狀態控制碼。

• 做好 API 管理，以後 API 路徑有變動時只要去 .env 修改網域位置或是進到 api.js 修改就 OK 了，就不用再檔案中一個一個去找散落的 API 字串。

參考：https://ykloveyxk.github.io/2017/02/25/axios%E5%85%A8%E6%94%BB%E7%95%A5/
範例 API：https://randomuser.me/

前言

　　上工的第一天主管就丟了一個陌生的英文，希望我可以學起來用，那就是 Docker ，大概搜尋了一下這是什麼，得出的結論是 Docker 是讓開發環境變單純的工具。比如說 Windows 和 Mac 有開發環境上的差異以及各種的系統(如：小畫家等等)，其中的少數有可能會影響程式運行，而產生了「明明在我的電腦上很 OK ，怎麼推上伺服器了就不行」的情況，而 Docker 就這麼誕生了。

　　這系列主要是紀錄我所認識到的 Docker 知識，以前端學習視角為主，有關後端的描述因為不瞭解可能會有不恰當的地方，請多多包涵。

實際例子

　　Docker 把開發上用不到的系統去掉，只留下開發用的環境，就我搜尋文章的結果而言，最常應用 Docker 應該會是後端，據我所知後端會有語言版本上的差異，像是 Python ，版本不同就要安裝不同的版本，但是公司專案如果經常有版本問題，這時就要再去安裝相應的 Python 版本，安裝來安裝去真的很麻煩，於是後端就可以利用 Docker 來搭建不同的版本環境，這下就不用再安裝來安裝去了。

對前端來說

　　前端在學習時沒聽過、用過 Docker 應該是很正常的事，對前端大菜鳥的我來說目前只存在 Node.js 的版本差異，而且有個叫做 nvm 的工具，它可以簡單又快速的切換 Node 版本，所以 Docker 什麼的真的沒啥機會碰到阿~

虛擬機

　　由於公司近期準備搬家，可以省事就省事，目前是每天帶自己的筆電，等搬家後我就可以解脫了，但是在這之前主管還是希望我可以先用 Docker ，但是筆電又是 Windows ，有版本的問題，主管就開了一個 Linux 的遠端虛擬機給我，讓我安裝 Docker 。

　　首先先來處理虛擬機的部分，這邊主管是讓我安裝 Termius 和 WinSCP ， Termius 像是虛擬機的命令提示字元( Git Bash 那樣的東西)， WinSCP 則是把檔案傳到虛擬機的工具。

連上 IP 位置

　　安裝好 Termius 後，打開視窗就可以點選 + NEW HOST 進入設定。

　　Address 欄位輸入 IP 位置， Username 和 Password 輸入本機端開給我的帳號密碼， Theme Options 則是可以選擇畫面樣式。

　　WinSCP 連上的方式和 Termius 差不多就不多贅述了，虛擬機的部分大概到這邊，覺得沒有很可怕大概吧。

　　後來主管推薦我一個叫做 FinalShell 的東西，具有命令提示字元功能和傳檔功能，因為主管覺得醜所以就先推薦我用 Termius ，我是覺得沒什麼差啦 XD ~

安裝

• 在虛擬機上先移除系統可能產生的相關程式

  1	yum remove docker docker-common container-selinux docker-selinux docker-engine docker-engine-selinux

• 安裝一些必要套件

  1 2	yum -y install yum-utils yum install device-mapper-persistent-data lvm2 -y

• 新增 Docker 官方的 stable 資料庫（repository），即使要安裝 edge 版本的 Docker，也要先新增這一個資料庫

  1	yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

• 更新 yum 索引

  1	yum makecache fast

• 安裝 Docker-ce 版

  1	yum install docker-ce

第一次安裝 Docker 的時候，會需要匯入 GPG 的金鑰，Docker CE 版的金鑰指紋是 060A 61C5 1B55 8A7F 742B 77AA C52F EB6B 621E 9F35，確認無誤就選擇 y 匯入。

安裝好之後就可以啟動 Docker 了

1

systemctl start docker

來檢查看看版本

1

docker version

也許是因為環境有差，但是有跑出類似的資訊就 OK 哩。

照著教學我是有跑 docker run hello-world 啦，但我懶的再截圖 XD 。
以上是 Docker 安裝流程。

六角學院的大神來六角的下一個主題是 Docker ，講師是 Sam Tsai 剛好最近有在 hahow 開課，被六角邀請過來開講，真是來的太及時了~
前一個主題是 Linux ，也是目前很需要學的，但是太久沒工作下班回家都睡死了 Orz ，希望這次 Docker 能夠參與到。

參考：https://blog.gtwang.org/linux/centos-linux-7-install-docker-tutorial

背景

　　某三流私立大學休閒管理系畢業，之前是中原大學應用數學系升三年級的那年休學，休學一年半後轉學，畢業後透過親友介紹到了社福團體擔任行政的職位，負責了很多工作項目，講難聽一點是在裡面打雜的 QQ ，因為社福團體很缺錢導致我越來越多工，即使我自己不覺得累，但身體已經有疲勞反應了，到後期常常下班後直接睡到隔天上班時間，紓壓娛樂的時間都很難擠出來，後來有一天突然想到就去看了心理醫生，才知道我已經陷入了焦慮和憂鬱的情緒中，有加劇的可能，我才驚覺不能再這樣下去。

　　剛好因為有負責管理官網的關係，也從相關工作的朋友瞭解到一些網站開發的事情，他推薦我可以看六角學院的課程，試試水溫。剛開始看課程時，社福團體的工作還沒有那麼忙碌，可以利用下班時間看，甚至一路看到 JavaScript 學徒試煉了，但後來越來越忙碌也就中斷了學習，但期間我並沒有停止關心六角學院的訊息，還是會參與一些感興趣的線上直播，或是回顧直播內容。

　　至此，我決定在 107 年年底的時候辭職專心學習，並且從頭學習，順便調養身體。

　　另外，本來壓力最大來源是工作，但不希望一直用藥來抑制焦慮和憂鬱的情緒，在和醫生討論後，醫生也同意了停藥，所以辭職後為了調適反而學習時程拉得更長了，最後甚至用了快半年的時間在 Vue 上面，也包括製作作為作品集的最終作業，中間申請當遠端助教的第一個月完全沒有進度的時候，讓我焦慮得不得了。

　　後來在急切又焦慮的情緒中做出了 Vue 最終作業， Ray 也很痛快的跟我說內容不夠建議多看其他人的作品，崩潰了兩三天才打開程式碼和其他人的作品，期間我沒有一直專注在最終作業上，每當被打槍的時候，就轉頭去做履歷和準備面試問題，轉移注意力，這樣一來一回也持續了快兩個月，終於完成了最終作業和履歷。

求職準備

　　在準備履歷和面試的期間請朋友幫忙模擬面試，他是業界的人，被他電了好幾次 QQ。事先練習可以訓練我面試的臨場反應，一開始光是面對他我就緊張到爆，但後來幾次練習，就好了很多，回應上也比較順暢。

　　很高興有他的幫忙，在投遞履歷的時候，讓我可以花比較多的心力去瞭解公司的狀況，而不是緊張的在準備技術問題，面試前甚至面試的前一天，我幾乎沒有在爬前端面試會遇到的技術問題這類的文章。

面試公司

寰娛數位

　　這間是面試的第一間公司，這間其實是在我想進的名單內，一開始沒有想要這麼快就去面試，但因為有些小插曲，反而是我第一間取得面試機會的公司，現在回想起來幸好這間早早就面試。

　　一開始面試的是人資，感覺他很想幫公司找到好的工程師，但他自己也不懂程式，問了一些非~ 常~ 基本的問題。聊到中間他才提到他們是博弈公司，後面的回應及問答就不細說了~

　　之後來的技術主管直接問我想要的待遇，整個過程沒有問到技術問題，也沒有提到工作內容，當下就問我什麼時候可以上班 ( 我心想：有錢也不是這樣子玩的吧…… ) ，但有經濟壓力就硬著頭皮答應了，後續報到時因為其他原因只去了一天瞭解工作內容後，就跟主管說我的能力勝任不了工作內容辭職了。

結果

面試當下取得 offer ，到職一天後離職

宏江有限公司

　　這間是公司主動邀約，是一個不到十人的新創公司，賣鞋子相關，但產品不在台灣賣。

　　面試時才知道是同事找同事，所以邀約者也根本不是人資，是團隊其中一位工程師，邀約的內容是想要找 PHP junior 說真的接到電話的當下覺得超瞎的 囧，後來解釋是說公司有 PHP senior 但是不是很懂前端，想要找一個懂前端的來互相訓練，期望以後有兩位全端。

　　兩位工程師一起面試我，老闆在另一間會議室開會，主要面試我的是 PHP senior ，但問的問題間接透露出他真的很不懂前端，提到加薪、加班等等的問題他們都沒辦法回答我，還有一些不太能接受的回應，整個過程讓我對公司的興趣降到最低點，本來應該是老闆也要面試我，但是問起待遇的時候我的回應讓他們兩人臉色瞬間凝固，草草的就結束了面試。

結果

無聲卡

薩摩亞商鳳之梧數位

　　公司主動邀約，辦公室很大但只有三個人，很多的空桌，之前搜尋時就有看到台北的辦公室是新設立的，在預期之中。

　　到場時人資就拿了筆試題目給我寫，總共 13 題，作答時間 1 個小時，可以使用電腦和網路，很不幸的筆試沒有過，事後檢討才發現 1 小時答那些題目不夠用啊，繳交試卷後，沒有得到回饋就被送客了 QQ 。

　　被刷掉是預期的結果，在投遞履歷的時候就有看到這間，但是職位要求對我來說有點高，也就沒有投遞履歷，沒想到人資會主動找上，就當作練習面試。

結果

筆試失敗

愛酷智能科技

　　公司主動邀約，做類似數據整合。

　　人資問我有沒有用過 D3.js 、 Canvas 等，只好跟他說沒有，在看這間公司的職缺時，就是有看到這些要求才沒有投履歷，沒想到人資還是主動找上了。

　　換另一位前端面試，是位漂亮的姐姐，即使帶著口罩也能感受到她的氣質 XD 。

　　前端沒有看過我的作品，當場要我打開電腦看程式碼，也不知道她在看什麼，滑鼠的滾輪和畫面都切的超快的，問了一些地方怎麼寫和觀念問題，回答的過程我有點緊張，她還叫我不要太緊張 QQ ，回答的還可以，也有覺得答不好的地方。

　　如果進公司就是她會帶，因為公司最近編成兩個部門，另一個部門現在是一位後端兼著做前端，需要另一位前端分離工作。

結果

錄取

宏麗數位

　　投遞履歷的第三天，在我以為無望的時候，收到了 104 的面試通知，公司在捷運附近，公車點也很多，算是交通方便的地點，做餐飲業前後台，偶爾會接外面的專案。

　　面試的技術主管表示有先看過我的電商作品，並說如果前端的部分都是自己做的，沒有太大的問題。問了幾個問題，函式變數取得、閉包、置中的方式等等。

　　主管很 nice ，儘管我很多 JS 底層問題答不太出來 ( 嗚嗚嗚，我有在看 JS 核心課程了啦 QQ ) ，對我的提問都很盡心地回答，公司的氣氛感覺很不錯。

結果

感謝函

面試問題

其實我沒有面試很多間，上述這些加上報到的總共也才六間，尤其其中一間沒有問技術問題，沒有太多問題可以分享。

• Vue 生命週期，很重要，三間公司問
• var 、 let 、 const 差別，兩間公司
• setTimeout 的 Event queue 概念，兩間公司
• MVVM 和 MVC 概念，兩間公司
• 物件傳參考概念，一間公司
• 閉包，我直接跟主管說不懂 XD，一間公司
• 垂直水平置中實現的方法，一間公司

因為我的 JS 核心課程只看了一半，有的只知道一些概念而已，遇到底層的問題大部分在亂答，請不要學我 XD 。

取得面試的機會

　　自認條件對許多職缺來說能力不到，有許多不敢投遞履歷的職缺，但是我照三餐逛想投遞的職缺，加上有碰過人力銀行對企業的後台系統，我知道企業端那邊可以看到這個職缺近期有哪些人來訪，當人資一直看到你的頭像出現在後台，人資就會對你產生興趣，猜測其中有兩間的面試大概是這樣來的，也算是一個小撇步，分享給大家~

　　之前會因為距離的關係選擇只在台北找工作，但後來發現周圍新北也有很多的工作機會，職缺的要求相對來說會比較低一些，自己看著也覺得很有希望，試著投遞了兩間，兩間都願意給我面試機會，如果不介意距離，新北也是個很不錯的選擇 房租也很便宜。

結論

　　也不知道為什麼面試下來，那些常見的問題，我很多沒碰到，有種跟大家走不一樣的路的感覺 XD ，也很幸運的錄取進了轉職後最想做的事情類型的公司。

　　報到的公司不在分享名單裡面，但我不得不說在瞭解了公司的發展方向後，我展現了極大的興趣 眼睛都亮了起來，面試中做的筆記是所有面試的公司中做的最勤快的，主管甚至還拼 Git flow 給我 XD ，我知道這個東西但當下沒有聽得很清楚，主管以為我不懂馬上拼給我 XD ，在面試途中實在問了太多的關鍵字怎麼拼 XD ，主管也超有耐心地等我做筆記 ( 雖然主管看到筆試答案劈頭就跟我說寫得不好 QQ )，但我想這應該是被錄取的原因。

　　在全職準備的過程中難免跑不了經濟壓力，在製作 Vue 最終作業時因為弄得很久，又遇到第一間公司的狀況，要重新找工作，讓我一度想放棄，想說乾脆隨便找個工作好了，這樣自暴自棄的想法，但是心裡不斷有個不甘心就這樣放棄的聲音在回響，幸好幾天後面試邀約不斷，幾次面試下來，意外找到理想的職位，現在回頭看看這些跌倒的痕跡，加上因為身體和心理的因素關係，我的學程拉長到了兩年之久，總有種 啊~ 幸好沒有放棄，感謝我自己堅持了下來 。

　　在最低落的時候看到了一個文章的標題「真的快撐不下去的時候，不要害怕求救！」推了我一把，那時我用了各種方式詢問老師們和助教們，感謝他們一路的鼓勵和支持，我才能夠支撐下去。

　　最後，最想要感謝的對象是我的伴侶，從 107 年底算起也將近快要一年半的時間，支撐了全部的開支，也包容我緩慢的進度，他總是跟我說，你不是別人，不用處處和別人比較，想放棄的話我也不會說什麼，你的職涯是你自己的不是我的。

　　一切都是急不來的，也不是比較出來的。

　　希望這篇能夠鼓勵大家，特別是和我一樣覺得自己學程很長，中間一度想放棄的人，以及特別、特別是有情緒問題方面的人，我沒有心力研究很炫砲的動畫效果，也沒有好學歷，大部分的時間花在處理情緒上面，雖然走得很慢，但我知道因為有六角學院的大家，這條路我不會孤單，業配在這裡。

　　接觸六角學院的時我記得很清楚是什麼時間點，因為我在購買完 HTML、CSS 課程後的隔天就看到推出了幾一周年優惠 QQ ，順便說，前陣子已經四週年啦。

　　接下來等待報到的日子裡，要來調整睡眠時間啦，不能再弄到半夜兩三點了 Orz 炒大頭菜很好玩啊 。

最近想複習六角的 JavaScript 學徒的試煉 課程內容，把先前理解到的重新整理，順便紀錄一下，第一個想到的就是 AJAX 了， AJAX 算是前端一個蠻重要的小技術，趕緊來寫吧~

什麼是 AJAX 呢？

非同步的 JavaScript 及 XML （Asynchronous JavaScript and XML，AJAX） 並不能稱做是種「技術」，而是 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法。這些技術包括 HTML 或 XHTML、層疊樣式表、JavaScript、文件物件模型、XML、XSLT 以及最重要的 XMLHttpRequest 物件。
當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。
擷取自：https://ithelp.ithome.com.tw/articles/10200409

哇，好多的專有名詞還是不太懂 AJAX 是什麼。

簡單來說：在不重整的網頁的情況下，透過 JS 事件把請求到的資料渲染到網頁上。

最常被用在註冊帳號時，可以先透過檢查按鈕，檢查帳號是否有重複。

這樣做的好處是可以漸少伺服器的負擔

網路上有很多 AJAX 的詳細介紹和說明，這邊主要是想紀錄程式碼實作的部分

宣告變數

首先會先宣告一個變數並賦予它的物件內容為 XMLHttpRequest

1

var xhr = new XMLHttpRequest();

這時我們在瀏覽器呼喚 xhr 這個變數就會得到下面圖片顯示的物件內容

先來提 readyState ，這是指 xhr 物件的狀態

1

readyState: 0

屬性值為 0 的時候

代表已經建立了 XMLHttpRequest 物件，但是還沒有連結你要撈的資料

open

接下來會用到一個指令為 open()

1

xhr.open('','',true);

帶入的順序為格式、要讀取的網址、同步與非同步

常見的格式為：

• GET - 讀取資料
• POST - 傳送資料
• PUT - 修改資料
• DELETE - 刪除資料
  其他還有很多請求方法， MDN 文件

同步與非同步的部分在之後的更新或文章再來講，這裡先設為 ture 即可。

當上述的值寫入 open() 內後

1

xhr.open('GET','網址',true);

此時 readyState 就變為 1 了，意思是

你已經用了 open() ，但你還沒有把資料傳送過去

send

傳送資料的語法為 send()

但沒有要傳送資料該怎麼處理呢？ 寫入 null 即可

1

xhr.send(null); //代表為空值

這時 readyState 變為 4 了，意思是

你撈到資料了，數據已經完全接收到了

撈到的資料

而我們撈到的內容就會相應顯示在 response 系列的屬性中，撈到的物件資料會以字串的方式來呈現，屆時就可以利用 JSON.parse() 來轉換為 JavaScript 可讀取的格式。

其他 readyState 的意思

前面講了 readyState 的 0 、 1 、 4 所代表的意思，那麼 2 和 3 呢？

2 代表的是

偵測到你用了 send

3 代表的是

loading ，資料量太大了還再載入中

總結

這邊來總結一下程式碼和所有的 readyState 數字所代表的含意

首先要建立一個 XMLHttpRequest 物件，利用 open() 和 send() 來請求和傳送資料。

1
2
3
4

//上述所有的程式碼合併
var xhr = new XMLHttpRequest();
xhr.open('GET','網址',true);
xhr.send(null);

readyState 0 ~ 4 ：
0 → 代表已經建立了 XMLHttpRequest 物件，但是還沒有連結你要撈的資料
1 → 你已經用了 open() ，但你還沒有把資料傳送過去
2 → 偵測到你用了 send
3 → loading ，資料量太大了還再載入中
4 → 你撈到資料了，數據已經完全接收到了

最後，原本只是想簡單紀錄一下 AJAX 的語法，但看了一小部分才發現很多細節忘光光了，只好都記錄下來，寫著寫著就這麼多內容去了 Orz 。

我沒有想要變系列文阿~ (吶喊

今天來分享一下如何在 Vue 使用 AOS 動畫，這是一款蠻好上手的滾動式動畫插件，官方也提供很多種設定，讓我們可以自訂義想呈現的動畫效果，整體操作起來簡單易懂。

AOS 官方連結： https://michalsnik.github.io/aos/

下載套件

首先先在專案下安裝此插件

指令碼

1

npm i aos@next

注入 main.js 中

把 AOS import 進 main.js 裡面

內容

1
2
3
4
5
6
7
8
9
10

import AOS from "aos";
import "aos/dist/aos.css";

new Vue({
  created() {
    AOS.init({ });
    },
    router,
    render: h => h(App)
    }).$mount("#app");

這邊要注意的是，需要在 new Vue 裡面創建一個 created(){} 把官方的 AOS.init({}); 寫入其中。

運行動畫效果

接下來就可以在專案中帶入動畫效果了

1

<div data-aos="fade-up"></div>

是不是很簡單 XD

客製化

• 細部設定

  官方提供蠻多的客製化內容，如 data-aos-duration:400 動畫速率、 data-aos-once="true" 動畫進行一次等設定，連結

  1	<div data-aos="fade-up" data-aos-duration="1000" data-aos-once="false" ... ></div>

• 全域設定

  除了個別設定外，當然也有寫在 AOS.init({}); 裡的全域設定，連結

  1 2 3 4 5

  AOS.init({ disable: false, startEvent: 'DOMContentLoaded', ... });

參考網址：https://www.yasminzy.com/vue/aos.html#steps

前言

今天來寫一下怎麼讓 Vue build 出來的內容推到 gh-pages 上，相信很多同學懂得在 GitHub 產生靜態網頁，但是卻不懂怎麼讓 gh-pages 上傳的檔案內容不一樣，這邊來分享我的解決方式

如果不懂一般作法可以先看這部六角學院的教學

真實情況

Vue 最終作業辛辛苦苦的做好了，要繳交的時候，卻發現不知道怎麼產生靜態網頁，因為 GitHub 展示用的靜態網頁是讀取目錄上的 index.html ，但是真的要帶入靜態網頁的內容卻是在 build 出來的 dist 資料夾內，該怎麼做呢？

所以就會常常看到回覆說只要把 dist 內容推到 gh-pages 上面就可以了，問題是怎麼做？

問題點是我連第一步怎麼開始都不知道啊 XD
路徑在 dist 執行 git init 就是會跳錯啊，到底該怎麼做？
是的，我的 git 就是這麼菜

以下會分為 Vue Cli 2 和 Vue Cli 3 以上的版本，兩種方式。

會這樣區分是因為目前還沒有去研究 Vue Cli 3 以上的版本 publicPath 要怎麼用修改，以及確認 Vue Cli 2 是否能套用官方提供的方法。

Vue Cli 2 的處理方式

這邊先講一下 Vue Cli 2 的處理方式，因為我繳交最終作業後馬上就升級為 Vue Cli 3 ，對我來說 Vue Cli 2 只是過渡期，處理的次數很少，下面的方式夠用了。

• 先處理 build 檔案路徑

首先要去改 config 資料夾內的 index.js 裡面的 build 中的 assetsPublicPath 的值，改為空值或是相對路徑，這關係到 build 出來的路徑

1

'' 或是 './'

然後執行 build

• 笨方法

比較易懂的方式就是把 build 出來的 dist 資料夾拉到桌面上
利用指令 git init 建立一個 git 儲存庫
接下來輸入和平常一樣的指令就好

1
2

git add .
git commit -m 'commit 紀錄名稱'

• 建立推送地址

remote 要推送的專案位置

1

git remote add origin https://github.com/你的名稱/專案名稱.git

• 推送內容

利用以下語法把 dist 內容推到 gh-pages 上

1

git push -f origin master:gh-pages

推送的時候系統會自動產生 gh-pages 分支，請不要太擔心

同時系統也會自動幫你選擇產生靜態網頁， Vue Cli 2 的推送方式到這邊。

Vue Cli 3 或以上的版本

官方文件有說到如何快速的把 dist 內容推到 gh-pages 分支上

這邊換個方式說明~

在專案下建立兩個檔案

一個叫做 vue.config.js ，並且寫入以下內容

1
2
3
4
5

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/專案名稱/'
    : '' 或 './'
}

另一個叫做 deploy.sh ，並且寫入以下內容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建
npm run build

# cd 到构建输出的目录下 
cd dist

# 部署到自定义域域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 部署到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 部署到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

上面要打開倒數第二行的註解，調整相應的內容

1

git push -f git@github.com:你的名字/專案名稱.git master:gh-pages

檔案建立位置示意圖

接下來輸入指令 sh deploy.sh 或是到專案資料夾雙擊 deploy.sh 檔案就可以了

Window 執行問題

這時候如果是在 VSCode 環境下執行指令 sh deploy.sh 是會跳錯的，原因是 Windows 內沒有包含 Linux 環境，這是 sh 檔案的原生環境， IOS 就沒有這個問題。

使用 Git Bash 來到專案路徑，執行指令 sh deploy.sh 就可以順利執行 sh 檔。

但是有的執行後會跳出以下訊息
Please make sure you have the correct access rights and the repository exists.

於是把這串話拿去 google ，得知這是 GitHub 的 SSH 驗證問題
這邊參考網路上的做法 https://blog.csdn.net/jingtingfengguo/article/details/51892864

1. 首先得重新在 git 設定推送身分的名字和信箱

   1 2	git config --global user.name "yourname" git config --global user.email "your@email.com"

   PS： yourname 是你設定的名字、 your@email.com 是你設定的信箱，基本上和原來一樣就可以哩~

2. 直接搜尋 .ssh 資料夾 ( 通常會在使用者資料夾內找到 ) ，第一次操作的時候裡面只會有個 know_hosts 檔案，不要怕，刪除它！

3. 回到 Git Bash 輸入 ssh-keygen -t rsa -C "your@email.com" mail 必須和上面設置的一樣。

4. 接者會出現以下訊息
   Generating public/private rsa key pair.
Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):
   直接按 Enter鍵 就好，按到他看起來有在跑東西的時候，直到 .ssh 資料夾出現兩個 id_rsa 檔。

5. 用記事本打開 id_rsa 檔，複製內容為 ssh-rsa 開頭的全部內容，雖然兩個檔案一樣叫做 id_rsa ，但是內容不一樣，所以兩個都要打開來看。

6. 登入你的 GitHub 進入以下地方，點選 New SSH Key

   

   把複製到的內容貼入 Key (Title 可以不用寫東西)

   

7. 成功增加後，回到 Git Bash 輸入 ssh -T git@github.com 然後會挑出一堆話
   The authenticity of host 'github.com (xxxxxxx)' can't be established.RSA key fingerprint is SHA256:nThbg6kXUpJWGl7E1IGOCspRomTxdCARLviKw6E5SY8.Are you sure you want to continue connecting (yes/no)? 回答 yes 即可

然後你就會得到成功的訊息
You've successfully authenticated, but GitHub does not provide shell access.

8. 接著在專案路徑下執行 sh deploy.sh 或是到專案資料夾雙擊 deploy.sh 檔案就可以了

推送成功後開心地去看渲染好的網頁吧~

更新補充：有報導指出微軟官方已經有導入 Linux 環境了，但是要打開 Linux 需要透過一些步驟，我在找這個問題的解決方法時有試著打開過，嗯…… 我太菜了還是先關掉好了。

初建 Hexo 部落格，先寫個小東西來體驗一下

嵌入 CodePen

Hexo 官方有提供的標籤外掛語法
其中的 iframe 語法：

1

{% iframe url [width] [height] %}

CodePen 提供的 iframe 程式碼：

1
2
3
4

<iframe height="265" style="width: 100%;" scrolling="no" title="img範例 " src="https://codepen.io/Nighthree/embed/JjoERzj?height=265&theme-id=dark&default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href='https://codepen.io/Nighthree/pen/JjoERzj'>img範例 </a> by Nighthree
  (<a href='https://codepen.io/Nighthree'>@Nighthree</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

把官方提供的方法 [width] [height] 去掉，取出 CoddPen 提供的 iframe 的 src 路徑帶入 url ，在文當中加入以下

1

{% iframe https://codepen.io/Nighthree/embed/JjoERzj?height=265&theme-id=dark&default-tab=html,result %}

這樣就嵌入成功啦

問題來了 CodePen iframe 去哪找呢？

在這裡

右下角的 Embed (真是有夠小的啦)，然後我會在 Theme 的部分改為 Dark ，有的人系統會預設 Light (我第一次打開就是)，最後底下的地方切到 iframe 碼的部分就可以哩~

結語

感覺還不錯，下次再看看要寫什麼吧，或是把之前寫的東西搬過來