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
- Muat turun dan pasang persekitaran berkaitan PHP dan Vue: pilih PHP 7 atau lebih tinggi untuk PHP, dan pilih Vue CLI untuk Vue
- Mulakan projek Vue: gunakan alat baris arahan untuk masuk direktori projek dan laksanakan arahan" vue create shelf-management";
- 3. Reka bentuk pangkalan data
Fungsi pengurusan rak memerlukan penyimpanan dan pengurusan maklumat rak, jadi struktur pangkalan data yang sepadan perlu direka bentuk. Dalam contoh, kami mencipta pangkalan data bernama "shelf_management" dan jadual bernama "shelf". " folder Fail bernama "db.php" digunakan untuk menyambung ke pangkalan data. Kod sampel adalah seperti berikut:
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
);
Salin selepas log masuk
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);
}Salin selepas log masuk
- 5. Pembangunan bahagian hadapan
Buat komponen senarai rak: Buat fail bernama "ShelfList.vue" di bawah folder "src/components" dalam projek Vue untuk memaparkan senarai rak. Kod sampel adalah seperti berikut: <?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;
}Salin selepas log masuk
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>Salin selepas log masuk
- Buat komponen dialog tambah dan edit rak: Cipta antara muka interaktif seperti yang diperlukan, gunakan komponen Vue untuk melaksanakan fungsi menambah rak dan mengedit rak, dan panggil antara muka bahagian belakang untuk operasi data.
- 6. Jalankan dan uji
Mulakan pelayan PHP dan pelayan pembangunan Vue, lawati halaman projek dalam penyemak imbas, dan anda boleh melihat fungsi pengurusan rak pengurusan gudang. Rak boleh ditambah, diedit dan dipadam, dan senarai akan dikemas kini dalam masa nyata.
7. Ringkasan- Artikel ini memperkenalkan cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan rak dalam sistem pengurusan gudang. Dengan menganalisis keperluan, menggunakan PHP untuk pembangunan bahagian belakang, Vue untuk pembangunan bahagian hadapan, dan menjalankan interaksi data melalui antara muka, fungsi menambah, memadam, mengubah suai dan menyemak rak akhirnya direalisasikan. Sudah tentu, akan ada fungsi dan butiran lain yang perlu ditambah baik dan dioptimumkan dalam projek sebenar Saya berharap pembaca dapat membangunkan sistem pengurusan gudang yang sesuai dengan mereka berdasarkan idea dalam artikel ini.
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
