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

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

Kata Pengantar:
Dengan perkembangan pesat e-dagang, pengurusan gudang menjadi semakin penting. Mengesan lokasi dan status barangan di gudang dengan cepat dan tepat adalah kunci untuk memastikan rantaian bekalan berjalan dengan cekap. Sebagai cara biasa untuk mengenal pasti barangan, kod QR mempunyai ciri kapasiti penyimpanan maklumat yang besar dan bacaan mudah, dan digunakan secara meluas dalam pengurusan gudang.

Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod QR pengurusan gudang, dan memberikan contoh kod khusus.

1. Persediaan teknikal
Sebelum anda bermula, anda perlu memasang perisian dan alatan berikut terlebih dahulu:

1. Persekitaran PHP (seperti XAMPP, WAMP, dll.)
2. Vue.js
3. alatan IDE (seperti Visual Kod Studio)

II , Reka bentuk pangkalan data
Sebelum memulakan pembangunan, adalah perlu untuk mereka bentuk struktur pangkalan data yang sesuai untuk menyimpan pengurusan gudang dan data berkaitan kod QR.

Kami mereka bentuk pangkalan data bernama "inventori", yang mengandungi dua jadual: jadual "barangan" yang digunakan untuk menyimpan maklumat barangan dan jadual "qrcodes" yang digunakan untuk menyimpan maklumat kod QR.

jadual barang mengandungi medan berikut:

• id: ID Barang (kunci utama)
• nama: Nama barang
• harga: Harga barang
• kuantiti: Kuantiti barang

jadual medan

• id: ID kod QR (kunci utama)
• goods_id: ID barang yang berkaitan
• qrcode: kandungan kod QR

3. Pembangunan bahagian belakang (menggunakan PHP)

1. Sambung ke pangkalan data
   Sambung ke pangkalan data
pangkalan data, anda boleh menggunakan mysqli atau PDO dan kaedah lain. Berikut ialah contoh kod:

<?php
$host = "localhost";
$username = "root";
$password = "";
$database = "inventory";

$mysqli = new mysqli($host, $username, $password, $database);
if ($mysqli->connect_errno) {
    die("连接数据库失败：" . $mysqli->connect_error);
}
?>

2. 
   Menyiasat maklumat barangan
Tulis kod PHP untuk menanyakan semua maklumat barangan dalam jadual barang dan mengembalikan data dalam format JSON. Berikut ialah contoh kod:

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

3. 
   Tambah kod QR
Tulis kod PHP untuk menambah maklumat kod QR pada jadual qrcodes dan mengembalikan ID kod QR yang dijana. Berikut ialah kod sampel:

<?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. Pembangunan bahagian hadapan (menggunakan Vue.js)

1. 
   Pasang Vue.js dan axios
Dalam direktori projek, pasang Vue.js dan axios melalui arahan berikut:

$ npm install vue
$ npm install axios

2. 
   Buat komponen Vue
Buat komponen Vue bernama "Inventori" untuk memaparkan fungsi pengurusan gudang dan pengurusan kod QR. Berikut ialah kod sampel:

<template>
  <div>
    <h1 id="仓库管理">仓库管理</h1>
    <h2 id="货物信息">货物信息</h2>
    <ul>
      <li v-for="item in goods" :key="item.id">
        {{ item.name }} - {{ item.price }} - {{ item.quantity }}
      </li>
    </ul>
    <h2 id="添加二维码">添加二维码</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>

3. 
   Lekapkan contoh Vue
Dalam fail entri projek, lekapkan tika Vue dan nyatakan elemen DOM untuk dipaparkan. Berikut ialah contoh kod:

<!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. Jalankan dan uji

1. 
   Mulakan pelayan pembangunan PHP
Jalankan arahan berikut dalam direktori projek untuk memulakan pelayan pembangunan PHP:

$ php -S localhost:8000

2. 
   Mulakan bahagian hadapan pelayan pembangunan
Dalam direktori projek Jalankan arahan berikut untuk memulakan pelayan pembangunan bahagian hadapan:

$ npm run serve

3. 
   Akses dalam penyemak imbas
Akses "http://localhost:8080" dalam penyemak imbas untuk melihat dan menguji kod QR fungsi pengurusan pengurusan gudang.

Ringkasan:

Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod QR pengurusan gudang, dan memberikan contoh kod khusus. Dengan cara ini, kami dapat melaksanakan dengan cepat fungsi pengurusan maklumat kargo dan penjanaan dan perkaitan kod QR di gudang, meningkatkan kecekapan dan ketepatan pengurusan gudang. Saya harap artikel ini akan membantu semua orang apabila membangunkan sistem pengurusan gudang. 🎜

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