PHP와 Vue를 사용하여 창고 관리를 위한 창고 보안 관리 기능을 개발하는 방법

PHP와 Vue를 사용하여 창고 관리를 위한 창고 보안 관리 기능을 개발하는 방법

점점 경쟁이 치열해지는 현재 시장 환경에서 창고 관리는 기업 운영에 매우 중요합니다. 창고의 원활한 운영과 안전한 관리를 위해 많은 기업에서는 기술적 수단을 활용하여 체계적인 관리를 실시하고 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 창고 보안 관리 기능을 개발하는 구체적인 방법을 소개하고 코드 예제를 제공합니다.

1단계: 개발 환경 설정
PHP와 Vue를 사용하여 창고 보안 관리 기능을 개발하려면 먼저 해당 개발 환경을 설정해야 합니다. 컴퓨터에 PHP 서버와 Vue 개발 도구를 설치해야 합니다. PHP 서버로 XAMPP를 사용하고 Vue 개발 도구로 Visual Studio Code를 사용하는 것이 좋습니다. 이러한 소프트웨어를 올바르게 설치했는지, PHP 서버 및 Vue 개발 도구를 성공적으로 시작할 수 있는지 확인하세요.

2단계: 데이터베이스 및 데이터 테이블 생성
PHP 및 Vue에서 창고 관리 기능을 개발하기 전에 관련 데이터를 저장할 해당 데이터베이스 및 데이터 테이블을 생성해야 합니다. phpMyAdmin 또는 기타 데이터베이스 관리 도구를 열고, 새 데이터베이스를 생성하고, 데이터베이스에 "warehouses"라는 데이터 테이블을 생성합니다.

데이터 테이블 "warehouses"의 구조는 다음과 같습니다.

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`)
);

3단계: PHP 백엔드 코드 작성
다음으로 창고 관리 관련 작업을 처리하기 위한 PHP 백엔드 코드를 작성하겠습니다. 프로젝트 디렉터리에 "api"라는 폴더를 만들고 해당 폴더에 "warehouses.php"라는 PHP 파일을 만듭니다. 이 파일에서는 창고의 추가, 삭제, 수정, 쿼리 기능을 구현합니다.

"warehouses.php"에서 데이터베이스에 연결하고 관련 API를 작성하려면 PHP의 "mysqli" 확장 라이브러리를 사용해야 합니다. 다음은 "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();
?>

4단계: Vue 프런트엔드 코드 작성
이제 백엔드와 상호작용하고 웨어하우스의 관련 정보를 표시하는 Vue 프런트엔드 코드를 작성하겠습니다. 프로젝트 디렉터리에 "src"라는 폴더를 만들고 이 폴더에 "Warehouse.vue"라는 Vue 구성 요소 파일을 만듭니다.

"Warehouse.vue"에서는 Vue의 "axios" 라이브러리를 사용하여 HTTP 요청을 보내고 웨어하우스 목록을 렌더링합니다. 다음은 "Warehouse.vue"의 샘플 코드입니다.

<template>
  <div>
    <h2>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>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>

5단계: 애플리케이션 실행
이제 PHP와 Vue를 사용하여 창고 관리 개발의 창고 보안 관리 기능 코딩을 완료했습니다. 명령줄을 사용하여 프로젝트 디렉터리를 입력하고 다음 명령을 실행하여 애플리케이션을 시작할 수 있습니다.

npm run serve

다음으로 브라우저를 열고 "http://localhost:8080"을 방문하면 저장소 목록이 표시되고 Warehouse를 추가할 수 있습니다. 형태. 저장소를 추가하거나 제거하면 페이지가 실시간으로 업데이트됩니다. 이를 통해 창고를 안전하게 관리할 수 있습니다.

위 내용은 PHP와 Vue를 사용하여 창고 관리를 위한 창고 보안 관리 기능을 개발하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!