Home > Article > Backend Development > How to use PHP and Vue to implement data search function

How to use PHP and Vue to implement data search function

PHPzOriginal: 2023-09-25 09:00:431045browse

In modern web development, many applications need to have data search function, so that users can easily search according to specific conditions to find the required data. This article will introduce how to use PHP and Vue to implement data search functions, and provide specific code examples.

1. Preparation
Before starting to write code, we first need to set up a development environment. Make sure you have the following tools and software installed:

PHP: A popular server-side programming language used to handle requests and responses for data.
Vue.js: A JavaScript framework for building user interfaces that can achieve dynamic updates and interactive effects.
Database: You can choose any relational database, such as MySQL, PostgreSQL, etc.

2. Create database and table
Create a table in the database to store the data you need to find. Suppose we have a table called "products" with the following fields:

id: the unique identifier of the product
name: the name of the product
price: Product price
category: Product category

3. Back-end programming (PHP)
First, we need to write PHP code to handle data query requests. Create a file named "search.php" and add the following code:

<?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();
?>

The above code first connects to the database, then obtains the query conditions passed by the front end, constructs a SQL query statement, and converts the results into JSON format is returned to the front end. The "LIKE" operator is used here for fuzzy matching to allow users to enter partial keywords for query.

4. Front-end Programming (Vue.js)
Next, we need to write Vue.js code to handle user interface interaction and send query requests to the backend. In the HTML file, add the following code:

<!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>

The above code uses the Vue.js framework to create an interface containing an input box, a button, and a list displaying query results. When the user clicks the button, the "search" method in the Vue instance will be called. In this method, the Axios library is used to send a GET request to the "search.php" file on the backend, and the query conditions are passed as parameters.

5. Test function
Now, we have completed the back-end and front-end coding work. Open the HTML file in the browser, enter the product name you want to find, and click the search button. The backend will return data that meets the conditions and display it on the interface.

6. Summary
This article introduces how to use PHP and Vue to implement the data search function, and provides detailed code examples. In this way, users can easily find the data they need based on specific conditions, and this function can be applied in various applications. Hope this article is helpful to you!

The above is the detailed content of How to use PHP and Vue to implement data search function. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript sql mysql json html 标识符并发 JS postgresql 数据库 axios

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to add automatic accounting function to accounting system - How to develop automatic accounting using PHPNext article：How to add automatic accounting function to accounting system - How to develop automatic accounting using PHP

See more

How to use PHP and Vue to implement data search function

Related articles