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

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

Dans l'environnement de marché actuel de plus en plus concurrentiel, la gestion des entrepôts est cruciale pour le fonctionnement des entreprises. Afin d'assurer le bon fonctionnement et la gestion sûre des entrepôts, de nombreuses entreprises utilisent des moyens techniques pour effectuer une gestion systématique. Cet article présentera la méthode spécifique d'utilisation de PHP et Vue pour développer des fonctions de gestion de la sécurité des entrepôts et fournira des exemples de code.

Étape 1 : Configurer un environnement de développement
Pour commencer à utiliser PHP et Vue pour développer des fonctions de gestion de la sécurité des entrepôts, vous devez d'abord configurer un environnement de développement correspondant. Vous devez installer le serveur PHP et les outils de développement Vue sur votre ordinateur. Il est recommandé d'utiliser XAMPP comme serveur PHP et Visual Studio Code comme outil de développement Vue. Assurez-vous d'avoir installé ces logiciels correctement et de pouvoir démarrer avec succès le serveur PHP et les outils de développement Vue.

Étape 2 : Créer une base de données et une table de données
Avant de développer la fonction de gestion d'entrepôt en PHP et Vue, nous devons créer la base de données et la table de données correspondantes pour stocker les données pertinentes. Ouvrez phpMyAdmin ou d'autres outils de gestion de base de données, créez une nouvelle base de données et créez une table de données nommée « entrepôts » dans la base de données.

La structure de la table de données « entrepôts » est la suivante :

CREATE TABLE `warehouses` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `location` varchar(255) NOT NULL,
  `security_level` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Étape 3 : Écrire le code backend PHP
Ensuite, nous écrirons le code backend PHP pour gérer les opérations liées à la gestion des entrepôts. Créez un dossier nommé "api" dans le répertoire de votre projet et créez un fichier PHP nommé "warehouses.php" dans ce dossier. Dans ce fichier, nous implémenterons les fonctions d'ajout, de suppression, de modification et de requête de l'entrepôt.

Dans "warehouses.php", nous devons utiliser la bibliothèque d'extensions "mysqli" de PHP pour nous connecter à la base de données et écrire les API associées. Voici l'exemple de code de "warehouses.php" :

<?php
  $db_host = "localhost";  // 数据库主机名
  $db_user = "root";       // 数据库用户名
  $db_password = "";       // 数据库密码
  $db_name = "your_database_name";  // 数据库名称

  // 连接数据库
  $conn = new mysqli($db_host, $db_user, $db_password, $db_name);

  // 检查连接是否成功
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  // 处理GET请求，获取仓库列表
  if ($_SERVER["REQUEST_METHOD"] === "GET") {
    $result = $conn->query("SELECT * FROM warehouses");
    $warehouses = [];
    while ($row = $result->fetch_assoc()) {
      $warehouses[] = $row;
    }
    echo json_encode($warehouses);
  }

  // 处理POST请求，添加新的仓库
  if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = $_POST["name"];
    $location = $_POST["location"];
    $security_level = $_POST["security_level"];
    $sql = "INSERT INTO warehouses (name, location, security_level) VALUES ('$name', '$location', '$security_level')";
    if ($conn->query($sql) === TRUE) {
      echo "New warehouse added successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 处理DELETE请求，删除仓库
  if ($_SERVER["REQUEST_METHOD"] === "DELETE") {
    $id = $_GET["id"];
    $sql = "DELETE FROM warehouses WHERE id=$id";
    if ($conn->query($sql) === TRUE) {
      echo "Warehouse deleted successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 关闭数据库连接
  $conn->close();
?>

Étape 4 : Écrire le code frontal de Vue
Maintenant, nous allons écrire le code frontal de Vue pour interagir avec le backend et afficher les informations pertinentes de l'entrepôt. Créez un dossier nommé « src » dans le répertoire de votre projet et créez un fichier de composant Vue nommé « Warehouse.vue » dans ce dossier.

Dans "Warehouse.vue", nous utiliserons la bibliothèque "axios" de Vue pour envoyer des requêtes HTTP et restituer la liste des entrepôts. Voici l'exemple de code de « Warehouse.vue » :

<template>
  <div>
    <h2>Warehouse List</h2>
    <ul>
      <li v-for="warehouse in warehouses" :key="warehouse.id">
        <span>{{ warehouse.name }}</span>
        <span>{{ warehouse.location }}</span>
        <span>{{ warehouse.security_level }}</span>
        <button @click="deleteWarehouse(warehouse.id)">Delete</button>
      </li>
    </ul>
    <h2>Add New Warehouse</h2>
    <form @submit.prevent="addWarehouse">
      <input type="text" v-model="name" placeholder="Name" required>
      <input type="text" v-model="location" placeholder="Location" required>
      <input type="number" v-model="security_level" placeholder="Security Level" required>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        warehouses: [],
        name: '',
        location: '',
        security_level: 0
      };
    },
    methods: {
      fetchWarehouses() {
        axios.get('api/warehouses.php')
          .then(response => {
            this.warehouses = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      addWarehouse() {
        axios.post('api/warehouses.php', {
          name: this.name,
          location: this.location,
          security_level: this.security_level
        })
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      },
      deleteWarehouse(id) {
        axios.delete(`api/warehouses.php?id=${id}`)
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    mounted() {
      this.fetchWarehouses();
    }
  }
</script>

Étape cinq : Exécutez l'application
Maintenant, nous avons terminé le codage de la fonction de gestion de la sécurité de l'entrepôt pour le développement de la gestion d'entrepôt à l'aide de PHP et Vue. Vous pouvez utiliser la ligne de commande pour entrer dans le répertoire de votre projet et exécuter la commande suivante pour démarrer l'application :

npm run serve

Ensuite, ouvrez votre navigateur et visitez "http://localhost:8080", vous verrez la liste des référentiels et ajouterez Warehouse formulaire. Au fur et à mesure que vous ajoutez ou supprimez des référentiels, la page sera mise à jour en temps réel. De cette façon, vous pouvez gérer votre entrepôt en toute sécurité.

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!