How to use PHP and Vue to develop a quick search function for warehouse management-PHP Tutorial-php.cn

How to use PHP and Vue to develop a quick search function for warehouse management

WBOY

Release： 2023-09-25 08:16:02

Original

1191 people have browsed it

How to use PHP and Vue to develop a quick search function for warehouse management

How to use PHP and Vue to develop the fast search function of warehouse management

In a modern warehouse management system, the fast search function is crucial. It can help users quickly find the required warehouse information and improve work efficiency. This article will introduce how to use PHP and Vue to develop the fast search function in the warehouse management system, and provide specific code examples.

Development environment preparation

Before you begin, make sure you have installed the following software:

PHP server environment (such as Apache or Nginx )
MySQL database
Vue.js development environment

Create database and data table

First, we A data table needs to be created to store warehouse information. Execute the following SQL statement in the MySQL database:

CREATE DATABASE IF NOT EXISTS `repository_management`;
USE `repository_management`;

CREATE TABLE `repositories` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(255) NOT NULL,
  `description` TEXT,
  `location` VARCHAR(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `repositories` (`name`, `description`, `location`) VALUES
  ('仓库A', '这是仓库A的描述', '地点A'),
  ('仓库B', '这是仓库B的描述', '地点B'),
  ('仓库C', '这是仓库C的描述', '地点C');

Copy after login

The above code creates a database named repository_management and creates a data named repositories in it table with some sample data inserted.

Back-end development

Next, we will use PHP to develop the back-end API to provide warehouse data and search functions. Create a file called api.php and place it in the server's web root directory.

<?php

header('Content-Type: application/json');

// 连接数据库
$servername = 'localhost';
$username = '数据库用户名';
$password = '数据库密码';
$dbname = 'repository_management';

$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
    die('连接失败: ' . $conn->connect_error);
}

// 获取仓库列表
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    $sql = 'SELECT * FROM `repositories`';
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $repositories = array();
        while ($row = $result->fetch_assoc()) {
            $repositories[] = $row;
        }
        echo json_encode($repositories);
    } else {
        echo '[]';
    }
}

// 搜索仓库
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $searchTerm = $_POST['term'];
    $sql = "SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%'";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $repositories = array();
        while ($row = $result->fetch_assoc()) {
            $repositories[] = $row;
        }
        echo json_encode($repositories);
    } else {
        echo '[]';
    }
}

$conn->close();

Copy after login

In the above code, we first establish a connection with the database, and then define two interfaces: getting the warehouse list and searching the warehouse. The Get Warehouse List interface obtains all warehouse data from the database by executing the SQL statement SELECT * FROM repositories, and returns the result as data in JSON format. The search warehouse interface performs fuzzy search by obtaining the search keywords passed from the front end, executing the SQL statement `SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%', and returning the results as Data in JSON format.

Please remember to replace Database Username and Database Password in the code with your own actual database username and password.

Front-end development

Next, we will use Vue.js to develop the front-end page to display warehouse information and search functions. Create a file called index.html and place it in the server's web root directory.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>仓库管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        <h1>仓库管理系统</h1>
        <input type="text" v-model="searchTerm" placeholder="输入关键字搜索仓库">
        <ul>
            <li v-for="repository in repositories">{{ repository.name }}（{{ repository.location }}）</li>
        </ul>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                repositories: [],
                searchTerm: ''
            },
            mounted: function () {
                this.getRepositories();
            },
            methods: {
                getRepositories: function () {
                    fetch('api.php')
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(repositories) {
                            this.repositories = repositories;
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                },
                searchRepositories: function () {
                    fetch('api.php', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body: 'term=' + this.searchTerm
                    })
                        .then(function(response) {
                            return response.json();
                        })
                        .then(function(repositories) {
                            this.repositories = repositories;
                        }.bind(this))
                        .catch(function(error) {
                            console.log(error);
                        });
                }
            },
            watch: {
                searchTerm: function () {
                    this.searchRepositories();
                }
            }
        });
    </script>
</body>
</html>

Copy after login

In the above code, we created a Vue instance and defined two variables in the data attribute: repositories (used to store warehouse data) and searchTerm (used to store search keywords). In the mounted life cycle hook, we call the getRepositories method to get the warehouse data from the backend and assign it to the repositories variable. The getRepositories method uses the fetch function to send a GET request.

In the template, we used the v-for directive to loop through the repositories variables and display the name and location of each repository on the page. The v-model directive is used in the input box to bidirectionally bind the input content to the searchTerm variable. When the content of the input box changes, the searchTerm in the watch attribute monitors the change and automatically calls the searchRepositories method to send a POST request to search for warehouse data.

Run and test

After saving the above code, start your web server and open the index.html file in the browser the address of. You will see a page with input boxes and a list of repositories. After entering the keyword in the input box, the page will display warehouse information related to the keyword in real time.

The above is the entire process of using PHP and Vue to develop the quick search function of warehouse management. By realizing the cooperation between the back-end API and the front-end page, we can quickly search the warehouse and clarify their location and description information. Such a function is very practical and easy to implement, and can greatly improve the efficiency of warehouse management.

The above is the detailed content of How to use PHP and Vue to develop a quick search function for warehouse management. For more information, please follow other related articles on the PHP Chinese website!