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

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

현대 비즈니스 운영에서 창고 관리는 매우 중요한 링크 중 하나입니다. 창고의 경우 보충 관리 기능을 통해 적시에 재고를 보충하여 고객 요구를 충족하고 품목 부족을 방지할 수 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 창고 관리 시스템의 보충 관리 기능을 개발하는 방법을 살펴보고 구체적인 코드 예제를 제공합니다.

1. 기술 선택

재고 관리 기능을 구현하기 위해 백엔드 언어로 PHP를 사용하고 프런트엔드 프레임워크로 Vue를 사용하기로 결정했습니다. PHP는 강력하고 유연한 백엔드 개발 언어인 반면, Vue는 사용자 인터페이스 구축을 위한 진보적인 JavaScript 프레임워크입니다. 이러한 기술 선택을 통해 우리는 프런트엔드와 백엔드 분리를 쉽게 달성하고 프로젝트 개발을 보다 효율적이고 유지 관리 가능하게 만들 수 있습니다.

2. 백엔드 개발

1. 환경 설정

먼저 PHP 개발 환경을 설정해야 합니다. XAMPP 또는 WAMP와 같은 통합 개발 환경을 사용하여 로컬 PHP 개발 환경을 구축할 수 있습니다. PHP와 데이터베이스(예: MySQL)가 설치되어 있는지 확인하세요.

2. 데이터베이스 생성

MySQL에서 "warehouse_management"라는 데이터베이스를 생성하고 "products"와 "replenishments"라는 두 개의 테이블을 생성합니다. "제품" 테이블은 제품 정보를 저장하는 데 사용되고, "보충" 테이블은 보충 기록을 저장하는 데 사용됩니다.

제품 테이블의 필드에는 ID, 이름, 수량이 포함됩니다.

보충 테이블의 필드에는 id, product_id, 수량, 날짜가 포함됩니다.

3. Writing API

PHP에서는 PDO(PHP Data Objects)를 사용하여 데이터베이스와 상호 작용할 수 있습니다. 먼저 db.php와 같이 데이터베이스에 연결하는 파일을 만들어야 합니다.

<?php
$servername = "localhost";
$username = "your_username";
$password = "your_password";
$dbname = "warehouse_management";

try {
  $conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
  $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
  echo "Connection failed: " . $e->getMessage();
}
?>

그런 다음 프런트엔드 요청을 처리하는 API를 작성할 수 있습니다. 예를 들어, "getProducts.php"라는 파일을 생성하여 모든 제품에 대한 정보를 얻을 수 있습니다:

<?php
require_once('db.php');

try {
  $stmt = $conn->prepare("SELECT * FROM products");
  $stmt->execute();

  $results = $stmt->fetchAll(PDO::FETCH_ASSOC);

  echo json_encode($results);
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
?>

마찬가지로 "addReplenishment.php" 파일을 생성하여 보충 기록을 추가할 수 있습니다:

<?php
require_once('db.php');

$product_id = $_POST['product_id'];
$quantity = $_POST['quantity'];

try {
  $stmt = $conn->prepare("INSERT INTO replenishments (product_id, quantity, date) VALUES (:product_id, :quantity, NOW())");
  $stmt->bindParam(':product_id', $product_id);
  $stmt->bindParam(':quantity', $quantity);

  $stmt->execute();
  
  echo "Replenishment added successfully";
} catch(PDOException $e) {
  echo "Error: " . $e->getMessage();
}
?>

3. 프런트엔드 개발

1. 환경 설정

프론트엔드 개발을 위해서는 Node.js와 Vue CLI를 설치해야 합니다. Node.js 공식 웹사이트에서 설치 프로그램을 다운로드하고 다음 명령을 실행하여 Vue CLI를 설치할 수 있습니다:

npm install -g @vue/cli

2. Create Vue project

명령줄에서 Vue CLI를 사용하여 Vue 프로젝트를 만들 수 있습니다. 예를 들어, 다음 명령을 실행하여 "warehouse-management"라는 프로젝트를 생성할 수 있습니다.

vue create warehouse-management

그런 다음 몇 가지 옵션을 선택하여 프로젝트를 구성할 수 있습니다. 이 과정에서 Babel 및 Router를 사용하도록 선택하고 "수동으로 기능 선택"을 선택한 다음 Enter 키를 눌러 계속할 수 있습니다.

3. 구성 요소 및 API 호출 작성

Vue 프로젝트에서는 Vue 구성 요소를 사용하여 사용자 인터페이스를 구축할 수 있습니다. 먼저 제품 목록을 표시하기 위한 구성 요소(ProductList.vue)를 생성해야 합니다.

<template>
  <div>
    <h2 id="Product-List">Product List</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Quantity</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.quantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      fetch('http://localhost/api/getProducts.php')
        .then(response => response.json())
        .then(data => {
          this.products = data;
        });
    }
  }
};
</script>

그런 다음 보충 기록을 추가하기 위한 구성 요소(AddReplenishment.vue)를 생성할 수 있습니다.

<template>
  <div>
    <h2 id="Add-Replenishment">Add Replenishment</h2>
    <form @submit.prevent="addReplenishment">
      <label for="product">Product:</label>
      <select name="product" v-model="product_id">
        <option v-for="product in products" :value="product.id" :key="product.id">{{ product.name }}</option>
      </select>
      <br>
      <label for="quantity">Quantity:</label>
      <input type="number" name="quantity" v-model="quantity" required>
      <br>
      <button type="submit">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [],
      product_id: '',
      quantity: ''
    };
  },
  mounted() {
    this.getProducts();
  },
  methods: {
    getProducts() {
      fetch('http://localhost/api/getProducts.php')
        .then(response => response.json())
        .then(data => {
          this.products = data;
        });
    },
    addReplenishment() {
      fetch('http://localhost/api/addReplenishment.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: `product_id=${this.product_id}&quantity=${this.quantity}`
      })
        .then(response => response.text())
        .then(data => {
          console.log(data);
          // Refresh product list
          this.getProducts();
          // Reset form values
          this.product_id = '';
          this.quantity = '';
        });
    }
  }
};
</script>

4. Integrated 구성 요소

마지막으로, ProductList 및 AddReplenishment 구성 요소를 통합하려면 App.vue 파일을 수정해야 합니다.

<template>
  <div id="app">
    <ProductList />
    <AddReplenishment />
  </div>
</template>

<script>
import ProductList from './components/ProductList.vue';
import AddReplenishment from './components/AddReplenishment.vue';

export default {
  name: 'App',
  components: {
    ProductList,
    AddReplenishment
  }
};
</script>

이 시점에서 PHP 및 Vue 기반 창고 관리 시스템의 보충 관리 기능 개발이 완료되었습니다.

요약

이 기사에서는 PHP와 Vue를 사용하여 창고 관리 시스템의 보충 관리 기능을 개발하는 방법을 소개했습니다. 올바른 기술을 선택함으로써 우리는 안정적이고 유지 관리가 쉬운 시스템을 효율적으로 개발할 수 있습니다. 이 기사가 관련 개발 작업에 도움이 되기를 바랍니다.

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