ホームページ >バックエンド開発 >PHPチュートリアル >PHPとVueを使って倉庫管理用のQRコード管理機能を開発する方法

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

WBOYオリジナル: 2023-09-25 16:01:07655ブラウズ

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 サイトの他の関連記事を参照してください。

php json mysqli pdo JS dom visual studio visual studio code 数据库 http axios

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHP マイクロサービスを使用して分散ログ分析とマイニングを実装する方法次の記事：PHP マイクロサービスを使用して分散ログ分析とマイニングを実装する方法

続きを見る