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 提交數據並顯示在網頁上。以下是這段代碼的處理邏輯：
- 引入 Vue.js 的 Composition API 函數：
ref用於創建響應式變數。watchEffect用於監聽變數的變化，並在變化時執行相關邏輯。
- 設置 API URL 和分支：
API_URL定義了 GitHub API 的基礎 URL，將用於請求提交數據。branches定義了一個包含可選擇分支的數組，包括'main'和'v2-compat'。
- 定義響應式變數：
currentBranch是一個響應式變數，用來存儲當前選擇的分支。初始化為branches的第一個元素，即'main'。commits是一個響應式變數，用來存儲從 API 獲取的提交數據，初始化為空數組。
- 使用
watchEffect監聽currentBranch的變化： - 當
currentBranch的值改變時，watchEffect中的回調函數會自動執行。 - 回調函數會構建請求的 URL，然後使用
fetch從 GitHub API 獲取最新的提交數據。 - 獲取到的數據會解析為 JSON 格式，並存儲到
commits中。
- 當
- 定義輔助函數：
truncate用來截斷提交訊息，只顯示第一行。formatDate用來格式化日期，將 'T' 和 'Z' 替換為空格，使日期顯示更友好。
- 模板部分：
- 顯示標題 "Latest Vue Core Commits"。
- 使用
v-for迴圈渲染分支切換按鈕，每個按鈕綁定一個分支，並通過v-model綁定到currentBranch。 - 顯示當前選擇的分支名稱。
- 如果
commits有數據，使用v-for迴圈顯示提交記錄。每條記錄包括提交的連結、截斷後的提交訊息、作者的名稱及其 GitHub 頁面連結、和格式化後的提交日期。
- 樣式部分：
- 設定連結的樣式，使其顏色為 Vue.js 主題顏色。
- 設定列表項的行高和下邊距。
- 設定作者和日期的字體加粗。
資料處理流程總結
- 初始化狀態：設定 API URL 和可選分支，並初始化響應式變數
currentBranch和commits。 - 監聽變化：使用
watchEffect監聽currentBranch的變化，一旦變化，重新抓取對應分支的提交數據。 - 抓取數據：當
currentBranch改變時，構建請求 URL，使用fetch從 GitHub API 獲取提交數據，並解析為 JSON 存儲到commits中。 - 顯示數據：在模板中動態顯示當前選擇的分支和提交記錄，並使用輔助函數處理訊息和日期顯示。
以前都不知道原來github可以用API把原始碼撈出來～
這些資訊可以去這邊查看 https://docs.github.com/en/rest
以後可以對開源項目的活躍度跟版本追蹤～做做統計數據～
