Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod bar untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod bar untuk pengurusan gudang

Dengan peningkatan digital pengurusan gudang, fungsi pengurusan kod bar telah menjadi bahagian penting dalam pengurusan gudang moden. Melalui fungsi pengurusan kod bar, pentadbir gudang boleh mengenal pasti, menjejak dan mengurus barang di gudang dengan cepat dan tepat. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod bar pengurusan gudang, dan menyediakan contoh kod khusus.

Pertama sekali, kita perlu menjelaskan matlamat pembangunan: untuk merealisasikan pengurusan masuk, keluar dan inventori barang di gudang, dan untuk mengenal pasti dan menjejakinya melalui kod bar. Untuk mencapai matlamat ini, kita perlu menggunakan PHP dan Vue, dua alat pembangunan yang berkuasa.

Sebelum mencipta projek, kita perlu menyediakan persekitaran pembangunan. Pertama, kita perlu memasang persekitaran pembangunan PHP dan Vue. PHP boleh dipasang dengan memuat turun pakej pemasangan dan mengikuti wizard pemasangannya. Vue boleh dipasang melalui pengurus pakej Node.js npm. Selepas pemasangan selesai, kami boleh menggunakan alat baris arahan untuk memasukkan php -v dan vue --version masing-masing untuk mengesahkan bahawa pemasangan berjaya.

Seterusnya, kita boleh membuat projek Vue baharu. Dalam baris arahan, kita boleh memasukkan arahan berikut untuk mencipta projek Vue bernama "warehouse-management":

vue create warehouse-management

Selepas penciptaan selesai, kami memasuki direktori projek dan memasang kebergantungan yang diperlukan:

cd warehouse-management
npm install axios bootstrap-vue

Dalam direktori projek , kami Cipta komponen Vue baharu bernama "kod bar" dan perkenalkannya dalam fail "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>

Dalam folder "komponen", kami cipta komponen bernama "Barcode.vue" untuk melaksanakan fungsi Pengurusan kod bar:

// 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>

Dalam contoh ini, kami menggunakan data responsif Vue untuk mengikat nombor barang input ke pembolehubah inputText, dan menyimpan imej kod bar yang dijana pada pembolehubah Imej kod bar. Apabila butang "Jana Kod Bar" diklik, kami menghantar permintaan POST ke bahagian belakang melalui komponen Axios, menghantar nombor item yang dimasukkan ke bahagian belakang dan menerima pautan imej kod bar yang dikembalikan.

Seterusnya, kita perlu menulis antara muka bahagian belakang dalam PHP untuk menjana imej kod bar. Kita boleh menggunakan perpustakaan pihak ketiga php-barcode-generator untuk menjana kod bar dan mengembalikan pautan imej mereka.

Mula-mula, kami perlu memasang perpustakaan php-barcode-generator dalam projek PHP kami:

composer require picqer/php-barcode-generator

Kemudian, kami boleh menulis skrip yang dipanggil "generateBarcode.php" untuk menjana kod bar dan mengembalikan pautan imej:

<?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);

In contoh ini, kami mula-mula memperkenalkan perpustakaan php-barcode-generator dan menggunakan kelas BarcodeGeneratorPNG untuk menjana kod bar jenis KOD 128. Imej kod bar yang dijana akan disimpan ke folder bernama "kod bar", dengan nombor item sebagai nama fail.

Akhir sekali, kami mengkonfigurasi proksi dalam projek Vue untuk memajukan permintaan:

// vue.config.js

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

Selepas melengkapkan langkah di atas, kami boleh memulakan pelayan pembangunan Vue dan pelayan pembangunan PHP masing-masing dalam baris arahan:

npm run serve
php -S localhost:8000

Kini, kami boleh Buka halaman fungsi pengurusan kod bar bagi pengurusan gudang yang kami bangunkan dengan melawati "http://localhost:8080". Masukkan nombor barangan dalam kotak input dan klik butang "Jana Kod Bar" untuk menjana kod bar yang sepadan dan memaparkannya pada halaman.

Melalui langkah di atas, kami berjaya membangunkan fungsi pengurusan kod bar pengurusan gudang menggunakan PHP dan Vue. Melalui fungsi pengurusan kod bar, kami boleh menjejak dan mengurus barangan di gudang dengan lebih cekap, meningkatkan kecekapan dan ketepatan pengurusan gudang.

Di atas adalah contoh mudah Dalam pembangunan sebenar, lebih banyak fungsi dan butiran perlu dipertimbangkan, seperti pencetakan kod bar, pengimbasan kod QR dan pengesahan apabila barang keluar dari gudang, pengurusan inventori, dll. Saya harap artikel ini dapat memberikan pembangun beberapa idea dan panduan untuk membantu mereka membangunkan sistem pengurusan gudang yang lebih berkuasa dan praktikal.

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod bar untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!