Comment créer une application de reporting à l'aide de Vue 3 et de l'API Composition ?

Vue est un framework JavaScript qui permet aux développeurs de créer des applications Web. Il est principalement utilisé pour créer des applications Web d’une seule page. L'utilisation de vue pour créer des applications Web présente de nombreux avantages, tels qu'une structure simple, une architecture légère basée sur des composants, etc.

Avant de commencer ce tutoriel, jetons un coup d'œil à l'application de reporting et à l'API de composition.

Les applications de reporting sont des applications Web d'une ou plusieurs pages qui affichent des données utiles dans un format approprié (par exemple, un format de tableau). Il est utilisé pour les rapports qui affichent les données dans un format spécifique.

L'API de composition permet aux développeurs de coder en fonction de la logique plutôt que du cycle de vie. Nous pouvons créer un code plus maintenable et modulaire dans les applications vue.

Maintenant, nous allons utiliser l'API « https://jsonplaceholder.typicode.com/posts » pour obtenir les données et formater toutes les données du tableau dans l'application vue.

Les utilisateurs doivent suivre les étapes ci-dessous pour commencer à créer des applications vue.

• Étape 1 - Dans la première étape, l'utilisateur doit installer vue sur son ordinateur local. Ouvrez un terminal et exécutez les commandes suivantes.

npm install -g @vue/cli

• Étape 2 - Entrez maintenant la commande suivante dans le terminal pour démarrer l'application vue. Ici, "reporting-app" est le nom de l'application.

npx vue create reporting-app

• Étape 3 - Nous avons créé avec succès l'application vue. Maintenant, exécutez la commande suivante dans le terminal pour accéder au répertoire du projet.

cd reporting-app

• Étape 4 - Ensuite, nous devons installer les dépendances requises dans l'application vue en exécutant la commande suivante dans le terminal.

npm install axios vue-router

Nous avons installé axios pour effectuer des requêtes API et vue-router pour gérer le routage de l'application.

• Étape 5 - Maintenant, créez un fichier « router.js » dans le répertoire du projet « src ». Après cela, ajoutez le code suivant dans le fichier.

Nom du fichier – 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

Nous avons importé les composants HomeView et ReportTable dans le code ci-dessus à partir des fichiers pertinents. Après cela, nous avons créé les routeurs "/" et "/report" et les avons exportés.

• Étape 6 - Configurez la configuration du routeur de votre application dans le fichier « main.js ». Ajoutez le code suivant dans le fichier main.js.

Nom du fichier – 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')

Dans le code ci-dessus, nous avons importé le composant du routeur et l'avons utilisé avec l'application via la méthode app.use().

• Étape 7 - Ensuite, nous devons configurer le fichier « App.vue » pour afficher des composants spécifiques basés sur le routeur. Ajoutez le contenu suivant au fichier App.vue.

Nom du fichier – 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>

• Étape 8 - Maintenant, nous allons créer les composants qui seront rendus sur la page Web. Tout d’abord, créez le dossier ‘views’ dans le répertoire ‘src’ et créez-y le fichier ‘homeview.vue’.

Après cela, ajoutez le code suivant dans le fichier.

Nom du fichier – Homeview.vue

<template>
   <div>
      <h1> Home </h1>
   </div>
</template>
<script>
   export default {
     name: 'HomeView'
   }
</script>

Dans le code ci-dessus, nous rendons "Accueil" sur la page Web.

• Étape 9 - Maintenant, nous devons créer le composant ReportTable.vue dans le répertoire « views ». Après cela, ajoutez le code suivant dans le fichier.

Nom du fichier – 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>

Dans le code ci-dessus, nous utilisons la fonction "reactive" de l'API de composition pour créer un objet d'état réactif contenant le tableau "reports".

Chaque fois qu'un composant est monté sur une page web, nous utilisons la méthode "onMount()" pour récupérer les données de l'API via axios. Après cela, nous stockons la réponse dans le tableau reports et renvoyons l'objet d'état.

Nous avons créé des tableaux pour représenter les données dans le code du modèle. Après cela, nous accédons au tableau reports à partir de l'objet states et utilisons une boucle for pour parcourir toutes les données et les afficher dans les lignes du tableau. De plus, nous avons stylisé la table.

Ici, les utilisateurs peuvent constater que nous n'utilisons pas le cycle de vie du composant pour mettre à jour les données car nous utilisons l'API de composition pour rendre l'objet d'état réactif. Par conséquent, chaque fois que la réponse de l’API est mise à jour, elle restitue automatiquement les données.

• Étape 10 - Exécutez la commande suivante dans le répertoire du projet pour exécuter le projet.

npm run serve

Maintenant, les utilisateurs doivent ouvrir l'URL http://192.168.110.33:8080/report pour afficher les données de l'API sous forme de tableau. Il affichera la sortie comme indiqué ci-dessous.

Les utilisateurs ont appris à utiliser les fonctionnalités de l'API de composition dans ce tutoriel. Comme mentionné ci-dessus, lorsque nous utilisons l'API de composition, nous n'avons pas besoin de gérer le cycle de vie car nous pouvons rendre la variable ou l'objet réactif à l'aide de la fonction "reactive()". De plus, les utilisateurs peuvent essayer l'API de composition qui met à jour les données et observer comment elle restitue la page Web lorsque les variables réactives sont mises à jour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!