Heim > Backend-Entwicklung > PHP-Tutorial > Wie man mit PHP und Vue Logistikmanagementfunktionen für die Lagerverwaltung entwickelt

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Freigeben: 2023-09-24 10:02:01
Original
1083 Leute haben es durchsucht

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

So entwickeln Sie mit PHP und Vue Logistikmanagementfunktionen für die Lagerverwaltung

Mit der rasanten Entwicklung des E-Commerce werden die Logistikmanagementfunktionen der Lagerverwaltung immer wichtiger. In diesem Artikel werde ich vorstellen, wie man mit PHP und Vue ein einfaches und praktisches Lagerverwaltungssystem entwickelt, und konkrete Codebeispiele bereitstellen.

  1. Umgebungsvorbereitung

Bevor wir mit der Entwicklung beginnen, müssen wir eine Entwicklungsumgebung vorbereiten. Stellen Sie zunächst sicher, dass auf Ihrem Computer die Entwicklungsumgebungen PHP und Vue installiert sind. Sie können eine lokale PHP-Entwicklungsumgebung einrichten, indem Sie XAMPP, WAMP oder MAMP herunterladen und installieren. Gleichzeitig müssen Sie auch Node.js installieren, um die Vue-Entwicklung zu unterstützen. Sie können überprüfen, ob Node.js installiert wurde, indem Sie den folgenden Befehl in der Befehlszeile ausführen:

node -v
Nach dem Login kopieren
  1. Datenbankdesign

Ein Lagerverwaltungssystem benötigt eine Datenbank zum Speichern logistikmanagementbezogener Daten. In diesem Beispiel müssen wir eine Datenbank mit dem Namen „Warehouse“ erstellen und die folgenden zwei Tabellen zum Speichern von Daten erstellen:

Items-Tabelle (Artikel): Wird zum Speichern aller gelagerten Artikelinformationen verwendet.

CREATE TABLE items (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  quantity INT(11),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Nach dem Login kopieren

Logistiktabelle (Sendungen): Wird zum Speichern aller Logistikinformationen verwendet, einschließlich Logistikunternehmen, Absender, Empfänger usw.

CREATE TABLE shipments (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  item_id INT(11),
  company VARCHAR(255),
  sender VARCHAR(255),
  receiver VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (item_id) REFERENCES items(id)
);
Nach dem Login kopieren
  1. Backend-Entwicklung – PHP

Als nächstes werden wir die Backend-API-Schnittstelle über PHP erstellen.

Erstellen Sie zunächst einen Ordner mit dem Namen „api“ und erstellen Sie darin eine Datei mit dem Namen „index.php“. In „index.php“ erstellen wir die folgenden API-Schnittstellen:

Alle Artikelinformationen abrufen:

<?php
header("Content-Type: application/json");
require_once 'config.php';

$query = "SELECT * FROM items";
$result = mysqli_query($conn, $query);
$items = [];

while ($row = mysqli_fetch_assoc($result)) {
  $items[] = $row;
}

echo json_encode($items);
Nach dem Login kopieren

Neue Artikel erstellen:

<?php
header('Content-Type: application/json');    
require_once 'config.php';

$name = $_POST['name'];
$quantity = $_POST['quantity'];

$query = "INSERT INTO items (name, quantity) VALUES ('$name', $quantity)";
$result = mysqli_query($conn, $query);

$response = [];
if ($result) {
  $response['message'] = 'Item created successfully';
} else {
  $response['message'] = 'Failed to create item';
}
echo json_encode($response);
Nach dem Login kopieren

Alle Logistikinformationen abrufen:

<?php
header("Content-Type: application/json");
require_once 'config.php';

$query = "SELECT shipments.id, items.name, shipments.company, shipments.sender, shipments.receiver, shipments.created_at
          FROM shipments
          INNER JOIN items
          ON shipments.item_id = items.id";
$result = mysqli_query($conn, $query);
$shipments = [];

while ($row = mysqli_fetch_assoc($result)) {
  $shipments[] = $row;
}

echo json_encode($shipments);
Nach dem Login kopieren

Neue Logistikinformationen erstellen:

<?php
header('Content-Type: application/json');    
require_once 'config.php';

$item_id = $_POST['item_id'];
$company = $_POST['company'];
$sender = $_POST['sender'];
$receiver = $_POST['receiver'];

$query = "INSERT INTO shipments (item_id, company, sender, receiver) VALUES ($item_id, '$company', '$sender', '$receiver')";
$result = mysqli_query($conn, $query);

$response = [];
if ($result) {
  $response['message'] = 'Shipment created successfully';
} else {
  $response['message'] = 'Failed to create shipment';
}
echo json_encode($response);
Nach dem Login kopieren

Sie auch Sie müssen im Ordner „api“ eine Datei mit dem Namen „config.php“ erstellen, die zum Konfigurieren der Datenbankverbindungsinformationen verwendet wird: Front-End-Schnittstelle.

    Erstellen Sie im Stammverzeichnis des Projekts einen Ordner mit dem Namen „frontend“ und geben Sie den Ordner über die Befehlszeile ein.
  1. Installieren Sie zunächst Vue CLI. Führen Sie den folgenden Befehl in der Befehlszeile aus:
  2. <?php
    $conn = mysqli_connect('localhost', 'root', '', 'warehouse');
    
    if (!$conn) {
      die("Connection failed: " . mysqli_connect_error());
    }
    Nach dem Login kopieren
Erstellen Sie ein neues Vue-Projekt. Führen Sie den folgenden Befehl in der Befehlszeile aus und konfigurieren Sie ihn gemäß den Eingabeaufforderungen:

npm install -g @vue/cli
Nach dem Login kopieren

Geben Sie das Verzeichnis des neu erstellten Vue-Projekts ein. Führen Sie den folgenden Befehl in der Befehlszeile aus:

vue create warehouse-management
Nach dem Login kopieren

Installieren Sie die erforderlichen Abhängigkeiten. Führen Sie den folgenden Befehl in der Befehlszeile aus:

cd warehouse-management
Nach dem Login kopieren

Erstellen Sie einen Ordner mit dem Namen „components“ im Ordner „src“ und erstellen Sie darin die folgenden Komponenten:

Artikellistenkomponente (ItemList.vue):

npm install
Nach dem Login kopieren

Lieferlistenkomponente (ShipmentList.vue):

<template>
  <div>
    <h2>物品列表</h2>
    <table>
      <thead>
        <tr>
          <th>物品名称</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>
            <button @click="deleteItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3>添加新物品</h3>
    <input type="text" v-model="newItemName" placeholder="物品名称">
    <input type="number" v-model="newItemQuantity" placeholder="数量">
    <button @click="createItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItemName: '',
      newItemQuantity: 0
    };
  },
  mounted() {
    this.getItems();
  },
  methods: {
    getItems() {
      axios.get('/api/get_items.php').then(response => {
        this.items = response.data;
      });
    },
    createItem() {
      axios.post('/api/create_item.php', {
        name: this.newItemName,
        quantity: this.newItemQuantity
      }).then(response => {
        this.getItems();
        this.newItemName = '';
        this.newItemQuantity = 0;
      });
    },
    deleteItem(id) {
      axios.post('/api/delete_item.php', {
        id: id
      }).then(response => {
        this.getItems();
      });
    }
  }
};
</script>
Nach dem Login kopieren

Öffnen Sie die Datei „App.vue“ im Ordner „src“ und fügen Sie den folgenden Code am entsprechenden Speicherort der Datei hinzu:

<template>
  <div>
    <h2>物流列表</h2>
    <table>
      <thead>
        <tr>
          <th>物品名称</th>
          <th>物流公司</th>
          <th>寄件人</th>
          <th>收件人</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="shipment in shipments" :key="shipment.id">
          <td>{{ shipment.name }}</td>
          <td>{{ shipment.company }}</td>
          <td>{{ shipment.sender }}</td>
          <td>{{ shipment.receiver }}</td>
          <td>{{ shipment.created_at }}</td>
        </tr>
      </tbody>
    </table>
    <h3>添加新物流</h3>
    <select v-model="selectedItem">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
    </select>
    <input type="text" v-model="newShipmentCompany" placeholder="物流公司">
    <input type="text" v-model="newShipmentSender" placeholder="寄件人">
    <input type="text" v-model="newShipmentReceiver" placeholder="收件人">
    <button @click="createShipment">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItem: '',
      shipments: [],
      newShipmentCompany: '',
      newShipmentSender: '',
      newShipmentReceiver: ''
    };
  },
  mounted() {
    this.getItems();
    this.getShipments();
  },
  methods: {
    getItems() {
      axios.get('/api/get_items.php').then(response => {
        this.items = response.data;
      });
    },
    getShipments() {
      axios.get('/api/get_shipments.php').then(response => {
        this.shipments = response.data;
      });
    },
    createShipment() {
      axios.post('/api/create_shipment.php', {
        item_id: this.selectedItem,
        company: this.newShipmentCompany,
        sender: this.newShipmentSender,
        receiver: this.newShipmentReceiver
      }).then(response => {
        this.getShipments();
        this.newShipmentCompany = '';
        this.newShipmentSender = '';
        this.newShipmentReceiver = '';
      });
    }
  }
};
</script>
Nach dem Login kopieren

An diesem Punkt haben wir die Verwendung des PHP-Beispielcodes abgeschlossen für die Entwicklung von Logistikmanagementfunktionen für die Lagerverwaltung mit Vue. Sie können den Front-End-Entwicklungsserver starten, indem Sie den Befehl „npm run servo“ ausführen und im Browser „http://localhost:8080“ aufrufen, um den Projekteffekt anzuzeigen. Gleichzeitig müssen Sie auch den PHP-Entwicklungsserver ausführen, um die API-Schnittstelle effektiv zu machen.

Ich hoffe, die obigen Beispiele können Ihnen helfen zu verstehen, wie Sie mit PHP und Vue Logistikmanagementfunktionen für die Lagerverwaltung entwickeln. Dies ist natürlich nur ein einfaches Beispiel und Sie können die Funktion entsprechend den tatsächlichen Anforderungen erweitern und optimieren. Viel Glück bei deiner Entwicklung!

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

Verwandte Etiketten:
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage