Cara menggunakan PHP dan Vue untuk melaksanakan sistem pengurusan gudang
1 Pengenalan
Gudang adalah pautan yang sangat penting dalam perusahaan, pengurusan gudang adalah penting. Penggunaan sistem pengurusan gudang moden boleh meningkatkan kecekapan operasi gudang, mengurangkan ralat manual, dan lebih baik memenuhi keperluan logistik perusahaan.
Artikel ini akan memperkenalkan cara menggunakan rangka kerja PHP dan Vue untuk membangunkan sistem pengurusan gudang yang mudah. Kami akan menggambarkan proses pelaksanaan melalui contoh kod tertentu.
2. Sediakan persekitaran pembangunan
Sebelum kita mula, kita perlu menyediakan persekitaran pembangunan. Perisian berikut perlu dipasang:
Buat pangkalan data dalam MySQL Pangkalan data bernama "gudang" dan buat dua jadual berikut:
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;
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>Artikel ini menunjukkan proses pelaksanaan sistem pengurusan gudang yang mudah dengan menggunakan rangka kerja PHP dan Vue. Melalui contoh ini, anda boleh belajar cara menggunakan kelebihan dan ciri PHP dan Vue untuk membangunkan sistem pengurusan gudang yang praktikal, dan terus memperkaya dan menambah baiknya dalam amalan. Saya harap artikel ini dapat membantu kerja pembelajaran dan pembangunan anda.
Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
