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 id="仓库管理系统">仓库管理系统</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 サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7486
15
1377
52
77
11
19
39
どのようにしてクラスが拡張されたり、PHPでメソッドがオーバーライドされたりするのを防ぐことができますか？ （最終キーワード）
Apr 08, 2025 am 12:03 AM
PHPでは、最終的なキーワードを使用して、クラスが継承されないようにし、メソッドが上書きされます。 1）クラスを決勝としてマークする場合、クラスを継承することはできません。 2）メソッドを最終的にマークする場合、メソッドはサブクラスによって書き換えられません。最終的なキーワードを使用すると、コードの安定性とセキュリティが保証されます。
vue.jsでJSファイルを参照する方法
Apr 07, 2025 pm 11:27 PM
vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted（）ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。
VUEのボタンに関数を追加する方法
Apr 08, 2025 am 08:51 AM
HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。
VueでWatchの使用方法
Apr 07, 2025 pm 11:36 PM
Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
Vueによる前のページに戻る方法
Apr 07, 2025 pm 11:30 PM
vue.jsには、前のページに戻る4つの方法があります。$ router.go（-1）$ router.back（）outes＆lt; router-link to =＆quot;/＆quot; Component Window.history.back（）、およびメソッド選択はシーンに依存します。
VUEトラバーサルの使用方法
Apr 07, 2025 pm 11:48 PM
Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。
怠zyなロードVUEとはどういう意味ですか？
Apr 07, 2025 pm 11:54 PM
Vue.jsでは、Lazy Loadingを使用すると、コンポーネントまたはリソースを必要に応じて動的にロードすることができ、初期ページの読み込み時間を短縮し、パフォーマンスを改善できます。特定の実装方法には、＆lt; Keep-Alive＆gt;および＆lt;コンポーネントは＆gt;コンポーネント。怠zyなロードは、FOUC（スプラッシュ画面）の問題を引き起こす可能性があり、不必要なパフォーマンスのオーバーヘッドを避けるために怠zyなロードが必要なコンポーネントにのみ使用する必要があることに注意してください。
