Vue 是一個 JavaScript 框架，允許開發人員建立 Web 應用程式。它主要用於建立單頁網頁應用程式。使用 vue 建立 Web 應用程式有許多好處，例如結構簡單、輕量級、基於元件的架構等。
在開始本教學之前，讓我們先了解一下報告應用程式和合成 API。
報告應用程式是單頁或多頁 Web 應用程序，以適當的格式（例如表格格式）顯示有用資料。它用於以特定格式顯示資料的報告。
組合 API 允許開發人員基於邏輯而不是生命週期進行編碼。我們可以在vue應用程式中創建更多可維護和模組化的程式碼。
現在，我們將使用「https://jsonplaceholder.typicode.com/posts」API 來取得資料並格式化 vue 應用程式中表格中的所有資料。
使用者應按照以下步驟開始建立 vue 應用程式。
步驟 1 - 在第一步驟中，使用者需要在本機上安裝 vue。打開終端機並執行以下命令。
npm install -g @vue/cli
第 2 步 - 現在，在終端機中輸入以下命令來啟動 vue 應用程式。這裡，「reporting-app」是應用程式名稱。
npx vue create reporting-app
第 3 步 - 我們已成功建立 vue 應用程式。現在，在終端機中執行以下命令以進入專案目錄。
cd reporting-app
第 4 步 - 接下來，我們需要透過在終端機中執行以下命令來在 vue 應用程式中安裝所需的依賴項。
npm install axios vue-router
我們安裝了 axios 來發出 API 請求，並安裝了 vue-router 來處理應用程式的路由。
第 5 步 - 現在，在「src」專案目錄中建立一個「router.js」檔案。之後，在文件中加入以下程式碼。
檔名 – router.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import ReportTable from './views/ReportTable.vue'
const routes = [{
path: '/',
name: 'home',
component: HomeView
},{
path: '/report',
name: 'report',
component: ReportTable
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
我們從相關文件中匯入了上述程式碼中的 HomeView 和 ReportTable 元件。之後，我們創建了“/”和“/report”路由器，並將它們匯出。
第 6 步 - 在「main.js」檔案中設定應用程式的路由器設定。在 main.js 檔案中加入以下程式碼。
檔名 – main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')
在上面的程式碼中，我們匯入了路由器元件，並透過 app.use() 方法將其與應用程式一起使用。
第 7 步 - 接下來，我們需要設定「App.vue」檔案以顯示基於路由器的特定元件。將以下內容新增至App.vue檔案。
檔名 – App.vue
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from './views/HomeView.vue'
import ReportTable from './views/ReportTable.vue'
const routes = [{
path: '/',
name: 'home',
component: HomeView
},{
path: '/report',
name: 'report',
component: ReportTable
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default <template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {
name: "App",
};
</script>
第 8 步 - 現在，我們將建立要在網頁上呈現的元件。首先，在 ‘src’ 目錄中建立 ‘views’ 資料夾，並在其中建立‘homeview.vue’檔案。
之後，在文件中加入以下程式碼。
檔名 – Homeview.vue
<template>
<div>
<h1> Home </h1>
</div>
</template>
<script>
export default {
name: 'HomeView'
}
</script>
在上面的程式碼中，我們在網頁上渲染了「Home」。
第 9 步 - 現在，我們需要在「views」目錄中建立 ReportTable.vue 元件。之後，在文件中加入以下程式碼。
檔名 – ReportTable.vue
<template>
<div class = "report">
<h1 class = "report-heading"> Report </h1>
<!-- Creating the table -->
<table class = "report-table">
<thead>
<tr>
<th> User ID </th>
<th> ID </th>
<th> Title </th>
<th> Body </th>
</tr>
</thead>
<tbody>
<!-- Iterating through the reports and showing every report one by one -->
<tr v-for = "report in state.reports" :key = "report.id">
<td> {{ report.userId }} </td>
<td> {{ report.id }} </td>
<td> {{ report.title }} </td>
<td> {{ report.body }} </td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import { reactive, onMounted } from "vue";
import axios from "axios";
export default {
setup() {
// using the composition API
const state = reactive({
reports: [],
});
// fetching data on the mount, and storing response in the reports array
onMounted(() => {
axios
.get("https://jsonplaceholder.typicode.com/posts")
.then((response) => {
state.reports = response.data;
})
.catch((error) => {
console.log(error);
});
});
return { state };
},
};
</script>
<style>
/* Styling the table */
.report {
max-width: 800px;
margin: 0 auto;
padding: 20px;
font-family: Arial, sans-serif;
color: #333;
}
.report-heading {
font-size: 28px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
}
.report-table {
width: 100%;
border-collapse: collapse;
}
.report-table th {
background-color: #333;
color: #fff;
padding: 10px;
text-align: left;
font-size: 18px;
}
.report-table td {
background-color: #f5f5f5;
padding: 10px;
font-size: 16px;
}
.report-table tr:hover {
background-color: #ddd;
}
</style>
在上面的程式碼中，我們使用組合 API 的「reactive」函數來建立一個包含「reports」陣列的反應式狀態物件。
每當元件安裝在網頁上時，我們都使用「onMount()」方法透過 axios 從 API 取得資料。之後，我們將回應儲存在報表數組中並傳回狀態物件。
我們建立了表格來表示模板程式碼中的資料。之後，我們從 states 物件存取 reports 數組，並使用 for 循環遍歷所有資料並將它們顯示在表格行中。此外，我們也設計了表格的樣式。
在這裡，使用者可以觀察到我們沒有使用元件生命週期來更新數據，因為我們使用了組合 API 來使狀態物件具有反應性。因此，每當 API 的回應更新時，它都會自動重新呈現資料。
第 10 步 - 在專案目錄中執行以下命令來執行專案。
npm run serve
現在，使用者應該打開 http://192.168.110.33:8080/report URL 以查看表格格式的 API 資料。它將顯示如下所示的輸出。
使用者在本教學中學習如何使用組合 API 的功能。如上所述，當我們使用組合 API 時，我們不需要處理生命週期，因為我們可以使用「reactive()」函數來使變數或物件具有反應性。此外，使用者還可以嘗試使用更新資料的組合 API，並觀察響應式變數更新時它如何重新渲染網頁。
以上是如何使用 Vue 3 和 Composition API 建立報告應用程式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
