Maison > Article > développement back-end > Comment utiliser PHP et Vue pour développer des fonctions de gestion des prix pour la gestion des entrepôts
Comment utiliser PHP et Vue pour développer des fonctions de gestion des prix pour la gestion des entrepôts
- 王林original
- 2023-09-24 12:33:171186parcourir
Comment utiliser PHP et Vue pour développer la fonction de gestion des prix de la gestion d'entrepôt
Dans la gestion d'entrepôt logistique moderne, la gestion des prix est une fonction cruciale. Il peut aider les gestionnaires d'entrepôt et le personnel logistique à gérer avec précision les informations sur les prix des articles en stock pour une tarification raisonnable et un contrôle des bénéfices des marchandises. Cet article expliquera comment utiliser PHP et Vue pour développer la fonction de gestion des prix dans le système de gestion d'entrepôt et fournira des exemples de code spécifiques.
1. Préparation
Avant de commencer, assurez-vous d'avoir installé l'environnement de développement de PHP et Vue. Vous pouvez utiliser n'importe quel éditeur de code avec lequel vous souhaitez écrire du code.
2. Créer une table de base de données
Tout d'abord, nous devons créer une table de base de données pour stocker les informations sur les prix. Supposons que notre table s'appelle prices et contienne les champs suivants : 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: l'identifiant unique de l'enregistrement de prix, type d'auto-incrémentation -
prix: prix, type à virgule flottante created_at : heure de création de l'enregistrement, date et type d'heure-
updated_at: heure de mise à jour de l'enregistrement, date et type d'heure
nom_produit : nom du produit, type de chaînerrreee
3. Écrivez l'interface back-end Ensuite, nous devons utiliser PHP pour écrire l'interface back-end afin de gérer la fonction de gestion des prix. Créez un fichier PHP price.php et ajoutez le code suivant :
rrreee
your_database_name par le nom de votre base de données et modifiez les informations de connexion à la base de données si nécessaire. 🎜🎜4. Écrivez la page front-end🎜Nous utiliserons Vue pour écrire la page front-end. Créez un fichier HTML index.html et ajoutez le code suivant : 🎜rrreee🎜 5. Exécutez le projet 🎜Créez le price.php et le index.html code> fichiers Placez-le dans le répertoire du site Web de votre serveur et démarrez le serveur. Ensuite, ouvrez le navigateur et visitez <code>index.html, et vous verrez une simple page de gestion des prix. 🎜🎜Sur la page, vous pouvez saisir le nom et le prix du produit, puis cliquer sur le bouton Ajouter pour ajouter un nouvel enregistrement de prix. Cliquez sur le bouton Modifier pour modifier les informations de l'enregistrement de prix. Cliquez sur le bouton Supprimer pour supprimer l'enregistrement de prix. 🎜🎜6. Résumé🎜Dans cet article, nous avons utilisé PHP et Vue pour développer la fonction de gestion des prix dans un système de gestion d'entrepôt simple. Grâce à cette fonction, les administrateurs d'entrepôt peuvent facilement gérer les informations sur les prix des produits et obtenir un contrôle raisonnable des prix et des bénéfices. En écrivant l'interface back-end et la page front-end, nous montrons comment utiliser PHP et Vue pour implémenter cette fonction et fournissons des exemples de code détaillés. J'espère que cet article vous sera utile ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Articles Liés
Voir plus- Trois façons de générer des codes QR en php
- Comment comprendre le cycle de vie (fonction hook) dans vue
- Quels sont les huit états du cycle de vie de Vue ?
- Comment implémenter le saut de page dans vue
- Comment utiliser Java pour implémenter les fonctions de prélèvement et de distribution du système de gestion d'entrepôt