Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pesanan pengurusan gudang

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pesanan pengurusan gudang

Ikhtisar:
Fungsi pengurusan pesanan pengurusan gudang adalah pautan yang sangat penting, terutamanya untuk platform e-dagang atau industri runcit. Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pesanan. Kami akan menggunakan PHP sebagai bahasa hujung belakang untuk mengendalikan logik data, dan Vue sebagai rangka kerja bahagian hadapan untuk mengendalikan antara muka dan interaksi pengguna.

Persediaan persekitaran:
Sebelum anda bermula, pastikan anda telah mengkonfigurasi persekitaran pembangunan untuk PHP dan Vue. Anda boleh menggunakan pakej perisian XAMPP atau WAMP untuk memasang persekitaran PHP dan menggunakan Node.js untuk memasang persekitaran Vue.

1. Reka bentuk pangkalan data:
   Pertama, kita perlu mereka bentuk pangkalan data untuk menyimpan data berkaitan pesanan. Dalam contoh ini, kami akan mencipta jadual yang dipanggil "pesanan" yang akan mengandungi lajur berikut:

• id: Pengecam unik pesanan
• nama_pelanggan: Nama pelanggan
• nama_produk: Nama produk
• kuantiti : kuantiti pesanan
tarikh_pesanan: tarikh pesanan
• status: status pesanan (dibayar, pembayaran belum selesai, dihantar, dll.)

Buat jadual ini dalam pangkalan data dan pastikan anda mempunyai kebenaran yang sesuai untuk mengakses dan mengendalikan pangkalan datanya.

Kod Belakang:
2. Seterusnya, kami akan menulis kod PHP untuk melaksanakan logik bahagian belakang pengurusan pesanan. Kami akan mencipta fail yang dipanggil "orders.php" dan menggunakannya sebagai antara muka untuk mengendalikan interaksi dengan pangkalan data.
   

Dalam fail ini, kami akan mencipta laluan API berikut:

/api/orders/getAll.php: API untuk mendapatkan semua pesanan
• /api/orders/add.php: API untuk menambah pesanan baharu
/api/orders/update.php: API untuk mengemas kini pesanan
• /api/orders/delete.php: API untuk memadam pesanan

Dalam laluan API ini, kami akan menggunakan perpustakaan PHP PDO untuk menyambung ke pangkalan data dan Laksanakan pertanyaan SQL yang sepadan.

Berikut ialah contoh kod PHP yang melaksanakan penghalaan API di atas:

<?php

header('Content-Type: application/json');

// 连接数据库
$pdo = new PDO('mysql:host=localhost;dbname=your_database','your_username','your_password');

// 获取所有订单
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    $stmt = $pdo->prepare('SELECT * FROM orders');
    $stmt->execute();

    $orders = $stmt->fetchAll(PDO::FETCH_ASSOC);

    echo json_encode($orders);
}

// 添加一个新订单
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $customerName = $_POST['customer_name'];
    $productName = $_POST['product_name'];
    $quantity = $_POST['quantity'];
    $orderDate = date('Y-m-d H:i:s');
    $status = '待支付';

    $stmt = $pdo->prepare('INSERT INTO orders (customer_name, product_name, quantity, order_date, status) VALUES (?, ?, ?, ?, ?)');
    $stmt->execute([$customerName, $productName, $quantity, $orderDate, $status]);

    echo json_encode(['message' => 'Order added successfully']);
}

// 更新一个订单
if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
    parse_str(file_get_contents("php://input"), $data);

    $orderId = $data['id'];
    $status = $data['status'];

    $stmt = $pdo->prepare('UPDATE orders SET status = ? WHERE id = ?');
    $stmt->execute([$status, $orderId]);

    echo json_encode(['message' => 'Order updated successfully']);
}

// 删除一个订单
if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
    parse_str(file_get_contents("php://input"), $data);

    $orderId = $data['id'];

    $stmt = $pdo->prepare('DELETE FROM orders WHERE id = ?');
    $stmt->execute([$orderId]);

    echo json_encode(['message' => 'Order deleted successfully']);
}

Kod hadapan:
3. Akhir sekali, kami akan menggunakan Vue untuk mencipta antara muka pengurusan pesanan yang ringkas. Kami akan menggunakan perpustakaan Axios dalam kod bahagian hadapan untuk mengendalikan permintaan kepada API bahagian belakang.
   

Dalam contoh ini, kami akan mencipta komponen yang dipanggil "Orders.vue" dan memperkenalkannya dalam komponen utama.

Berikut ialah contoh kod Vue yang melaksanakan antara muka pengurusan pesanan:

<template>
  <div>
    <h1>订单管理</h1>
    <form @submit.prevent="addOrder">
      <input type="text" v-model="customerName" placeholder="客户姓名">
      <input type="text" v-model="productName" placeholder="产品名称">
      <input type="number" v-model="quantity" placeholder="数量">
      <button type="submit">添加订单</button>
    </form>

    <ul>
      <li v-for="order in orders" :key="order.id">
        <span>{{ order.customer_name }}</span>
        <span>{{ order.product_name }}</span>
        <span>{{ order.quantity }}</span>
        <span>{{ order.order_date }}</span>
        <span>{{ order.status }}</span>
        <button @click="updateOrder(order.id, '已支付')">已支付</button>
        <button @click="updateOrder(order.id, '已发货')">已发货</button>
        <button @click="deleteOrder(order.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      orders: [],
      customerName: '',
      productName: '',
      quantity: 0,
    };
  },
  mounted() {
    this.getOrders();
  },
  methods: {
    getOrders() {
      axios.get('/api/orders/getAll.php')
        .then(response => {
          this.orders = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    },
    addOrder() {
      axios.post('/api/orders/add.php', {
        customer_name: this.customerName,
        product_name: this.productName,
        quantity: this.quantity,
      })
        .then(response => {
          this.customerName = '';
          this.productName = '';
          this.quantity = 0;

          this.getOrders();
        })
        .catch(error => {
          console.log(error);
        });
    },
    updateOrder(orderId, status) {
      axios.put('/api/orders/update.php', {
        id: orderId,
        status: status,
      })
        .then(response => {
          this.getOrders();
        })
        .catch(error => {
          console.log(error);
        });
    },
    deleteOrder(orderId) {
      axios.delete('/api/orders/delete.php', {
        data: {
          id: orderId,
        },
      })
        .then(response => {
          this.getOrders();
        })
        .catch(error => {
          console.log(error);
        });
    },
  },
};
</script>

Di atas ialah contoh kod yang menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pesanan pengurusan gudang. Dalam contoh ini, kami menggunakan PHP sebagai bahasa bahagian belakang untuk memproses logik data dan menggunakan Vue untuk membina antara muka pengurusan pesanan yang mudah. Anda boleh mengubah suai dan melanjutkan kod mengikut keperluan anda.

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