PHP と Vue を使用して倉庫管理のための物流管理機能を開発する方法

PHP と Vue を使用して倉庫管理の物流管理機能を開発する方法

電子商取引の急速な発展に伴い、倉庫管理の物流管理機能はますます重要になってきます。この記事では、PHP と Vue を使用してシンプルで実用的な倉庫管理システムを開発する方法と、具体的なコード例を紹介します。

1. 環境の準備

開発を開始する前に、開発環境を準備する必要があります。まず、コンピューターに PHP および Vue 開発環境がインストールされていることを確認します。 XAMPP、WAMP、または MAMP をダウンロードしてインストールすることで、ローカルの PHP 開発環境をセットアップできます。同時に、Vue 開発をサポートするために Node.js をインストールする必要もあります。コマンド ラインで次のコマンドを実行すると、Node.js がインストールされているかどうかを確認できます。

node -v

2. データベース設計

倉庫管理システムには、保存するデータベースが必要です。物流管理関連データ。この例では、「warehouse」という名前のデータベースを作成し、データを保存するために次の 2 つのテーブルを作成する必要があります。

Item テーブル (アイテム): 倉庫に保管されているすべてのアイテム情報を保存するために使用されます。

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. フロントエンド開発 - Vue

次に、Vue を使用してフロントエンド インターフェイスを開発します。

プロジェクトのルート ディレクトリに「frontend」という名前のフォルダーを作成し、コマンド ラインからそのフォルダーに入ります。
まず、Vue CLI をインストールします。コマンド ラインで次のコマンドを実行します:

npm install -g @vue/cli

新しい Vue プロジェクトを作成します。コマンド ラインで次のコマンドを実行し、プロンプトに従って設定します。

vue create warehouse-management

新しく作成した Vue プロジェクトのディレクトリを入力します。コマンド ラインで次のコマンドを実行します:

cd warehouse-management

必要な依存関係をインストールします。コマンド ラインで次のコマンドを実行します。

npm install

「src」フォルダーに「components」という名前のフォルダーを作成し、その中に次のコンポーネントを作成します。

Item list Component (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>

出荷リスト コンポーネント (paymentList.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 runserve」コマンドを実行してフロントエンド開発サーバーを起動し、ブラウザで「http://localhost:8080」にアクセスしてプロジェクトの効果を確認できます。同時に、API インターフェイスを有効にするために PHP 開発サーバーを実行する必要もあります。

上記の例が、PHP と Vue を使用して倉庫管理のための物流管理機能を開発する方法を理解するのに役立つことを願っています。もちろん、これは単なる例であり、実際のニーズに応じて機能を拡張および最適化できます。あなたの発展に幸あれ！

以上がPHP と Vue を使用して倉庫管理のための物流管理機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。