Rumah > Artikel > pembangunan bahagian belakang > Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan keluar pengurusan gudang
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; } }5. Pelaksanaan kod bahagian hadapanDalam kod bahagian hadapan, kami menggunakan rangka kerja Vue untuk mengendalikan logik interaksi fungsi pengurusan keluar. Berikut ialah contoh mudah:
<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>6. Ringkasan Di atas adalah langkah terperinci dan contoh kod khusus untuk membangunkan fungsi pengurusan keluar pengurusan gudang menggunakan PHP dan Vue. Dengan cara ini, kami boleh menguruskan pesanan keluar dan item keluar dengan mudah, meningkatkan kecekapan dan ketepatan pengurusan gudang. Semoga artikel ini bermanfaat kepada anda.
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!