Wie man mit PHP und Vue eine Schnellsuchfunktion für die Lagerverwaltung entwickelt-PHP-Tutorial-php.cn

Wie man mit PHP und Vue eine Schnellsuchfunktion für die Lagerverwaltung entwickelt

Wie man mit PHP und Vue eine schnelle Suchfunktion für die Lagerverwaltung entwickelt

In einem modernen Lagerverwaltungssystem ist die schnelle Suchfunktion von entscheidender Bedeutung. Es kann Benutzern helfen, die erforderlichen Lagerinformationen schnell zu finden und die Arbeitseffizienz zu verbessern. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die Schnellsuchfunktion im Lagerverwaltungssystem entwickeln, und es werden konkrete Codebeispiele bereitgestellt.

Vorbereitung der Entwicklungsumgebung

Bevor Sie beginnen, stellen Sie sicher, dass Sie die folgende Software installiert haben:

PHP-Serverumgebung (wie Apache oder Nginx)
MySQL-Datenbank
Vue.js-Entwicklungsumgebung

Erstellung einer Datenbank und Datentabellen

Zuerst müssen wir eine Datentabelle erstellen, um Lagerinformationen zu speichern. Führen Sie die folgende SQL-Anweisung in der MySQL-Datenbank aus:

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');

Nach dem Login kopieren

Der obige Code erstellt eine Datenbank mit dem Namen repository_management, erstellt darin eine Datentabelle mit dem Namen repositories und fügt einige Beispiele ein Daten. repository_management的数据库，并在其中创建了一个名为repositories的数据表，并插入了一些示例数据。

后端开发

接下来，我们将使用PHP来开发后端API，用于提供仓库数据和搜索功能。创建一个名为api.php的文件，将其放在服务器的Web根目录下。

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

Nach dem Login kopieren

在上述代码中，我们首先建立与数据库的连接，然后定义两个接口：获取仓库列表和搜索仓库。获取仓库列表接口通过执行SQL语句SELECT * FROM repositories从数据库中获取所有仓库数据，并将结果返回为JSON格式的数据。搜索仓库接口则是通过获取从前端传递过来的搜索关键字，执行SQL语句`SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%'来进行模糊搜索，并将结果返回为JSON格式的数据。

请记得将代码中的数据库用户名和数据库密码替换为你自己的实际数据库用户名和密码。

前端开发

接下来，我们将使用Vue.js来开发前端页面，用于展示仓库信息和搜索功能。创建一个名为index.html的文件，并将其放在服务器的Web根目录下。

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

Nach dem Login kopieren

在上述代码中，我们创建了一个Vue实例，并在data属性中定义了两个变量：repositories（用于存储仓库数据）和searchTerm（用于存储搜索关键字）。在mounted生命周期钩子中，我们调用getRepositories方法来从后端获取仓库数据，并将其赋值给repositories变量。getRepositories方法使用了fetch函数来发送GET请求。

在模板中，我们使用了v-for指令来遍历repositories变量，并将每个仓库的名称和位置显示在页面上。输入框中使用了v-model指令将输入的内容和searchTerm变量进行了双向绑定。在输入框内容发生变化时，watch属性中的searchTerm监听到变化后，自动调用searchRepositories方法来发送POST请求搜索仓库数据。

运行和测试

将上述代码保存后，启动你的Web服务器，并在浏览器中打开index.html

api.php

SELECT * FROM

 ausführt und das Ergebnis als Daten im JSON-Format zurückgibt. Die Search Warehouse-Schnittstelle führt eine Fuzzy-Suche durch, indem sie die vom Front-End übergebenen Suchschlüsselwörter abruft, die SQL-Anweisung „SELECT * FROM `repositories` WHERE `name` LIKE '%$searchTerm%'

Datenbank-Benutzername

Datenbank-Passwort

index.html

data

repositories

mounted

getRepositories

repositories

getRepositories

fetch

v-for

repositories

v-model

searchTerm

watch

searchRepositories

index.html

Das obige ist der detaillierte Inhalt vonWie man mit PHP und Vue eine Schnellsuchfunktion für die Lagerverwaltung entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!