PHP と Vue を使用して倉庫管理の貨物追跡機能を開発する方法
はじめに:
電子商取引の急速な発展に伴い、倉庫管理は非常に重要なリンクになります。倉庫管理の効率化と正確性を向上させるためには、貨物追跡システムの開発が必要です。この記事では、PHPとVueを使って倉庫管理の貨物追跡機能を開発する方法と、具体的なコード例を紹介します。
1. 技術的な準備
開発を開始する前に、次の技術とツールを準備する必要があります:
商品テーブル: 商品 ID、名前、説明、その他のフィールドを含む商品に関する情報を格納します
$servername = "localhost"; $username = "root"; $password = ""; $dbname = "warehouse_management"; // 创建数据库连接 $conn = new mysqli($servername, $username, $password, $dbname); // 检查连接是否成功 if ($conn->connect_error) { die("连接数据库失败: " . $conn->connect_error); }
API インターフェイスの作成
$app->get('/warehouses', function () use ($app, $conn) { $sql = "SELECT * FROM warehouses"; $result = $conn->query($sql); $warehouses = array(); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $warehouses[] = $row; } } $app->response->headers->set('Content-Type', 'application/json'); echo json_encode($warehouses); });
$app->get('/warehouses/:id/goods', function ($id) use ($app, $conn) { $sql = "SELECT * FROM goods_warehouses WHERE warehouse_id = $id"; $result = $conn->query($sql); $goods = array(); if ($result->num_rows > 0) { while($row = $result->fetch_assoc()) { $goods[] = $row; } } $app->response->headers->set('Content-Type', 'application/json'); echo json_encode($goods); });
#指定された倉庫に新しい商品を追加します:
$app->post('/warehouses/:id/goods', function ($id) use ($app, $conn) { $request = json_decode($app->request->getBody()); $name = $request->name; $description = $request->description; $quantity = $request->quantity; $date = date('Y-m-d H:i:s'); $sql = "INSERT INTO goods_warehouses (warehouse_id, name, description, quantity, date) VALUES ($id, '$name', '$description', $quantity, '$date')"; if ($conn->query($sql) === TRUE) { $response = array('status' => 'success'); } else { $response = array('status' => 'error', 'message' => $conn->error); } $app->response->headers->set('Content-Type', 'application/json'); echo json_encode($response); });
$app->put('/goods/:id/quantity', function ($id) use ($app, $conn) { $quantity = json_decode($app->request->getBody()); $sql = "UPDATE goods_warehouses SET quantity = $quantity WHERE id = $id"; if ($conn->query($sql) === TRUE) { $response = array('status' => 'success'); } else { $response = array('status' => 'error', 'message' => $conn->error); } $app->response->headers->set('Content-Type', 'application/json'); echo json_encode($response); });
Vue を使用してユーザー インターフェイスを構築する必要があります。まず、HTML で Vue ライブラリを導入し、Vue インスタンスを作成する必要があります。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仓库管理系统</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 在这里编写Vue模板代码 --> </div> <script src="js/app.js"></script> </body> </html>
Vue インスタンスで API リクエストを送信し、返されたデータを処理する必要があります。一般的に使用されるコード例を次に示します。
var app = new Vue({ el: '#app', data: { warehouses: [] }, mounted() { axios.get('/api/warehouses') .then(response => { this.warehouses = response.data; }) .catch(error => { console.log(error); }); } });
var app = new Vue({ el: '#app', data: { goods: [] }, mounted() { var id = 1; // 仓库ID axios.get('/api/warehouses/' + id + '/goods') .then(response => { this.goods = response.data; }) .catch(error => { console.log(error); }); } });
var app = new Vue({ el: '#app', data: { name: '', description: '', quantity: '' }, methods: { addGoods() { var id = 1; // 仓库ID axios.post('/api/warehouses/' + id + '/goods', { name: this.name, description: this.description, quantity: this.quantity }) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); } } });#商品の数量を更新します:
var app = new Vue({ el: '#app', data: { goodsId: '', quantity: '' }, methods: { updateQuantity() { axios.put('/api/goods/' + this.goodsId + '/quantity', this.quantity) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); } } });
以上がPHP と Vue を使用して倉庫管理用の貨物追跡機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。