How to use PHP and Vue to implement the sales management function of warehouse management-PHP Tutorial-php.cn

How to use PHP and Vue to implement the sales management function of warehouse management

PHPz

Release： 2023-09-24 11:58:01

Original

1237 people have browsed it

How to use PHP and Vue to implement the sales management function of warehouse management

Introduction:
The sales management function of warehouse management is indispensable in the daily operations of the enterprise part. This article will be based on PHP and Vue, introduce how to use these two technologies to implement the sales management function in a simple warehouse management system, and provide specific code examples.

1. Project preparation
Before we start writing code, we need to do some preparation work.

Make sure you have installed the PHP development environment and have basic knowledge of PHP development;
Make sure you have installed the Vue development environment and have basic Vue development knowledge ;
Create a new PHP project, and create a folder named "sales" in the project as the storage location for the sales management function;
Create under the "sales" folder A file named "index.php" is used to handle sales management requests;
Create a file named "app.js" under the "sales" folder for writing the Vue front-end code.

2. Back-end code writing
First, we need to write PHP code to handle the back-end logic.

In the "index.php" file, add the following code:

<?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);

?>

Copy after login

The above code implements the following functions:

Connect to the database;
Process the request to obtain the sales list;
Process the request to add the sales record.

3. Front-end code writing
Next, we need to write the front-end code for Vue.

In the "app.js" file, add the following code:

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();
 }
});

Copy after login

The above code implements the following functions:

Get sales list;
Add sales record.

4. Page display
Finally, we need to display the sales management function on the page.

In the HTML section of the "index.php" file, add the following code:

<!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>

Copy after login

The above code implements a simple sales management page , including a table for displaying sales records and a form for adding sales records.

5. Summary
By using PHP and Vue technology, we successfully implemented the sales management function of warehouse management. PHP is used to process back-end logic, connect to the database, and provide APIs for front-end calls; Vue is used to write front-end page display and interaction logic. This simple example code can serve as a reference and starting point for you to write more complex warehouse management systems. I hope this article will be helpful to your study and practice!

The above is the detailed content of How to use PHP and Vue to implement the sales management function of warehouse management. For more information, please follow other related articles on the PHP Chinese website!