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

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

現代のビジネス運営において、倉庫管理は非常に重要なリンクの 1 つです。倉庫の場合、補充管理機能により、顧客のニーズに合わせてタイムリーに在庫を補充し、欠品を回避できます。この記事では、PHP と Vue を使用して倉庫管理システムの補充管理機能を開発する方法を検討し、具体的なコード例を示します。

1. テクノロジーの選択

補充管理機能を実現するために、バックエンド言語として PHP を使用し、フロントエンド フレームワークとして Vue を使用することを選択しました。 PHP は強力で柔軟なバックエンド開発言語であるのに対し、Vue はユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークです。このようなテクノロジーの選択により、フロントエンドとバックエンドの分離を容易に実現でき、プロジェクト開発をより効率的かつ保守可能にすることができます。

2. バックエンド開発

1. 環境セットアップ

まず、PHP 開発環境をセットアップする必要があります。 XAMPP や WAMP などの統合開発環境を使用して、ローカルの PHP 開発環境を構築できます。 PHP とデータベース (MySQL など) がインストールされていることを確認してください。

2. データベースの作成

MySQL に「warehouse_management」という名前のデータベースを作成し、「product」と「replenishments」という 2 つのテーブルを作成します。 「製品」テーブルは製品情報を保存するために使用され、「補充」テーブルは補充記録を保存するために使用されます。

製品テーブルのフィールドには、ID、名前、数量が含まれます。

補充テーブルのフィールドには、id、product_id、数量、日付が含まれます。

3. API の記述

PHP では、PDO (PHP データ オブジェクト) を使用してデータベースと対話できます。まず、データベースに接続するファイル (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 の公式 Web サイトからインストーラーをダウンロードし、次のコマンドを実行して Vue CLI をインストールできます。

npm install -g @vue/cli

2. Vue プロジェクトの作成

コマンド ラインで、 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. 統合コンポーネント

最後に、App.vue ファイルを変更して ProductList コンポーネントと AddReplenishment コンポーネントを統合する必要があります:

<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 中国語 Web サイトの他の関連記事を参照してください。