Home >Backend Development >PHP Tutorial >How to use PHP and Vue to implement the sales management function of warehouse management

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

PHPzOriginal: 2023-09-24 11:19:411251browse

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

?>

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

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>

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!

php html JS 数据库

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to implement a simple online auction system using PHPNext article：How to implement a simple online auction system using PHP

See more

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

Related articles