Implementing a Data Search Feature with PHP and Vue
This article demonstrates how to build a simple data search feature by creating a PHP backend API using PDO for database queries and a Vue.js frontend that sends Ajax requests, processes the JSON response, and displays matching student records in a list.
In modern web development, data search functionality has become a very common and essential feature. PHP and Vue are two very popular technologies, and combining their powerful capabilities can quickly implement an efficient data search feature.
This article will, through concrete code examples, introduce how to use PHP and Vue to implement a data search feature, using a simple student information management system as an example. The system has a student information table containing name, age, gender, etc. We need to implement a search form where users can input keywords to search student information.
First, we need to create a PHP backend interface to handle the search functionality. We can use PHP's database extensions such as PDO or mysqli to connect to the database and execute queries. Below is a code example using PDO:
<?php
// Connect to database
$dsn = "mysql:host=localhost;dbname=database";
$username = "username";
$password = "password";
$dbh = new PDO($dsn, $username, $password);
// Handle search request
$keyword = $_GET["keyword"];
// Query statement
$sql = "SELECT * FROM student WHERE name LIKE :keyword";
// Use prepared statement to prevent SQL injection
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':keyword', '%' . $keyword . '%');
// Execute query
$stmt->execute();
// Get result set
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Return JSON formatted result
echo json_encode($results);
?>In the above code, we first establish a connection to the database, then retrieve the keyword entered by the user from the frontend. Next, we use a prepared statement to prevent SQL injection, execute the query, and return the results in JSON format to the frontend.
Next, we need to use Vue on the frontend to handle the search functionality. Below is a Vue code example:
<![DOCTYPE html>
<html>
<head>
<title>Data Search Example</title>
<!-- Include 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() {
// Send Ajax request to backend API
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 import Vue.js and create a Vue instance. In the instance's data we define the keyword and students variables to store the user's input keyword and the query results. In the search method, we use the fetch method to send an Ajax request to the backend API, and assign the returned data to the students variable.
Through the above PHP and Vue code examples, we implement a simple data search feature. Users enter a keyword in the input box, click the search button, and can retrieve matching student information from the backend and display it on the page.
This is just a simple example; in real development you can further optimize and extend the code according to specific requirements. Hope this article helps you understand how to implement a data search feature using PHP and Vue!
php中文网 Courses
php中文网's platform for the latest courses and technical articles, helping PHP learners advance quickly.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.