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

2. 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
);

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)
);

3. 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);

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);

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);

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);

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.
4. Installieren Sie zunächst Vue CLI. Führen Sie den folgenden Befehl in der Befehlszeile aus:

<?php
$conn = mysqli_connect('localhost', 'root', '', 'warehouse');

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

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

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

vue create warehouse-management

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

cd warehouse-management

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

Artikellistenkomponente (ItemList.vue):

npm install

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>

Ö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>

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!