PHP와 Vue를 사용하여 창고 관리의 가격 관리 기능을 개발하는 방법
현대 물류 창고 관리에서 가격 관리는 중요한 기능입니다. 창고 관리자 및 물류 담당자가 재고 품목의 가격 정보를 정확하게 관리하여 상품의 합리적인 가격 책정 및 수익 관리에 도움을 줄 수 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 창고 관리 시스템에서 가격 관리 기능을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.
1. 준비
시작하기 전에 PHP 및 Vue 개발 환경이 설치되어 있는지 확인하세요. 원하는 코드 편집기를 사용하여 코드를 작성할 수 있습니다.
2. 데이터베이스 테이블 생성
먼저 가격 정보를 저장할 데이터베이스 테이블을 생성해야 합니다. 테이블 이름이 prices이고 다음 필드가 포함되어 있다고 가정해 보겠습니다. 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: 가격 기록의 고유 식별자, 자동 증가 유형product_name: 제품 이름, 문자열 유형price: 가격, 부동 소수점 유형created_at : 레코드 생성 시간, 날짜 및 시간 유형updated_at: 레코드 업데이트 시간, 날짜 및 시간 유형rrreee
3. 백엔드 인터페이스 작성 다음으로, 가격 관리 기능을 처리하기 위해 PHP를 사용하여 백엔드 인터페이스를 작성해야 합니다. PHP 파일 price.php를 만들고 다음 코드를 추가하세요.
rrreee
your_database_name을 데이터베이스 이름으로 바꾸고 필요에 따라 데이터베이스 연결 정보를 수정하세요. 🎜🎜4. 프런트 엔드 페이지 작성🎜 Vue를 사용하여 프런트 엔드 페이지를 작성하겠습니다. HTML 파일 index.html을 생성하고 다음 코드를 추가합니다: 🎜rrreee🎜 5. 프로젝트를 실행합니다. 🎜price.php 및 index.html을 생성합니다. code> 파일을 서버의 웹사이트 디렉토리에 넣고 서버를 시작합니다. 그런 다음 브라우저를 열고 <code>index.html을 방문하면 간단한 가격 관리 페이지가 표시됩니다. 🎜🎜페이지에서 상품명과 가격을 입력하고 추가 버튼을 클릭하면 새로운 가격 기록을 추가할 수 있습니다. 가격기록 정보를 수정하려면 편집 버튼을 클릭하세요. 삭제 버튼을 클릭하시면 해당 가격 기록이 삭제됩니다. 🎜🎜6. 요약🎜 이번 글에서는 간단한 창고 관리 시스템에서 가격 관리 기능을 개발하기 위해 PHP와 Vue를 사용했습니다. 이 기능을 통해 창고 관리자는 상품 가격 정보를 쉽게 관리할 수 있으며, 합리적인 가격 책정 및 이익 통제를 달성할 수 있습니다. 백엔드 인터페이스와 프런트엔드 페이지를 작성하여 PHP와 Vue를 사용하여 이 기능을 구현하는 방법을 보여주고 자세한 코드 예제를 제공합니다. 이 기사가 도움이 되기를 바랍니다! 🎜위 내용은 PHP와 Vue를 사용하여 창고 관리를 위한 가격 관리 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
