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 プロジェクトの初期化: コマンド ライン ツールを使用してプロジェクト ディレクトリに入り、コマンド「vue createshelf-management」を実行します;
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 インターフェイスの実装: シェルフ データに対する CRUD 操作を実装するために、「api」フォルダーの下に「shelf.php」という名前のファイルを作成します。サンプル コードは次のとおりです:

<?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. シェルフ リスト コンポーネントの作成: 「src/components」の下に「」という名前のファイルを作成します。 Vue プロジェクト内のフォルダー「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 中国語 Web サイトの他の関連記事を参照してください。