PHPとVueを使って倉庫管理の入庫管理機能を実装する方法

PHP と Vue を使用して倉庫管理の倉庫管理機能を実装する方法

現代のビジネス運営において、倉庫管理は非常に重要な部分です。適切な倉庫管理は、企業が在庫状況をより深く理解し、商品管理の効率と精度を向上させるのに役立ちます。この記事では、PHPとVueを使って倉庫管理の入庫管理機能を実装する方法と、具体的なコード例を紹介します。

1. 準備作業
コードを書き始める前に、いくつかの準備作業を行う必要があります。まず、適切なバージョンの PHP と Vue.js がインストールされていること、および対応する開発環境が構成されていることを確認してください。次に、データベースを作成し、倉庫管理に関連するデータを保存するための対応するデータ テーブルを作成する必要もあります。

2. データベース テーブルの作成
倉庫管理の倉庫管理機能では、次のデータベース テーブルを作成する必要があります:

1. goods テーブル: 貨物を含む貨物情報を保存します。名前、商品番号、モデル、仕様、単位などのフィールド。

テーブルを作成します 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 デフォルトの charset=utf8;

2. stock テーブル: 在庫情報を格納します、貨物 ID、倉庫数量、倉庫時間などのフィールドが含まれます。

テーブルを作成します 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 デフォルトの charset=utf8;

3. PHP コードを作成します
Connect次に、データベースとの対話を処理し、倉庫管理の関連機能を実装するための PHP コードを作成します。まず、データベースに接続するための config.php ファイルを作成する必要があります:

config.php

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

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

?>

次に、フロントエンド Vue とのデータ対話を処理するために api.php ファイルが作成されます:

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']);

}
?> ;

4. 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を使って倉庫管理の入庫管理機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。