Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan logistik untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan logistik untuk pengurusan gudang

Dengan perkembangan pesat e-dagang, fungsi pengurusan logistik pengurusan gudang menjadi semakin penting. Dalam artikel ini, saya akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan sistem pengurusan gudang yang mudah dan praktikal, dan menyediakan contoh kod khusus.

1. Persediaan alam sekitar

Sebelum memulakan pembangunan, kita perlu menyediakan beberapa persekitaran pembangunan. Mula-mula, pastikan anda memasang persekitaran pembangunan PHP dan Vue pada komputer anda. Anda boleh menyediakan persekitaran pembangunan PHP tempatan dengan memuat turun dan memasang XAMPP, WAMP atau MAMP. Pada masa yang sama, anda juga perlu memasang Node.js untuk menyokong pembangunan Vue. Anda boleh menyemak sama ada Node.js telah dipasang dengan menjalankan arahan berikut dalam baris arahan:

node -v

2. Reka bentuk pangkalan data

Sistem pengurusan gudang memerlukan pangkalan data untuk menyimpan data berkaitan pengurusan logistik. Dalam contoh ini, kita perlu mencipta pangkalan data bernama "gudang" dan mencipta dua jadual berikut untuk menyimpan data:

Jadual item (item): digunakan untuk menyimpan semua maklumat item yang disimpan.

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

Meja logistik (penghantaran): digunakan untuk menyimpan semua maklumat logistik, termasuk syarikat logistik, penghantar, penerima, dsb.

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 Development - PHP

Seterusnya, kami akan membina antara muka API bahagian belakang melalui PHP.

Mula-mula, buat folder bernama "api" dan buat fail bernama "index.php" di dalamnya. Dalam "index.php", kami akan mencipta antara muka API berikut:

Dapatkan semua maklumat item:

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

Buat item baharu:

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

Dapatkan semua maklumat logistik:

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

Cipta maklumat logistik baharu:

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

Anda juga perlu mencipta fail bernama "config.php" dalam folder "api", yang digunakan untuk mengkonfigurasi maklumat sambungan pangkalan data:

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

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

4. Pembangunan hadapan - Vue

Sekarang, kami akan menggunakan Vue untuk membangunkan antara muka hadapan.

Buat folder bernama "frontend" dalam direktori akar projek dan masukkan folder melalui baris arahan.
Mula-mula, pasang Vue CLI. Jalankan arahan berikut dalam baris arahan:

npm install -g @vue/cli

Buat projek Vue baharu. Jalankan arahan berikut dalam baris arahan dan konfigurasikan mengikut gesaan:

vue create warehouse-management

Masukkan direktori projek Vue yang baru dibuat. Jalankan arahan berikut dalam baris arahan:

cd warehouse-management

Pasang kebergantungan yang diperlukan. Jalankan arahan berikut dalam baris arahan:

npm install

Buat folder bernama "komponen" dalam folder "src" dan buat komponen berikut di dalamnya:

Komponen senarai item (ItemList.vue):

<template>
  <div>
    <h2 id="物品列表">物品列表</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 id="添加新物品">添加新物品</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>

Komponen senarai penghantaran (ShipmentList.vue):

<template>
  <div>
    <h2 id="物流列表">物流列表</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 id="添加新物流">添加新物流</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>

Buka fail "App.vue" dalam folder "src" dan tambahkan kod berikut ke lokasi fail yang sepadan:

<template>
  <div id="app">
    <item-list></item-list>
    <shipment-list></shipment-list>
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';
import ShipmentList from './components/ShipmentList.vue';

export default {
  components: {
    ItemList,
    ShipmentList
  }
};
</script>

Pada ketika ini, kami telah selesai menggunakan kod Contoh PHP untuk membangunkan fungsi pengurusan logistik untuk pengurusan gudang dengan Vue. Anda boleh memulakan pelayan pembangunan bahagian hadapan dengan menjalankan arahan "npm run serve", dan lawati "http://localhost:8080" dalam penyemak imbas untuk melihat kesan projek. Pada masa yang sama, anda juga perlu menjalankan pelayan pembangunan PHP untuk menjadikan antara muka API berkesan.

Semoga contoh di atas dapat membantu anda memahami cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan logistik untuk pengurusan gudang. Sudah tentu, ini hanyalah contoh mudah, dan anda boleh mengembangkan dan mengoptimumkan fungsi mengikut keperluan sebenar. Semoga berjaya dengan perkembangan anda!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan logistik untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!