Home > Article > Backend Development > How to implement data search function using PHP and Vue
How to implement data search function using PHP and Vue
- WBOYOriginal
- 2023-09-25 18:33:37745browse
How to use PHP and Vue to implement data search function
In modern web development, data search function has become a very common and essential function. PHP and Vue are two very popular technologies. If you combine their powerful capabilities, you can quickly implement an efficient data search function.
This article will introduce how to use PHP and Vue to implement the data search function through specific code examples. We will take a simple student information management system as an example. There is a student information table in the system, which contains information such as the student's name, age, and gender. We need to implement a search form so that users can search for student information by entering keywords.
First, we need to create a PHP backend interface to handle the search function. We can use PHP's database operation extensions, such as PDO or mysqli, to connect to the database and perform query operations. The following is a code example using PDO extension:
<?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);
?>In the above code, we first establish a connection with the database, and then obtain the keywords entered by the user from the front end. Next, we use prepared statements to prevent SQL injection and execute the query, returning the query results to the front end in JSON format.
Next, we need to use Vue on the front end to handle the search function. The following is a code example using 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>In the above code, we first introduced Vue.js and created a Vue instance. Two variables, keyword and students, are defined in data of the instance, which are used to save the keywords and query results entered by the user respectively. In the search method, we use the fetch method to send an Ajax request to the backend interface, and assign the returned data to the students variable.
Through the above code examples of PHP and Vue, we have implemented a simple data search function. After the user enters the keyword in the input box and clicks the search button, the matching student information can be obtained from the backend and displayed on the page.
The above is just a simple example. In actual development, the code can be further optimized and expanded according to specific needs. I hope this article can help you understand how to use PHP and Vue to implement data search functions!
The above is the detailed content of How to implement data search function using PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!