recherche

Maison >développement back-end >tutoriel php >Comment utiliser PHP et Vue pour implémenter la fonction standard de configuration des stocks de gestion d'entrepôt

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

WBOY
WBOYoriginal
2023-09-25 17:15:401298parcourir

Comment utiliser PHP et Vue pour implémenter la fonction standard de configuration des stocks de gestion dentrepôt

Comment utiliser PHP et Vue pour implémenter la fonction standard de paramétrage des stocks de la gestion d'entrepôt

Introduction :
Dans la gestion d'entrepôt moderne, le contrôle des stocks est un élément très important. Comment utiliser PHP et Vue pour implémenter la fonction standard de paramétrage des stocks de gestion d'entrepôt est devenu une question qui mérite d'être étudiée. Cet article expliquera comment utiliser PHP et Vue pour implémenter la fonction standard de configuration des stocks de gestion d'entrepôt et fournira des exemples de code spécifiques.

1. Préparation
Tout d'abord, nous devons construire un environnement de développement basé sur PHP et Vue. Vous pouvez choisir d'utiliser un serveur local, tel que XAMPP, etc., ou d'utiliser un environnement de développement en ligne, tel que CodePen, JSFiddle, etc. Après nous être assurés que l’environnement fonctionne correctement, nous pouvons commencer à coder.

2. Créer une base de données
Tout d'abord, nous devons créer une base de données pour stocker les informations sur les produits et les données d'inventaire de l'entrepôt. Vous pouvez utiliser MySQL ou d'autres bases de données relationnelles pour créer une base de données nommée « inventaire » et créer deux tables, « produits » et « stock ».

La table "produits" contient les champs suivants :

  • id : ID du produit (clé primaire auto-incrémentée)
  • nom : Nom du produit
  • prix : Prix du produit
  • catégorie : Catégorie de produit

Tableau "stock" contient les champs suivants :

  • id : Inventory ID (clé primaire auto-incrémentée)
  • product_id : Product ID (clé étrangère associée au champ id de la table "products")
  • quantity : Quantité du produit

3 . Créer une interface back-end
Utiliser PHP Pour créer une interface back-end, laissez le front-end obtenir et modifier les données de la base de données via l'interface. Voici un exemple de code PHP simple pour obtenir la liste des produits et les informations sur l'inventaire des produits : 

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "inventory";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取商品列表
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $products = array();
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
    echo json_encode($products);
} else {
    echo "0 结果";
}
// 获取商品的库存信息
$product_id = $_GET['product_id'];
$sql = "SELECT * FROM stock WHERE product_id = $product_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $stock = array();
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
    echo json_encode($stock);
} else {
    echo "0 结果";
}
$conn->close();
?>

IV. Créez l'interface frontale
Utilisez Vue pour créer l'interface frontale et utilisez la bibliothèque axios pour envoyer des requêtes HTTP et interagir avec l'interface back-end . Ce qui suit est un exemple simple de code Vue pour afficher les listes de produits et les informations d'inventaire des produits : 

<!DOCTYPE html>
<html>
<head>
  <title>仓库管理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <span>{{ product.name }}</span> -
        <span>{{ product.price }}</span>元 -
        <span>{{ product.category }}</span>
        <button @click="getStock(product.id)">查看库存</button>
      </li>
    </ul>
    <h1>库存信息</h1>
    <ul>
      <li v-for="stock in stockList" :key="stock.id">
        <span>{{ stock.quantity }}</span>件
      </li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        products: [],
        stockList: []
      },
      methods: {
        getProducts() {
          axios.get('backend.php')
            .then(response => {
              this.products = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        },
        getStock(product_id) {
          axios.get(`backend.php?product_id=${product_id}`)
            .then(response => {
              this.stockList = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      mounted() {
        this.getProducts();
      }
    });
  </script>
</body>
</html>

5. Exécutez et testez
Enregistrez le code PHP ci-dessus sous le fichier "backend.php" et enregistrez le code Vue sous "index.html". déposer. Placez ces deux fichiers dans le même répertoire et ouvrez le fichier « index.html » dans le navigateur pour voir la liste des produits et les informations d'inventaire.

6. Résumé
Grâce aux étapes ci-dessus, nous avons utilisé avec succès PHP et Vue pour implémenter la fonction standard de configuration des stocks de gestion d'entrepôt. La liste des produits et les informations d'inventaire peuvent être affichées via l'interface frontale, et les données de la base de données peuvent être obtenues et modifiées dynamiquement via l'interface back-end. Bien entendu, dans les projets réels, nous pouvons également étendre et optimiser en fonction de besoins spécifiques. J'espère que le contenu ci-dessus vous sera utile et je vous souhaite de meilleurs résultats dans la gestion d'entrepôt !

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!

php mysql html 接口 数据库 http axios
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment utiliser PHP et Vue pour implémenter la fonction de sauvegarde des donnéesArticle suivant：Comment utiliser PHP et Vue pour implémenter la fonction de sauvegarde des données

Articles Liés

Voir plus