pembangunan bahagian belakang
tutorial php
Bagaimana untuk melaksanakan fungsi carian data menggunakan PHP dan Vue
Bagaimana untuk melaksanakan fungsi carian data menggunakan PHP dan Vue
Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data
Dalam pembangunan Web moden, fungsi carian data telah menjadi perkara biasa dan perlu Ciri yang sangat diperlukan. PHP dan Vue ialah dua teknologi yang sangat popular Jika anda menggabungkan keupayaan hebat mereka, anda boleh melaksanakan fungsi carian data yang cekap.
Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data melalui contoh kod tertentu Kami akan mengambil sistem pengurusan maklumat pelajar yang mudah sebagai contoh. Terdapat jadual maklumat pelajar dalam sistem, yang mengandungi maklumat seperti nama pelajar, umur dan jantina. Kita perlu melaksanakan borang carian supaya pengguna boleh mencari maklumat pelajar dengan memasukkan kata kunci.
Pertama, kita perlu membina antara muka hujung belakang PHP untuk mengendalikan fungsi carian. Kita boleh menggunakan sambungan operasi pangkalan data PHP, seperti PDO atau mysqli, untuk menyambung ke pangkalan data dan melaksanakan operasi pertanyaan. Berikut ialah contoh kod menggunakan sambungan PDO:
<?php
// 连接数据库
$dsn = "mysql:host=localhost;dbname=database";
$username = "username";
$password = "password";
$dbh = new PDO($dsn, $username, $password);
// 处理搜索请求
$keyword = $_GET["keyword"];
// 查询语句
$sql = "SELECT * FROM student WHERE name LIKE :keyword";
// 使用预处理语句防止 SQL 注入
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':keyword', '%' . $keyword . '%');
// 执行查询
$stmt->execute();
// 获取结果集
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
// 返回 JSON 格式的结果
echo json_encode($results);
?>Dalam kod di atas, kami mula-mula mewujudkan sambungan dengan pangkalan data, dan kemudian mendapatkan kata kunci yang dimasukkan oleh pengguna dari hujung hadapan. Seterusnya, kami menggunakan pernyataan yang disediakan untuk menghalang suntikan SQL dan melaksanakan pertanyaan, mengembalikan hasil pertanyaan ke bahagian hadapan dalam format JSON.
Seterusnya, kita perlu menggunakan Vue di bahagian hadapan untuk mengendalikan fungsi carian. Berikut ialah contoh kod menggunakan Vue:
<!DOCTYPE html>
<html>
<head>
<title>数据搜索功能示例</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="keyword" placeholder="请输入关键字">
<button @click="search">搜索</button>
<ul>
<li v-for="student in students" :key="student.id">{{ student.name }}</li>
</ul>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
keyword: "",
students: []
}
},
methods: {
search() {
// 发送 Ajax 请求到后端接口
fetch('search.php?keyword=' + this.keyword)
.then(response => response.json())
.then(data => {
this.students = data;
})
.catch(error => {
console.error(error);
});
}
}
});
</script>
</body>
</html>Dalam kod di atas, kami mula-mula memperkenalkan Vue.js dan mencipta tika Vue. Dalam pembolehubah data 中定义了 keyword 和 students 两个变量，分别用于保存用户输入的关键字和查询结果。在 search 方法中，我们使用 fetch 方法发送 Ajax 请求到后端接口，并将返回的数据赋值给 students contoh.
Melalui contoh kod PHP dan Vue di atas, kami telah melaksanakan fungsi carian data yang mudah. Selepas pengguna memasukkan kata kunci dalam kotak input dan mengklik butang carian, maklumat pelajar yang sepadan boleh diperolehi dari bahagian belakang dan dipaparkan pada halaman.
Di atas hanyalah contoh mudah Dalam pembangunan sebenar, kod boleh dioptimumkan dan dikembangkan mengikut keperluan tertentu. Saya harap artikel ini dapat membantu anda memahami cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data!
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi carian data menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka
Tarikh dan Masa CakePHP
Sep 10, 2024 pm 05:27 PM
Untuk bekerja dengan tarikh dan masa dalam cakephp4, kami akan menggunakan kelas FrozenTime yang tersedia.
Cara menukar pdf deepseek
Feb 19, 2025 pm 05:24 PM
DeepSeek tidak dapat menukar fail terus ke PDF. Bergantung pada jenis fail, anda boleh menggunakan kaedah yang berbeza: dokumen biasa (Word, Excel, PowerPoint): Gunakan Microsoft Office, LibreOffice dan perisian lain untuk dieksport sebagai PDF. Imej: Simpan sebagai PDF Menggunakan Image Viewer atau Perisian Pemprosesan Imej. Halaman Web: Gunakan fungsi "Print Into PDF" penyemak imbas atau laman web yang berdedikasi ke alat PDF. Format yang tidak biasa: Cari penukar yang betul dan tukarnya ke PDF. Adalah penting untuk memilih alat yang betul dan membangunkan pelan berdasarkan keadaan sebenar.
Muat naik Fail CakePHP
Sep 10, 2024 pm 05:27 PM
Untuk mengusahakan muat naik fail, kami akan menggunakan pembantu borang. Di sini, adalah contoh untuk muat naik fail.
Bincangkan CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP ialah rangka kerja sumber terbuka untuk PHP. Ia bertujuan untuk menjadikan pembangunan, penggunaan dan penyelenggaraan aplikasi lebih mudah. CakePHP adalah berdasarkan seni bina seperti MVC yang berkuasa dan mudah difahami. Model, Pandangan dan Pengawal gu
Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP
Dec 20, 2024 am 11:31 AM
Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c
Pengesah Mencipta CakePHP
Sep 10, 2024 pm 05:26 PM
Pengesah boleh dibuat dengan menambah dua baris berikut dalam pengawal.
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
