Comment utiliser PHP et Vue pour développer des fonctions de gestion des réapprovisionnements pour la gestion des entrepôts

Comment utiliser PHP et Vue pour développer la fonction de gestion du réapprovisionnement de la gestion des entrepôts

Dans les opérations commerciales modernes, la gestion des entrepôts est l'un des maillons les plus importants. Pour les entrepôts, les fonctions de gestion du réapprovisionnement peuvent garantir un réapprovisionnement en temps opportun des stocks pour répondre aux besoins des clients et éviter les pénuries d'articles. Dans cet article, nous explorerons comment utiliser PHP et Vue pour développer la fonction de gestion du réapprovisionnement d'un système de gestion d'entrepôt et fournirons des exemples de code spécifiques.

1. Sélection technologique

Afin de réaliser la fonction de gestion du réapprovisionnement, nous avons choisi d'utiliser PHP comme langage back-end et Vue comme framework front-end. PHP est un langage de développement backend puissant et flexible, tandis que Vue est un framework JavaScript progressif permettant de créer des interfaces utilisateur. Grâce à une telle sélection technologique, nous pouvons facilement réaliser une séparation front-end et back-end et rendre le développement de projets plus efficace et plus facile à maintenir.

2. Développement back-end

1. Configuration de l'environnement

Tout d'abord, nous devons mettre en place un environnement de développement PHP. Vous pouvez utiliser un environnement de développement intégré tel que XAMPP ou WAMP pour créer un environnement de développement PHP local. Assurez-vous que PHP et une base de données (telle que MySQL) sont installés.

2. Créer une base de données

Créez une base de données nommée "warehouse_management" dans MySQL et créez deux tables : "products" et "replenishments". La table « produits » est utilisée pour stocker les informations sur les produits, tandis que la table « réapprovisionnements » est utilisée pour stocker les enregistrements de réapprovisionnement.

Les champs de la table des produits comprennent : id, nom, quantité.

Les champs du tableau des réapprovisionnements incluent : id, product_id, quantité, date.

3. API d'écriture

En PHP, nous pouvons utiliser des PDO (PHP Data Objects) pour interagir avec la base de données. Tout d'abord, nous devons créer un fichier qui se connecte à la base de données, tel que db.php :

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "warehouse_management";

try {
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
?>

Ensuite, nous pouvons écrire l'API pour gérer les requêtes frontales. Par exemple, nous pouvons créer un fichier nommé « getProducts.php » pour obtenir des informations sur tous les produits :

<?php
require_once('db.php');

try {
  $stmt = $conn->prepare("SELECT * FROM products");
  $stmt->execute();

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

  echo json_encode($results);
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
?>

De même, nous pouvons créer un fichier « addReplenishment.php » pour ajouter des enregistrements de réapprovisionnement :

<?php
require_once('db.php');

$product_id = $_POST['product_id'];
$quantity = $_POST['quantity'];

try {
  $stmt = $conn->prepare("INSERT INTO replenishments (product_id, quantity, date) VALUES (:product_id, :quantity, NOW())");
  $stmt->bindParam(':product_id', $product_id);
  $stmt->bindParam(':quantity', $quantity);

  $stmt->execute();
  
  echo "Replenishment added successfully";
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
?>

3. Développement front-end

1. Configuration de l'environnement

Pour le développement front-end, nous devons installer Node.js et Vue CLI. Vous pouvez télécharger le programme d'installation sur le site officiel de Node.js et exécuter la commande suivante pour installer Vue CLI :

npm install -g @vue/cli

2. Créer un projet Vue

Dans la ligne de commande, nous pouvons utiliser Vue CLI pour créer un projet Vue. Par exemple, nous pouvons exécuter la commande suivante pour créer un projet appelé "warehouse-management" :

vue create warehouse-management

Nous pouvons ensuite sélectionner quelques options pour configurer le projet. Au cours de ce processus, nous pouvons choisir d'utiliser Babel et Router, sélectionner "Sélectionner manuellement les fonctionnalités", puis appuyer sur Entrée pour continuer.

3. Écriture de composants et d'appels API

Dans un projet Vue, nous pouvons utiliser des composants Vue pour créer l'interface utilisateur. Tout d'abord, nous devons créer un composant (ProductList.vue) pour afficher la liste des produits :

<template>
  <div>
    <h2>Product List</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.quantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      fetch('http://localhost/api/getProducts.php')
        .then(response => response.json())
        .then(data => {
          this.products = data;
        });
    }
  }
};
</script>

Ensuite, nous pouvons créer un composant (AddReplenishment.vue) pour ajouter des enregistrements de réapprovisionnement :

<template>
  <div>
    <h2>Add Replenishment</h2>
    <form @submit.prevent="addReplenishment">
      <label for="product">Product:</label>
      <select name="product" v-model="product_id">
        <option v-for="product in products" :value="product.id" :key="product.id">{{ product.name }}</option>
      </select>
      <br>
      <label for="quantity">Quantity:</label>
      <input type="number" name="quantity" v-model="quantity" required>
      <br>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      product_id: '',
      quantity: ''
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      fetch('http://localhost/api/getProducts.php')
        .then(response => response.json())
        .then(data => {
          this.products = data;
        });
    },
    addReplenishment() {
      fetch('http://localhost/api/addReplenishment.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `product_id=${this.product_id}&quantity=${this.quantity}`
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          // Refresh product list
          this.getProducts();
          // Reset form values
          this.product_id = '';
          this.quantity = '';
        });
    }
  }
};
</script>

4. Composant intégré

Enfin, nous devons modifier le fichier App.vue pour intégrer les composants ProductList et AddReplenishment :

<template>
  <div id="app">
    <ProductList />
    <AddReplenishment />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import AddReplenishment from './components/AddReplenishment.vue';

export default {
  name: 'App',
  components: {
    ProductList,
    AddReplenishment
  }
};
</script>

À ce stade, nous avons terminé le développement de la fonction de gestion du réapprovisionnement du système de gestion d'entrepôt basé sur PHP et Vue.

Résumé

Dans cet article, nous avons présenté comment utiliser PHP et Vue pour développer la fonction de gestion du réapprovisionnement d'un système de gestion d'entrepôt. En choisissant la bonne technologie, nous pouvons développer efficacement un système fiable et facile à entretenir. J'espère que cet article pourra vous aider dans les travaux de développement connexes.

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!