PHP와 Vue를 사용하여 창고 관리를 위한 화물 분류 관리 기능을 개발하는 방법

PHP 및 Vue를 사용하여 창고 관리의 화물 분류 관리 기능을 개발하는 방법

소개:
현대 물류 관리에서 창고 관리는 중요한 역할을 합니다. 그 중 상품분류관리는 창고 효율성 향상에 있어서 빼놓을 수 없는 부분입니다. 이 기사에서는 PHP와 Vue를 사용하여 상품의 분류 관리 기능을 구현하는 간단한 창고 관리 시스템을 개발하는 방법을 소개합니다.

1. 기술적 준비:

1. PHP 백엔드 개발 환경 구축(예: Apache 서버, MySQL 데이터베이스 등)
2. Vue 프론트엔드 개발 환경 구축(예: Node.js, Vue CLI 등) )
3. 기본 HTML, CSS 및 JavaScript 지식

2. 데이터베이스 설계:
MySQL 데이터베이스에 카테고리(상품 분류 테이블)와 제품(상품 테이블)이라는 두 개의 테이블을 만듭니다. 구체적인 테이블 구조는 다음과 같습니다.

categories 테이블:

• id: 기본 키, 자동 증가
• name: 카테고리 이름

products 테이블:

• id: 기본 키, 자동 증가
• name : 제품명
• category_id : 해당 카테고리에 대한 외래 키

3. 백엔드 개발(PHP) :

1. 데이터베이스 연결 생성 :

   <?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. 카테고리 목록을 가져오기 위한 인터페이스 생성 :

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

3. 특정 카테고리의 상품 목록을 가져오기 위한 생성 인터페이스:

   <?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. 상품 추가를 위한 인터페이스 생성:

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

4. 프런트엔드 개발(Vue):

1. 창고 관리 메인 페이지 생성:

   <template>
     <div class="container">
    <h1 id="仓库管理系统">仓库管理系统</h1>
    <div class="categories">
      <h2 id="货物分类">货物分类</h2>
      <ul>
        <li v-for="category in categories" :key="category.id" @click="getProducts(category.id)">
          {{ category.name }}
        </li>
      </ul>
    </div>
    <div class="products">
      <h2 id="货物列表">货物列表</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. 프로젝트 실행:

1. 백엔드 프로젝트가 PHP 서버에 배포됩니다.
2. Vue CLI를 사용하여 프런트엔드 프로젝트를 패키징한 후 생성된 index.html 파일을 브라우저에서 엽니다.

결론:
PHP와 Vue를 사용하여 창고 관리의 화물 분류 관리 기능을 쉽게 개발할 수 있습니다. 이 기사에서는 독자가 실제 프로젝트에 관련 기술을 적용하는 데 도움이 되기를 바라며 구체적인 코드 예제를 제공합니다. 물론 위의 예시 외에도 실제 필요에 따라 더 많은 기능 확장 및 최적화를 수행할 수도 있습니다. 즐거운 코딩하세요!

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