How to implement data search function using PHP and Vue
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!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
PHP and Python: Comparing Two Popular Programming Languages
Apr 14, 2025 am 12:13 AM
PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.
How to add functions to buttons for vue
Apr 08, 2025 am 08:51 AM
You can add a function to the Vue button by binding the button in the HTML template to a method. Define the method and write function logic in the Vue instance.
PHP: A Key Language for Web Development
Apr 13, 2025 am 12:08 AM
PHP is a scripting language widely used on the server side, especially suitable for web development. 1.PHP can embed HTML, process HTTP requests and responses, and supports a variety of databases. 2.PHP is used to generate dynamic web content, process form data, access databases, etc., with strong community support and open source resources. 3. PHP is an interpreted language, and the execution process includes lexical analysis, grammatical analysis, compilation and execution. 4.PHP can be combined with MySQL for advanced applications such as user registration systems. 5. When debugging PHP, you can use functions such as error_reporting() and var_dump(). 6. Optimize PHP code to use caching mechanisms, optimize database queries and use built-in functions. 7
PHP in Action: Real-World Examples and Applications
Apr 14, 2025 am 12:19 AM
PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.
PHP vs. Python: Understanding the Differences
Apr 11, 2025 am 12:15 AM
PHP and Python each have their own advantages, and the choice should be based on project requirements. 1.PHP is suitable for web development, with simple syntax and high execution efficiency. 2. Python is suitable for data science and machine learning, with concise syntax and rich libraries.
PHP's Purpose: Building Dynamic Websites
Apr 15, 2025 am 12:18 AM
PHP is used to build dynamic websites, and its core functions include: 1. Generate dynamic content and generate web pages in real time by connecting with the database; 2. Process user interaction and form submissions, verify inputs and respond to operations; 3. Manage sessions and user authentication to provide a personalized experience; 4. Optimize performance and follow best practices to improve website efficiency and security.
The Future of PHP: Adaptations and Innovations
Apr 11, 2025 am 12:01 AM
The future of PHP will be achieved by adapting to new technology trends and introducing innovative features: 1) Adapting to cloud computing, containerization and microservice architectures, supporting Docker and Kubernetes; 2) introducing JIT compilers and enumeration types to improve performance and data processing efficiency; 3) Continuously optimize performance and promote best practices.
PHP vs. Other Languages: A Comparison
Apr 13, 2025 am 12:19 AM
PHP is suitable for web development, especially in rapid development and processing dynamic content, but is not good at data science and enterprise-level applications. Compared with Python, PHP has more advantages in web development, but is not as good as Python in the field of data science; compared with Java, PHP performs worse in enterprise-level applications, but is more flexible in web development; compared with JavaScript, PHP is more concise in back-end development, but is not as good as JavaScript in front-end development.
