How to use PHP and Vue to develop inventory management functions for warehouse management

How to use PHP and Vue to develop the inventory management function of warehouse management

Introduction:
With the development of e-commerce and O2O industries, warehouse management is very important to enterprises. Operational efficiency and user experience are becoming increasingly important. In order to achieve efficient operation of warehouse management, we can use PHP and Vue to build an inventory management system. This article will introduce in detail how to use PHP and Vue to develop the inventory management function of warehouse management, and provide specific code examples.

1. Create a database table
First, we need to create a database table to store data related to warehouse management. In this example, we will create two tables, products and inventory.

1. products Table

   CREATE TABLE products (
     id INT(11) NOT NULL AUTO_INCREMENT,
     name VARCHAR(100) NOT NULL,
     price DECIMAL(10, 2) NOT NULL,
     PRIMARY KEY (id)
   );

2. ##inventory Table

   CREATE TABLE inventory (
     id INT(11) NOT NULL AUTO_INCREMENT,
     product_id INT(11) NOT NULL,
     quantity INT(11) NOT NULL,
     PRIMARY KEY (id),
     FOREIGN KEY (product_id) REFERENCES products(id) ON DELETE CASCADE
   );

2. Back-end development

Next, we use PHP to develop the back-end interface, which is used to handle front-end requests and interact with the database.

1. Connect to database

   <?php
   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "inventory";
   
   $conn = new mysqli($servername, $username, $password, $dbname);
   if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
   }
   ?>

2. Get product list

   <?php
   $sql = "SELECT * FROM products";
   $result = $conn->query($sql);
   $products = array();
   
   if ($result->num_rows > 0) {
     while($row = $result->fetch_assoc()) {
       array_push($products, $row);
     }
   }
   
   echo json_encode($products);
   ?>

3. Update inventory quantity

   <?php
   $data = json_decode(file_get_contents("php://input"), true);
   $productId = $data['product']['id'];
   $quantity = $data['product']['quantity'];
   
   $sql = "UPDATE inventory SET quantity = '$quantity' WHERE product_id = '$productId'";
   $result = $conn->query($sql);
   
   if ($result) {
     echo "success";
   } else {
     echo "error";
   }
   ?>

3. Front-end development

In the front-end part, we use Vue to build the user interface and implement the inventory management function by calling the back-end interface.

1. Get the product list and display it

   <template>
     <div>
       <h2 id="产品列表">产品列表</h2>
       <ul>
         <li v-for="product in products" :key="product.id">
           {{ product.name }} - ￥{{ product.price }}
           <input type="number" v-model="product.quantity" @change="updateInventory(product)">
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         products: []
       };
     },
     mounted() {
       this.fetchProducts();
     },
     methods: {
       fetchProducts() {
         // 使用axios发送GET请求获取产品列表数据
         axios.get('/api/getProducts')
           .then(response => {
             this.products = response.data;
         })
       },
       updateInventory(product) {
         // 使用axios发送POST请求更新库存数量
         axios.post('/api/updateInventory', { product: product })
           .then(response => {
             if (response.data === 'success') {
               alert('库存数量更新成功');
             } else {
               alert('库存数量更新失败');
             }
         })
       }
     }
   };
   </script>

2. Create a Vue instance

   import Vue from 'vue';
   import Products from './components/Products.vue';
   
   new Vue({
     render: h => h(Products)
   }).$mount('#app');

4. Run the project

Deploy the back-end code
1. Place the back-end code in a suitable PHP server directory and start the PHP server.
   
Configuring the front-end code
2. Place the front-end code in a suitable directory and use Vue CLI or other tools to build and package it.
   
Run the project
3. Open the browser and access the entry file of the project to see the product list and inventory quantity update function.
   

Conclusion:

Through this article, we learned how to use PHP and Vue to develop the inventory management function of warehouse management. We first created a database table and used PHP to write a back-end interface to implement the functions of obtaining product lists and updating inventory quantities. Then, we used Vue to build the user interface and implemented the inventory management function by calling the backend interface. I hope this article can help readers better understand and apply PHP and Vue to develop inventory management functions for warehouse management.

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