如何用PHP和Vue實現倉庫管理的入庫管理功能

如何以PHP和Vue實現倉庫管理的入庫管理功能

在現代商業營運中，倉庫管理是非常重要的一環。透過合理的倉庫管理，可以幫助企業更好地掌握庫存狀況，提高貨物的管理效率和準確性。本文將介紹如何使用PHP和Vue來實現倉庫管理的入庫管理功能，並提供具體的程式碼範例。

一、準備工作
在開始寫程式碼之前，我們需要做一些準備工作。首先，確保已經安裝了適當版本的PHP和Vue.js，並配置了對應的開發環境。其次，我們還需要建立一個資料庫，並建立對應的資料表，以儲存倉庫管理的相關資料。

二、建立資料庫表
在倉庫管理的入庫管理功能中，我們需要建立以下資料庫表：

1. goods表：儲存貨物信息，包括貨物名稱、貨物編號、型號、規格、單位等欄位。

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表：儲存庫存資訊，包括貨物ID、入庫數量、入庫時間等欄位。

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;

三、寫PHP程式碼
接下來，我們將編寫PHP程式碼，用於處理與資料庫的交互，實現入庫管理的相關功能。首先，我們需要建立一個用於連接資料庫的config.php檔案：

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_host;dbname= $db_name", $db_user, $db_pass);
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

?>

然後，我們將會建立一個api.php文件，用於處理與前端Vue的資料互動：

api.php

#require_once('config.php');

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

// 取得貨物清單
if ($_GET['action'] == 'getGoodsList') {

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

echo json_encode($result);

}

// 新增入庫記錄
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']);

}
?> ;

四、寫Vue程式碼
在這一節中，我們將使用Vue.js來處理前端的邏輯，實現倉庫管理的入庫管理功能。首先，我們需要建立一個Vue實例，並取得貨物清單：

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>

#以上就是使用PHP和Vue .js實作倉庫管理的入庫管理功能的全部程式碼範例。透過本文的介紹和範例，相信讀者們能夠明白如何使用PHP和Vue.js來實現倉庫管理的入庫管理功能，並且可以根據實際需求進行相應的客製化和最佳化。希望本文對大家有幫助！

以上是如何用PHP和Vue實現倉庫管理的入庫管理功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！