Comment utiliser PHP et Vue pour implémenter la fonction de gestion des commandes de la gestion d'entrepôt

Comment utiliser PHP et Vue pour implémenter la fonction de gestion des commandes de la gestion d'entrepôt

Aperçu :
La fonction de gestion des commandes de la gestion d'entrepôt est un maillon très important, en particulier pour les plateformes de commerce électronique ou les secteurs de la vente au détail. Dans cet article, nous présenterons comment utiliser PHP et Vue pour implémenter des fonctions de gestion des commandes. Nous utiliserons PHP comme langage back-end pour gérer la logique des données, et Vue comme framework front-end pour gérer l'interface utilisateur et l'interaction.

Configuration de l'environnement :
Avant de commencer, assurez-vous d'avoir configuré l'environnement de développement pour PHP et Vue. Vous pouvez utiliser les packages logiciels XAMPP ou WAMP pour installer l'environnement PHP et utiliser Node.js pour installer l'environnement Vue.

1. Conception de la base de données :
   Tout d'abord, nous devons concevoir la base de données pour stocker les données relatives aux commandes. Dans cet exemple, nous allons créer un tableau appelé "commandes" qui contiendra les colonnes suivantes :

• id : Identifiant unique de la commande
• customer_name : Nom du client
• product_name : Nom du produit
• quantity : quantité commandée
• order_date : date de la commande
• status : statut de la commande (payée, en attente de paiement, expédiée, etc.)

Créez cette table dans la base de données et assurez-vous que vous disposez des autorisations appropriées pour y accéder et la faire fonctionner.

2. Code backend :
   Ensuite, nous écrirons du code PHP pour implémenter la logique backend de la gestion des commandes. Nous allons créer un fichier appelé "orders.php" et l'utiliser comme interface pour gérer l'interaction avec la base de données.

Dans ce fichier, nous allons créer les routes API suivantes :

• /api/orders/getAll.php : API pour récupérer toutes les commandes
• /api/orders/add.php : API pour ajouter une nouvelle commande
• /api/orders/update.php : API pour mettre à jour une commande
• /api/orders/delete.php : API pour supprimer une commande

Dans ces routes API, nous utiliserons la bibliothèque PHP PDO pour nous connecter au base de données et exécutez la requête SQL correspondante.

Ce qui suit est un exemple de code PHP qui implémente le routage API ci-dessus :

<?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. Code frontal :
   Enfin, nous utiliserons Vue pour créer une interface simple de gestion des commandes. Nous utiliserons la bibliothèque Axios dans le code front-end pour gérer les requêtes vers l'API back-end.

Dans cet exemple, nous allons créer un composant appelé "Orders.vue" et l'introduire dans le composant principal.

Ce qui suit est un exemple de code Vue qui implémente l'interface de gestion des commandes :

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

Ce qui précède est un exemple de code qui utilise PHP et Vue pour implémenter la fonction de gestion des commandes de la gestion d'entrepôt. Dans cet exemple, nous utilisons PHP comme langage back-end pour traiter la logique des données et utilisons Vue pour créer une interface simple de gestion des commandes. Vous pouvez modifier et étendre le code selon vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!