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: 레코드 업데이트 시간, 날짜 및 시간 유형
을 사용할 수 있습니다. 데이터베이스 테이블을 생성하려면 다음 SQL 문을 따르세요.
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)
