Rumah pembangunan bahagian belakang tutorial php Cara menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data

Sep 24, 2023 pm 05:43 PM
php vue Paging data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data

Dalam pembangunan web moden, fungsi halaman data adalah keperluan biasa. Dengan membahagikan sejumlah besar data kepada beberapa halaman untuk paparan, kelajuan memuatkan halaman dan pengalaman menyemak imbas pengguna boleh dipertingkatkan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data dan memberikan contoh kod khusus.

1. Laksanakan paging data pada bahagian belakang

  1. Buat jadual dan data pangkalan data

Pertama, kita perlu mencipta jadual dalam pangkalan data untuk menyimpan data. Katakan kita mencipta jadual yang dipanggil "produk" dengan medan "id", "nama", "harga" dan "kuantiti".

Kemudian, masukkan beberapa data ujian ke dalam jadual.

  1. Tulis kod PHP untuk mendapatkan data dan logik paging

Seterusnya, kita perlu menulis kod PHP untuk mendapatkan data dalam pangkalan data dan melaksanakan logik paging.

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 获取当前页码和每页数据量
$page = $_GET["page"];
$pageSize = $_GET["pageSize"];

// 计算起始索引
$startIndex = ($page - 1) * $pageSize;

// 查询数据
$sql = "SELECT * FROM products LIMIT $startIndex, $pageSize";
$result = $conn->query($sql);

// 将结果转换为数组
$data = [];
if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
}

// 查询总数据量
$sql = "SELECT COUNT(*) AS total FROM products";
$result = $conn->query($sql);
$total = $result->fetch_assoc()["total"];

// 关闭数据库连接
$conn->close();

// 返回结果
$response = [
    "data" => $data,
    "total" => $total
];
echo json_encode($response);
?>
Salin selepas log masuk

Kod di atas menggunakan sambungan mysqli untuk menyambung ke pangkalan data dan menanyakan data yang sepadan berdasarkan nombor halaman masuk dan jumlah data setiap halaman. Akhir sekali, hasil pertanyaan ditukar kepada tatasusunan dan rentetan JSON yang mengandungi data dan jumlah dikembalikan. mysqli扩展连接数据库,并根据传入的页码和每页数据量查询相应的数据。最后,将查询结果转换为数组,并返回包含数据和总数的JSON字符串。

二、前端使用Vue实现数据分页

  1. 创建Vue项目和组件

首先,你需要创建一个Vue项目,并创建一个名为Pagination.vue的分页组件。

  1. 编写Vue代码获取数据和实现分页功能

在分页组件中,我们需要通过Ajax请求获取后端提供的数据,并实现分页逻辑。

<template>
   <div>
      <table>
         <thead>
            <tr>
               <th>编号</th>
               <th>名称</th>
               <th>价格</th>
               <th>数量</th>
            </tr>
         </thead>
         <tbody>
            <tr v-for="item in data" :key="item.id">
               <td>{{item.id}}</td>
               <td>{{item.name}}</td>
               <td>{{item.price}}</td>
               <td>{{item.quantity}}</td>
            </tr>
         </tbody>
      </table>
      <div>
         <button @click="prevPage" :disabled="page <= 1">上一页</button>
         <button @click="nextPage" :disabled="page >= totalPages">下一页</button>
      </div>
   </div>
</template>

<script>
export default {
   data() {
      return {
         data: [],
         page: 1,
         pageSize: 10,
         totalPages: 0
      }
   },
   mounted() {
      this.getData();
   },
   methods: {
      getData() {
         axios.get('/api.php', {
            params: {
               page: this.page,
               pageSize: this.pageSize
            }
         })
         .then(response => {
            this.data = response.data.data;
            this.totalPages = Math.ceil(response.data.total / this.pageSize);
         })
         .catch(error => {
            console.log(error);
         });
      },
      prevPage() {
         if (this.page > 1) {
            this.page--;
            this.getData();
         }
      },
      nextPage() {
         if (this.page < this.totalPages) {
            this.page++;
            this.getData();
         }
      }
   }
}
</script>

<style scoped>
table {
   width: 100%;
}

th, td {
   padding: 8px;
   text-align: left;
}
</style>
Salin selepas log masuk

以上代码使用Vue的生命周期mounted钩子函数在组件挂载后立即调用getData方法获取数据。然后,根据传入的页码和每页数据量,在getData方法中向后端发送Ajax请求获取数据。获取到数据后,更新组件的data属性,从而动态显示数据。同时,计算总页数totalPages

2. Gunakan Vue untuk melaksanakan paging data di bahagian hadapan

Buat projek dan komponen Vue

Pertama, anda perlu membuat projek Vue dan mencipta komponen paging bernama Pagination.vue . 🎜🎜🎜Tulis kod Vue untuk mendapatkan data dan melaksanakan fungsi paging🎜🎜🎜Dalam komponen paging, kita perlu mendapatkan data yang disediakan oleh backend melalui permintaan Ajax dan melaksanakan logik paging. 🎜rrreee🎜Kod di atas menggunakan fungsi cangkuk kitaran hayat Vue mounted untuk memanggil kaedah getData untuk mendapatkan data serta-merta selepas komponen dipasang. Kemudian, berdasarkan nombor halaman masuk dan jumlah data setiap halaman, hantar permintaan Ajax ke bahagian belakang dalam kaedah getData untuk mendapatkan data. Selepas mendapatkan data, kemas kini atribut data komponen untuk memaparkan data secara dinamik. Pada masa yang sama, hitung jumlah bilangan halaman totalPages dan lakukan pertimbangan status pada halaman sebelumnya dan butang halaman seterusnya untuk melaksanakan fungsi halaman. 🎜🎜3. Kesimpulan🎜🎜Artikel ini memberikan anda penyelesaian pelaksanaan khusus dengan menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data. Dapatkan data dalam pangkalan data melalui kod PHP bahagian belakang, dan kembalikan halaman data kepada komponen Vue bahagian hadapan, merealisasikan fungsi asas halaman data. Anda boleh membuat pelarasan dan sambungan yang sesuai mengikut keperluan anda. 🎜🎜Saya harap artikel ini akan membantu anda apabila melaksanakan fungsi paging data! 🎜

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi halaman data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara menambah fungsi ke butang untuk vue Cara menambah fungsi ke butang untuk vue Apr 08, 2025 am 08:51 AM

Anda boleh menambah fungsi ke butang VUE dengan mengikat butang dalam templat HTML ke kaedah. Tentukan kaedah dan tulis logik fungsi dalam contoh Vue.

PHP dan Python: Membandingkan dua bahasa pengaturcaraan yang popular PHP dan Python: Membandingkan dua bahasa pengaturcaraan yang popular Apr 14, 2025 am 12:13 AM

PHP dan Python masing -masing mempunyai kelebihan mereka sendiri, dan memilih mengikut keperluan projek. 1.PHP sesuai untuk pembangunan web, terutamanya untuk pembangunan pesat dan penyelenggaraan laman web. 2. Python sesuai untuk sains data, pembelajaran mesin dan kecerdasan buatan, dengan sintaks ringkas dan sesuai untuk pemula.

Masa Depan PHP: Adaptasi dan Inovasi Masa Depan PHP: Adaptasi dan Inovasi Apr 11, 2025 am 12:01 AM

Masa depan PHP akan dicapai dengan menyesuaikan diri dengan trend teknologi baru dan memperkenalkan ciri -ciri inovatif: 1) menyesuaikan diri dengan pengkomputeran awan, kontena dan seni bina microservice, menyokong Docker dan Kubernetes; 2) memperkenalkan pengkompil JIT dan jenis penghitungan untuk meningkatkan prestasi dan kecekapan pemprosesan data; 3) Berterusan mengoptimumkan prestasi dan mempromosikan amalan terbaik.

PHP vs Python: Memahami Perbezaan PHP vs Python: Memahami Perbezaan Apr 11, 2025 am 12:15 AM

PHP dan Python masing -masing mempunyai kelebihan sendiri, dan pilihannya harus berdasarkan keperluan projek. 1.Php sesuai untuk pembangunan web, dengan sintaks mudah dan kecekapan pelaksanaan yang tinggi. 2. Python sesuai untuk sains data dan pembelajaran mesin, dengan sintaks ringkas dan perpustakaan yang kaya.

PHP: Bahasa utama untuk pembangunan web PHP: Bahasa utama untuk pembangunan web Apr 13, 2025 am 12:08 AM

PHP adalah bahasa skrip yang digunakan secara meluas di sisi pelayan, terutamanya sesuai untuk pembangunan web. 1.PHP boleh membenamkan HTML, memproses permintaan dan respons HTTP, dan menyokong pelbagai pangkalan data. 2.PHP digunakan untuk menjana kandungan web dinamik, data borang proses, pangkalan data akses, dan lain -lain, dengan sokongan komuniti yang kuat dan sumber sumber terbuka. 3. PHP adalah bahasa yang ditafsirkan, dan proses pelaksanaan termasuk analisis leksikal, analisis tatabahasa, penyusunan dan pelaksanaan. 4.Php boleh digabungkan dengan MySQL untuk aplikasi lanjutan seperti sistem pendaftaran pengguna. 5. Apabila debugging php, anda boleh menggunakan fungsi seperti error_reporting () dan var_dump (). 6. Mengoptimumkan kod PHP untuk menggunakan mekanisme caching, mengoptimumkan pertanyaan pangkalan data dan menggunakan fungsi terbina dalam. 7

Status Semasa PHP: Lihat trend pembangunan web Status Semasa PHP: Lihat trend pembangunan web Apr 13, 2025 am 12:20 AM

PHP tetap penting dalam pembangunan web moden, terutamanya dalam pengurusan kandungan dan platform e-dagang. 1) PHP mempunyai ekosistem yang kaya dan sokongan rangka kerja yang kuat, seperti Laravel dan Symfony. 2) Pengoptimuman prestasi boleh dicapai melalui OPCACHE dan NGINX. 3) Php8.0 memperkenalkan pengkompil JIT untuk meningkatkan prestasi. 4) Aplikasi awan asli dikerahkan melalui Docker dan Kubernet untuk meningkatkan fleksibiliti dan skalabiliti.

Cara melompat ke Div Vue Cara melompat ke Div Vue Apr 08, 2025 am 09:18 AM

Terdapat dua cara untuk melompat elemen div di Vue: Gunakan Vue Router dan tambahkan komponen router-link. Tambah pendengar acara @Click dan panggil ini. $ Router.push () kaedah untuk melompat.

Cara melompat tag ke vue Cara melompat tag ke vue Apr 08, 2025 am 09:24 AM

Kaedah untuk melaksanakan lompatan tag dalam Vue termasuk: menggunakan tag dalam templat HTML untuk menentukan atribut HREF. Gunakan komponen router-link routing VUE. Gunakan ini. $ Router.push () kaedah dalam JavaScript. Parameter boleh dilalui melalui parameter pertanyaan dan laluan dikonfigurasikan dalam pilihan penghala untuk lompatan dinamik.

See all articles