How to use PHP and Vue to develop cargo classification management functions for warehouse management

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

Introduction:
In modern logistics management, warehouse management plays a vital role effect. Among them, classification management of goods is an indispensable part of improving warehouse efficiency. This article will introduce how to use PHP and Vue to develop a simple warehouse management system to implement the classification management function of goods.

1. Technical preparation:

1. PHP back-end development environment construction (such as Apache server, MySQL database, etc.)
2. Vue front-end development environment construction (such as Node. js, Vue CLI, etc.)
3. Basic HTML, CSS and JavaScript knowledge

2. Database design:
Create two tables in the MySQL database: categories (goods classification table) and products (goods table). The specific table structure is as follows:

categories table:

• id: primary key, auto-increment
• name: category name

products table ：

• id: primary key, auto-increment
• name: name of goods
• category_id: foreign key of the category to which it belongs

3. Back-end development (PHP):

1. Create database connection:

   <?php
   $con=mysqli_connect("localhost","my_user","my_password","my_db");
   if (mysqli_connect_errno()){
     echo "Failed to connect to MySQL: " . mysqli_connect_error();
   }
   ?>

2. Create an interface to obtain the classification list:

   <?php
   $sql = "SELECT * FROM categories";
   $result = mysqli_query($con, $sql);
   
   $data = [];
   while($row = mysqli_fetch_array($result)){
     $data[] = $row;
   }
   
   echo json_encode($data);
   ?>

3. Create an interface to obtain a list of goods under a certain category:

   <?php
   $category_id = $_GET['category_id'];
   $sql = "SELECT * FROM products WHERE category_id = '$category_id'";
   $result = mysqli_query($con, $sql);
   
   $data = [];
   while($row = mysqli_fetch_array($result)){
     $data[] = $row;
   }
   
   echo json_encode($data);
   ?>

4. Create an interface to add goods:

   <?php
   $name = $_POST['name'];
   $category_id = $_POST['category_id'];
   
   $sql = "INSERT INTO products (name, category_id) VALUES ('$name', '$category_id')";
   if(mysqli_query($con, $sql)){
     echo "Product added successfully";
   }
   else{
     echo "Error: " . mysqli_error($con);
   }
   
   mysqli_close($con);
   ?>

IV , Front-end development (Vue):

1. Create the main page of warehouse management:

   <template>
     <div class="container">
    <h1>仓库管理系统</h1>
    <div class="categories">
      <h2>货物分类</h2>
      <ul>
        <li v-for="category in categories" :key="category.id" @click="getProducts(category.id)">
          {{ category.name }}
        </li>
      </ul>
    </div>
    <div class="products">
      <h2>货物列表</h2>
      <ul>
        <li v-for="product in products" :key="product.id">
          {{ product.name }}
        </li>
      </ul>
      <form @submit="addProduct">
        <input type="text" v-model="productName" placeholder="货物名称">
        <select v-model="selectedCategory">
          <option v-for="category in categories" :key="category.id" :value="category.id">
            {{ category.name }}
          </option>
        </select>
        <button type="submit">添加货物</button>
      </form>
    </div>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      categories: [],
      products: [],
      selectedCategory: '',
      productName: ''
    }
     },
     mounted() {
    this.getCategories();
     },
     methods: {
    getCategories() {
      // 发送GET请求获取分类列表
      // 更新categories数据
    },
    getProducts(categoryId) {
      // 发送GET请求获取某个分类下的货物列表
      // 更新products数据
    },
    addProduct(e) {
      e.preventDefault();
      // 发送POST请求添加新的货物
      // 更新products数据
      this.productName = '';
      this.selectedCategory = '';
    }
     }
   }
   </script>

5. Run the project:

1. The back-end project is deployed to the PHP server.
2. The front-end project is packaged using Vue CLI, and then the generated index.html file is opened in the browser.

Conclusion:
By using PHP and Vue, we can easily develop the cargo classification management function of warehouse management. This article provides specific code examples, hoping to help readers apply related technologies in actual projects. Of course, in addition to the above examples, you can also perform more functional expansion and optimization according to actual needs. Happy coding!

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