ホームページ >バックエンド開発 >PHPチュートリアル >PHPとVueを使って倉庫管理の文書管理機能を開発する方法
PHPとVueを使って倉庫管理の文書管理機能を開発する方法
- PHPzオリジナル
- 2023-09-24 08:12:281464ブラウズ
PHP と Vue を使用して倉庫管理のドキュメント管理機能を開発する方法
前書き:
倉庫管理は現代の企業にとって不可欠なタスクであり、ドキュメント管理は倉庫管理の重要な部分です。文書管理には、入荷注文、出荷注文、転送注文などのさまざまな種類の文書が含まれており、これらの文書を管理することで倉庫内の荷物の追跡や監視を実現できます。この記事では、PHPとVueを使って倉庫管理の文書管理機能を開発する方法と、具体的なコード例を紹介します。
1. プロジェクトの構築
1.1 環境の準備
このプロジェクトを使用するには、PHP、MySQL、および Node.js がコンピューターにインストールされていることを確認する必要があります。これらのツールをまだインストールしていない場合は、まずインストールしてください。
1.2 データベースの作成
MySQL に「warehouse」という名前のデータベースを作成し、ドキュメント情報を格納する「documents」という名前のテーブルを作成します。テーブルの構造は次のとおりです:
CREATE TABLE `documents` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`type` varchar(50) NOT NULL,
`number` varchar(50) NOT NULL,
`create_time` datetime NOT NULL,
`status` enum('待审核','已审核','已取消') NOT NULL,
`remark` text,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;1.3 プロジェクト フォルダーの作成
プロジェクト フォルダーに次のファイルとフォルダーを作成します:
- index.html - index.php - api.php - js/ - vue.js - axios.js - app.js
2. フロントエンド ページの開発
2.1index.html
index.html ファイルでは、Vue フレームワークを使用してフロントエンド ページを開発します。まず、Vue.js と axios.js の CDN を紹介します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>仓库管理单据管理功能</title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<!-- 这里是页面内容 -->
</div>
<script src="js/app.js"></script>
</body>
</html>2.2 app.js
app.js ファイルで、Vue インスタンスを定義し、ドキュメント管理機能の特定のロジックを実装します。 。最初に Vue インスタンスを定義します:
var app = new Vue({
el: '#app',
data: {
documents: [] // 存储单据列表
},
mounted: function() {
this.fetchDocuments(); // 在页面加载完成后获取单据列表
},
methods: {
fetchDocuments: function() {
axios.get('api.php?action=getDocuments')
.then(function(response) {
app.documents = response.data; // 将获取到的单据列表赋值给data中的documents
})
.catch(function(error) {
console.log(error);
});
},
// 其他功能代码
}
});2.3 ドキュメント リストのレンダリング
ページ内で、v-for 命令を通じてドキュメントを走査し、テーブルを使用してドキュメント情報をレンダリングします:
<!-- 这里是页面内容 -->
<table>
<thead>
<tr>
<th>单据类型</th>
<th>单据编号</th>
<th>创建时间</th>
<th>状态</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr v-for="document in documents">
<td>{{ document.type }}</td>
<td>{{ document.number }}</td>
<td>{{ document.create_time }}</td>
<td>{{ document.status }}</td>
<td>{{ document.remark }}</td>
</tr>
</tbody>
</table> 3. バックエンド インターフェイスの開発
3.1 Index.php
index.php ファイルでは、フロントエンド ページと通信するためのインターフェイスを定義します。まずデータベース設定ファイル db_config.php を導入し、「API」という名前のクラスを作成します。
<?php
include 'db_config.php';
class API {
// 其他功能代码
}3.2 api.php
api.php ファイルでは、フロントエンドから送信されたリクエストを処理し、対応するメソッドを呼び出してデータを取得します。まずフロントエンドから送信された「action」パラメータを取得し、API クラスをインスタンス化して、さまざまなアクションに応じてさまざまなメソッドを呼び出します。
<?php
$action = $_GET['action']; // 获取前端发送的action参数
$api = new API();
switch ($action) {
case 'getDocuments':
$api->getDocuments();
break;
// 其他功能代码
}3.3 getDocuments メソッドの実装
API クラスに、データベースから文書リストを取得する「getDocuments」というメソッドを実装します。
<?php
class API {
// 其他功能代码
public function getDocuments() {
global $mysqli;
$sql = "SELECT * FROM documents";
$result = $mysqli->query($sql);
$documents = array();
while ($row = $result->fetch_assoc()) {
$documents[] = $row;
}
echo json_encode($documents);
}
}ここまでで、PHPとVueを使った倉庫管理のドキュメント管理機能の開発が完了しました。 Index.html の api.php にアクセスしてドキュメント一覧データを読み込み、app.js にその他の特定の関数コードを追加できます。もちろん、これは単なる予備的な例であり、特定のビジネス ニーズに基づいて機能を拡張できます。
なお、このサンプルコードにはデータの追加、削除、変更などの機能は含まれていませんので、必要に応じて自分で完成させてください。同時に、データのセキュリティを確保するために、認証、本人確認、その他のセキュリティ対策をバックエンド インターフェイスに追加する必要もあります。
この記事があなたのお役に立てば幸いです。また、倉庫管理の文書管理機能の開発が成功することを願っています。
以上がPHPとVueを使って倉庫管理の文書管理機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。