How to use PHP and Vue to implement a warehouse management system
1. Introduction
The warehouse is a very important link in the enterprise, for the enterprise's item management , warehouse management is crucial. The adoption of a modern warehouse management system can improve warehouse operation efficiency, reduce manual errors, and better meet the logistics needs of enterprises.
This article will introduce how to use PHP and Vue framework to develop a simple warehouse management system. We will illustrate the implementation process through specific code examples.
2. Set up a development environment
Before we start, we need to set up a development environment. The following software needs to be installed:
3. Set up the database
Create a database named "warehouse" in MySQL and create the following two tables:
item: used to store item information in the warehouse, including item ID, name, quantity and other fields;
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: used to record the entry and exit of each item Inventory history, including item ID, quantity, type (incoming or outgoing), date and other fields.
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;4. Backend implementation
Create a file named "config.php" to store database connection parameters.
<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'warehouse';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) {
die('Could not connect: ' . mysqli_error());
}
?>Create a file named "index.php" to handle backend requests.
<?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);
?>5. Front-end implementation
Create a file named "index.html" for writing front-end pages.
<!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>6. Test
7. Summary
This article demonstrates the implementation process of a simple warehouse management system by using PHP and Vue framework. Through this example, you can learn how to use the advantages and features of PHP and Vue to develop a practical warehouse management system, and continue to enrich and improve it in practice. I hope this article can be helpful to your learning and development work.
The above is the detailed content of How to implement a warehouse management system using PHP and Vue. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
