Heim > Artikel > Backend-Entwicklung > So implementieren Sie mit PHP und Vue die Standardfunktion zur Bestandseinstellung der Lagerverwaltung

So implementieren Sie mit PHP und Vue die Standardfunktion zur Bestandseinstellung der Lagerverwaltung

WBOYOriginal: 2023-09-25 17:15:401216Durchsuche

So verwenden Sie PHP und Vue, um die Standardfunktion zur Bestandseinstellung der Lagerverwaltung zu implementieren

Einführung:
In der modernen Lagerverwaltung ist die Bestandskontrolle ein sehr wichtiger Bestandteil. Wie man PHP und Vue verwendet, um die Standardfunktion zur Bestandseinstellung der Lagerverwaltung zu implementieren, ist zu einer Frage geworden, die es wert ist, untersucht zu werden. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die Standardfunktion zur Bestandseinstellung der Lagerverwaltung implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. Vorbereitung
Zuerst müssen wir eine Entwicklungsumgebung basierend auf PHP und Vue erstellen. Sie können einen lokalen Server wie XAMPP usw. oder eine Online-Entwicklungsumgebung wie CodePen, JSFiddle usw. verwenden. Nachdem wir sichergestellt haben, dass die Umgebung ordnungsgemäß läuft, können wir mit dem Codieren beginnen.

2. Erstellen Sie eine Datenbank
Zuerst müssen wir eine Datenbank erstellen, um die Produktinformationen und Bestandsdaten des Lagers zu speichern. Sie können MySQL oder andere relationale Datenbanken verwenden, um eine Datenbank mit dem Namen „inventory“ zu erstellen und zwei Tabellen zu erstellen, „products“ und „stock“.

Tabelle „Produkte“ enthält die folgenden Felder:

id: Produkt-ID (automatisch inkrementierter Primärschlüssel)
Name: Produktname
Preis: Produktpreis
Kategorie: Produktkategorie

Tabelle „Lager“ enthält die folgenden Felder:

id: Inventar-ID (automatisch inkrementierter Primärschlüssel)
product_id: Produkt-ID (Fremdschlüssel, der dem ID-Feld der Tabelle „Produkte“ zugeordnet ist)
quantity: Produktmenge

3 . Erstellen Sie eine Back-End-Schnittstelle.
Verwenden Sie PHP. Um eine Back-End-Schnittstelle zu erstellen, lassen Sie das Front-End Daten in der Datenbank über die Schnittstelle abrufen und ändern. Das Folgende ist ein einfaches PHP-Codebeispiel zum Abrufen der Produktliste und Produktinventarinformationen:

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "inventory";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取商品列表
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $products = array();
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
    echo json_encode($products);
} else {
    echo "0 结果";
}
// 获取商品的库存信息
$product_id = $_GET['product_id'];
$sql = "SELECT * FROM stock WHERE product_id = $product_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $stock = array();
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
    echo json_encode($stock);
} else {
    echo "0 结果";
}
$conn->close();
?>

IV. Erstellen Sie die Front-End-Schnittstelle.
Verwenden Sie Vue, um die Front-End-Schnittstelle zu erstellen, und verwenden Sie die Axios-Bibliothek, um HTTP-Anfragen zu senden Interagieren Sie mit der Back-End-Schnittstelle. Das Folgende ist ein einfaches Vue-Codebeispiel zum Anzeigen von Produktlisten und Produktinventarinformationen:

<!DOCTYPE html>
<html>
<head>
  <title>仓库管理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <span>{{ product.name }}</span> -
        <span>{{ product.price }}</span>元 -
        <span>{{ product.category }}</span>
        <button @click="getStock(product.id)">查看库存</button>
      </li>
    </ul>
    <h1>库存信息</h1>
    <ul>
      <li v-for="stock in stockList" :key="stock.id">
        <span>{{ stock.quantity }}</span>件
      </li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        products: [],
        stockList: []
      },
      methods: {
        getProducts() {
          axios.get('backend.php')
            .then(response => {
              this.products = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        },
        getStock(product_id) {
          axios.get(`backend.php?product_id=${product_id}`)
            .then(response => {
              this.stockList = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      mounted() {
        this.getProducts();
      }
    });
  </script>
</body>
</html>

5. Ausführen und testen
Speichern Sie den obigen PHP-Code als „backend.php“-Datei und den Vue-Code als „index.html“. Datei. Legen Sie diese beiden Dateien im selben Verzeichnis ab und öffnen Sie die Datei „index.html“ im Browser, um die Produktliste und Inventarinformationen anzuzeigen.

6. Zusammenfassung
Durch die oben genannten Schritte haben wir PHP und Vue erfolgreich verwendet, um die Standardfunktion zur Bestandseinstellung der Lagerverwaltung zu implementieren. Die Produktliste und Bestandsinformationen können über die Front-End-Schnittstelle angezeigt werden, und die Daten in der Datenbank können über die Back-End-Schnittstelle dynamisch abgerufen und geändert werden. Selbstverständlich können wir auch in konkreten Projekten bedarfsgerecht erweitern und optimieren. Ich hoffe, dass die oben genannten Inhalte für Sie hilfreich sind und wünsche Ihnen bessere Ergebnisse bei der Lagerverwaltung!

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit PHP und Vue die Standardfunktion zur Bestandseinstellung der Lagerverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php mysql html 接口数据库 http axios

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie PHP und Vue zur Implementierung der DatensicherungsfunktionNächster Artikel：So verwenden Sie PHP und Vue zur Implementierung der Datensicherungsfunktion

In Verbindung stehende Artikel

Mehr sehen