PHP と Vue を使用して倉庫管理用のクイック検索機能を開発する方法-PHPチュートリアル-php.cn

PHP と Vue を使用して倉庫管理用のクイック検索機能を開発する方法

WBOY

リリース： 2023-09-25 08:16:02

オリジナル

1192 人が閲覧しました

PHP と Vue を使用して倉庫管理用のクイック検索機能を開発する方法

PHP と Vue を使用して倉庫管理の高速検索機能を開発する方法

最新の倉庫管理システムでは、高速検索機能が重要です。これにより、ユーザーは必要な倉庫情報を素早く見つけ、作業効率を向上させることができます。この記事では、PHP と Vue を使用して倉庫管理システムの高速検索機能を開発する方法と、具体的なコード例を紹介します。

開発環境の準備

始める前に、次のソフトウェアがインストールされていることを確認してください。

PHP サーバー環境 (Apache など)または Nginx )
MySQL データベース
Vue.js 開発環境

データベースとデータテーブルの作成

まず、倉庫情報を保存するにはデータテーブルを作成する必要があります。 MySQL データベースで次の SQL ステートメントを実行します。

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

ログイン後にコピー

上記のコードは、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();

ログイン後にコピー

上記のコードでは、まずデータベースとの接続を確立し、次にウェアハウスリストの取得とウェアハウスの検索という 2 つのインターフェイスを定義します。 Get Warehouse List インターフェイスは、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>

ログイン後にコピー

上記のコードでは、Vue インスタンスを作成し、data 属性で 2 つの変数: repositories (ウェアハウスデータの保存に使用) と を定義しました。 searchTerm (検索キーワードの保存に使用)。 mounted ライフサイクルフックでは、getRepositories メソッドを呼び出してバックエンドからウェアハウスデータを取得し、それを repositories 変数に割り当てます。 getRepositories メソッドは、fetch 関数を使用して GET リクエストを送信します。

テンプレートでは、v-for ディレクティブを使用して repositories 変数をループし、ページ上の各リポジトリの名前と場所を表示しました。 v-model ディレクティブは、入力コンテンツを searchTerm 変数に双方向にバインドするために入力ボックスで使用されます。入力ボックスの内容が変更されると、watch 属性の searchTerm がその変更を監視し、自動的に searchRepositories メソッドを呼び出して、検索する POST リクエストを送信します。倉庫データ。

実行してテスト

上記のコードを保存した後、Web サーバーを起動し、ブラウザで index.html ファイルのアドレスを開きます。。入力ボックスとリポジトリのリストを含むページが表示されます。入力ボックスにキーワードを入力すると、そのキーワードに関連する倉庫情報がリアルタイムにページに表示されます。

上記は、PHP と Vue を使用して倉庫管理のクイック検索機能を開発するプロセスの全体です。バックエンドAPIとフロントエンドページの連携を実現することで、倉庫内を迅速に検索し、その場所や説明情報を明らかにすることができます。このような機能は非常に実用的かつ簡単に実装でき、倉庫管理の効率を大幅に向上させることができます。

以上がPHP と Vue を使用して倉庫管理用のクイック検索機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。