Wie erstelle ich eine Berichtsanwendung mit Vue 3 und der Composition API?

Vue ist ein JavaScript-Framework, mit dem Entwickler Webanwendungen erstellen können. Es wird hauptsächlich zum Erstellen von Single-Page-Webanwendungen verwendet. Die Verwendung von Vue zum Erstellen von Webanwendungen bietet viele Vorteile, z. B. einfache Struktur, leichte, komponentenbasierte Architektur usw.

Bevor wir mit diesem Tutorial beginnen, werfen wir einen Blick auf die Berichtsanwendung und die Kompositions-API.

Berichtsanwendungen sind ein- oder mehrseitige Webanwendungen, die nützliche Daten in einem geeigneten Format (z. B. Tabellenformat) anzeigen. Es wird für Berichte verwendet, die Daten in einem bestimmten Format anzeigen.

Composition API ermöglicht es Entwicklern, Code basierend auf Logik und nicht auf Lebenszyklus zu erstellen. Wir können wartbareren und modulareren Code in Vue-Anwendungen erstellen.

Jetzt verwenden wir die API „https://jsonplaceholder.typicode.com/posts“, um die Daten abzurufen und alle Daten in der Tabelle in der Vue-Anwendung zu formatieren.

Benutzer sollten die folgenden Schritte befolgen, um mit der Erstellung von Vue-Anwendungen zu beginnen.

• Schritt 1 – Im ersten Schritt muss der Benutzer vue auf seinem lokalen Computer installieren. Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus.

npm install -g @vue/cli

• Schritt 2 – Geben Sie nun den folgenden Befehl im Terminal ein, um die Vue-Anwendung zu starten. Hier ist „reporting-app“ der Anwendungsname.

npx vue create reporting-app

• Schritt 3 – Wir haben die Vue-Anwendung erfolgreich erstellt. Führen Sie nun den folgenden Befehl im Terminal aus, um das Projektverzeichnis aufzurufen.

cd reporting-app

• Schritt 4 – Als nächstes müssen wir die erforderlichen Abhängigkeiten in der Vue-Anwendung installieren, indem wir den folgenden Befehl im Terminal ausführen.

npm install axios vue-router

Wir haben Axios installiert, um API-Anfragen zu stellen, und Vue-Router, um das Routing für die Anwendung zu verwalten.

• Schritt 5 – Erstellen Sie nun eine „router.js“-Datei im Projektverzeichnis „src“. Fügen Sie anschließend den folgenden Code in die Datei ein.

Dateiname – 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

Wir haben die HomeView- und ReportTable-Komponenten im obigen Code aus den relevanten Dateien importiert. Danach haben wir die Router „/“ und „/report“ erstellt und exportiert.

• Schritt 6 – Richten Sie die Router-Konfiguration Ihrer Anwendung in der Datei „main.js“ ein. Fügen Sie den folgenden Code in die Datei main.js ein.

Dateiname – 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')

Im obigen Code haben wir die Router-Komponente importiert und mit der Anwendung über die Methode app.use() verwendet.

• Schritt 7 – Als nächstes müssen wir die Datei „App.vue“ einrichten, um bestimmte routerbasierte Komponenten anzuzeigen. Fügen Sie der App.vue-Datei den folgenden Inhalt hinzu.

Dateiname – 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>

• Schritt 8 – Jetzt erstellen wir die Komponenten, die auf der Webseite gerendert werden. Erstellen Sie zunächst den Ordner „views“ im Verzeichnis „src“ und erstellen Sie darin die Datei „homeview.vue“.

Danach fügen Sie den folgenden Code in die Datei ein.

Dateiname – Homeview.vue

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

Im obigen Code rendern wir „Home“ auf der Webseite.

• Schritt 9

  – Jetzt müssen wir die ReportTable.vue-Komponente im Verzeichnis „views“ erstellen. Fügen Sie anschließend den folgenden Code in die Datei ein.

Dateiname – 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>

Im obigen Code verwenden wir die Funktion „reaktiv“ der Kompositions-API, um ein reaktives Statusobjekt zu erstellen, das das Array „Berichte“ enthält.

Immer wenn eine Komponente auf einer Webseite gemountet wird, verwenden wir die Methode „onMount()“, um Daten von der API über Axios abzurufen. Danach speichern wir die Antwort im Berichtsarray und geben das Statusobjekt zurück.

Wir haben Tabellen erstellt, um die Daten im Vorlagencode darzustellen. Danach greifen wir über das Statusobjekt auf das Berichtsarray zu und verwenden eine for-Schleife, um alle Daten zu durchlaufen und sie in den Tabellenzeilen anzuzeigen. Zusätzlich haben wir den Tisch gestaltet.

Hier können Benutzer beobachten, dass wir den Komponentenlebenszyklus nicht zum Aktualisieren der Daten verwenden, da wir die Kompositions-API verwenden, um das Statusobjekt reaktiv zu machen. Daher werden die Daten bei jeder Aktualisierung der API-Antwort automatisch neu gerendert.

• Schritt 10

  – Führen Sie den folgenden Befehl im Projektverzeichnis aus, um das Projekt auszuführen.

  npm run serve
  

Jetzt sollten Benutzer die URL http://192.168.110.33:8080/report öffnen, um die API-Daten im Tabellenformat anzuzeigen. Die Ausgabe wird wie unten gezeigt angezeigt.

Benutzer haben in diesem Tutorial gelernt, wie sie die Funktionalität der Kompositions-API nutzen können. Wie oben erwähnt, müssen wir uns bei Verwendung der Kompositions-API nicht mit dem Lebenszyklus befassen, da wir die Variable oder das Objekt mithilfe der Funktion „reactive()“ reaktiv machen können. Darüber hinaus können Benutzer die Kompositions-API ausprobieren, die Daten aktualisiert, und beobachten, wie sie die Webseite neu rendert, wenn reaktive Variablen aktualisiert werden.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine Berichtsanwendung mit Vue 3 und der Composition API?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!