Comment utiliser PHP et Vue pour développer des fonctions de gestion d'étagères pour la gestion d'entrepôt

Comment utiliser PHP et Vue pour développer la fonction de gestion des étagères de la gestion d'entrepôt

Introduction :
Dans les systèmes de gestion d'entrepôt modernes, la gestion des étagères est une fonction très importante. Grâce à une gestion raisonnable des étagères, la disposition de l'entrepôt et l'utilisation de l'espace de stockage peuvent être optimisées, et l'efficacité et la précision du travail peuvent être améliorées. Cet article présentera comment utiliser PHP et Vue pour développer la fonction de gestion des étagères de la gestion d'entrepôt, et aidera les lecteurs à la comprendre et à la mettre en pratique à travers des exemples de code spécifiques.

1. Sélection de la pile technologique
Dans le développement de systèmes de gestion d'entrepôt, PHP et Vue sont des piles technologiques très couramment utilisées. En tant que langage de programmation back-end populaire, PHP offre de puissantes capacités de traitement et de calcul ; tandis que Vue est un framework front-end populaire qui offre une gestion simple et efficace des couches de vue. L'utilisation de PHP et Vue peut bien séparer la logique front-end et back-end, ce qui facilite la collaboration en équipe et la maintenance ultérieure.

2. Préparation du projet et construction de l'environnement

1. Téléchargez et installez les environnements liés à PHP et Vue : sélectionnez PHP 7 ou supérieur pour PHP, et sélectionnez Vue CLI pour Vue
2. Initialisez le projet Vue : utilisez l'outil de ligne de commande pour entrer ; le répertoire du projet et exécutez la commande « vue create Shelf-management » ;
3. Créer un backend PHP : Créez un dossier nommé « api » dans le répertoire racine du projet pour stocker les fichiers liés au backend PHP.

3. Conception de la base de données
La fonction de gestion des étagères nécessite le stockage et la gestion des informations sur les étagères, une structure de base de données correspondante doit donc être conçue. Dans l'exemple, nous créons une base de données nommée "shelf_management" et une table nommée "shelf". La structure de la table est la suivante :

CREATE TABLE `shelf` (
  `id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `shelf_code` varchar(32) NOT NULL,
  `description` varchar(255) DEFAULT NULL,
  `capacity` int(11) NOT NULL,
  `occupancy` int(11) NOT NULL
);

4. Développement back-end

1. Connectez-vous à la base de données : Créez-la sous l'"api " dossier Un fichier nommé "db.php" permet de se connecter à la base de données. L'exemple de code est le suivant :

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "shelf_management";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

2. Implémentez l'interface API : Créez un fichier nommé "shelf.php" sous le dossier "api" pour implémenter les opérations CRUD sur les données d'étagère. L'exemple de code est le suivant :

<?php
include 'db.php';

// 获取所有货架数据
function getAllShelves() {
    global $conn;
    $sql = "SELECT * FROM shelf";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $rows = array();
        while($row = $result->fetch_assoc()) {
            $rows[] = $row;
        }
        return $rows;
    } else {
        return [];
    }
}

// 创建货架
function createShelf($shelf_code, $description, $capacity, $occupancy) {
    global $conn;
    $sql = "INSERT INTO shelf (shelf_code, description, capacity, occupancy)
            VALUES ('$shelf_code','$description','$capacity','$occupancy')";

    if ($conn->query($sql) === TRUE) {
        return true;
    } else {
        return false;
    }
}

// 更新货架
function updateShelf($id, $shelf_code, $description, $capacity, $occupancy) {
    global $conn;
    $sql = "UPDATE shelf SET shelf_code='$shelf_code', description='$description',
            capacity='$capacity', occupancy='$occupancy' WHERE id='$id'";

    if ($conn->query($sql) === TRUE) {
        return true;
    } else {
        return false;
    }
}

// 删除货架
function deleteShelf($id) {
    global $conn;
    $sql = "DELETE FROM shelf WHERE id='$id'";

    if ($conn->query($sql) === TRUE) {
        return true;
    } else {
        return false;
    }
}

// 路由处理
switch ($_SERVER["REQUEST_METHOD"]) {
    case 'GET':
        // 处理获取所有货架数据请求
        echo json_encode(getAllShelves());
        break;
    case 'POST':
        // 处理创建货架请求
        $input = json_decode(file_get_contents('php://input'), true);
        $shelf_code = $input["shelf_code"];
        $description = $input["description"];
        $capacity = $input["capacity"];
        $occupancy = $input["occupancy"];
        if (createShelf($shelf_code, $description, $capacity, $occupancy)) {
            echo "Shelf created successfully";
        } else {
            echo "Error creating shelf";
        }
        break;
    case 'PUT':
        // 处理更新货架请求
        $input = json_decode(file_get_contents('php://input'), true);
        $id = $input["id"];
        $shelf_code = $input["shelf_code"];
        $description = $input["description"];
        $capacity = $input["capacity"];
        $occupancy = $input["occupancy"];
        if (updateShelf($id, $shelf_code, $description, $capacity, $occupancy)) {
            echo "Shelf updated successfully";
        } else {
            echo "Error updating shelf";
        }
        break;
    case 'DELETE':
        // 处理删除货架请求
        $input = json_decode(file_get_contents('php://input'), true);
        $id = $input["id"];
        if (deleteShelf($id)) {
            echo "Shelf deleted successfully";
        } else {
            echo "Error deleting shelf";
        }
        break;
}

5. Développement front-end

1. Créez un composant de liste d'étagères : Créez un fichier nommé "ShelfList.vue" sous le dossier "src/components" dans le projet Vue pour afficher le liste des étagères. L'exemple de code est le suivant :

<template>
  <div>
    <h2>货架列表</h2>
    <table>
      <thead>
        <tr>
          <th>货架编号</th>
          <th>描述</th>
          <th>容量</th>
          <th>占用</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="shelf in shelves" :key="shelf.id">
          <td>{{ shelf.shelf_code }}</td>
          <td>{{ shelf.description }}</td>
          <td>{{ shelf.capacity }}</td>
          <td>{{ shelf.occupancy }}</td>
          <td>
            <button @click="editShelf(shelf.id)">编辑</button>
            <button @click="deleteShelf(shelf.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addShelf()">新增货架</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shelves: []
    }
  },
  created() {
    this.fetchShelves();
  },
  methods: {
    fetchShelves() {
      // 发起HTTP请求获取货架数据
      fetch('http://localhost/api/shelf.php')
        .then(response => response.json())
        .then(data => {
          this.shelves = data;
        });
    },
    addShelf() {
      // 打开新增货架对话框
      // ...
    },
    editShelf(id) {
      // 打开编辑货架对话框
      // ...
    },
    deleteShelf(id) {
      // 发起HTTP请求删除货架
      fetch('http://localhost/api/shelf.php', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: id })
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          this.fetchShelves();
        });
    }
  }
}
</script>

2. Interface backend intégrée : créez un fichier nommé "api.js" sous le dossier "src" pour encapsuler l'accès à l'interface backend. L'exemple de code est le suivant :

export function createShelf(shelf) {
  return fetch('http://localhost/api/shelf.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(shelf)
  })
    .then(response => response.text())
    .then(data => {
      console.log(data);
    });
}

// 同理，封装更新货架和删除货架的接口调用方法
// ...

3. Créez les composants de boîte de dialogue d'ajout et de modification d'étagères : créez une interface interactive si nécessaire, utilisez les composants Vue pour implémenter les fonctions d'ajout d'étagères et d'édition d'étagères, et appelez l'interface back-end pour opérations de données.

6. Exécuter et tester
Démarrez le serveur PHP et le serveur de développement Vue, visitez la page du projet dans le navigateur et vous pourrez voir la fonction de gestion des étagères de la gestion de l'entrepôt. Des étagères peuvent être ajoutées, modifiées et supprimées, et la liste sera mise à jour en temps réel.

7. Résumé
Cet article présente comment utiliser PHP et Vue pour développer la fonction de gestion des étagères dans le système de gestion d'entrepôt. En analysant les exigences, en utilisant PHP pour le développement back-end, Vue pour le développement front-end et en effectuant des interactions de données via des interfaces, la fonction d'ajout, de suppression, de modification et de vérification des étagères a finalement été réalisée. Bien sûr, il y aura d'autres fonctions et détails qui devront être encore améliorés et optimisés dans les projets réels. J'espère que les lecteurs pourront mieux développer un système de gestion d'entrepôt qui leur convient sur la base des idées contenues dans cet article.

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!