EP30 - ex2. Fetching data

fetching data 應該是跟後端API串接的範例嗎？
這個範例應該很重要！要好好練習～
這個範例從 GitHub 的 API 抓取最新的 Vue.js 提交數據並顯示為一個列表。您可以在兩個分支之間切換。

<script setup> 部分

<script setup>
import { ref, watchEffect } from 'vue'

// 定義 API URL 常數
const API_URL = `https://api.github.com/repos/vuejs/core/commits?per_page=3&sha=`

// 定義可選分支
const branches = ['main', 'v2-compat']

// 設定當前選擇的分支，預設為 'main'
const currentBranch = ref(branches[0])

// 設定提交記錄的狀態
const commits = ref([])

// 監聽 currentBranch 的變化，並抓取對應分支的提交記錄
watchEffect(async () => {
  // 這個副作用會立即執行，並在 currentBranch.value 改變時重新執行
  const url = `${API_URL}${currentBranch.value}`
  // 抓取 API 數據並解析為 JSON，存入 commits
  commits.value = await (await fetch(url)).json()
})

// 截斷長訊息只顯示第一行
function truncate(v) {
  const newline = v.indexOf('\n')
  return newline > 0 ? v.slice(0, newline) : v
}

// 格式化日期，將 'T' 和 'Z' 替換成空格
function formatDate(v) {
  return v.replace(/T|Z/g, ' ')
}
</script>

<template> 部分

<template>
  <!-- 標題 -->
  <h1>Latest Vue Core Commits</h1>
  
  <!-- 分支切換按鈕 -->
  <template v-for="branch in branches">
    <input type="radio"
      :id="branch"
      :value="branch"
      name="branch"
      v-model="currentBranch">
    <label :for="branch">{{ branch }}</label>
  </template>
  
  <!-- 當前分支名稱 -->
  <p>vuejs/vue@{{ currentBranch }}</p>
  
  <!-- 提交記錄列表 -->
  <ul v-if="commits.length > 0">
    <li v-for="{ html_url, sha, author, commit } in commits" :key="sha">
      <a :href="html_url" target="_blank" class="commit">{{ sha.slice(0, 7) }}</a>
      - <span class="message">{{ truncate(commit.message) }}</span><br>
      by <span class="author">
        <a :href="author.html_url" target="_blank">{{ commit.author.name }}</a>
      </span>
      at <span class="date">{{ formatDate(commit.author.date) }}</span>
    </li>
  </ul>
</template>

<style> 部分

<style>
a {
  text-decoration: none;
  color: #42b883;
}
li {
  line-height: 1.5em;
  margin-bottom: 20px;
}
.author,
.date {
  font-weight: bold;
}
</style>

當這段 Vue.js 代碼運行時，它會自動從 GitHub 的 API 抓取最新的 Vue.js 提交數據並顯示在網頁上。以下是這段代碼的處理邏輯：

1. 引入 Vue.js 的 Composition API 函數：
2. • ref 用於創建響應式變數。
   • watchEffect 用於監聽變數的變化，並在變化時執行相關邏輯。
2. 設置 API URL 和分支：
3. • API_URL 定義了 GitHub API 的基礎 URL，將用於請求提交數據。
   • branches 定義了一個包含可選擇分支的數組，包括 'main' 和 'v2-compat'。
3. 定義響應式變數：
4. • currentBranch 是一個響應式變數，用來存儲當前選擇的分支。初始化為 branches 的第一個元素，即 'main'。
   • commits 是一個響應式變數，用來存儲從 API 獲取的提交數據，初始化為空數組。
4. 使用 watchEffect 監聽 currentBranch 的變化：
5. • 當 currentBranch 的值改變時，watchEffect 中的回調函數會自動執行。
   • 回調函數會構建請求的 URL，然後使用 fetch 從 GitHub API 獲取最新的提交數據。
   • 獲取到的數據會解析為 JSON 格式，並存儲到 commits 中。
5. 定義輔助函數：
6. • truncate 用來截斷提交訊息，只顯示第一行。
   • formatDate 用來格式化日期，將 'T' 和 'Z' 替換為空格，使日期顯示更友好。
6. 模板部分：
7. • 顯示標題 "Latest Vue Core Commits"。
   • 使用 v-for 迴圈渲染分支切換按鈕，每個按鈕綁定一個分支，並通過 v-model 綁定到 currentBranch。
   • 顯示當前選擇的分支名稱。
   • 如果 commits 有數據，使用 v-for 迴圈顯示提交記錄。每條記錄包括提交的連結、截斷後的提交訊息、作者的名稱及其 GitHub 頁面連結、和格式化後的提交日期。
7. 樣式部分：
8. • 設定連結的樣式，使其顏色為 Vue.js 主題顏色。
   • 設定列表項的行高和下邊距。
   • 設定作者和日期的字體加粗。

資料處理流程總結

1. 初始化狀態：設定 API URL 和可選分支，並初始化響應式變數 currentBranch 和 commits。
2. 監聽變化：使用 watchEffect 監聽 currentBranch 的變化，一旦變化，重新抓取對應分支的提交數據。
3. 抓取數據：當 currentBranch 改變時，構建請求 URL，使用 fetch 從 GitHub API 獲取提交數據，並解析為 JSON 存儲到 commits 中。
4. 顯示數據：在模板中動態顯示當前選擇的分支和提交記錄，並使用輔助函數處理訊息和日期顯示。

這樣，整個應用就能夠自動更新並顯示最新的提交數據，並允許用戶在不同的分支之間切換。

以前都不知道原來github可以用API把原始碼撈出來～
這些資訊可以去這邊查看 https://docs.github.com/en/rest
以後可以對開源項目的活躍度跟版本追蹤～做做統計數據～