如何使用 Vue 3 和 Composition 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')

在上面的代码中，我们导入了路由器组件，并通过 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中文网其他相关文章！