如何以PHP和Vue實現倉庫管理的銷售管理功能
#簡介：
倉庫管理的銷售管理功能是企業日常營運中不可或缺的一部分。本文將以PHP和Vue為基礎，介紹如何利用這兩種技術實現一個簡單的倉庫管理系統中的銷售管理功能，並提供具體的程式碼範例。
一、專案準備
在開始寫程式碼之前，我們需要做一些準備工作。
- 確保你已經安裝好PHP的開發環境，並具備PHP開發的基礎知識；
- 確保你已經安裝好Vue的開發環境，並具備基本的Vue開發知識;
- 建立一個新的PHP項目，並在項目中建立一個名為"sales"的資料夾作為銷售管理功能的存放位置；
- 在"sales"資料夾下建立一個名為"index.php"的文件，用於處理銷售管理的請求；
- 在"sales"資料夾下建立一個名為"app.js"的文件，用於編寫Vue的前端代碼。
二、後端程式編寫
首先，我們需要寫PHP程式碼來處理後端的邏輯。
-
在"index.php"檔案中，加入以下程式碼：
<?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);
?>登入後複製
##以上程式碼實作了以下功能：
連接資料庫；處理取得銷售清單的請求；處理新增銷售記錄的請求。
三、前端程式碼寫
接下來，我們需要寫Vue的前端程式碼。
- 在"app.js"檔案中，加入以下程式碼：
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();
}
});登入後複製
##以上程式碼實作了以下功能：
取得銷售清單；
最後，我們需要在頁面上展示銷售管理的功能。
在"index.php"檔案的HTML部分，新增以下程式碼：<!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>登入後複製
五、總結
透過使用PHP和Vue技術，我們成功實現了倉庫管理的銷售管理功能。 PHP用來處理後端的邏輯，連接資料庫，並提供API供前端呼叫；Vue用於編寫前端的頁面展示和互動邏輯。這個簡單的範例程式碼可以作為你編寫更複雜的倉庫管理系統的參考和起點。希望這篇文章對於你的學習和實踐有所幫助！
以上是如何用PHP和Vue實現倉庫管理的銷售管理功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！
