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:
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:
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();
?>
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>
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!
![Bermula dengan Pembangunan Praktikal PHP: Penciptaan PHP Pantas [Forum Perniagaan Kecil]](https://img.php.cn/upload/course/000/000/035/5d27fb58823dc974.jpg)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
