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

How to use PHP and Vue to implement the standard inventory setting function of warehouse management

WBOYOriginal: 2023-09-25 17:15:401298browse

Introduction:
In modern warehouse management, inventory control is a very important part . How to use PHP and Vue to implement the standard inventory setting function of warehouse management has become a question worth studying. This article will introduce how to use PHP and Vue to implement the standard inventory setting function of warehouse management, and provide specific code examples.

1. Preparation
First, we need to build a development environment based on PHP and Vue. You can choose to use a local server, such as XAMPP, etc., or use an online development environment, such as CodePen, JSFiddle, etc. After making sure the environment is running properly, we can start coding.

2. Create a database
First, we need to create a database to store the product information and inventory data of the warehouse. You can use MySQL or other relational databases to create a database named "inventory" and create two tables, "products" and "stock".

Table "products" contains the following fields:

id: product ID (auto-incremented primary key)
name: product name
price: Product price
category: Product category

Table "stock" contains the following fields:

id: Inventory ID (auto-incremented primary key)
product_id: Product ID (foreign key associated to the id field of table "products")
quantity: Product quantity

3. Create a back-end interface
Use PHP To create a back-end interface, let the front-end obtain and modify data in the database through the interface. The following is a simple PHP code example for obtaining the product list and product inventory information:

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "inventory";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取商品列表
$sql = "SELECT * FROM products";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $products = array();
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
    echo json_encode($products);
} else {
    echo "0 结果";
}
// 获取商品的库存信息
$product_id = $_GET['product_id'];
$sql = "SELECT * FROM stock WHERE product_id = $product_id";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    $stock = array();
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
    echo json_encode($stock);
} else {
    echo "0 结果";
}
$conn->close();
?>

4. Create the front-end interface
Use Vue to create the front-end interface, use the axios library to send HTTP requests and Interact with the backend interface. The following is a simple Vue code example for displaying product lists and product inventory information:

<!DOCTYPE html>
<html>
<head>
  <title>仓库管理</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <h1>商品列表</h1>
    <ul>
      <li v-for="product in products" :key="product.id">
        <span>{{ product.name }}</span> -
        <span>{{ product.price }}</span>元 -
        <span>{{ product.category }}</span>
        <button @click="getStock(product.id)">查看库存</button>
      </li>
    </ul>
    <h1>库存信息</h1>
    <ul>
      <li v-for="stock in stockList" :key="stock.id">
        <span>{{ stock.quantity }}</span>件
      </li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        products: [],
        stockList: []
      },
      methods: {
        getProducts() {
          axios.get('backend.php')
            .then(response => {
              this.products = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        },
        getStock(product_id) {
          axios.get(`backend.php?product_id=${product_id}`)
            .then(response => {
              this.stockList = response.data;
            })
            .catch(error => {
              console.log(error);
            });
        }
      },
      mounted() {
        this.getProducts();
      }
    });
  </script>
</body>
</html>

5. Run and test
Save the above PHP code as a "backend.php" file, and Save the Vue code as an "index.html" file. Place these two files in the same directory and open the "index.html" file in the browser to see the product list and inventory information.

6. Summary
Through the above steps, we successfully used PHP and Vue to implement the standard inventory setting function of warehouse management. The product list and inventory information can be displayed through the front-end interface, and the data in the database can be dynamically obtained and modified through the back-end interface. Of course, in actual projects, we can also expand and optimize according to specific needs. I hope the above content is helpful to you, and I wish you better results in warehouse management!

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

php mysql html 接口数据库 http axios

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 use PHP and Vue to implement data backup functionNext article：How to use PHP and Vue to implement data backup function

See more

How to use PHP and Vue to implement the standard inventory setting function of warehouse management

Related articles