PHP와 Vue를 사용하여 창고 관리의 창고 관리 기능을 구현하는 방법

PHP와 Vue를 사용하여 창고 관리의 창고 관리 기능을 구현하는 방법

현대 비즈니스 운영에서 창고 관리는 매우 중요한 부분입니다. 적절한 창고 관리는 회사가 재고 상태를 더 잘 이해하고 상품 관리의 효율성과 정확성을 향상시키는 데 도움이 될 수 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 창고 관리의 창고 관리 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 준비
코드 작성을 시작하기 전에 몇 가지 준비를 해야 합니다. 먼저, 적절한 버전의 PHP 및 Vue.js를 설치하고 해당 개발 환경을 구성했는지 확인하세요. 둘째, 창고 관리와 관련된 데이터를 저장하기 위해 데이터베이스를 생성하고 해당 데이터 테이블을 생성해야 합니다.

2. 데이터베이스 테이블 생성
창고 관리의 창고 관리 기능에서는 다음과 같은 데이터베이스 테이블을 생성해야 합니다.

1. 상품 테이블: 상품명, 상품 번호, 모델, 사양, 단위 등을 포함한 상품 정보를 저장합니다. 필드.

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;

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

stock 테이블: 상품 ID 및 창고 수량을 포함한 재고 정보를 저장합니다. 저장 시간 및 기타 분야.




테이블 stock 생성(

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

echo json_encode($result);

로그인 후 복사
) 엔진=InnoDB 기본 charset=utf8;
3. PHP 코드 작성

다음으로 데이터베이스와의 상호 작용을 처리하는 PHP 코드를 작성합니다. 창고 관리 관련 기능. 먼저, 데이터베이스에 연결하기 위한 config.php 파일을 생성해야 합니다:

config.php



$db_host = 'localhost';
$db_name = 'your_db_name'; 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') {

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

로그인 후 복사
}

?>

4 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를 사용하여 창고 관리의 창고 관리 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!