Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan kod QR untuk pengurusan gudang-tutorial php-php.cn

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

WBOY

Lepaskan： 2023-09-25 16:02:01

asal

623 orang telah melayarinya

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:

Persekitaran PHP (seperti XAMPP, WAMP, dll.)
Vue.js
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)

Sambung ke pangkalan data
Sambung ke pangkalan data

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

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

Salin selepas log masuk

Menyiasat maklumat barangan

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

Salin selepas log masuk

Tambah kod QR

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

Salin selepas log masuk

4. Pembangunan bahagian hadapan (menggunakan Vue.js)

Pasang Vue.js dan axios

$ npm install vue
$ npm install axios

Salin selepas log masuk

Buat komponen 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>

Salin selepas log masuk

Lekapkan contoh Vue

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

Salin selepas log masuk

5. Jalankan dan uji

Mulakan pelayan pembangunan PHP

$ php -S localhost:8000

Salin selepas log masuk

Mulakan bahagian hadapan pelayan pembangunan

$ npm run serve

Salin selepas log masuk

Akses dalam penyemak imbas

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!