PHP と Vue を使用して倉庫管理のアウトバウンド管理機能を開発する方法

PHP と Vue を使用して倉庫管理のアウトバウンド管理機能を開発する方法

電子商取引ビジネスの急速な発展に伴い、倉庫管理システムは企業にとって不可欠なものとなっています。多くの企業の日常業務に欠けている部分。中でもアウトバウンド管理機能は倉庫管理における重要な連携の一つです。この記事では、PHP と Vue を使用してシンプルで実用的なアウトバウンド管理機能を開発する方法と、具体的なコード例を紹介します。

1. アウトバウンド管理機能の要件分析

開発を開始する前に、アウトバウンド管理機能の要件を明確にする必要があります。一般に、アウトバウンド管理機能には次の側面が含まれている必要があります。

1. アウトバウンド注文管理: アウトバウンド注文の作成、クエリ、編集、削除、その他の機能が含まれます。
2. 出荷品目の管理: 出荷品目の選択、出荷数量の設定、出荷品目の詳細の表示などの機能が含まれます。
3. 出荷記録管理: 品目情報、数量、時刻など、出荷ごとの関連情報を記録します。

2. テクノロジーの選択

アウトバウンド管理機能を実現するために、バックエンドの開発言語として PHP を、フロントエンドの開発フレームワークとして Vue を使用することを選択しました。

PHP は、習得と使用が簡単で、幅広い用途に使用できるスクリプト言語です。 Vue は、インタラクティブなユーザー インターフェイスの構築に役立つ軽量の JavaScript フレームワークです。

3. データベース設計

コードを書き始める前に、アウトバウンド データベースに関連する情報を保存するデータベース テーブルを設計する必要があります。以下は簡単な例です:

1. アウトバウンド注文テーブル (stock_out)

   • id: アウトバウンド注文 ID
   • out_date: out Stock date
   • operator: Operator

2. 出荷品目テーブル (stock_out_items)

   • id: 出荷品目 ID
   • out_id: 出荷オーダー ID
   • item_name: アイテム名
   • item_qty: 出荷数量

IV. 終了コードの実装

まず、在庫切れ管理に関連するバックエンド ロジックを処理する「stock_out.php」という名前のファイルを作成します。

<?php

// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database");

// 检查连接是否成功
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

// 获取出库单列表
function getStockOutList() {
  global $conn;
  $sql = "SELECT * FROM stock_out";
  $result = $conn->query($sql);
  
  if ($result->num_rows > 0) {
    $output = array();
    while($row = $result->fetch_assoc()) {
      $output[] = $row;
    }
    return $output;
  } else {
    return array();
  }
}

// 创建出库单
function createStockOut($out_date, $operator) {
  global $conn;
  $sql = "INSERT INTO stock_out (out_date, operator) VALUES ('$out_date', '$operator')";
  
  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

// 删除出库单
function deleteStockOut($id) {
  global $conn;
  $sql = "DELETE FROM stock_out WHERE id = '$id'";
  
  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

// 获取出库物品列表
function getStockOutItems($out_id) {
  global $conn;
  $sql = "SELECT * FROM stock_out_items WHERE out_id = '$out_id'";
  $result = $conn->query($sql);
  
  if ($result->num_rows > 0) {
    $output = array();
    while($row = $result->fetch_assoc()) {
      $output[] = $row;
    }
    return $output;
  } else {
    return array();
  }
}

// 创建出库物品
function createStockOutItem($out_id, $item_name, $item_qty) {
  global $conn;
  $sql = "INSERT INTO stock_out_items (out_id, item_name, item_qty) VALUES ('$out_id', '$item_name', '$item_qty')";
  
  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

// 删除出库物品
function deleteStockOutItem($id) {
  global $conn;
  $sql = "DELETE FROM stock_out_items WHERE id = '$id'";
  
  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

5. フロントエンド コードの実装

フロントエンド コードでは、Vue フレームワークを使用して、アウトバウンド管理機能の対話ロジックを処理します。以下は簡単な例です:

<div id="app">
  <h2>出库单管理</h2>
  
  <div v-for="stockOut in stockOutList">
    <p>出库单ID: {{ stockOut.id }}</p>
    <p>出库日期: {{ stockOut.out_date }}</p>
    <p>操作人员: {{ stockOut.operator }}</p>
    
    <button @click="deleteStockOut(stockOut.id)">删除</button>
  </div>
  
  <h2>出库物品管理</h2>
  
  <div>
    <input type="text" v-model="item.name" placeholder="物品名称">
    <input type="number" v-model="item.qty" placeholder="出库数量">
    <button @click="createStockOutItem">添加</button>
  </div>
  
  <div v-for="item in stockOutItems">
    <p>物品名称: {{ item.item_name }}</p>
    <p>出库数量: {{ item.item_qty }}</p>
    
    <button @click="deleteStockOutItem(item.id)">删除</button>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      stockOutList: [],
      stockOutItems: [],
      item: {
        name: "",
        qty: 0
      }
    },
    mounted() {
      // 获取出库单列表
      this.getStockOutList();
    },
    methods: {
      // 获取出库单列表
      getStockOutList() {
        axios.get("stock_out.php?action=getStockOutList")
          .then(response => {
            this.stockOutList = response.data;
          })
          .catch(error => {
            console.error(error);
          });
      },
      
      // 删除出库单
      deleteStockOut(id) {
        axios.get(`stock_out.php?action=deleteStockOut&id=${id}`)
          .then(response => {
            if (response.data === true) {
              this.getStockOutList();
              alert("删除成功");
            } else {
              alert("删除失败");
            }
          })
          .catch(error => {
            console.error(error);
          });
      },
      
      // 添加出库物品
      createStockOutItem() {
        axios.post("stock_out.php?action=createStockOutItem", this.item)
          .then(response => {
            if (response.data === true) {
              this.getStockOutItems();
              alert("添加成功");
            } else {
              alert("添加失败");
            }
          })
          .catch(error => {
            console.error(error);
          });
      },
      
      // 删除出库物品
      deleteStockOutItem(id) {
        axios.get(`stock_out.php?action=deleteStockOutItem&id=${id}`)
          .then(response => {
            if (response.data === true) {
              this.getStockOutItems();
              alert("删除成功");
            } else {
              alert("删除成功");
            }
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  });
</script>

6. 概要

上記は、PHP と Vue を使用して倉庫管理のアウトバウンド管理機能を開発するための詳細な手順と具体的なコード例です。これにより、出荷注文や出荷商品の管理が容易になり、倉庫管理の効率と精度が向上します。この記事がお役に立てば幸いです。

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