How to use PHP and Vue to implement the order management function of warehouse management

How to use PHP and Vue to implement the order management function of warehouse management

Overview:
The order management function of warehouse management is a very important link, especially for For e-commerce platforms or retail industries. In this article, we will introduce how to use PHP and Vue to implement order management functions. We will use PHP as the back-end language to handle data logic, and Vue as the front-end framework to handle user interface and interaction.

Environment setup:
Before you start, make sure you have configured the development environment for PHP and Vue. You can use XAMPP or WAMP software packages to install the PHP environment, and use Node.js to install the Vue environment.

1. Database design:
   First, we need to design the database to store order-related data. In this example, we will create a table called "orders" that will contain the following columns:

• id: The unique identifier of the order
• customer_name : Customer name
• product_name: Product name
• quantity: Order quantity
• order_date: Order date
• status: Order status (paid, pending payment , shipped, etc.)

Create this table in the database and make sure you have the appropriate permissions to access and operate the database.

2. Backend code:
   Next, we will write PHP code to implement the backend logic of order management. We will create a file called "orders.php" and use it as the interface to handle interaction with the database.

In this file, we will create the following API route:

• /api/orders/getAll.php: API to get all orders
• /api/orders/add.php: API to add a new order
• /api/orders/update.php: API to update an order
• /api/orders/delete.php: API to delete an order

In these API routes, we will use the PHP PDO library to connect to the database and execute the corresponding SQL queries.

The following is a sample PHP code that implements the above API routing:

<?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']);
}

3. Front-end code:
   Finally, we will use Vue to create a simple order management interface . We will use the Axios library in the front-end code to handle requests to the back-end API.

In this example, we will create a component named "Orders.vue" and introduce it in the main component.

The following is a sample Vue code that implements the order management interface:

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

The above is a sample code that uses PHP and Vue to implement the order management function of warehouse management. In this example, we use PHP as the back-end language to process data logic, and use Vue to build a simple order management interface. You can modify and extend the code according to your needs.

The above is the detailed content of How to use PHP and Vue to implement the order management function of warehouse management. For more information, please follow other related articles on the PHP Chinese website!