Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data
Cara menggunakan PHP dan Vue untuk melaksanakan fungsi carian data
- PHPzasal
- 2023-09-25 09:00:431042semak imbas
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)
<?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)
<!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
6. Ringkasan
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!