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

PHP와 Vue를 사용하여 창고 관리의 선반 관리 기능을 개발하는 방법

소개:
현대 창고 관리 시스템에서 선반 관리는 매우 중요한 기능입니다. 선반의 합리적인 관리를 통해 창고의 레이아웃과 수납공간의 활용도를 최적화할 수 있으며, 업무 효율성과 정확성을 높일 수 있습니다. 본 글에서는 PHP와 Vue를 활용하여 창고관리의 선반관리 기능을 개발하는 방법을 소개하고, 구체적인 코드 예제를 통해 독자들이 이를 이해하고 실습할 수 있도록 돕습니다.

1. 기술 스택 선택
창고 관리 시스템 개발에서 PHP와 Vue는 매우 일반적으로 사용되는 기술 스택입니다. 인기 있는 백엔드 프로그래밍 언어인 PHP는 강력한 처리 및 컴퓨팅 기능을 제공하는 반면 Vue는 간단하고 효율적인 뷰 레이어 관리를 제공하는 인기 있는 프런트엔드 프레임워크입니다. PHP와 Vue를 사용하면 프런트엔드와 백엔드 로직을 분리할 수 있어 팀 협업과 향후 유지 관리가 용이해집니다.

2. 프로젝트 준비 및 환경 구축

1. PHP 및 Vue 관련 환경 다운로드 및 설치: PHP의 경우 PHP 7 이상을 선택하고 Vue의 경우 Vue CLI를 선택합니다.
2. Vue 프로젝트 초기화: 명령줄 도구를 사용하여 입력합니다.
3. PHP 백엔드 생성: 프로젝트 루트 디렉토리에 "api"라는 폴더를 생성하여 PHP 백엔드 관련 파일을 저장합니다.

3. 데이터베이스 설계
선반 관리 기능은 선반 정보의 저장 및 관리가 필요하므로 그에 맞는 데이터베이스 구조를 설계해야 합니다. 예제에서는 "shelf_management"라는 데이터베이스와 "shelf"라는 테이블을 생성합니다. 테이블 구조는 다음과 같습니다.

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. 백엔드 개발

1. 데이터베이스에 연결: "api" 아래에 생성합니다. " 폴더 "db.php"라는 파일은 데이터베이스에 연결하는 데 사용됩니다. 샘플 코드는 다음과 같습니다.

<?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. API 인터페이스 구현: "api" 폴더 아래에 "shelf.php"라는 파일을 생성하여 선반 데이터에 대한 CRUD 작업을 구현합니다. 샘플 코드는 다음과 같습니다.

<?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. 프런트 엔드 개발

1. 선반 목록 구성 요소 생성: Vue 프로젝트의 "src/comComponents" 폴더 아래에 "ShelfList.vue"라는 파일을 생성하여 표시합니다. 선반 목록 . 샘플 코드는 다음과 같습니다.

<template>
  <div>
    <h2>货架列表</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. 통합 백엔드 인터페이스: 백엔드 인터페이스 액세스를 캡슐화하기 위해 "src" 폴더 아래에 "api.js"라는 파일을 생성합니다. 샘플 코드는 다음과 같습니다.

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. 추가 및 편집 선반 대화 상자 구성 요소 만들기: 필요에 따라 대화형 인터페이스를 만들고, Vue 구성 요소를 사용하여 선반 추가 및 선반 편집 기능을 구현하고, 다음에 대한 백엔드 인터페이스를 호출합니다. 데이터 작업.

6. 실행 및 테스트
PHP 서버와 Vue 개발 서버를 시작하고 브라우저에서 프로젝트 페이지에 접속하면 창고 관리의 선반 관리 기능을 볼 수 있습니다. 선반은 추가, 수정, 삭제가 가능하며 목록은 실시간으로 업데이트됩니다.

7. 요약
이 글에서는 창고 관리 시스템에서 선반 관리 기능을 개발하기 위해 PHP와 Vue를 사용하는 방법을 소개합니다. 요구사항을 분석하고, 백엔드 개발은 PHP를, 프런트엔드 개발은 Vue를 사용하고, 인터페이스를 통한 데이터 상호작용을 통해 쉘프를 추가, 삭제, 수정, 확인하는 기능을 최종적으로 구현했습니다. 물론, 실제 프로젝트에서는 더욱 개선되고 최적화되어야 할 다른 기능과 세부 사항이 있을 것입니다. 독자들이 이 기사의 아이디어를 바탕으로 자신에게 맞는 창고 관리 시스템을 더 잘 개발할 수 있기를 바랍니다.

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