PHPとVueを使って倉庫管理用のQRコード管理機能を開発する方法-PHPチュートリアル-php.cn

PHPとVueを使って倉庫管理用のQRコード管理機能を開発する方法

WBOY

リリース： 2023-09-25 16:02:01

オリジナル

663 人が閲覧しました

PHPとVueを使って倉庫管理用のQRコード管理機能を開発する方法

PHP と Vue を使って倉庫管理の QR コード管理機能を開発する方法

まえがき:
電子商取引の急速な発展に伴い、倉庫管理もますます重要になってきています。倉庫内の商品の位置とステータスを迅速かつ正確に追跡することは、サプライチェーンを効率的に実行し続けるための鍵となります。 QRコードは、商品を識別する一般的な手段として、情報記憶容量が大きく読み取りやすいという特徴があり、倉庫管理などで広く利用されています。

この記事では、PHPとVueを使って倉庫管理のQRコード管理機能を開発する方法と、具体的なコード例を紹介します。

1. 技術的な準備
始める前に、まず次のソフトウェアとツールをインストールする必要があります:

PHP 環境 (XAMPP、WAMP など)
Vue .js
IDE ツール (Visual Studio Code など)

2. データベース設計
開発を開始する前に、適切なデータベースを設計する必要があります。保管倉庫管理の仕組みとQRコード関連データ。

「inventory」という名前のデータベースを設計します。このデータベースには、商品情報を保存するために使用される「goods」テーブルと、QR コード情報を保存するために使用される「qrcodes」テーブルの 2 つのテーブルが含まれています。

商品テーブルには次のフィールドが含まれます:

id: 商品 ID (主キー)
name: 商品名
price: 商品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 中国語 Web サイトの他の関連記事を参照してください。