Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan rak pengurusan gudang
Pengenalan:
Dalam sistem pengurusan gudang moden, pengurusan rak adalah fungsi yang sangat penting. Melalui pengurusan rak yang munasabah, susun atur gudang dan penggunaan ruang penyimpanan dapat dioptimumkan, dan kecekapan dan ketepatan kerja dapat dipertingkatkan. Artikel ini akan memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan rak pengurusan gudang, dan membantu pembaca memahami dan mempraktikkannya melalui contoh kod khusus.
1. Pemilihan tindanan teknologi
Dalam pembangunan sistem pengurusan gudang, PHP dan Vue adalah susunan teknologi yang sangat biasa digunakan. Sebagai bahasa pengaturcaraan bahagian belakang yang popular, PHP menyediakan keupayaan pemprosesan dan pengkomputeran yang berkuasa manakala Vue ialah rangka kerja bahagian hadapan yang popular yang menyediakan pengurusan lapisan paparan yang mudah dan cekap. Menggunakan PHP dan Vue boleh memisahkan logik bahagian hadapan dan bahagian belakang, yang memudahkan kerjasama pasukan dan penyelenggaraan kemudian.
2. Penyediaan projek dan pembinaan persekitaran
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 );
Laksanakan antara muka API: Cipta fail bernama "shelf.php" di bawah folder "api" untuk melaksanakan operasi CRUD pada data rak. Kod sampel adalah seperti berikut:
<?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); }
<?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; }
Antara muka bahagian belakang bersepadu: Buat fail bernama "api.js" di bawah folder "src" untuk merangkum akses antara muka bahagian belakang. Kod sampel adalah seperti berikut:
<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>
Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan rak untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!