PHP와 Vue를 사용하여 창고 관리를 위한 QR 코드 관리 기능을 개발하는 방법
- WBOY원래의
- 2023-09-25 16:01:07642검색
PHP와 Vue를 사용하여 창고 관리의 QR 코드 관리 기능을 개발하는 방법
머리말:
전자 상거래의 급속한 발전으로 창고 관리가 점점 더 중요해졌습니다. 창고 내 상품의 위치와 상태를 빠르고 정확하게 추적하는 것은 공급망을 효율적으로 운영하는 데 핵심입니다. QR코드는 상품을 식별하는 일반적인 수단으로 정보 저장 용량이 크고 읽기 쉽다는 특징을 갖고 있어 창고 관리에 널리 활용되고 있다.
이 글에서는 PHP와 Vue를 사용하여 창고 관리의 QR 코드 관리 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 기술 준비
시작하기 전에 먼저 다음 소프트웨어 및 도구를 설치해야 합니다.
- PHP 환경(예: XAMPP, WAMP 등)
- Vue.js
- IDE 도구(예: Visual 스튜디오 코드)
II , 데이터베이스 설계
개발을 시작하기 전, 창고 관리 및 QR 코드 관련 데이터를 저장할 수 있는 적합한 데이터베이스 구조 설계가 필요합니다.
우리는 상품 정보를 저장하는 데 사용되는 "goods" 테이블과 QR 코드 정보를 저장하는 "qrcodes" 테이블이라는 두 개의 테이블을 포함하는 "inventory"라는 데이터베이스를 설계합니다.
goods 테이블에는 다음 필드가 포함됩니다.
- id: 상품 ID(기본 키)
- name: 상품 이름
- price: 상품 가격
- Quantity: 상품 수량
qrcodes 테이블에는 다음 필드가 포함됩니다.
- id: QR 코드 ID(기본 키)
- goods_id: 관련 상품 ID
- qrcode: QR 코드 콘텐츠
3. 백엔드 개발(PHP 사용)
- 데이터베이스에 연결
PHP를 사용하여 연결 데이터베이스의 경우 mysqli 또는 PDO 및 기타 방법을 사용할 수 있습니다. 다음은 샘플 코드입니다.
<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "inventory";
$mysqli = new mysqli($host, $username, $password, $database);
if ($mysqli->connect_errno) {
die("连接数据库失败：" . $mysqli->connect_error);
}
?>- 상품 정보 쿼리
상품 테이블의 모든 상품 정보를 쿼리하고 데이터를 JSON 형식으로 반환하는 PHP 코드를 작성하세요. 다음은 샘플 코드입니다.
<?php
// 查询所有货物信息
$query = "SELECT * FROM goods";
$result = $mysqli->query($query);
// 将结果转换为JSON格式
$data = [];
while ($row = $result->fetch_assoc()) {
$data[] = $row;
}
echo json_encode($data);
// 释放资源
$result->free();
$mysqli->close();
?>- QR 코드 추가
PHP 코드를 작성하여 QR 코드 정보를 qrcodes 테이블에 추가하고 생성된 QR 코드 ID를 반환합니다. 다음은 샘플 코드입니다.
<?php
// 获取POST请求参数
$qrcode = $_POST['qrcode'];
$goods_id = $_POST['goods_id'];
// 插入二维码信息
$query = "INSERT INTO qrcodes (goods_id, qrcode) VALUES ('$goods_id', '$qrcode')";
$result = $mysqli->query($query);
// 返回生成的二维码ID
echo $mysqli->insert_id;
// 释放资源
$result->free();
$mysqli->close();
?>4. 프런트 엔드 개발(Vue.js 사용)
- Vue.js 및 axios 설치
프로젝트 디렉터리에서 다음 명령을 통해 Vue.js 및 axios를 설치합니다.
$ npm install vue $ npm install axios
- Vue 컴포넌트 만들기
창고 관리, QR 코드 관리 기능을 표시하기 위해 "Inventory"라는 Vue 컴포넌트를 만듭니다. 다음은 샘플 코드입니다.
<template>
<div>
<h1>仓库管理</h1>
<h2>货物信息</h2>
<ul>
<li v-for="item in goods" :key="item.id">
{{ item.name }} - {{ item.price }} - {{ item.quantity }}
</li>
</ul>
<h2>添加二维码</h2>
<form @submit.prevent="addQrcode">
<label for="qrcode">二维码内容：</label>
<input type="text" v-model="qrcode" required>
<label for="goods_id">货物ID：</label>
<input type="text" v-model="goods_id" required>
<button type="submit">添加</button>
</form>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
goods: [],
qrcode: '',
goods_id: '',
};
},
methods: {
getGoods() {
axios.get('/api/goods.php')
.then(response => {
this.goods = response.data;
})
.catch(error => {
console.error(error);
});
},
addQrcode() {
axios.post('/api/qrcodes.php', {
qrcode: this.qrcode,
goods_id: this.goods_id,
})
.then(response => {
const qrcodeId = response.data;
console.log('生成的二维码ID：', qrcodeId);
})
.catch(error => {
console.error(error);
});
},
},
mounted() {
this.getGoods();
},
};
</script>- Vue 인스턴스 마운트
프로젝트의 항목 파일에서 Vue 인스턴스를 마운트하고 렌더링할 DOM 요소를 지정합니다. 다음은 샘플 코드입니다.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>仓库管理</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/axios"></script>
<script>
import Inventory from './components/Inventory.vue'
new Vue({
el: '#app',
components: { Inventory },
template: '<Inventory />',
});
</script>
</body>
</html>5. 실행 및 테스트
- PHP 개발 서버 시작
프로젝트 디렉터리에서 다음 명령을 실행하여 PHP 개발 서버를 시작합니다.
$ php -S localhost:8000
- 프런트 엔드 시작 개발 서버
프로젝트 디렉터리에서 다음 명령을 실행하여 프런트 엔드 개발 서버를 시작하세요:
$ npm run serve
- 브라우저에서 액세스
브라우저에서 "http://localhost:8080"에 액세스하여 QR 코드를 보고 테스트하세요. 창고 관리의 관리 기능.
요약:
이 글에서는 PHP와 Vue를 사용하여 창고 관리의 QR 코드 관리 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 이를 통해 창고 내 화물정보 관리, QR코드 생성 및 연계 기능을 신속하게 구현하여 창고관리의 효율성과 정확성을 향상시킬 수 있습니다. 이 글이 창고 관리 시스템을 개발하는 모든 분들에게 도움이 되기를 바랍니다.
위 내용은 PHP와 Vue를 사용하여 창고 관리를 위한 QR 코드 관리 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!