資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 Vue 3 和組合式 API 建立一個報表應用？
Vue 是一款 JavaScript 框架，允許開發者建立 Web 應用。它主要用於構建單頁面 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')
在上面的程式碼中，我們匯入了 router 元件，並使用 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 獲取資料。之後，我們將響應儲存在 reports 陣列中並返回狀態物件。
我們在模板程式碼中建立了表格以表示資料。之後，我們從 states 物件中訪問 reports 陣列，並使用 for 迴圈遍歷所有資料並在表格行中顯示它們。此外，我們還對錶格進行了樣式設定。
在這裡，使用者可以觀察到我們沒有使用元件生命週期來更新資料，因為我們使用了組合式 API 來使狀態物件具有響應性。因此，每當 API 的響應更新時，它都會自動重新渲染資料。
步驟 10 − 在專案目錄中執行以下命令以執行專案。
npm run serve
現在，使用者應該開啟 http://192.168.110.33:8080/report URL 以查看錶格格式的 API 資料。它將顯示如下所示的輸出。
在本教程中，使用者學習瞭如何使用組合式 API 的功能。如上所述，當我們使用組合式 API 時，我們不需要處理生命週期，因為我們可以使用 ‘reactive()’ 函式來使變數或物件具有響應性。此外，使用者還可以嘗試使用更新資料時的組合式 API，並觀察每當響應式變數更新時它如何重新渲染網頁。
610 次檢視
