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

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

WBOY

リリース： 2023-09-25 12:46:01

オリジナル

1292 人が閲覧しました

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="barcodeImage" 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 開発サーバーをそれぞれ起動できます。