Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data

PHPz

Sep 25, 2023 am 09:00 AM

phpvueCarian data

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data

Dalam pembangunan web moden, banyak aplikasi perlu mempunyai fungsi carian data, supaya pengguna boleh mencari data yang diperlukan dengan mudah berdasarkan syarat tertentu. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data, dan menyediakan contoh kod khusus.

1. Persediaan
Sebelum kita mula menulis kod, kita perlu menyediakan persekitaran pembangunan terlebih dahulu. Pastikan anda memasang alatan dan perisian berikut:

PHP: Bahasa pengaturcaraan sebelah pelayan yang popular digunakan untuk mengendalikan permintaan dan respons untuk data.
Vue.js: Rangka kerja JavaScript untuk membina antara muka pengguna yang boleh mencapai kemas kini dinamik dan kesan interaktif.
Pangkalan data: Anda boleh memilih mana-mana pangkalan data hubungan, seperti MySQL, PostgreSQL, dll.

2. Cipta pangkalan data dan jadual
Buat jadual dalam pangkalan data untuk menyimpan data yang anda perlu cari. Katakan kita mempunyai jadual bernama "produk" dengan medan berikut:

id: pengecam unik produk
nama: nama produk
harga: harga produk
kategori: kategori produk

3.
Pengaturcaraan (PHP)

Pertama, kita perlu menulis kod PHP untuk mengendalikan permintaan pertanyaan data. Cipta fail bernama "search.php" dan tambahkan kod berikut:

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

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

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

// 获取查询条件
$searchTerm = $_GET['searchTerm'];

// 构建SQL查询语句
$sql = "SELECT * FROM products WHERE name LIKE '%$searchTerm%'";
$result = $conn->query($sql);

// 返回结果
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $data[] = $row;
    }
    echo json_encode($data);
} else {
    echo "0 结果";
}

$conn->close();
?>

Kod di atas mula-mula disambungkan ke pangkalan data, kemudian mendapatkan syarat pertanyaan yang diluluskan oleh bahagian hadapan, membina pernyataan pertanyaan SQL dan menukar keputusan kepada JSON format dan mengembalikannya ke bahagian hadapan. Operator "LIKE" digunakan di sini untuk padanan kabur bagi membolehkan pengguna memasukkan kata kunci separa untuk pertanyaan.

4. Pengaturcaraan Bahagian Depan (Vue.js)

Seterusnya, kita perlu menulis kod Vue.js untuk mengendalikan interaksi antara muka pengguna dan menghantar permintaan pertanyaan ke bahagian belakang. Dalam fail HTML, tambahkan kod berikut:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="searchTerm">
        <button @click="search">搜索</button>
        <ul>
            <li v-for="product in products">{{ product.name }}, 价格：{{ product.price }}</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                searchTerm: '',
                products: []
            },
            methods: {
                search: function() {
                    axios.get('search.php', {
                        params: {
                            searchTerm: this.searchTerm
                        }
                    })
                    .then(function(response) {
                        this.products = response.data;
                    }.bind(this))
                    .catch(function(error) {
                        console.log(error);
                    });
                }
            }
        });
    </script>
</body>
</html>

Kod di atas menggunakan rangka kerja Vue.js untuk mencipta antara muka yang mengandungi kotak input, butang dan senarai yang memaparkan hasil pertanyaan. Apabila pengguna mengklik butang, kaedah "carian" dalam contoh Vue akan dipanggil Dalam kaedah ini, pustaka Axios digunakan untuk menghantar permintaan GET ke fail "search.php" pada bahagian belakang dan syarat pertanyaan. diluluskan sebagai parameter.

5. Fungsi ujian

Kini, kami telah menyelesaikan kerja pengekodan bahagian belakang dan bahagian hadapan. Buka fail HTML dalam penyemak imbas, masukkan nama produk yang anda ingin cari dan klik butang carian. Bahagian belakang akan mengembalikan data yang memenuhi syarat dan memaparkannya pada antara muka.

6. Ringkasan

Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data, dan menyediakan contoh kod terperinci. Dengan cara ini, pengguna boleh mencari data yang mereka perlukan dengan mudah berdasarkan keadaan tertentu, dan fungsi ini boleh digunakan dalam pelbagai aplikasi. Harap artikel ini membantu anda! 🎜

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

Kenyataan

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

Artikel Berkaitan

PHP dan Python: Paradigma yang berbeza dijelaskanApr 18, 2025 am 12:26 AM

PHP terutamanya pengaturcaraan prosedur, tetapi juga menyokong pengaturcaraan berorientasikan objek (OOP); Python menyokong pelbagai paradigma, termasuk pengaturcaraan OOP, fungsional dan prosedur. PHP sesuai untuk pembangunan web, dan Python sesuai untuk pelbagai aplikasi seperti analisis data dan pembelajaran mesin.

PHP dan Python: menyelam mendalam ke dalam sejarah merekaApr 18, 2025 am 12:25 AM

PHP berasal pada tahun 1994 dan dibangunkan oleh Rasmuslerdorf. Ia pada asalnya digunakan untuk mengesan pelawat laman web dan secara beransur-ansur berkembang menjadi bahasa skrip sisi pelayan dan digunakan secara meluas dalam pembangunan web. Python telah dibangunkan oleh Guidovan Rossum pada akhir 1980 -an dan pertama kali dikeluarkan pada tahun 1991. Ia menekankan kebolehbacaan dan kesederhanaan kod, dan sesuai untuk pengkomputeran saintifik, analisis data dan bidang lain.

Memilih antara php dan python: panduanApr 18, 2025 am 12:24 AM

PHP sesuai untuk pembangunan web dan prototaip pesat, dan Python sesuai untuk sains data dan pembelajaran mesin. 1.Php digunakan untuk pembangunan web dinamik, dengan sintaks mudah dan sesuai untuk pembangunan pesat. 2. Python mempunyai sintaks ringkas, sesuai untuk pelbagai bidang, dan mempunyai ekosistem perpustakaan yang kuat.

PHP dan Rangka Kerja: Memodenkan bahasaApr 18, 2025 am 12:14 AM

PHP tetap penting dalam proses pemodenan kerana ia menyokong sejumlah besar laman web dan aplikasi dan menyesuaikan diri dengan keperluan pembangunan melalui rangka kerja. 1.Php7 meningkatkan prestasi dan memperkenalkan ciri -ciri baru. 2. Rangka kerja moden seperti Laravel, Symfony dan CodeIgniter memudahkan pembangunan dan meningkatkan kualiti kod. 3. Pengoptimuman prestasi dan amalan terbaik terus meningkatkan kecekapan aplikasi.

Impak PHP: Pembangunan Web dan seterusnyaApr 18, 2025 am 12:10 AM

Phphassignificantelympactedwebdevelopmentandextendsbeyondit.1) itpowersmajorplatformslikeworderpressandexcelsindatabaseIntions.2) php'SadaptabilityAldoStoScaleforlargeapplicationFrameworksLikelara.3)

Bagaimanakah jenis membayangkan jenis PHP, termasuk jenis skalar, jenis pulangan, jenis kesatuan, dan jenis yang boleh dibatalkan?Apr 17, 2025 am 12:25 AM

Jenis PHP meminta untuk meningkatkan kualiti kod dan kebolehbacaan. 1) Petua Jenis Skalar: Oleh kerana Php7.0, jenis data asas dibenarkan untuk ditentukan dalam parameter fungsi, seperti INT, Float, dan lain -lain. 2) Return Type Prompt: Pastikan konsistensi jenis nilai pulangan fungsi. 3) Jenis Kesatuan Prompt: Oleh kerana Php8.0, pelbagai jenis dibenarkan untuk ditentukan dalam parameter fungsi atau nilai pulangan. 4) Prompt jenis yang boleh dibatalkan: membolehkan untuk memasukkan nilai null dan mengendalikan fungsi yang boleh mengembalikan nilai null.

Bagaimanakah PHP mengendalikan pengklonan objek (kata kunci klon) dan kaedah sihir __clone?Apr 17, 2025 am 12:24 AM

Dalam PHP, gunakan kata kunci klon untuk membuat salinan objek dan menyesuaikan tingkah laku pengklonan melalui kaedah Magic \ _ _ _. 1. Gunakan kata kunci klon untuk membuat salinan cetek, mengkloning sifat objek tetapi bukan sifat objek. 2. Kaedah klon \ _ \ _ boleh menyalin objek bersarang untuk mengelakkan masalah menyalin cetek. 3. Beri perhatian untuk mengelakkan rujukan pekeliling dan masalah prestasi dalam pengklonan, dan mengoptimumkan operasi pengklonan untuk meningkatkan kecekapan.

PHP vs Python: Gunakan Kes dan AplikasiApr 17, 2025 am 12:23 AM

PHP sesuai untuk pembangunan web dan sistem pengurusan kandungan, dan Python sesuai untuk sains data, pembelajaran mesin dan skrip automasi. 1.PHP berfungsi dengan baik dalam membina laman web dan aplikasi yang cepat dan berskala dan biasanya digunakan dalam CMS seperti WordPress. 2. Python telah melakukan yang luar biasa dalam bidang sains data dan pembelajaran mesin, dengan perpustakaan yang kaya seperti numpy dan tensorflow.

See all articles