如何使用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获取数据。之后，我们将响应存储在reports数组中并返回状态对象。

我们在模板代码中创建了一个表来表示数据。之后，我们从状态对象中访问reports数组，并使用for循环遍历所有数据，并将其显示在表格行中。此外，我们还给表格添加了样式。

在这里，用户可以观察到我们没有使用组件生命周期来更新数据，因为我们使用组合API使状态对象变为响应式。因此，每当来自API的响应更新时，数据将自动重新渲染。