Bagaimana untuk membuat aplikasi pelaporan menggunakan Vue 3 dan API Komposisi?

Vue ialah rangka kerja JavaScript yang membolehkan pembangun membuat aplikasi web. Ia digunakan terutamanya untuk membina aplikasi web satu halaman. Terdapat banyak faedah menggunakan vue untuk mencipta aplikasi web, seperti struktur ringkas, ringan, seni bina berasaskan komponen, dsb.

Sebelum memulakan tutorial ini, mari lihat aplikasi pelaporan dan API komposisi.

Aplikasi pelaporan ialah aplikasi web tunggal atau berbilang halaman yang memaparkan data berguna dalam format yang sesuai (cth. format jadual). Ia digunakan untuk laporan yang memaparkan data dalam format tertentu.

API Komposisi membenarkan pembangun membuat kod berdasarkan logik dan bukannya kitaran hayat. Kami boleh mencipta kod yang lebih boleh diselenggara dan modular dalam aplikasi vue.

Kini kami akan menggunakan API “https://jsonplaceholder.typicode.com/posts” untuk mendapatkan data dan memformat semua data dalam jadual dalam aplikasi vue.

Pengguna harus mengikuti langkah di bawah untuk mula membuat aplikasi vue.

• Langkah 1 - Dalam langkah pertama, pengguna perlu memasang vue pada komputer tempatan mereka. Buka terminal dan laksanakan arahan berikut.

npm install -g @vue/cli

• Langkah 2 - Sekarang masukkan arahan berikut dalam terminal untuk memulakan aplikasi vue. Di sini, "apl pelaporan" ialah nama aplikasi.

npx vue create reporting-app

• Langkah 3 - Kami telah berjaya mencipta aplikasi vue. Sekarang, jalankan arahan berikut dalam terminal untuk memasuki direktori projek.

cd reporting-app

• Langkah 4 - Seterusnya, kita perlu memasang kebergantungan yang diperlukan dalam aplikasi vue dengan melaksanakan arahan berikut dalam terminal.

npm install axios vue-router

Kami memasang axios untuk membuat permintaan API dan vue-router untuk mengendalikan penghalaan untuk aplikasi.

• Langkah 5 - Sekarang, buat fail "router.js" dalam direktori projek "src". Selepas itu, tambahkan kod berikut dalam fail.

Nama fail – 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

Kami mengimport komponen HomeView dan ReportTable dalam kod di atas daripada fail yang berkaitan. Selepas itu, kami mencipta penghala "/" dan "/report" dan mengeksportnya.

• Langkah 6 - Sediakan konfigurasi penghala aplikasi anda dalam fail "main.js". Tambahkan kod berikut dalam fail main.js.

Nama fail – 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')

Dalam kod di atas, kami mengimport komponen penghala dan menggunakannya dengan aplikasi melalui kaedah app.use().

• Langkah 7 - Seterusnya, kita perlu menyediakan fail "App.vue" untuk memaparkan komponen berasaskan penghala tertentu. Tambahkan kandungan berikut pada fail App.vue.

Nama fail – 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>

• Langkah 8 - Sekarang, kami akan mencipta komponen yang akan dipaparkan pada halaman web. Mula-mula, cipta folder ‘views’ dalam direktori ‘src’ dan buat fail ‘homeview.vue’ di dalamnya.

Selepas itu, tambahkan kod berikut dalam fail.

Nama fail – Homeview.vue

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

Dalam kod di atas, kami memaparkan "Laman Utama" pada halaman web.

• Langkah 9 - Sekarang, kita perlu mencipta komponen ReportTable.vue dalam direktori "views". Selepas itu, tambahkan kod berikut dalam fail.

Nama fail – 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>

Dalam kod di atas, kami menggunakan fungsi "reaktif" API komposisi untuk mencipta objek keadaan reaktif yang mengandungi tatasusunan "laporan".

Setiap kali komponen dipasang pada halaman web, kami menggunakan kaedah "onMount()" untuk mendapatkan data daripada API melalui axios. Selepas itu kami menyimpan respons dalam tatasusunan laporan dan mengembalikan objek status.

Kami mencipta jadual untuk mewakili data dalam kod templat. Selepas itu, kami mengakses tatasusunan laporan daripada objek states dan menggunakan gelung for untuk mengulangi semua data dan memaparkannya dalam baris jadual. Selain itu, kami menggayakan meja.

Di sini, pengguna boleh melihat bahawa kami tidak menggunakan kitaran hayat komponen untuk mengemas kini data kerana kami menggunakan API komposisi untuk menjadikan objek keadaan reaktif. Oleh itu, setiap kali respons API dikemas kini, ia memaparkan semula data secara automatik.

• Langkah 10 - Jalankan arahan berikut dalam direktori projek untuk menjalankan projek.

npm run serve

Kini, pengguna harus membuka URL http://192.168.110.33:8080/report untuk melihat data API dalam format jadual. Ia akan memaparkan output seperti yang ditunjukkan di bawah.

Pengguna mempelajari cara menggunakan kefungsian API gubahan dalam tutorial ini. Seperti yang dinyatakan di atas, apabila kita menggunakan API komposisi, kita tidak perlu berurusan dengan kitaran hayat kerana kita boleh menjadikan pembolehubah atau objek reaktif menggunakan fungsi "reaktif()". Selain itu, pengguna boleh mencuba API komposisi yang mengemas kini data dan memerhati cara ia memaparkan semula halaman web apabila pembolehubah reaktif dikemas kini.

Atas ialah kandungan terperinci Bagaimana untuk membuat aplikasi pelaporan menggunakan Vue 3 dan API Komposisi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!