Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan keluar pengurusan gudang
Dengan perkembangan pesat perniagaan e-dagang, sistem pengurusan gudang telah menjadi bahagian yang amat diperlukan dalam operasi harian banyak syarikat. Antaranya, fungsi pengurusan keluar adalah salah satu pautan penting dalam pengurusan gudang. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan keluar yang mudah dan praktikal, dan menyediakan contoh kod khusus.
1. Analisis keperluan fungsi pengurusan keluar
Sebelum memulakan pembangunan, kami perlu menjelaskan keperluan untuk fungsi pengurusan keluar. Secara umumnya, fungsi pengurusan keluar hendaklah merangkumi aspek berikut:
2. Pemilihan Teknologi
Untuk merealisasikan fungsi pengurusan keluar, kami memilih untuk menggunakan PHP sebagai bahasa pembangunan bahagian belakang dan Vue sebagai rangka kerja pembangunan bahagian hadapan.
PHP ialah bahasa skrip yang mudah dipelajari dan digunakan serta mempunyai pelbagai aplikasi. Vue ialah rangka kerja JavaScript ringan yang boleh membantu kami membina antara muka pengguna interaktif.
3. Reka bentuk pangkalan data
Sebelum mula menulis kod, kita perlu mereka bentuk jadual pangkalan data untuk menyimpan maklumat berkaitan penghantaran keluar. Berikut ialah contoh mudah:
Jadual pesanan keluar (stock_out)
<?php // 连接数据库 $conn = new mysqli("localhost", "username", "password", "database"); // 检查连接是否成功 if ($conn->connect_error) { die("数据库连接失败: " . $conn->connect_error); } // 获取出库单列表 function getStockOutList() { global $conn; $sql = "SELECT * FROM stock_out"; $result = $conn->query($sql); if ($result->num_rows > 0) { $output = array(); while($row = $result->fetch_assoc()) { $output[] = $row; } return $output; } else { return array(); } } // 创建出库单 function createStockOut($out_date, $operator) { global $conn; $sql = "INSERT INTO stock_out (out_date, operator) VALUES ('$out_date', '$operator')"; if ($conn->query($sql) === TRUE) { return true; } else { return false; } } // 删除出库单 function deleteStockOut($id) { global $conn; $sql = "DELETE FROM stock_out WHERE id = '$id'"; if ($conn->query($sql) === TRUE) { return true; } else { return false; } } // 获取出库物品列表 function getStockOutItems($out_id) { global $conn; $sql = "SELECT * FROM stock_out_items WHERE out_id = '$out_id'"; $result = $conn->query($sql); if ($result->num_rows > 0) { $output = array(); while($row = $result->fetch_assoc()) { $output[] = $row; } return $output; } else { return array(); } } // 创建出库物品 function createStockOutItem($out_id, $item_name, $item_qty) { global $conn; $sql = "INSERT INTO stock_out_items (out_id, item_name, item_qty) VALUES ('$out_id', '$item_name', '$item_qty')"; if ($conn->query($sql) === TRUE) { return true; } else { return false; } } // 删除出库物品 function deleteStockOutItem($id) { global $conn; $sql = "DELETE FROM stock_out_items WHERE id = '$id'"; if ($conn->query($sql) === TRUE) { return true; } else { return false; } }
<div id="app"> <h2>出库单管理</h2> <div v-for="stockOut in stockOutList"> <p>出库单ID: {{ stockOut.id }}</p> <p>出库日期: {{ stockOut.out_date }}</p> <p>操作人员: {{ stockOut.operator }}</p> <button @click="deleteStockOut(stockOut.id)">删除</button> </div> <h2>出库物品管理</h2> <div> <input type="text" v-model="item.name" placeholder="物品名称"> <input type="number" v-model="item.qty" placeholder="出库数量"> <button @click="createStockOutItem">添加</button> </div> <div v-for="item in stockOutItems"> <p>物品名称: {{ item.item_name }}</p> <p>出库数量: {{ item.item_qty }}</p> <button @click="deleteStockOutItem(item.id)">删除</button> </div> </div> <script> new Vue({ el: "#app", data: { stockOutList: [], stockOutItems: [], item: { name: "", qty: 0 } }, mounted() { // 获取出库单列表 this.getStockOutList(); }, methods: { // 获取出库单列表 getStockOutList() { axios.get("stock_out.php?action=getStockOutList") .then(response => { this.stockOutList = response.data; }) .catch(error => { console.error(error); }); }, // 删除出库单 deleteStockOut(id) { axios.get(`stock_out.php?action=deleteStockOut&id=${id}`) .then(response => { if (response.data === true) { this.getStockOutList(); alert("删除成功"); } else { alert("删除失败"); } }) .catch(error => { console.error(error); }); }, // 添加出库物品 createStockOutItem() { axios.post("stock_out.php?action=createStockOutItem", this.item) .then(response => { if (response.data === true) { this.getStockOutItems(); alert("添加成功"); } else { alert("添加失败"); } }) .catch(error => { console.error(error); }); }, // 删除出库物品 deleteStockOutItem(id) { axios.get(`stock_out.php?action=deleteStockOutItem&id=${id}`) .then(response => { if (response.data === true) { this.getStockOutItems(); alert("删除成功"); } else { alert("删除成功"); } }) .catch(error => { console.error(error); }); } } }); </script>
Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan keluar pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!