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

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

In the current increasingly competitive market environment, warehouse management is crucial to the operation of the enterprise . In order to ensure the smooth operation and safe management of warehouses, many companies use technical means to carry out systematic management. This article will introduce the specific method of using PHP and Vue to develop warehouse security management functions, and provide code examples.

Step 1: Set up a development environment
To start using PHP and Vue to develop warehouse security management functions, you first need to set up a corresponding development environment. You need to install the PHP server and Vue development tools on your computer. It is recommended to use XAMPP as the PHP server and Visual Studio Code as the Vue development tool. Make sure you have installed these software correctly and can successfully start the PHP server and Vue development tools.

Step 2: Create database and data table
Before developing the warehouse management function in PHP and Vue, we need to create the corresponding database and data table to store relevant data. Open phpMyAdmin or other database management tools, create a new database, and create a data table named "warehouses" in the database.

The structure of the data table "warehouses" is as follows:

CREATE TABLE `warehouses` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `location` varchar(255) NOT NULL,
  `security_level` int(11) NOT NULL,
  PRIMARY KEY (`id`)
);

Step 3: Write PHP back-end code
Next, we will write PHP back-end code to handle warehouse management related operations . Create a folder named "api" in your project directory, and create a PHP file named "warehouses.php" in that folder. In this file, we will implement the add, delete, modify, and query functions of the warehouse.

In "warehouses.php", we need to use PHP's "mysqli" extension library to connect to the database and write related APIs. The following is a sample code for "warehouses.php":

<?php
  $db_host = "localhost";  // 数据库主机名
  $db_user = "root";       // 数据库用户名
  $db_password = "";       // 数据库密码
  $db_name = "your_database_name";  // 数据库名称

  // 连接数据库
  $conn = new mysqli($db_host, $db_user, $db_password, $db_name);

  // 检查连接是否成功
  if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
  }

  // 处理GET请求，获取仓库列表
  if ($_SERVER["REQUEST_METHOD"] === "GET") {
    $result = $conn->query("SELECT * FROM warehouses");
    $warehouses = [];
    while ($row = $result->fetch_assoc()) {
      $warehouses[] = $row;
    }
    echo json_encode($warehouses);
  }

  // 处理POST请求，添加新的仓库
  if ($_SERVER["REQUEST_METHOD"] === "POST") {
    $name = $_POST["name"];
    $location = $_POST["location"];
    $security_level = $_POST["security_level"];
    $sql = "INSERT INTO warehouses (name, location, security_level) VALUES ('$name', '$location', '$security_level')";
    if ($conn->query($sql) === TRUE) {
      echo "New warehouse added successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 处理DELETE请求，删除仓库
  if ($_SERVER["REQUEST_METHOD"] === "DELETE") {
    $id = $_GET["id"];
    $sql = "DELETE FROM warehouses WHERE id=$id";
    if ($conn->query($sql) === TRUE) {
      echo "Warehouse deleted successfully";
    } else {
      echo "Error: " . $sql . "<br>" . $conn->error;
    }
  }

  // 关闭数据库连接
  $conn->close();
?>

Step 4: Write Vue front-end code
Now, we will write Vue front-end code to interact with the backend and display relevant information about the warehouse. Create a folder named "src" in your project directory, and create a Vue component file named "Warehouse.vue" in this folder.

In "Warehouse.vue", we will use Vue's "axios" library to send HTTP requests and render the warehouse list. The following is the sample code of "Warehouse.vue":

<template>
  <div>
    <h2 id="Warehouse-List">Warehouse List</h2>
    <ul>
      <li v-for="warehouse in warehouses" :key="warehouse.id">
        <span>{{ warehouse.name }}</span>
        <span>{{ warehouse.location }}</span>
        <span>{{ warehouse.security_level }}</span>
        <button @click="deleteWarehouse(warehouse.id)">Delete</button>
      </li>
    </ul>
    <h2 id="Add-New-Warehouse">Add New Warehouse</h2>
    <form @submit.prevent="addWarehouse">
      <input type="text" v-model="name" placeholder="Name" required>
      <input type="text" v-model="location" placeholder="Location" required>
      <input type="number" v-model="security_level" placeholder="Security Level" required>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
  import axios from 'axios';

  export default {
    data() {
      return {
        warehouses: [],
        name: '',
        location: '',
        security_level: 0
      };
    },
    methods: {
      fetchWarehouses() {
        axios.get('api/warehouses.php')
          .then(response => {
            this.warehouses = response.data;
          })
          .catch(error => {
            console.log(error);
          });
      },
      addWarehouse() {
        axios.post('api/warehouses.php', {
          name: this.name,
          location: this.location,
          security_level: this.security_level
        })
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      },
      deleteWarehouse(id) {
        axios.delete(`api/warehouses.php?id=${id}`)
          .then(response => {
            console.log(response.data);
            this.fetchWarehouses();
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    mounted() {
      this.fetchWarehouses();
    }
  }
</script>

Step 5: Run the application
Now, we have completed the code writing of the warehouse security management function using PHP and Vue to develop warehouse management. You can use the command line to enter your project directory and run the following command to start the application:

npm run serve

Next, open your browser and visit "http://localhost:8080", you will see Warehouse list and form to add a warehouse. As you add or remove repositories, the page will update in real time. In this way, you can achieve safe management of your warehouse.

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