So implementieren Sie mit PHP und Vue die Vertriebsmanagementfunktion der Lagerverwaltung
Einführung:
Die Vertriebsmanagementfunktion der Lagerverwaltung ist ein unverzichtbarer Bestandteil des täglichen Betriebs eines Unternehmens. Dieser Artikel basiert auf PHP und Vue, stellt vor, wie diese beiden Technologien zur Implementierung der Vertriebsmanagementfunktion in einem einfachen Lagerverwaltungssystem verwendet werden, und stellt spezifische Codebeispiele bereit.
1. Projektvorbereitung
Bevor wir mit dem Schreiben von Code beginnen, müssen wir einige Vorbereitungen treffen.
- Stellen Sie sicher, dass Sie die PHP-Entwicklungsumgebung installiert haben und über Grundkenntnisse in der PHP-Entwicklung verfügen.
- Stellen Sie sicher, dass Sie die Vue-Entwicklungsumgebung installiert haben und über Grundkenntnisse in der Vue-Entwicklung verfügen.
- Erstellen Sie ein neues PHP-Projekt und erstellen Sie einen Ordner Benennen Sie im Projekt „Sales“ als Speicherort der Vertriebsmanagementfunktion.
- Erstellen Sie eine Datei mit dem Namen „index.php“ im Ordner „Sales“, um Vertriebsmanagementanfragen zu verarbeiten.
- Erstellen Sie eine Datei mit dem Namen „app.js“. " im Ordner „sales“ zum Schreiben des Vue-Frontend-Codes.
2. Backend-Code schreiben
Zuerst müssen wir PHP-Code schreiben, um die Backend-Logik zu verwalten.
-
Fügen Sie in der Datei „index.php“ den folgenden Code hinzu:
<?php
// 1. 连接数据库
$db_host = "localhost";
$db_username = "root";
$db_password = "";
$db_name = "sales_db";
$conn = mysqli_connect($db_host, $db_username, $db_password, $db_name);
if (!$conn) {
die("数据库连接失败：" . mysqli_connect_error());
}
// 2. 处理获取销售列表的请求
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$sql = "SELECT * FROM sales";
$result = mysqli_query($conn, $sql);
$sales = array();
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
array_push($sales, $row);
}
}
echo json_encode($sales);
}
// 3. 处理添加销售记录的请求
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$product_name = $_POST["product_name"];
$quantity = $_POST["quantity"];
$price = $_POST["price"];
$sql = "INSERT INTO sales (product_name, quantity, price) VALUES ('$product_name', $quantity, $price)";
if (mysqli_query($conn, $sql)) {
echo "销售记录添加成功！";
} else {
echo "销售记录添加失败：" . mysqli_error($conn);
}
}
// 4. 关闭数据库连接
mysqli_close($conn);
?>Nach dem Login kopieren
Der obige Code implementiert die folgenden Funktionen:
- Verbinden Sie sich mit der Datenbank;
- Verarbeiten Sie die Anfrage, um die Verkaufsliste zu erhalten;
- Verarbeiten Sie die Anfrage zum Hinzufügen von Verkaufsunterlagen.
3. Schreiben des Frontend-Codes
Als nächstes müssen wir den Frontend-Code für Vue schreiben.
Fügen Sie in der Datei „app.js“ den folgenden Code hinzu:
new Vue({
el: '#app',
data: {
sales: [],
product_name: '',
quantity: '',
price: ''
},
methods: {
getSales: function() {
axios.get('sales/index.php')
.then(response => {
this.sales = response.data;
})
.catch(error => {
console.log(error);
});
},
addSale: function() {
axios.post('sales/index.php', {
product_name: this.product_name,
quantity: this.quantity,
price: this.price
})
.then(response => {
alert(response.data);
this.getSales();
})
.catch(error => {
console.log(error);
});
}
},
mounted: function() {
this.getSales();
}
});Nach dem Login kopieren
Der obige Code implementiert die folgenden Funktionen:
- Abrufen der Verkaufsliste;
- Verkaufsdatensätze hinzufügen.
4. Seitenanzeige
Zuletzt müssen wir die Vertriebsmanagementfunktion auf der Seite anzeigen.
Fügen Sie im HTML-Abschnitt der Datei „index.php“ den folgenden Code hinzu:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>销售管理</title>
</head>
<body>
<div id="app">
<h1>销售管理</h1>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>数量</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr v-for="sale in sales" :key="sale.id">
<td>{{ sale.product_name }}</td>
<td>{{ sale.quantity }}</td>
<td>{{ sale.price }}</td>
</tr>
</tbody>
</table>
<form @submit.prevent="addSale">
<input type="text" v-model="product_name" placeholder="产品名称" required>
<input type="number" v-model="quantity" placeholder="数量" required>
<input type="number" v-model="price" placeholder="价格" required>
<button type="submit">添加销售记录</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="app.js"></script>
</body>
</html>Nach dem Login kopieren
Der obige Code implementiert eine einfache Verkaufsverwaltungsseite, einschließlich einer Tabelle mit Verkaufsdatensätzen und eines Formulars zum Hinzufügen von Verkaufsdatensätzen .
5. Zusammenfassung
Durch den Einsatz von PHP- und Vue-Technologie haben wir die Vertriebsmanagementfunktion der Lagerverwaltung erfolgreich implementiert. PHP wird verwendet, um die Back-End-Logik zu verarbeiten, eine Verbindung zur Datenbank herzustellen und APIs für Front-End-Aufrufe bereitzustellen. Vue wird zum Schreiben der Front-End-Seitenanzeige- und Interaktionslogik verwendet. Dieser einfache Beispielcode kann als Referenz und Ausgangspunkt für die Entwicklung komplexerer Lagerverwaltungssysteme dienen. Ich hoffe, dass dieser Artikel für Ihr Studium und Ihre Praxis hilfreich sein wird!
Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit PHP und Vue die Vertriebsmanagementfunktion der Lagerverwaltung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
