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

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

Introduction :
La fonction de gestion des ventes de la gestion d'entrepôt est une partie indispensable des opérations quotidiennes d'une entreprise. Cet article sera basé sur PHP et Vue, présentera comment utiliser ces deux technologies pour implémenter la fonction de gestion des ventes dans un système de gestion d'entrepôt simple et fournira des exemples de code spécifiques.

1. Préparation du projet
Avant de commencer à écrire du code, nous devons faire quelques préparatifs.

1. Assurez-vous d'avoir installé l'environnement de développement PHP et d'avoir des connaissances de base en développement PHP ;
2. Assurez-vous d'avoir installé l'environnement de développement Vue et d'avoir des connaissances de base en développement Vue ;
3. Créez un nouveau projet PHP et créez un dossier ; nommé "sales" dans le projet comme emplacement de stockage de la fonction de gestion des ventes ;
4. Créez un fichier nommé "index.php" sous le dossier "sales" pour gérer les demandes de gestion des ventes ;
5. Créez un fichier nommé "app.js " dans le dossier "sales" pour écrire le code frontal de Vue.

2. Écriture de code back-end
Tout d'abord, nous devons écrire du code PHP pour gérer la logique back-end.

1. Dans le fichier "index.php", ajoutez le code suivant :

   <?php
   
   // 1. 连接数据库
   $db_host = "localhost";
   $db_username = "root";
   $db_password = "";
   $db_name = "sales_db";
   
   $conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
   if (!$conn) {
    die("数据库连接失败：" . mysqli_connect_error());
   }
   
   // 2. 处理获取销售列表的请求
   if ($_SERVER["REQUEST_METHOD"] == "GET") {
    $sql = "SELECT * FROM sales";
    $result = mysqli_query($conn, $sql);
    $sales = array();
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            array_push($sales, $row);
        }
    }
    echo json_encode($sales);
   }
   
   // 3. 处理添加销售记录的请求
   if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $product_name = $_POST["product_name"];
    $quantity = $_POST["quantity"];
    $price = $_POST["price"];
   
    $sql = "INSERT INTO sales (product_name, quantity, price) VALUES ('$product_name', $quantity, $price)";
    if (mysqli_query($conn, $sql)) {
        echo "销售记录添加成功！";
    } else {
        echo "销售记录添加失败：" . mysqli_error($conn);
    }
   }
   
   // 4. 关闭数据库连接
   mysqli_close($conn);
   
   ?>

Le code ci-dessus implémente les fonctions suivantes :

• Se connecter à la base de données
• Traiter la demande pour obtenir la liste des ventes ;
• Traitez la demande d'ajout de dossiers de ventes.

3. Écriture du code front-end
Ensuite, nous devons écrire le code front-end pour Vue.

1. Dans le fichier "app.js", ajoutez le code suivant :

   new Vue({
    el: '#app',
    data: {
        sales: [],
        product_name: '',
        quantity: '',
        price: ''
    },
    methods: {
        getSales: function() {
            axios.get('sales/index.php')
            .then(response => {
                this.sales = response.data;
            })
            .catch(error => {
                console.log(error);
            });
        },
        addSale: function() {
            axios.post('sales/index.php', {
                product_name: this.product_name,
                quantity: this.quantity,
                price: this.price
            })
            .then(response => {
                alert(response.data);
                this.getSales();
            })
            .catch(error => {
                console.log(error);
            });
        }
    },
    mounted: function() {
        this.getSales();
    }
   });

Le code ci-dessus implémente les fonctions suivantes :

• Obtenir la liste des ventes
• Ajouter des enregistrements de ventes ;

4. Affichage de la page
Enfin, nous devons afficher la fonction de gestion des ventes sur la page.

1. Dans la section HTML du fichier "index.php", ajoutez le code suivant :

   <!DOCTYPE html>
   <html lang="en">
   <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售管理</title>
   </head>
   <body>
    <div id="app">
        <h1>销售管理</h1>
        <table>
            <thead>
                <tr>
                    <th>产品名称</th>
                    <th>数量</th>
                    <th>价格</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="sale in sales" :key="sale.id">
                    <td>{{ sale.product_name }}</td>
                    <td>{{ sale.quantity }}</td>
                    <td>{{ sale.price }}</td>
                </tr>
            </tbody>
        </table>
        <form @submit.prevent="addSale">
            <input type="text" v-model="product_name" placeholder="产品名称" required>
            <input type="number" v-model="quantity" placeholder="数量" required>
            <input type="number" v-model="price" placeholder="价格" required>
            <button type="submit">添加销售记录</button>
        </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="app.js"></script>
   </body>
   </html>

Le code ci-dessus implémente une page de gestion des ventes simple, comprenant un tableau affichant les enregistrements de ventes et un formulaire pour ajouter des enregistrements de ventes .

5. Résumé
En utilisant la technologie PHP et Vue, nous avons mis en œuvre avec succès la fonction de gestion des ventes de la gestion des entrepôts. PHP est utilisé pour traiter la logique back-end, se connecter à la base de données et fournir des API pour les appels front-end ; Vue est utilisé pour écrire la logique d'affichage et d'interaction des pages frontales. Cet exemple de code simple peut servir de référence et de point de départ pour écrire des systèmes de gestion d’entrepôt plus complexes. J'espère que cet article vous sera utile pour votre étude et votre pratique !

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!