PHP와 Vue를 사용하여 창고 관리를 위한 QR 코드 관리 기능을 개발하는 방법-PHP 튜토리얼-php.cn

PHP와 Vue를 사용하여 창고 관리를 위한 QR 코드 관리 기능을 개발하는 방법

WBOY

풀어 주다： 2023-09-25 16:02:01

원래의

664명이 탐색했습니다.

PHP와 Vue를 사용하여 창고 관리를 위한 QR 코드 관리 기능을 개발하는 방법

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!