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

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

전자상거래의 급속한 발전과 함께 창고 관리의 물류 관리 기능이 점점 더 중요해지고 있습니다. 이 기사에서는 PHP와 Vue를 사용하여 간단하고 실용적인 창고 관리 시스템을 개발하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. 환경 준비

개발을 시작하기 전에 개발 환경을 준비해야 합니다. 먼저, 컴퓨터에 PHP 및 Vue 개발 환경이 설치되어 있는지 확인하세요. XAMPP, WAMP 또는 MAMP를 다운로드하고 설치하여 로컬 PHP 개발 환경을 설정할 수 있습니다. 동시에 Vue 개발을 지원하려면 Node.js도 설치해야 합니다. 명령줄에서 다음 명령을 실행하면 Node.js가 설치되었는지 확인할 수 있습니다.

node -v

2. Database design

창고 관리 시스템에는 물류 관리 관련 데이터를 저장하기 위한 데이터베이스가 필요합니다. 이 예에서는 "warehouse"라는 데이터베이스를 생성하고 데이터를 저장하기 위해 다음 두 개의 테이블을 생성해야 합니다.

Items 테이블(items): 모든 창고 품목 정보를 저장하는 데 사용됩니다.

CREATE TABLE items (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  name VARCHAR(255),
  quantity INT(11),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

물류 테이블(배송) : 물류업체, 발송인, 수취인 등 모든 물류정보를 저장하는데 사용됩니다.

CREATE TABLE shipments (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  item_id INT(11),
  company VARCHAR(255),
  sender VARCHAR(255),
  receiver VARCHAR(255),
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (item_id) REFERENCES items(id)
);

3. 백엔드 개발 - PHP

다음으로 PHP를 통해 백엔드 API 인터페이스를 구축하겠습니다.

먼저 "api"라는 폴더를 만들고 그 안에 "index.php"라는 파일을 만듭니다. "index.php"에서 다음 API 인터페이스를 생성합니다.

모든 항목 정보 가져오기:

<?php
header("Content-Type: application/json");
require_once 'config.php';

$query = "SELECT * FROM items";
$result = mysqli_query($conn, $query);
$items = [];

while ($row = mysqli_fetch_assoc($result)) {
  $items[] = $row;
}

echo json_encode($items);

새 항목 생성:

<?php
header('Content-Type: application/json');    
require_once 'config.php';

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

$query = "INSERT INTO items (name, quantity) VALUES ('$name', $quantity)";
$result = mysqli_query($conn, $query);

$response = [];
if ($result) {
  $response['message'] = 'Item created successfully';
} else {
  $response['message'] = 'Failed to create item';
}
echo json_encode($response);

모든 물류 정보 가져오기:

<?php
header("Content-Type: application/json");
require_once 'config.php';

$query = "SELECT shipments.id, items.name, shipments.company, shipments.sender, shipments.receiver, shipments.created_at
          FROM shipments
          INNER JOIN items
          ON shipments.item_id = items.id";
$result = mysqli_query($conn, $query);
$shipments = [];

while ($row = mysqli_fetch_assoc($result)) {
  $shipments[] = $row;
}

echo json_encode($shipments);

새 물류 정보 생성:

<?php
header('Content-Type: application/json');    
require_once 'config.php';

$item_id = $_POST['item_id'];
$company = $_POST['company'];
$sender = $_POST['sender'];
$receiver = $_POST['receiver'];

$query = "INSERT INTO shipments (item_id, company, sender, receiver) VALUES ($item_id, '$company', '$sender', '$receiver')";
$result = mysqli_query($conn, $query);

$response = [];
if ($result) {
  $response['message'] = 'Shipment created successfully';
} else {
  $response['message'] = 'Failed to create shipment';
}
echo json_encode($response);

또한 데이터베이스 연결 정보를 구성하는 데 사용되는 "api" 폴더에 "config.php"라는 파일을 만들어야 합니다.

<?php
$conn = mysqli_connect('localhost', 'root', '', 'warehouse');

if (!$conn) {
  die("Connection failed: " . mysqli_connect_error());
}

4. Front-end development - Vue

이제 Vue를 사용하여 개발하겠습니다. 프런트엔드 인터페이스.

프로젝트의 루트 디렉토리에 "frontend"라는 폴더를 생성하고 명령줄을 통해 폴더를 입력하세요.
먼저 Vue CLI를 설치하세요. 명령줄에서 다음 명령을 실행하세요.

npm install -g @vue/cli

새 Vue 프로젝트를 만듭니다. 명령줄에서 다음 명령을 실행하고 프롬프트에 따라 구성합니다.

vue create warehouse-management

새로 생성된 Vue 프로젝트의 디렉터리를 입력합니다. 명령줄에서 다음 명령을 실행합니다.

cd warehouse-management

필요한 종속성을 설치합니다. 명령줄에서 다음 명령을 실행하세요.

npm install

"src" 폴더에 "comComponents"라는 폴더를 만들고 그 안에 다음 구성 요소를 만듭니다.

항목 목록 구성 요소(ItemList.vue):

<template>
  <div>
    <h2 id="物品列表">物品列表</h2>
    <table>
      <thead>
        <tr>
          <th>物品名称</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
          <td>
            <button @click="deleteItem(item.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h3 id="添加新物品">添加新物品</h3>
    <input type="text" v-model="newItemName" placeholder="物品名称">
    <input type="number" v-model="newItemQuantity" placeholder="数量">
    <button @click="createItem">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      newItemName: '',
      newItemQuantity: 0
    };
  },
  mounted() {
    this.getItems();
  },
  methods: {
    getItems() {
      axios.get('/api/get_items.php').then(response => {
        this.items = response.data;
      });
    },
    createItem() {
      axios.post('/api/create_item.php', {
        name: this.newItemName,
        quantity: this.newItemQuantity
      }).then(response => {
        this.getItems();
        this.newItemName = '';
        this.newItemQuantity = 0;
      });
    },
    deleteItem(id) {
      axios.post('/api/delete_item.php', {
        id: id
      }).then(response => {
        this.getItems();
      });
    }
  }
};
</script>

배송 목록 구성 요소 (ShipmentList.vue):

<template>
  <div>
    <h2 id="物流列表">物流列表</h2>
    <table>
      <thead>
        <tr>
          <th>物品名称</th>
          <th>物流公司</th>
          <th>寄件人</th>
          <th>收件人</th>
          <th>创建时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="shipment in shipments" :key="shipment.id">
          <td>{{ shipment.name }}</td>
          <td>{{ shipment.company }}</td>
          <td>{{ shipment.sender }}</td>
          <td>{{ shipment.receiver }}</td>
          <td>{{ shipment.created_at }}</td>
        </tr>
      </tbody>
    </table>
    <h3 id="添加新物流">添加新物流</h3>
    <select v-model="selectedItem">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
    </select>
    <input type="text" v-model="newShipmentCompany" placeholder="物流公司">
    <input type="text" v-model="newShipmentSender" placeholder="寄件人">
    <input type="text" v-model="newShipmentReceiver" placeholder="收件人">
    <button @click="createShipment">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      selectedItem: '',
      shipments: [],
      newShipmentCompany: '',
      newShipmentSender: '',
      newShipmentReceiver: ''
    };
  },
  mounted() {
    this.getItems();
    this.getShipments();
  },
  methods: {
    getItems() {
      axios.get('/api/get_items.php').then(response => {
        this.items = response.data;
      });
    },
    getShipments() {
      axios.get('/api/get_shipments.php').then(response => {
        this.shipments = response.data;
      });
    },
    createShipment() {
      axios.post('/api/create_shipment.php', {
        item_id: this.selectedItem,
        company: this.newShipmentCompany,
        sender: this.newShipmentSender,
        receiver: this.newShipmentReceiver
      }).then(response => {
        this.getShipments();
        this.newShipmentCompany = '';
        this.newShipmentSender = '';
        this.newShipmentReceiver = '';
      });
    }
  }
};
</script>

"src" 폴더에 있는 "App.vue" 파일을 열고 파일의 해당 위치에 다음 코드를 추가합니다:

<template>
  <div id="app">
    <item-list></item-list>
    <shipment-list></shipment-list>
  </div>
</template>

<script>
import ItemList from './components/ItemList.vue';
import ShipmentList from './components/ShipmentList.vue';

export default {
  components: {
    ItemList,
    ShipmentList
  }
};
</script>

이제 PHP 샘플 코드 사용이 완료되었습니다. Vue를 사용하여 창고 관리를 위한 물류 관리 기능을 개발했습니다. "npm run Serve" 명령을 실행하여 프런트엔드 개발 서버를 시작하고, 브라우저에서 "http://localhost:8080"을 방문하여 프로젝트 효과를 확인할 수 있습니다. 동시에 API 인터페이스를 효과적으로 만들기 위해서는 PHP 개발 서버도 실행해야 합니다.

위의 예가 PHP와 Vue를 사용하여 창고 관리를 위한 물류 관리 기능을 개발하는 방법을 이해하는 데 도움이 되기를 바랍니다. 물론 이는 단순한 예시일 뿐 실제 필요에 따라 기능을 확장하고 최적화할 수 있습니다. 당신의 발전에 행운을 빕니다!

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