Heim > Artikel > Backend-Entwicklung > So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue
So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue
1. Das Lager ist ein sehr wichtiges Glied im Unternehmen. Die Verwaltung des Lagers ist von entscheidender Bedeutung. Die Einführung eines modernen Lagerverwaltungssystems kann die Effizienz des Lagerbetriebs verbessern, manuelle Fehler reduzieren und die Logistikanforderungen von Unternehmen besser erfüllen.
Bevor wir beginnen, müssen wir eine Entwicklungsumgebung einrichten. Die folgende Software muss installiert sein:
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;
Lagerbestand: wird für Aufzeichnungen verwendet. Der Ein- und Ausgangsverlauf jedes Artikels, einschließlich Artikel-ID, Menge, Typ (eingehend oder ausgehend), Datum und anderer Felder.
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;
<?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpass = ''; $dbname = 'warehouse'; $conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname); if (!$conn) { die('Could not connect: ' . mysqli_error()); } ?>
<?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); ?>
<!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>
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!