如何使用 Vue 3 和 Composition API 建立報告應用程式？

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中文網其他相關文章！