Heim > Artikel > Backend-Entwicklung > Wie man mit PHP und Vue Preisverwaltungsfunktionen für die Lagerverwaltung entwickelt
Wie man mit PHP und Vue Preisverwaltungsfunktionen für die Lagerverwaltung entwickelt
- 王林Original
- 2023-09-24 12:33:171177Durchsuche
Wie man mit PHP und Vue die Preisverwaltungsfunktion der Lagerverwaltung entwickelt
In der modernen Logistik-Lagerverwaltung ist das Preismanagement eine entscheidende Funktion. Es kann Lagerleitern und Logistikmitarbeitern dabei helfen, die Preisinformationen von Lagerartikeln genau zu verwalten, um eine angemessene Preisgestaltung und Gewinnkontrolle für Waren zu gewährleisten. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die Preisverwaltungsfunktion im Lagerverwaltungssystem entwickeln, und es werden spezifische Codebeispiele bereitgestellt.
1. Vorbereitung
Bevor Sie beginnen, stellen Sie sicher, dass Sie die PHP- und Vue-Entwicklungsumgebungen installiert haben. Sie können zum Schreiben von Code jeden beliebigen Code-Editor verwenden.
2. Erstellen Sie eine Datenbanktabelle
Zuerst müssen wir eine Datenbanktabelle erstellen, um Preisinformationen zu speichern. Angenommen, unsere Tabelle trägt den Namen prices und enthält die folgenden Felder: prices，包含以下字段：
-
id：价格记录的唯一标识符，自增类型 -
product_name：产品名称，字符串类型 -
price：价格，浮点数类型 -
created_at：记录创建时间，日期时间类型 -
updated_at：记录更新时间，日期时间类型
你可以使用以下SQL语句创建数据库表：
CREATE TABLE `prices` ( `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT, `product_name` VARCHAR(255) NOT NULL, `price` FLOAT NOT NULL, `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP, `updated_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`) ) ENGINE=INNODB;
三、编写后端接口
接下来，我们需要使用PHP编写后端接口来处理价格管理功能。创建一个PHP文件price.php，添加以下代码：
<?php
header('Content-Type: application/json');
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "your_database_name";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// 获取所有价格记录
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
$sql = "SELECT * FROM `prices`";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$prices = [];
while ($row = $result->fetch_assoc()) {
$prices[] = $row;
}
echo json_encode($prices);
} else {
echo "[]";
}
}
// 添加价格记录
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$product_name = $_POST['product_name'];
$price = $_POST['price'];
$sql = "INSERT INTO `prices` (`product_name`, `price`) VALUES ('$product_name', '$price')";
if ($conn->query($sql) === TRUE) {
echo "Price record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// 更新价格记录
if ($_SERVER['REQUEST_METHOD'] === 'PUT') {
parse_str(file_get_contents("php://input"), $put_vars);
$id = $put_vars['id'];
$product_name = $put_vars['product_name'];
$price = $put_vars['price'];
$sql = "UPDATE `prices` SET `product_name`='$product_name', `price`='$price', `updated_at`=CURRENT_TIMESTAMP WHERE `id`='$id'";
if ($conn->query($sql) === TRUE) {
echo "Price record updated successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
// 删除价格记录
if ($_SERVER['REQUEST_METHOD'] === 'DELETE') {
parse_str(file_get_contents("php://input"), $delete_vars);
$id = $delete_vars['id'];
$sql = "DELETE FROM `prices` WHERE `id`='$id'";
if ($conn->query($sql) === TRUE) {
echo "Price record deleted successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>确保将your_database_name替换为你的数据库名，并根据需要修改数据库连接信息。
四、编写前端页面
我们将使用Vue来编写前端页面。创建一个HTML文件index.html，添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>价格管理</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>价格管理</h1>
<form @submit.prevent="addPrice">
<input type="text" placeholder="产品名称" v-model="newPrice.product_name" required>
<input type="number" step="0.01" placeholder="价格" v-model="newPrice.price" required>
<button type="submit">添加</button>
</form>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>价格</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="price in prices" :key="price.id">
<td>{{ price.product_name }}</td>
<td>{{ price.price }}</td>
<td>
<button @click="editPrice(price)">编辑</button>
<button @click="deletePrice(price)">删除</button>
</td>
</tr>
</tbody>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
prices: [],
newPrice: {
product_name: '',
price: ''
},
editPrice: {
id: '',
product_name: '',
price: ''
}
},
created: function() {
this.getPrices();
},
methods: {
getPrices: function() {
axios.get('price.php')
.then(function(response) {
this.prices = response.data;
}.bind(this))
.catch(function(error) {
console.log(error);
});
},
addPrice: function() {
axios.post('price.php', this.newPrice)
.then(function(response) {
console.log(response.data);
this.getPrices();
this.newPrice.product_name = '';
this.newPrice.price = '';
}.bind(this))
.catch(function(error) {
console.log(error);
});
},
editPrice: function(price) {
this.editPrice.id = price.id;
this.editPrice.product_name = price.product_name;
this.editPrice.price = price.price;
},
updatePrice: function() {
axios.put('price.php', this.editPrice)
.then(function(response) {
console.log(response.data);
this.getPrices();
this.editPrice.id = '';
this.editPrice.product_name = '';
this.editPrice.price = '';
}.bind(this))
.catch(function(error) {
console.log(error);
});
},
deletePrice: function(price) {
axios.delete('price.php', { data: price })
.then(function(response) {
console.log(response.data);
this.getPrices();
}.bind(this))
.catch(function(error) {
console.log(error);
});
}
}
});
</script>
</body>
</html>五、运行项目
将price.php和index.html文件放入你的服务器的网站目录中，并启动服务器。然后打开浏览器访问index.html
-
id: die eindeutige Kennung des Preisdatensatzes, Typ der automatischen Erhöhung -
price: Preis, Gleitkommatyp -
created_at: Erstellungszeit, Datum und Uhrzeittyp des Datensatzes -
updated_at: Aktualisierungszeit, Datum und Uhrzeittyp des Datensatzes
product_name: Produktname, String-Typrrreee
3. Schreiben Sie die Back-End-Schnittstelle Als nächstes müssen wir PHP verwenden, um die Back-End-Schnittstelle zu schreiben, um die Preisverwaltungsfunktion zu verwalten. Erstellen Sie eine PHP-Datei price.php und fügen Sie den folgenden Code hinzu:
rrreee
your_database_name durch Ihren Datenbanknamen ersetzen und die Datenbankverbindungsinformationen nach Bedarf ändern. 🎜🎜4. Schreiben Sie die Frontend-Seite🎜Wir werden Vue verwenden, um die Frontend-Seite zu schreiben. Erstellen Sie eine HTML-Datei index.html und fügen Sie den folgenden Code hinzu: 🎜rrreee🎜 5. Führen Sie das Projekt aus 🎜Erstellen Sie price.php und index.html Code> Dateien Legen Sie es im Website-Verzeichnis Ihres Servers ab und starten Sie den Server. Öffnen Sie dann den Browser und besuchen Sie <code>index.html. Dort wird eine einfache Preisverwaltungsseite angezeigt. 🎜🎜Auf der Seite können Sie den Produktnamen und den Preis eingeben und auf die Schaltfläche „Hinzufügen“ klicken, um einen neuen Preisdatensatz hinzuzufügen. Klicken Sie auf die Schaltfläche „Bearbeiten“, um die Preisdatensatzinformationen zu ändern. Klicken Sie auf die Schaltfläche „Löschen“, um den Preisdatensatz zu löschen. 🎜🎜6. Zusammenfassung🎜In diesem Artikel haben wir PHP und Vue verwendet, um die Preisverwaltungsfunktion in einem einfachen Lagerverwaltungssystem zu entwickeln. Mit dieser Funktion können Lagerverwalter Produktpreisinformationen einfach verwalten und eine angemessene Preisgestaltung und Gewinnkontrolle erreichen. Indem wir die Back-End-Schnittstelle und die Front-End-Seite schreiben, zeigen wir, wie PHP und Vue zur Implementierung dieser Funktion verwendet werden, und stellen detaillierte Codebeispiele bereit. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜Das obige ist der detaillierte Inhalt vonWie man mit PHP und Vue Preisverwaltungsfunktionen für die Lagerverwaltung entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- Drei Möglichkeiten, QR-Codes in PHP zu generieren
- So verstehen Sie den Lebenszyklus (Hook-Funktion) in Vue
- Was sind die acht Lebenszykluszustände von Vue?
- So implementieren Sie einen Seitensprung in Vue
- Wie Sie mit Java die Kommissionierungs- und Verteilungsfunktionen des Lagerverwaltungssystems implementieren