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

So verwenden Sie PHP und Vue, um die Frachtverfolgungsfunktion der Lagerverwaltung zu entwickeln

Einführung:
Mit der rasanten Entwicklung des E-Commerce ist die Lagerverwaltung zu einem sehr wichtigen Bindeglied geworden. Um die Effizienz und Genauigkeit der Lagerverwaltung zu verbessern, ist die Entwicklung eines Frachtverfolgungssystems erforderlich. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die Frachtverfolgungsfunktion für die Lagerverwaltung entwickeln, und es werden spezifische Codebeispiele aufgeführt.

1. Technische Vorbereitung
Bevor wir mit der Entwicklung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten:

• PHP: serverseitige Programmiersprache
• Vue: JavaScript-Framework zum Erstellen von Benutzeroberflächen
• MySQL: zum Speichern von Daten relationale Datenbank
• XAMPP: eine Entwicklungsumgebung, die Apache, MySQL und PHP integriert

2. Datenbankdesign
Bevor wir mit dem Schreiben von Code beginnen, müssen wir die Datenbankstruktur entwerfen. Unter Berücksichtigung der Anforderungen der Lagerverwaltung müssen wir die folgenden Tabellen erstellen:

• Frachttabelle: speichert Informationen über Waren, einschließlich Waren-ID, Name, Beschreibung und andere Felder.
• Lagertabelle: speichert Informationen über Lagerhäuser, einschließlich Lager-ID. Name, Adresse und andere Felder
• Warenlager-Zuordnungstabelle: Stellen Sie die Zuordnung zwischen Waren und Lagern her, speichern Sie die Warenmenge in jedem Lager, Lagerzeit und andere Informationen

3. Backend-Entwicklung

1. Datenbank erstellen Verbindung
   Zuerst müssen wir in PHP eine Verbindung zur Datenbank herstellen. Dies kann mithilfe der von der MySQLi-Erweiterungsbibliothek bereitgestellten Funktionen erreicht werden:

   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "warehouse_management";
   
   // 创建数据库连接
   $conn = new mysqli($servername, $username, $password, $dbname);
   
   // 检查连接是否成功
   if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
   }

2. API-Schnittstelle erstellen
   Wir müssen eine Reihe von API-Schnittstellen erstellen, um vom Front-End gesendete Anforderungen zu verarbeiten und entsprechende Daten zurückzugeben. Im Folgenden sind einige häufig verwendete API-Schnittstellenbeispiele aufgeführt:

3. Alle Lagerinformationen abrufen:

   $app->get('/warehouses', function () use ($app, $conn) {
    $sql = "SELECT * FROM warehouses";
    $result = $conn->query($sql);
   
    $warehouses = array();
   
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $warehouses[] = $row;
        }
    }
   
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($warehouses);
   });

• Frachtinformationen im angegebenen Lager abrufen:

  $app->get('/warehouses/:id/goods', function ($id) use ($app, $conn) {
    $sql = "SELECT * FROM goods_warehouses WHERE warehouse_id = $id";
    $result = $conn->query($sql);
  
    $goods = array();
  
    if ($result->num_rows > 0) {
        while($row = $result->fetch_assoc()) {
            $goods[] = $row;
        }
    }
  
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($goods);
  });

• Neue Waren zum angegebenen Lager hinzufügen:

  $app->post('/warehouses/:id/goods', function ($id) use ($app, $conn) {
    $request = json_decode($app->request->getBody());
  
    $name = $request->name;
    $description = $request->description;
    $quantity = $request->quantity;
    $date = date('Y-m-d H:i:s');
  
    $sql = "INSERT INTO goods_warehouses (warehouse_id, name, description, quantity, date) VALUES ($id, '$name', '$description', $quantity, '$date')";
  
    if ($conn->query($sql) === TRUE) {
        $response = array('status' => 'success');
    } else {
        $response = array('status' => 'error', 'message' => $conn->error);
    }
  
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($response);
  });

• Warenmenge aktualisieren:

  $app->put('/goods/:id/quantity', function ($id) use ($app, $conn) {
    $quantity = json_decode($app->request->getBody());
  
    $sql = "UPDATE goods_warehouses SET quantity = $quantity WHERE id = $id";
  
    if ($conn->query($sql) === TRUE) {
        $response = array('status' => 'success');
    } else {
        $response = array('status' => 'error', 'message' => $conn->error);
    }
  
    $app->response->headers->set('Content-Type', 'application/json');
    echo json_encode($response);
  });

4. Frontend-Entwicklung

1. Vue-Anwendung erstellen
   Wir müssen Vue verwenden, um die Benutzeroberfläche zu erstellen. Zuerst müssen Sie die Vue-Bibliothek in HTML einführen und eine Vue-Instanz erstellen:

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <title>仓库管理系统</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   </head>
   <body>
    <div id="app">
        <!-- 在这里编写Vue模板代码 -->
    </div>
    
    <script src="js/app.js"></script>
   </body>
   </html>

2. API-Anfrage senden
   Wir müssen API-Anfragen in der Vue-Instanz senden und die zurückgegebenen Daten verarbeiten. Im Folgenden sind einige häufig verwendete Codebeispiele aufgeführt:

3. Alle Lagerinformationen abrufen:

   var app = new Vue({
    el: '#app',
    data: {
        warehouses: []
    },
    mounted() {
        axios.get('/api/warehouses')
            .then(response => {
                this.warehouses = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
   });

• Wareninformationen im angegebenen Lager abrufen:

  var app = new Vue({
    el: '#app',
    data: {
        goods: []
    },
    mounted() {
        var id = 1; // 仓库ID
  
        axios.get('/api/warehouses/' + id + '/goods')
            .then(response => {
                this.goods = response.data;
            })
            .catch(error => {
                console.log(error);
            });
    }
  });

• Neue Waren zum angegebenen Lager hinzufügen:

  var app = new Vue({
    el: '#app',
    data: {
        name: '',
        description: '',
        quantity: ''
    },
    methods: {
        addGoods() {
            var id = 1; // 仓库ID
  
            axios.post('/api/warehouses/' + id + '/goods', {
                name: this.name,
                description: this.description,
                quantity: this.quantity
            })
            .then(response => {
                console.log(response.data);
            })
            .catch(error => {
                console.log(error);
            });
        }
    }
  });

• Warenmenge aktualisieren:

  var app = new Vue({
    el: '#app',
    data: {
        goodsId: '',
        quantity: ''
    },
    methods: {
        updateQuantity() {
            axios.put('/api/goods/' + this.goodsId + '/quantity', this.quantity)
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
  });

5. Zusammenfassung
Mithilfe der PHP- und Vue-Entwicklung können wir die Frachtverfolgungsfunktion der Lagerverwaltung problemlos implementieren. PHP bietet die Möglichkeit, mit der Datenbank zu interagieren, und Vue kann uns beim Erstellen von Benutzeroberflächen und beim Senden von API-Anfragen helfen. Dieser Artikel enthält einige spezifische Codebeispiele und hofft, Ihnen bei Ihrer Entwicklungsarbeit behilflich zu sein. Glückliche Entwicklung!

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