数据结构
网络
关系型数据库管理系统
操作系统
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 次查看
