首页  >  文章  >  后端开发  >  如何用PHP和Vue实现仓库管理的入库管理功能

如何用PHP和Vue实现仓库管理的入库管理功能

PHPz
PHPz原创
2023-09-25 13:21:231229浏览

如何用PHP和Vue实现仓库管理的入库管理功能

如何用PHP和Vue实现仓库管理的入库管理功能

在现代商业运营中,仓库管理是非常重要的一环。通过合理的仓库管理,可以帮助企业更好地掌握库存情况,提高货物的管理效率和准确性。本文将介绍如何使用PHP和Vue来实现仓库管理的入库管理功能,并提供具体的代码示例。

一、准备工作
在开始编写代码之前,我们需要进行一些准备工作。首先,确保已经安装了适当版本的PHP和Vue.js,并配置好了相应的开发环境。其次,我们还需要创建一个数据库,并创建相应的数据表,以存储仓库管理的相关数据。

二、创建数据库表
在仓库管理的入库管理功能中,我们需要创建以下数据库表:

  1. goods表:存储货物信息,包括货物名称、货物编号、型号、规格、单位等字段。

create table 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 default charset=utf8;

  1. 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;

    stock表:存储库存信息,包括货物ID、入库数量、入库时间等字段。


    create table stock (

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

    ) 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_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') {

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

    }

    // 添加入库记录
    if ($_POST['action'] == 'addStock') {

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

    }

    ?>


    四、编写Vue代码
    在这一节中,我们将使用Vue.js来处理前端的逻辑,实现仓库管理的入库管理功能。首先,我们需要创建一个Vue实例,并获取货物列表:

    index.html


    <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>

    🎜rrreee🎜🎜🎜🎜以上就是使用PHP和Vue.js实现仓库管理的入库管理功能的全部代码示例。通过本文的介绍和示例,相信读者们能够明白如何使用PHP和Vue.js来实现仓库管理的入库管理功能,并可以根据实际需求进行相应的定制和优化。希望本文对大家有所帮助!🎜

以上是如何用PHP和Vue实现仓库管理的入库管理功能的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn