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

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

In modern business operations, warehouse management is a crucial link. An efficient inventory counting system can help companies achieve precise inventory control and improve operational efficiency. This article will introduce how to use PHP and Vue to develop the inventory counting function of warehouse management, and provide specific code examples.

First, we need to establish a basic database structure. We can create a database named "inventory" and create two tables in it, one is the "products" table to store product information, and the other is the "stock" table to store inventory information.

The structure of the "products" table is as follows:

CREATE TABLE `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  PRIMARY KEY (`id`)
);

The structure of the "stock" table is as follows:

CREATE TABLE `stock` (
  `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`)
);

Next, we can use PHP to write the backend API to handle requests initiated by the front end. First, we need to create a file "db.php" for connecting to the database, its content is as follows:

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "inventory";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

Then, we can create a file named "products.php" for processing product-related request. Here is a sample code to get all products:

<?php
include 'db.php';

$sql = "SELECT * FROM products";
$result = $conn->query($sql);

$products = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
}

echo json_encode($products);

Similarly, we can create a file called "stock.php" to handle inventory related requests. Here is a sample code to get all inventory information:

<?php
include 'db.php';

$sql = "SELECT stock.id, products.name, stock.quantity FROM stock JOIN products ON stock.product_id = products.id";
$result = $conn->query($sql);

$stock = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
}

echo json_encode($stock);

Now, we can use Vue to build the front-end interface and communicate with the back-end API through Ajax requests. The following is a code example of a Vue component that displays a product list:

<template>
  <div>
    <h2 id="产品列表">产品列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('/products.php').then(response => {
        this.products = response.data;
      });
    }
  }
}
</script>

Similarly, we can create a Vue component that displays inventory information. The following is a code example of a Vue component that obtains inventory information and displays it:

<template>
  <div>
    <h2 id="库存信息">库存信息</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>产品名称</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in stock" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stock: []
    };
  },
  mounted() {
    this.fetchStock();
  },
  methods: {
    fetchStock() {
      axios.get('/stock.php').then(response => {
        this.stock = response.data;
      });
    }
  }
}
</script>

In summary, using PHP and Vue to develop the inventory counting function of warehouse management can help companies achieve accurate inventory management. By writing the back-end API in PHP and combining it with Vue to build the front-end interface, we can easily implement the functions of product display and inventory information display, and interact with the back-end database. I hope the code examples provided in this article will be helpful to your development work.

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