So entwickeln Sie mit PHP und Vue QR-Code-Verwaltungsfunktionen für die Lagerverwaltung

So verwenden Sie PHP und Vue, um die QR-Code-Verwaltungsfunktion der Lagerverwaltung zu entwickeln

Vorwort:
Mit der rasanten Entwicklung des E-Commerce ist die Lagerverwaltung immer wichtiger geworden. Die schnelle und genaue Verfolgung des Standorts und Status der Waren im Lager ist der Schlüssel für einen effizienten Betrieb der Lieferketten. Als gängiges Mittel zur Warenidentifizierung zeichnen sich QR-Codes durch eine große Informationsspeicherkapazität und einfache Lesbarkeit aus und werden häufig in der Lagerverwaltung eingesetzt.

In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die QR-Code-Verwaltungsfunktion der Lagerverwaltung entwickeln, und es werden spezifische Codebeispiele aufgeführt.

1. Technische Vorbereitung
Bevor Sie beginnen, müssen Sie zunächst die folgende Software und Tools installieren:

1. PHP-Umgebung (wie XAMPP, WAMP usw.)
2. Vue.js
3. IDE-Tools (wie Visual Studio Code)

II, Datenbankdesign
Bevor mit der Entwicklung begonnen wird, muss eine geeignete Datenbankstruktur zum Speichern von Lagerverwaltungs- und QR-Code-bezogenen Daten entworfen werden.

Wir entwerfen eine Datenbank mit dem Namen „inventory“, die zwei Tabellen enthält: eine „Waren“-Tabelle zum Speichern von Wareninformationen und eine „qrcodes“-Tabelle zum Speichern von QR-Code-Informationen.

Warentabelle enthält die folgenden Felder:

• id: Waren-ID (Primärschlüssel)
• Name: Warenname
• Preis: Warenpreis
• Menge: Warenmenge

qrcodes-Tabelle enthält die folgenden Felder:

• id: QR-Code-ID (Primärschlüssel)
• goods_id: zugehörige Waren-ID
• qrcode: QR-Code-Inhalt

3. Back-End-Entwicklung (mit PHP)

1. Mit der Datenbank verbinden
   Verwenden Sie PHP, um eine Verbindung herzustellen Für die Datenbank können Sie MySQL oder PDO und andere Methoden verwenden. Das Folgende ist ein Beispielcode:

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

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

2. Wareninformationen abfragen
   Schreiben Sie PHP-Code, um alle Wareninformationen in der Warentabelle abzufragen und Daten im JSON-Format zurückzugeben. Das Folgende ist ein Beispielcode:

<?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. QR-Code hinzufügen
   Schreiben Sie PHP-Code, um QR-Code-Informationen zur QR-Codes-Tabelle hinzuzufügen und die generierte QR-Code-ID zurückzugeben. Das Folgende ist ein Beispielcode:

<?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. Front-End-Entwicklung (mit Vue.js)

1. Installieren Sie Vue.js und axios
   Installieren Sie im Projektverzeichnis Vue.js und axios mit den folgenden Befehlen:

$ npm install vue
$ npm install axios

2. Erstellen Sie eine Vue-Komponente
   Erstellen Sie eine Vue-Komponente mit dem Namen „Inventar“, um die Funktionen der Lagerverwaltung und QR-Code-Verwaltung anzuzeigen. Das Folgende ist ein Beispielcode:

<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. Mounten Sie die Vue-Instanz
   Mounten Sie in der Eintragsdatei des Projekts die Vue-Instanz und geben Sie das DOM-Element an, das gerendert werden soll. Das Folgende ist ein Beispielcode:

<!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. Ausführen und testen

1. Starten Sie den PHP-Entwicklungsserver.
   Führen Sie den folgenden Befehl im Projektverzeichnis aus, um den PHP-Entwicklungsserver zu starten:

$ php -S localhost:8000

2. Starten Sie das Frontend Entwicklungsserver
   Im Projektverzeichnis Führen Sie den folgenden Befehl aus, um den Front-End-Entwicklungsserver zu starten:

$ npm run serve

3. Zugriff im Browser
   Zugriff auf „http://localhost:8080“ im Browser, um den QR-Code anzuzeigen und zu testen Managementfunktion der Lagerverwaltung.

Zusammenfassung:
Dieser Artikel stellt vor, wie PHP und Vue zum Entwickeln der QR-Code-Verwaltungsfunktion der Lagerverwaltung verwendet werden, und gibt spezifische Codebeispiele. Auf diese Weise können wir die Funktionen des Frachtinformationsmanagements sowie der Generierung und Zuordnung von QR-Codes schnell im Lager implementieren und so die Effizienz und Genauigkeit der Lagerverwaltung verbessern. Ich hoffe, dass dieser Artikel allen bei der Entwicklung eines Lagerverwaltungssystems hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie mit PHP und Vue QR-Code-Verwaltungsfunktionen für die Lagerverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!