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

So verwenden Sie PHP und Vue, um Lagersicherheitsverwaltungsfunktionen für die Lagerverwaltung zu entwickeln

Im aktuellen zunehmend wettbewerbsintensiven Marktumfeld ist die Lagerverwaltung für den Betrieb von Unternehmen von entscheidender Bedeutung. Um den reibungslosen Betrieb und die sichere Bewirtschaftung von Lagerhäusern zu gewährleisten, nutzen viele Unternehmen technische Mittel zur systematischen Bewirtschaftung. In diesem Artikel wird die spezifische Methode zur Entwicklung von Warehouse-Sicherheitsverwaltungsfunktionen mithilfe von PHP und Vue vorgestellt und Codebeispiele bereitgestellt.

Schritt 1: Einrichten einer Entwicklungsumgebung
Um PHP und Vue zur Entwicklung von Funktionen zur Lagersicherheitsverwaltung zu verwenden, müssen Sie zunächst eine entsprechende Entwicklungsumgebung einrichten. Sie müssen den PHP-Server und die Vue-Entwicklungstools auf Ihrem Computer installieren. Es wird empfohlen, XAMPP als PHP-Server und Visual Studio Code als Vue-Entwicklungstool zu verwenden. Stellen Sie sicher, dass Sie diese Software korrekt installiert haben und den PHP-Server und die Vue-Entwicklungstools erfolgreich starten können.

Schritt 2: Datenbank und Datentabelle erstellen
Bevor wir die Lagerverwaltungsfunktion in PHP und Vue entwickeln, müssen wir die entsprechende Datenbank und Datentabelle erstellen, um relevante Daten zu speichern. Öffnen Sie phpMyAdmin oder andere Datenbankverwaltungstools, erstellen Sie eine neue Datenbank und erstellen Sie eine Datentabelle mit dem Namen „Warehouses“ in der Datenbank.

Die Struktur der Datentabelle „Lager“ ist wie folgt:

CREATE TABLE `warehouses` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `location` varchar(255) NOT NULL,
  `security_level` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Schritt 3: PHP-Backend-Code schreiben
Als Nächstes schreiben wir PHP-Backend-Code, um Vorgänge im Zusammenhang mit der Lagerverwaltung abzuwickeln. Erstellen Sie in Ihrem Projektverzeichnis einen Ordner mit dem Namen „api“ und unter diesem Ordner eine PHP-Datei mit dem Namen „warehouses.php“. In dieser Datei implementieren wir die Funktionen zum Hinzufügen, Löschen, Ändern und Abfragen des Warehouse.

In „warehouses.php“ müssen wir die PHP-Erweiterungsbibliothek „mysqli“ verwenden, um eine Verbindung zur Datenbank herzustellen und zugehörige APIs zu schreiben. Das Folgende ist der Beispielcode von „warehouses.php“:

<?php
  $db_host = "localhost";  // 数据库主机名
  $db_user = "root";       // 数据库用户名
  $db_password = "";       // 数据库密码
  $db_name = "your_database_name";  // 数据库名称

  // 连接数据库
  $conn = new mysqli($db_host, $db_user, $db_password, $db_name);

  // 检查连接是否成功
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  // 处理GET请求，获取仓库列表
  if ($_SERVER["REQUEST_METHOD"] === "GET") {
    $result = $conn->query("SELECT * FROM warehouses");
    $warehouses = [];
    while ($row = $result->fetch_assoc()) {
      $warehouses[] = $row;
    }
    echo json_encode($warehouses);
  }

  // 处理POST请求，添加新的仓库
  if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = $_POST["name"];
    $location = $_POST["location"];
    $security_level = $_POST["security_level"];
    $sql = "INSERT INTO warehouses (name, location, security_level) VALUES ('$name', '$location', '$security_level')";
    if ($conn->query($sql) === TRUE) {
      echo "New warehouse added successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 处理DELETE请求，删除仓库
  if ($_SERVER["REQUEST_METHOD"] === "DELETE") {
    $id = $_GET["id"];
    $sql = "DELETE FROM warehouses WHERE id=$id";
    if ($conn->query($sql) === TRUE) {
      echo "Warehouse deleted successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 关闭数据库连接
  $conn->close();
?>

Schritt 4: Vue-Frontend-Code schreiben
Jetzt schreiben wir Vue-Frontend-Code, um mit dem Backend zu interagieren und relevante Informationen des Lagers anzuzeigen. Erstellen Sie in Ihrem Projektverzeichnis einen Ordner mit dem Namen „src“ und in diesem Ordner eine Vue-Komponentendatei mit dem Namen „Warehouse.vue“.

In „Warehouse.vue“ verwenden wir die „axios“-Bibliothek von Vue, um HTTP-Anfragen zu senden und die Warehouse-Liste zu rendern. Das Folgende ist der Beispielcode von „Warehouse.vue“:

<template>
  <div>
    <h2>Warehouse List</h2>
    <ul>
      <li v-for="warehouse in warehouses" :key="warehouse.id">
        <span>{{ warehouse.name }}</span>
        <span>{{ warehouse.location }}</span>
        <span>{{ warehouse.security_level }}</span>
        <button @click="deleteWarehouse(warehouse.id)">Delete</button>
      </li>
    </ul>
    <h2>Add New Warehouse</h2>
    <form @submit.prevent="addWarehouse">
      <input type="text" v-model="name" placeholder="Name" required>
      <input type="text" v-model="location" placeholder="Location" required>
      <input type="number" v-model="security_level" placeholder="Security Level" required>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        warehouses: [],
        name: '',
        location: '',
        security_level: 0
      };
    },
    methods: {
      fetchWarehouses() {
        axios.get('api/warehouses.php')
          .then(response => {
            this.warehouses = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      addWarehouse() {
        axios.post('api/warehouses.php', {
          name: this.name,
          location: this.location,
          security_level: this.security_level
        })
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      },
      deleteWarehouse(id) {
        axios.delete(`api/warehouses.php?id=${id}`)
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    mounted() {
      this.fetchWarehouses();
    }
  }
</script>

Schritt fünf: Führen Sie die Anwendung aus
Jetzt haben wir die Codierung der Lagersicherheitsverwaltungsfunktion für die Entwicklung der Lagerverwaltung mit PHP und Vue abgeschlossen. Sie können über die Befehlszeile Ihr Projektverzeichnis eingeben und den folgenden Befehl ausführen, um die Anwendung zu starten:

npm run serve

Öffnen Sie als Nächstes Ihren Browser und besuchen Sie „http://localhost:8080“. Sie sehen die Repository-Liste und fügen Warehouse hinzu bilden. Wenn Sie Repositorys hinzufügen oder entfernen, wird die Seite in Echtzeit aktualisiert. Auf diese Weise erreichen Sie eine sichere Verwaltung Ihres Lagers.

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