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

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

倉庫管理のデジタル アップグレードに伴い、バーコード管理機能が重要な部分になりました現代の倉庫管理。バーコード管理機能により、倉庫管理者は倉庫内の商品を迅速かつ正確に識別、追跡、管理できます。この記事では、PHPとVueを使って倉庫管理のバーコード管理機能を開発する方法と、具体的なコード例を紹介します。

まず、開発目標を明確にする必要があります。倉庫内の商品の入出荷管理と在庫管理を実現し、バーコードで識別および追跡することです。この目標を達成するには、PHP と Vue という 2 つの強力な開発ツールを使用する必要があります。

プロジェクトを作成する前に、開発環境を準備する必要があります。まず、PHPとVueの開発環境をインストールする必要があります。 PHP は、インストール パッケージをダウンロードし、そのインストール ウィザードに従うことでインストールできます。 Vue は、Node.js パッケージ マネージャー npm を通じてインストールできます。インストールが完了したら、コマンド ライン ツールを使用して php -v と vue --version をそれぞれ入力し、インストールが成功したことを確認します。

次に、新しい Vue プロジェクトを作成できます。コマンド ラインで次のコマンドを入力して、「warehouse-management」という名前の Vue プロジェクトを作成できます:

vue create warehouse-management

作成が完了したら、プロジェクト ディレクトリに入り、必要な依存関係をインストールします:

cd warehouse-management
npm install axios bootstrap-vue

プロジェクト ディレクトリに、「barcode」という名前の新しい Vue コンポーネントを作成し、それを「App.vue」ファイルに導入します。

// App.vue

<template>
  <div id="app">
    <barcode></barcode>
  </div>
</template>

<script>
  import Barcode from './components/Barcode.vue';

  export default {
    name: 'App',
    components: {
      Barcode
    }
  }
</script>

「components」フォルダに、という名前のコンポーネントを作成します。 「Barcode.vue」のコンポーネントは、バーコード管理機能を実装するために使用されます。

// Barcode.vue

<template>
  <div>
    <input type="text" v-model="inputText" placeholder="输入货物编号">
    <b-button variant="primary" @click="generateBarcode">生成条形码</b-button>
    <br>
    <img src="/static/imghw/default1.png"  data-src="barcodeImage"  class="lazy"  : alt="条形码">
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        inputText: '',
        barcodeImage: ''
      }
    },
    methods: {
      generateBarcode() {
        axios.post('/api/generateBarcode', { text: this.inputText })
          .then(response => {
            this.barcodeImage = response.data.barcodeImage;
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  }
</script>

この例では、Vue の応答データを使用して、入力商品番号を inputText 変数にバインドし、生成されたバーコード画像が保存されますbarcodeImage 変数内。 [バーコードの生成] ボタンをクリックすると、Axios コンポーネントを介してバックエンドに POST リクエストが送信され、入力された商品番号がバックエンドに渡され、返されたバーコード画像リンクを受け取ります。

次に、バーコード画像を生成するために、PHP でバックエンド インターフェイスを作成する必要があります。サードパーティのライブラリ php-barcode-generator を使用してバーコードを生成し、その画像リンクを返すことができます。

まず、PHP プロジェクトに php-barcode-generator ライブラリをインストールする必要があります:

composer require picqer/php-barcode-generator

次に、「generateBarcode.php」という名前のスクリプトを作成してバーコードを生成し、返すことができます。画像リンク:

<?php

require_once('vendor/autoload.php');

use PicqerBarcodeBarcodeGeneratorPNG;

$inputText = $_POST['text'];

$generator = new BarcodeGeneratorPNG();
$barcodeImage = 'barcodes/' . $inputText . '.png';

file_put_contents($barcodeImage, $generator->getBarcode($inputText, $generator::TYPE_CODE_128));

$response = [
  'barcodeImage' => $barcodeImage
];

header('Content-Type: application/json');
echo json_encode($response);

この例では、まず php-barcode-generator ライブラリを導入し、BarcodeGeneratorPNG クラスを使用して CODE 128 タイプのバーコードを生成します。生成されたバーコード画像は、項目番号をファイル名として「barcodes」という名前のフォルダーに保存されます。

最後に、リクエストを転送するために Vue プロジェクトでプロキシを構成します。

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        secure: false,
        changeOrigin: true
      }
    }
  }
};

上記の手順を完了したら、コマンド ラインで Vue 開発サーバーと PHP 開発サーバーをそれぞれ起動できます。

npm run serve
php -S localhost:8000

これで、ブラウザで「http://localhost:8080」にアクセスすると、開発した倉庫管理のバーコード管理機能のページが開くようになります。入力ボックスに商品番号を入力し、「バーコードを生成」ボタンをクリックすると、対応するバーコードが生成され、ページに表示されます。

以上の手順により、PHPとVueを利用した倉庫管理のバーコード管理機能の開発に成功しました。バーコード管理機能により、倉庫内の商品の追跡・管理がより効率的に行え、倉庫管理の効率化・正確性が向上します。

上記は簡単な例であり、実際の開発では、バーコードの印刷、出庫時のコードスキャン確認、在庫管理など、さらに多くの機能や詳細を考慮する必要があります。この記事が開発者に、より強力で実用的な倉庫管理システムの開発に役立つアイデアとガイダンスを提供できれば幸いです。

以上がPHP と Vue を使用して倉庫管理用のバーコード管理機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。