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

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

現代のビジネス運営において、倉庫管理は重要なリンクです。効率的な在庫棚卸システムは、企業が正確な在庫管理を実現し、業務効率を向上させるのに役立ちます。この記事では、PHP と Vue を使用して倉庫管理の在庫検数機能を開発する方法と、具体的なコード例を紹介します。

まず、基本的なデータベース構造を確立する必要があります。 「inventory」という名前のデータベースを作成し、その中に 2 つのテーブルを作成します。1 つは製品情報を格納する「product」テーブル、もう 1 つは在庫情報を格納する「stock」テーブルです。

「products」テーブルの構造は次のとおりです:

CREATE TABLE `products` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `price` decimal(10,2) NOT NULL,
  PRIMARY KEY (`id`)
);

「stock」テーブルの構造は次のとおりです:

CREATE TABLE `stock` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `quantity` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  FOREIGN KEY (`product_id`) REFERENCES `products`(`id`)
);

次に、PHP を使用できます。フロントエンドによって開始されたリクエストを処理するバックエンド API を作成します。まず、データベースに接続するためのファイル「db.php」を作成する必要があります。その内容は次のとおりです。

<?php
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "inventory";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

次に、製品関連を処理するための「products.php」という名前のファイルを作成します。リクエスト。すべての製品を取得するサンプル コードは次のとおりです。

<?php
include 'db.php';

$sql = "SELECT * FROM products";
$result = $conn->query($sql);

$products = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $products[] = $row;
    }
}

echo json_encode($products);

同様に、在庫関連のリクエストを処理するために「stock.php」というファイルを作成できます。すべてのインベントリ情報を取得するサンプル コードは次のとおりです。

<?php
include 'db.php';

$sql = "SELECT stock.id, products.name, stock.quantity FROM stock JOIN products ON stock.product_id = products.id";
$result = $conn->query($sql);

$stock = array();

if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $stock[] = $row;
    }
}

echo json_encode($stock);

これで、Vue を使用してフロントエンド インターフェイスを構築し、Ajax リクエストを通じてバックエンド API と通信できるようになります。以下は、製品リストを表示する Vue コンポーネントのコード例です。

<template>
  <div>
    <h2>产品列表</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>名称</th>
          <th>价格</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="product in products" :key="product.id">
          <td>{{ product.id }}</td>
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: []
    };
  },
  mounted() {
    this.fetchProducts();
  },
  methods: {
    fetchProducts() {
      axios.get('/products.php').then(response => {
        this.products = response.data;
      });
    }
  }
}
</script>

同様に、在庫情報を表示する Vue コンポーネントを作成できます。以下は、在庫情報を取得して表示する Vue コンポーネントのコード例です。

<template>
  <div>
    <h2>库存信息</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>产品名称</th>
          <th>数量</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in stock" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.quantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      stock: []
    };
  },
  mounted() {
    this.fetchStock();
  },
  methods: {
    fetchStock() {
      axios.get('/stock.php').then(response => {
        this.stock = response.data;
      });
    }
  }
}
</script>

要約すると、PHP と Vue を使用して倉庫管理の在庫数カウント機能を開発すると、企業は正確な在庫管理を実現できます。バックエンドAPIをPHPで記述し、Vueと組み合わせてフロントエンドインターフェースを構築することで、商品表示や在庫情報表示の機能を簡単に実装したり、バックエンドデータベースと連携したりすることができます。この記事で提供されているコード例が開発作業に役立つことを願っています。

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