ホームページ >バックエンド開発 >PHPチュートリアル >PHP と Vue を使用して倉庫管理のための注文追跡機能を開発する方法
PHP と Vue を使用して倉庫管理の注文追跡機能を開発する方法
電子商取引の急速な発展に伴い、倉庫管理の重要性と複雑さが増しています。徐々に増えていきました。倉庫管理において、注文追跡機能は重要な部分です。注文追跡機能は、倉庫管理者が注文のステータスをより適切に管理および追跡し、作業効率を向上させるのに役立ちます。この記事では、PHP と Vue を使用して、倉庫管理システムでシンプルかつ実用的な注文追跡機能を開発する方法と、具体的なコード例を紹介します。
1. テクノロジーの選択
倉庫管理の注文追跡機能を開発する際、開発テクノロジー スタックとして PHP と Vue を使用することを選択しました。 PHP は、Web アプリケーションの構築に広く使用されている強力なバックエンド開発言語です。 Vue は、コンポーネントベースの開発アプローチを提供する人気のフロントエンド フレームワークであり、開発者がフロントエンド コードをより適切に整理および管理できるようにします。
2. データベース設計
コードを書き始める前に、注文情報を保存するデータベース構造を設計する必要があります。単純な注文テーブルには次のフィールドを含めることができます。
MySQL データベースを使用して注文データを保存できます。 MySQL で「orders」という名前のテーブルを作成します。具体的な SQL ステートメントは次のとおりです:
CREATE TABLE order (
order_id INT(11) NOT NULL AUTO_INCREMENT, order_number VARCHAR(20) NOT NULL, customer_name VARCHAR(50) NOT NULL, order_date DATE NOT NULL, order_status VARCHAR(20) NOT NULL, PRIMARY KEY (order_id)
);
3. バックエンド コードの実装
次に、バックエンドの注文追跡機能を実装するための PHP コードを記述します。次のコードを含む「api.php」という名前のファイルを作成します:
header("Access-Control-Allow-Origin: *");
header("Content -タイプ: application/json; charset=UTF-8");
// データベースに接続します。データベース接続情報の変更に注意してください
$conn = new mysqli("localhost", "username ", "password ", "database");
if ($conn->connect_error) {
die("连接失败: " . $conn->connect_error);
}
// すべての注文をクエリする
$sql = " SELECT * FROM order ";
$result = $conn->query($sql);
// クエリ結果を JSON 形式に変換して出力します
$orders = array();
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) { $orders[] = $row; }
}
echo json_encode($orders);
$conn->close();
? >
上記のコードは、すべての注文をクエリする機能を実装しています。 PHP経由でデータベースに接続し、クエリ文を実行して注文データをJSON形式に変換して出力します。
4. フロントエンド コードの実装
次に、Vue を使用してフロントエンドの注文追跡関数を作成します。 「App.vue」というファイルを作成し、次のコードを追加します。
div> <script><br>デフォルトのエクスポート {<br> data() {</script> }, }, 上記のコードは、「App」という名前の Vue コンポーネントを定義し、フェッチ関数を通じて HTTP リクエストを送信して注文データを取得し、注文リストをテーブルにレンダリングします。 5. 実行とテスト 上記の PHP および Vue コードを適切なディレクトリに保存して配置し、PHP サーバーを起動して、ブラウザで対応する URL を開いて順番に表示します。リスト。 これまでに、PHP と Vue を使用したシンプルな倉庫管理システムの注文追跡機能の開発に成功しました。上記のコード例を通じて、実際のニーズに応じてこの関数をさらに拡張および最適化し、より複雑な倉庫管理のニーズに適応させることができます。
<h1>订单跟踪</h1>
<table>
<thead>
<tr>
<th>订单号</th>
<th>客户姓名</th>
<th>下单日期</th>
<th>订单状态</th>
</tr>
</thead>
<tbody>
<tr v-for="order in orders" :key="order.order_id">
<td>{{ order.order_number }}</td>
<td>{{ order.customer_name }}</td>
<td>{{ order.order_date }}</td>
<td>{{ order.order_status }}</td>
</tr>
</tbody>
</table>
return {
orders: [],
};
Mounted() {// 发送请求获取订单数据
fetch("http://localhost/api.php")
.then((response) => response.json())
.then((data) => {
this.orders = data;
});
};
table {
width: 100%;
border-collapse:折りたたむ;
}
th,
td {
パディング: 8px;
ボーダー: 1px 実線 #ddd;
}
以上がPHP と Vue を使用して倉庫管理のための注文追跡機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。