How to use PHP and Vue to implement the warehousing management function of warehouse management

How to use PHP and Vue to implement the warehousing management function of warehouse management

In modern business operations, warehouse management is a very important part. Proper warehouse management can help companies better understand inventory conditions and improve the efficiency and accuracy of goods management. This article will introduce how to use PHP and Vue to implement the warehousing management function of warehouse management, and provide specific code examples.

1. Preparation work
Before we start writing code, we need to do some preparation work. First, make sure you have installed the appropriate versions of PHP and Vue.js, and configured the corresponding development environment. Secondly, we also need to create a database and create corresponding data tables to store data related to warehouse management.

2. Create database tables
In the warehousing management function of warehouse management, we need to create the following database tables:

1. goods table: stores cargo information, including cargo names , goods number, model, specification, unit and other fields.

create table goods (

`id` int(11) not null auto_increment,
`name` varchar(255) not null,
`code` varchar(255) not null,
`model` varchar(255),
`spec` varchar(255),
`unit` varchar(255),
primary key (`id`)

) engine=InnoDB default charset=utf8;

2. stock table: stores inventory information , including fields such as cargo ID, warehousing quantity, warehousing time, etc.

create table stock (

`id` int(11) not null auto_increment,
`goods_id` int(11) not null,
`quantity` int(11) not null,
`created_at` timestamp not null default current_timestamp,
primary key (`id`),
foreign key (`goods_id`) references `goods` (`id`)

) engine=InnoDB default charset=utf8;

3. Write PHP code
Connect Next, we will write PHP code to handle the interaction with the database and implement related functions of warehousing management. First, we need to create a config.php file for connecting to the database:

config.php

$db_host = 'localhost';
$db_name = 'your_db_name';
$db_user = 'your_db_user';
$db_pass = 'your_db_pass';

$conn = new PDO("mysql:host=$db_host;dbname= $db_name", $db_user, $db_pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

?>

Then, we An api.php file will be created to handle data interaction with the front-end Vue:

api.php

require_once('config.php');

header('Content-Type: application/json');

// Get the goods list
if ($_GET['action'] == 'getGoodsList') {

$stmt = $conn->prepare('SELECT * FROM goods');
$stmt->execute();
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);

echo json_encode($result);

}

//Add storage record
if ($_POST['action'] == 'addStock') {

$goods_id = $_POST['goods_id'];
$quantity = $_POST['quantity'];

$stmt = $conn->prepare('INSERT INTO stock (goods_id, quantity) VALUES (?, ?)');
$stmt->execute([$goods_id, $quantity]);

echo json_encode(['status' => 'success']);

}
?> ;

4. Writing Vue code
In this section, we will use Vue.js to handle the front-end logic and implement the warehousing management function of warehouse management. First, we need to create a Vue instance and get the list of goods:

index.html

<meta charset="UTF-8">
<title>仓库管理</title>

<div id="app">
    <h1>入库管理</h1>
    <form @submit.prevent="addStock">
        <select v-model="selectedGoods">
            <option v-for="goods in goodsList" :value="goods.id">{{ goods.name }}</option>
        </select>
        <input type="number" min="1" v-model="quantity" required>
        <button type="submit">确认入库</button>
    </form>
    <ul>
        <li v-for="stock in stockList">{{ stock.name }} 入库 {{ stock.quantity }} 件</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            selectedGoods: '',
            quantity: '',
            goodsList: [],
            stockList: []
        },
        methods: {
            getGoodsList() {
                fetch('api.php?action=getGoodsList')
                .then(response => response.json())
                .then(data => {
                    this.goodsList = data;
                });
            },
            addStock() {
                const formData = new FormData();
                formData.append('action', 'addStock');
                formData.append('goods_id', this.selectedGoods);
                formData.append('quantity', this.quantity);

                fetch('api.php', {
                    method: 'POST',
                    body: formData
                })
                .then(() => {
                    this.getStockList();
                    this.selectedGoods = '';
                    this.quantity = '';
                });
            },
            getStockList() {
                // 获取入库记录列表
            }
        },
        mounted() {
            this.getGoodsList();
            this.getStockList();
        }
    });
</script>

The above is the detailed content of How to use PHP and Vue to implement the warehousing management function of warehouse management. For more information, please follow other related articles on the PHP Chinese website!