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

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

Introduction:
In modern warehouse management systems, shelf management is a very important Function. Through reasonable management of shelves, the layout of the warehouse and the utilization of storage space can be optimized, and work efficiency and accuracy can be improved. This article will introduce how to use PHP and Vue to develop the shelf management function of warehouse management, and help readers understand and practice it through specific code examples.

1. Technology stack selection
In the development of warehouse management systems, PHP and Vue are very commonly used technology stacks. As a popular back-end programming language, PHP provides powerful processing and computing capabilities; while Vue is a popular front-end framework that provides simple and efficient view layer management. Using PHP and Vue can well separate the front-end and back-end logic, which facilitates team collaboration and later maintenance.

2. Project preparation and environment construction

1. Download and install PHP and Vue related environments: For PHP, select PHP 7 or above, and for Vue, select Vue CLI;
2. Initialization Vue project: Use the command line tool to enter the project directory and execute the command "vue create shelf-management";
3. Create PHP backend: Create a folder named "api" in the project root directory for Store PHP backend related files.

3. Database design
The shelf management function requires the storage and management of shelf information, so the corresponding database structure needs to be designed. In the example, we create a database named "shelf_management" and a table named "shelf". The table structure is as follows:

CREATE TABLE `shelf` (
  `id` int(11) PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `shelf_code` varchar(32) NOT NULL,
  `description` varchar(255) DEFAULT NULL,
  `capacity` int(11) NOT NULL,
  `occupancy` int(11) NOT NULL
);

4. Back-end development

1. Connection Database: Create a file named "db.php" under the "api" folder to connect to the database. The sample code is as follows:

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

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

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

2. Implement the API interface: Create a file named "shelf.php" under the "api" folder to implement CRUD operations on shelf data. The sample code is as follows:

<?php
include 'db.php';

// 获取所有货架数据
function getAllShelves() {
    global $conn;
    $sql = "SELECT * FROM shelf";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        $rows = array();
        while($row = $result->fetch_assoc()) {
            $rows[] = $row;
        }
        return $rows;
    } else {
        return [];
    }
}

// 创建货架
function createShelf($shelf_code, $description, $capacity, $occupancy) {
    global $conn;
    $sql = "INSERT INTO shelf (shelf_code, description, capacity, occupancy)
            VALUES ('$shelf_code','$description','$capacity','$occupancy')";

    if ($conn->query($sql) === TRUE) {
        return true;
    } else {
        return false;
    }
}

// 更新货架
function updateShelf($id, $shelf_code, $description, $capacity, $occupancy) {
    global $conn;
    $sql = "UPDATE shelf SET shelf_code='$shelf_code', description='$description',
            capacity='$capacity', occupancy='$occupancy' WHERE id='$id'";

    if ($conn->query($sql) === TRUE) {
        return true;
    } else {
        return false;
    }
}

// 删除货架
function deleteShelf($id) {
    global $conn;
    $sql = "DELETE FROM shelf WHERE id='$id'";

    if ($conn->query($sql) === TRUE) {
        return true;
    } else {
        return false;
    }
}

// 路由处理
switch ($_SERVER["REQUEST_METHOD"]) {
    case 'GET':
        // 处理获取所有货架数据请求
        echo json_encode(getAllShelves());
        break;
    case 'POST':
        // 处理创建货架请求
        $input = json_decode(file_get_contents('php://input'), true);
        $shelf_code = $input["shelf_code"];
        $description = $input["description"];
        $capacity = $input["capacity"];
        $occupancy = $input["occupancy"];
        if (createShelf($shelf_code, $description, $capacity, $occupancy)) {
            echo "Shelf created successfully";
        } else {
            echo "Error creating shelf";
        }
        break;
    case 'PUT':
        // 处理更新货架请求
        $input = json_decode(file_get_contents('php://input'), true);
        $id = $input["id"];
        $shelf_code = $input["shelf_code"];
        $description = $input["description"];
        $capacity = $input["capacity"];
        $occupancy = $input["occupancy"];
        if (updateShelf($id, $shelf_code, $description, $capacity, $occupancy)) {
            echo "Shelf updated successfully";
        } else {
            echo "Error updating shelf";
        }
        break;
    case 'DELETE':
        // 处理删除货架请求
        $input = json_decode(file_get_contents('php://input'), true);
        $id = $input["id"];
        if (deleteShelf($id)) {
            echo "Shelf deleted successfully";
        } else {
            echo "Error deleting shelf";
        }
        break;
}

5. Front-end development

1. Create a shelf list component: Create a file named "under the "src/components" folder in the Vue project ShelfList.vue" file, used to display the shelf list. The sample code is as follows:

<template>
  <div>
    <h2 id="货架列表">货架列表</h2>
    <table>
      <thead>
        <tr>
          <th>货架编号</th>
          <th>描述</th>
          <th>容量</th>
          <th>占用</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="shelf in shelves" :key="shelf.id">
          <td>{{ shelf.shelf_code }}</td>
          <td>{{ shelf.description }}</td>
          <td>{{ shelf.capacity }}</td>
          <td>{{ shelf.occupancy }}</td>
          <td>
            <button @click="editShelf(shelf.id)">编辑</button>
            <button @click="deleteShelf(shelf.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <button @click="addShelf()">新增货架</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shelves: []
    }
  },
  created() {
    this.fetchShelves();
  },
  methods: {
    fetchShelves() {
      // 发起HTTP请求获取货架数据
      fetch('http://localhost/api/shelf.php')
        .then(response => response.json())
        .then(data => {
          this.shelves = data;
        });
    },
    addShelf() {
      // 打开新增货架对话框
      // ...
    },
    editShelf(id) {
      // 打开编辑货架对话框
      // ...
    },
    deleteShelf(id) {
      // 发起HTTP请求删除货架
      fetch('http://localhost/api/shelf.php', {
        method: 'DELETE',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: id })
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          this.fetchShelves();
        });
    }
  }
}
</script>

2. Integrated backend interface: Create a file named "api.js" under the "src" folder to encapsulate backend interface access. The sample code is as follows:

export function createShelf(shelf) {
  return fetch('http://localhost/api/shelf.php', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(shelf)
  })
    .then(response => response.text())
    .then(data => {
      console.log(data);
    });
}

// 同理，封装更新货架和删除货架的接口调用方法
// ...

3. Create new and edit shelf dialog components: Create an interactive interface as needed, use Vue components to implement the functions of adding new shelves and editing shelves, and call the backend interface for data operations.

6. Run and test
Start the PHP server and Vue development server, visit the project page in the browser, and you can see the shelf management function of the warehouse management. Shelves can be added, edited and deleted, and the list will be updated in real time.

7. Summary
This article introduces how to use PHP and Vue to develop the shelf management function in the warehouse management system. By analyzing the requirements, using PHP for back-end development, Vue for front-end development, and conducting data interaction through interfaces, the function of adding, deleting, modifying and checking the shelves was finally realized. Of course, there will be other functions and details that need to be further improved and optimized in actual projects. I hope readers can better develop a warehouse management system that suits them based on the ideas in this article.

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