So verwenden Sie PHP und Vue, um die Frachtverfolgungsfunktion der Lagerverwaltung zu entwickeln
Einführung:
Mit der rasanten Entwicklung des E-Commerce ist die Lagerverwaltung zu einem sehr wichtigen Bindeglied geworden. Um die Effizienz und Genauigkeit der Lagerverwaltung zu verbessern, ist die Entwicklung eines Frachtverfolgungssystems erforderlich. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die Frachtverfolgungsfunktion für die Lagerverwaltung entwickeln, und es werden spezifische Codebeispiele aufgeführt.
1. Technische Vorbereitung
Bevor wir mit der Entwicklung beginnen, müssen wir die folgenden Technologien und Tools vorbereiten:
2. Datenbankdesign
Bevor wir mit dem Schreiben von Code beginnen, müssen wir die Datenbankstruktur entwerfen. Unter Berücksichtigung der Anforderungen der Lagerverwaltung müssen wir die folgenden Tabellen erstellen:
3. Backend-Entwicklung
Datenbank erstellen Verbindung
Zuerst müssen wir in PHP eine Verbindung zur Datenbank herstellen. Dies kann mithilfe der von der MySQLi-Erweiterungsbibliothek bereitgestellten Funktionen erreicht werden:
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "warehouse_management";
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
die("连接数据库失败: " . $conn->connect_error);
}Alle Lagerinformationen abrufen:
$app->get('/warehouses', function () use ($app, $conn) {
$sql = "SELECT * FROM warehouses";
$result = $conn->query($sql);
$warehouses = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$warehouses[] = $row;
}
}
$app->response->headers->set('Content-Type', 'application/json');
echo json_encode($warehouses);
});Frachtinformationen im angegebenen Lager abrufen:
$app->get('/warehouses/:id/goods', function ($id) use ($app, $conn) {
$sql = "SELECT * FROM goods_warehouses WHERE warehouse_id = $id";
$result = $conn->query($sql);
$goods = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$goods[] = $row;
}
}
$app->response->headers->set('Content-Type', 'application/json');
echo json_encode($goods);
});Neue Waren zum angegebenen Lager hinzufügen:
$app->post('/warehouses/:id/goods', function ($id) use ($app, $conn) {
$request = json_decode($app->request->getBody());
$name = $request->name;
$description = $request->description;
$quantity = $request->quantity;
$date = date('Y-m-d H:i:s');
$sql = "INSERT INTO goods_warehouses (warehouse_id, name, description, quantity, date) VALUES ($id, '$name', '$description', $quantity, '$date')";
if ($conn->query($sql) === TRUE) {
$response = array('status' => 'success');
} else {
$response = array('status' => 'error', 'message' => $conn->error);
}
$app->response->headers->set('Content-Type', 'application/json');
echo json_encode($response);
});Warenmenge aktualisieren:
$app->put('/goods/:id/quantity', function ($id) use ($app, $conn) {
$quantity = json_decode($app->request->getBody());
$sql = "UPDATE goods_warehouses SET quantity = $quantity WHERE id = $id";
if ($conn->query($sql) === TRUE) {
$response = array('status' => 'success');
} else {
$response = array('status' => 'error', 'message' => $conn->error);
}
$app->response->headers->set('Content-Type', 'application/json');
echo json_encode($response);
});4. Frontend-Entwicklung
Vue-Anwendung erstellen
Wir müssen Vue verwenden, um die Benutzeroberfläche zu erstellen. Zuerst müssen Sie die Vue-Bibliothek in HTML einführen und eine Vue-Instanz erstellen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仓库管理系统</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 在这里编写Vue模板代码 -->
</div>
<script src="js/app.js"></script>
</body>
</html>Alle Lagerinformationen abrufen:
var app = new Vue({
el: '#app',
data: {
warehouses: []
},
mounted() {
axios.get('/api/warehouses')
.then(response => {
this.warehouses = response.data;
})
.catch(error => {
console.log(error);
});
}
});Wareninformationen im angegebenen Lager abrufen:
var app = new Vue({
el: '#app',
data: {
goods: []
},
mounted() {
var id = 1; // 仓库ID
axios.get('/api/warehouses/' + id + '/goods')
.then(response => {
this.goods = response.data;
})
.catch(error => {
console.log(error);
});
}
});Neue Waren zum angegebenen Lager hinzufügen:
var app = new Vue({
el: '#app',
data: {
name: '',
description: '',
quantity: ''
},
methods: {
addGoods() {
var id = 1; // 仓库ID
axios.post('/api/warehouses/' + id + '/goods', {
name: this.name,
description: this.description,
quantity: this.quantity
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
});Warenmenge aktualisieren:
var app = new Vue({
el: '#app',
data: {
goodsId: '',
quantity: ''
},
methods: {
updateQuantity() {
axios.put('/api/goods/' + this.goodsId + '/quantity', this.quantity)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
}
}); 5. Zusammenfassung
Mithilfe der PHP- und Vue-Entwicklung können wir die Frachtverfolgungsfunktion der Lagerverwaltung problemlos implementieren. PHP bietet die Möglichkeit, mit der Datenbank zu interagieren, und Vue kann uns beim Erstellen von Benutzeroberflächen und beim Senden von API-Anfragen helfen. Dieser Artikel enthält einige spezifische Codebeispiele und hofft, Ihnen bei Ihrer Entwicklungsarbeit behilflich zu sein. Glückliche Entwicklung!
Das obige ist der detaillierte Inhalt vonWie man mit PHP und Vue Frachtverfolgungsfunktionen für die Lagerverwaltung entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
So öffnen Sie eine PHP-Datei
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
