Wie man mit PHP und Vue Regalverwaltungsfunktionen für die Lagerverwaltung entwickelt

So entwickeln Sie mit PHP und Vue die Regalverwaltungsfunktion der Lagerverwaltung

Einführung:
In modernen Lagerverwaltungssystemen ist die Regalverwaltung eine sehr wichtige Funktion. Durch eine sinnvolle Regalverwaltung können die Lageraufteilung und die Nutzung des Lagerraums optimiert sowie die Arbeitseffizienz und -genauigkeit verbessert werden. In diesem Artikel wird die Verwendung von PHP und Vue zur Entwicklung der Regalverwaltungsfunktion der Lagerverwaltung vorgestellt und den Lesern anhand spezifischer Codebeispiele geholfen, diese zu verstehen und zu üben.

1. Auswahl des Technologie-Stacks
Bei der Entwicklung von Lagerverwaltungssystemen sind PHP und Vue sehr häufig verwendete Technologie-Stacks. Als beliebte Back-End-Programmiersprache bietet PHP leistungsstarke Verarbeitungs- und Rechenfunktionen, während Vue ein beliebtes Front-End-Framework ist, das eine einfache und effiziente Ansichtsebenenverwaltung ermöglicht. Durch die Verwendung von PHP und Vue kann die Front-End- und Back-End-Logik gut getrennt werden, was die Zusammenarbeit im Team und die spätere Wartung erleichtert.

2. Projektvorbereitung und Umgebungsaufbau

1. Laden Sie PHP- und Vue-bezogene Umgebungen herunter und installieren Sie sie: Wählen Sie PHP 7 oder höher für PHP und Vue CLI für Vue aus Öffnen Sie das Projektverzeichnis und führen Sie den Befehl „vue create Shelf-Management“ aus.
2. PHP-Backend erstellen: Erstellen Sie einen Ordner mit dem Namen „api“ im Projektstammverzeichnis, um PHP-Backend-bezogene Dateien zu speichern.
3. 3. Datenbankdesign

Die Regalverwaltungsfunktion erfordert die Speicherung und Verwaltung von Regalinformationen, daher muss eine entsprechende Datenbankstruktur entworfen werden. Im Beispiel erstellen wir eine Datenbank namens „shelf_management“ und eine Tabelle namens „shelf“. " Ordner Eine Datei mit dem Namen „db.php“ wird verwendet, um eine Verbindung zur Datenbank herzustellen. Der Beispielcode lautet wie folgt:

CREATE TABLE `shelf` (
  `id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `shelf_code` varchar(32) NOT NULL,
  `description` varchar(255) DEFAULT NULL,
  `capacity` int(11) NOT NULL,
  `occupancy` int(11) NOT NULL
);

Implementieren Sie die API-Schnittstelle: Erstellen Sie eine Datei mit dem Namen „shelf.php“ im Ordner „api“, um CRUD-Operationen für Regaldaten zu implementieren. Der Beispielcode lautet wie folgt:

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "shelf_management";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

1. 5. Front-End-Entwicklung

Erstellen Sie eine Regallistenkomponente: Erstellen Sie eine Datei mit dem Namen „ShelfList.vue“ im Ordner „src/components“ im Vue-Projekt, um die anzuzeigen Regalliste. Der Beispielcode lautet wie folgt:

2. <?php
   include 'db.php';
   
   // 获取所有货架数据
   function getAllShelves() {
       global $conn;
       $sql = "SELECT * FROM shelf";
       $result = $conn->query($sql);
   
       if ($result->num_rows > 0) {
           $rows = array();
           while($row = $result->fetch_assoc()) {
               $rows[] = $row;
           }
           return $rows;
       } else {
           return [];
       }
   }
   
   // 创建货架
   function createShelf($shelf_code, $description, $capacity, $occupancy) {
       global $conn;
       $sql = "INSERT INTO shelf (shelf_code, description, capacity, occupancy)
               VALUES ('$shelf_code','$description','$capacity','$occupancy')";
   
       if ($conn->query($sql) === TRUE) {
           return true;
       } else {
           return false;
       }
   }
   
   // 更新货架
   function updateShelf($id, $shelf_code, $description, $capacity, $occupancy) {
       global $conn;
       $sql = "UPDATE shelf SET shelf_code='$shelf_code', description='$description',
               capacity='$capacity', occupancy='$occupancy' WHERE id='$id'";
   
       if ($conn->query($sql) === TRUE) {
           return true;
       } else {
           return false;
       }
   }
   
   // 删除货架
   function deleteShelf($id) {
       global $conn;
       $sql = "DELETE FROM shelf WHERE id='$id'";
   
       if ($conn->query($sql) === TRUE) {
           return true;
       } else {
           return false;
       }
   }
   
   // 路由处理
   switch ($_SERVER["REQUEST_METHOD"]) {
       case 'GET':
           // 处理获取所有货架数据请求
           echo json_encode(getAllShelves());
           break;
       case 'POST':
           // 处理创建货架请求
           $input = json_decode(file_get_contents('php://input'), true);
           $shelf_code = $input["shelf_code"];
           $description = $input["description"];
           $capacity = $input["capacity"];
           $occupancy = $input["occupancy"];
           if (createShelf($shelf_code, $description, $capacity, $occupancy)) {
               echo "Shelf created successfully";
           } else {
               echo "Error creating shelf";
           }
           break;
       case 'PUT':
           // 处理更新货架请求
           $input = json_decode(file_get_contents('php://input'), true);
           $id = $input["id"];
           $shelf_code = $input["shelf_code"];
           $description = $input["description"];
           $capacity = $input["capacity"];
           $occupancy = $input["occupancy"];
           if (updateShelf($id, $shelf_code, $description, $capacity, $occupancy)) {
               echo "Shelf updated successfully";
           } else {
               echo "Error updating shelf";
           }
           break;
       case 'DELETE':
           // 处理删除货架请求
           $input = json_decode(file_get_contents('php://input'), true);
           $id = $input["id"];
           if (deleteShelf($id)) {
               echo "Shelf deleted successfully";
           } else {
               echo "Error deleting shelf";
           }
           break;
   }

Integrierte Backend-Schnittstelle: Erstellen Sie eine Datei mit dem Namen „api.js“ im Ordner „src“, um den Zugriff auf die Backend-Schnittstelle zu kapseln. Der Beispielcode lautet wie folgt:

<template>
  <div>
    <h2>货架列表</h2>
    <table>
      <thead>
        <tr>
          <th>货架编号</th>
          <th>描述</th>
          <th>容量</th>
          <th>占用</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="shelf in shelves" :key="shelf.id">
          <td>{{ shelf.shelf_code }}</td>
          <td>{{ shelf.description }}</td>
          <td>{{ shelf.capacity }}</td>
          <td>{{ shelf.occupancy }}</td>
          <td>
            <button @click="editShelf(shelf.id)">编辑</button>
            <button @click="deleteShelf(shelf.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addShelf()">新增货架</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shelves: []
    }
  },
  created() {
    this.fetchShelves();
  },
  methods: {
    fetchShelves() {
      // 发起HTTP请求获取货架数据
      fetch('http://localhost/api/shelf.php')
        .then(response => response.json())
        .then(data => {
          this.shelves = data;
        });
    },
    addShelf() {
      // 打开新增货架对话框
      // ...
    },
    editShelf(id) {
      // 打开编辑货架对话框
      // ...
    },
    deleteShelf(id) {
      // 发起HTTP请求删除货架
      fetch('http://localhost/api/shelf.php', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: id })
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          this.fetchShelves();
        });
    }
  }
}
</script>

1. Erstellen Sie die Dialogkomponenten zum Hinzufügen und Bearbeiten von Regalen: Erstellen Sie nach Bedarf eine interaktive Schnittstelle, implementieren Sie die Funktionen zum Hinzufügen von Regalen und Bearbeiten von Regalen mit Vue-Komponenten und rufen Sie die Back-End-Schnittstelle auf Datenoperationen.

2. 6. Ausführen und testen
Starten Sie den PHP-Server und den Vue-Entwicklungsserver, besuchen Sie die Projektseite im Browser und Sie können die Regalverwaltungsfunktion der Lagerverwaltung sehen. Regale können hinzugefügt, bearbeitet und gelöscht werden und die Liste wird in Echtzeit aktualisiert.

7. Zusammenfassung
3. In diesem Artikel wird erläutert, wie Sie mit PHP und Vue die Regalverwaltungsfunktion im Lagerverwaltungssystem entwickeln. Durch die Analyse der Anforderungen, die Verwendung von PHP für die Back-End-Entwicklung, Vue für die Front-End-Entwicklung und die Durchführung der Dateninteraktion über Schnittstellen wurde schließlich die Funktion des Hinzufügens, Löschens, Änderns und Überprüfens der Regale realisiert. Natürlich gibt es noch weitere Funktionen und Details, die in konkreten Projekten weiter verbessert und optimiert werden müssen. Ich hoffe, dass die Leser anhand der Ideen in diesem Artikel ein besseres Lagerverwaltungssystem entwickeln können, das zu ihnen passt.

Das obige ist der detaillierte Inhalt vonWie man mit PHP und Vue Regalverwaltungsfunktionen für die Lagerverwaltung entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!