如何使用PHP和Vue實現倉庫管理系統
一、介紹
倉庫是企業中非常重要的一個環節,對於企業的物品管理來說,倉庫的管理是至關重要的。採用現代化的倉庫管理系統可以提高倉庫作業效率、減少人力錯誤,更能滿足企業物流需求。
本文將介紹如何使用PHP和Vue框架來發展一個簡單的倉庫管理系統。我們將透過具體的程式碼範例來說明實現過程。
二、建置開發環境
在開始之前,我們需要建構一個開發環境。需要安裝以下軟體:
三、設定資料庫
在MySQL中建立一個名為"warehouse"的資料庫,並建立以下兩個表格:
item:用於儲存倉庫中的物品訊息,包括物品ID、名稱、數量等欄位;
CREATE TABLE `item` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `name` VARCHAR(50) NOT NULL, `quantity` INT(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
stock:用於記錄每個物品的入庫和出庫歷史,包括物品ID、數量、類型(入庫或出庫)、日期等欄位。
CREATE TABLE `stock` ( `id` INT(11) NOT NULL AUTO_INCREMENT, `item_id` INT(11) NOT NULL, `quantity` INT(11) NOT NULL, `type` ENUM('in','out') NOT NULL, `date` DATE NOT NULL, PRIMARY KEY (`id`), KEY `item_id` (`item_id`), CONSTRAINT `stock_ibfk_1` FOREIGN KEY (`item_id`) REFERENCES `item` (`id`) ON DELETE CASCADE ) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;
四、後端實作
#建立一個名為"config.php"的文件,用於儲存資料庫連線參數。
<?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $dbname = 'warehouse'; $conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname); if (!$conn) { die('Could not connect: ' . mysqli_error()); } ?>
建立一個名為"index.php"的文件,用於處理後端請求。
<?php include('config.php'); $action = $_GET['action']; if ($action == 'list') { $result = mysqli_query($conn, "SELECT * FROM item"); $rows = array(); while ($row = mysqli_fetch_assoc($result)) { $rows[] = $row; } echo json_encode($rows); } elseif ($action == 'add') { $name = $_POST['name']; $quantity = $_POST['quantity']; mysqli_query($conn, "INSERT INTO item (name, quantity) VALUES ('$name', $quantity)"); echo mysqli_insert_id($conn); } elseif ($action == 'update') { $id = $_POST['id']; $name = $_POST['name']; $quantity = $_POST['quantity']; mysqli_query($conn, "UPDATE item SET name='$name', quantity=$quantity WHERE id=$id"); } elseif ($action == 'delete') { $id = $_POST['id']; mysqli_query($conn, "DELETE FROM item WHERE id=$id"); } mysqli_close($conn); ?>
五、前端實作
建立一個名為"index.html"的文件,用於編寫前端頁面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仓库管理系统</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <el-table :data="items" style="width: 500px;"> <el-table-column type="index" label="序号"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="quantity" label="数量"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <el-dialog :visible.sync="dialogVisible" :before-close="handleCloseDialog" title="编辑物品"> <el-form :model="currentItem" label-width="80px"> <el-form-item label="名称"> <el-input v-model="currentItem.name"></el-input> </el-form-item> <el-form-item label="数量"> <el-input v-model.number="currentItem.quantity"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="handleSubmit">确 定</el-button> </div> </el-dialog> <el-button type="primary" @click="handleAdd">新增</el-button> </div> <script> var app = new Vue({ el: '#app', data: { items: [], dialogVisible: false, currentItem: {} }, methods: { fetchData() { axios.get('index.php?action=list').then(response => { this.items = response.data; }); }, handleAdd() { this.currentItem.name = ''; this.currentItem.quantity = 0; this.dialogVisible = true; }, handleSubmit() { if (this.currentItem.id) { axios.post('index.php?action=update', this.currentItem).then(() => { this.fetchData(); this.dialogVisible = false; }); } else { axios.post('index.php?action=add', this.currentItem).then(response => { this.currentItem.id = response.data; this.items.push(this.currentItem); this.dialogVisible = false; }); } }, handleCloseDialog(done) { this.$confirm('确认关闭?') .then(() => { done(); this.dialogVisible = false; }) .catch(() => {}); }, handleDelete(id) { axios.post('index.php?action=delete', { id }).then(() => { this.fetchData(); }); } }, mounted() { this.fetchData(); } }); </script> </body> </html>
六、測試
七、總結
本文透過使用PHP和Vue框架來示範了一個簡單的倉庫管理系統的實作過程。透過這個例子,你可以了解如何利用PHP與Vue的優勢和特點來開發一個實用的倉庫管理系統,並在實務上不斷豐富和完善。希望本文能對你的學習和開發工作有所幫助。
以上是如何使用PHP和Vue實現倉庫管理系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!