検索

ホームページ >バックエンド開発 >PHPチュートリアル >PHP と Vue を使用して倉庫管理用の貨物追跡機能を開発する方法

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

WBOY
WBOYオリジナル
2023-09-24 08:57:231408ブラウズ

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

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

はじめに:
電子商取引の急速な発展に伴い、倉庫管理は非常に重要なリンクになります。倉庫管理の効率化と正確性を向上させるためには、貨物追跡システムの開発が必要です。この記事では、PHPとVueを使って倉庫管理の貨物追跡機能を開発する方法と、具体的なコード例を紹介します。

1. 技術的な準備
開発を開始する前に、次の技術とツールを準備する必要があります:

  • PHP: サーバーサイド プログラミング言語
  • Vue : ユーザーインターフェースを構築するための JavaScript フレームワーク
  • MySQL: データを保存するためのリレーショナル データベース
  • XAMPP: Apache、MySQL、PHP を統合した開発環境#2. データベース設計
    • コードを書き始める前に、データベース構造を設計する必要があります。倉庫管理のニーズを考慮して、次のテーブルを作成する必要があります。


商品テーブル: 商品 ID、名前、説明、その他のフィールドを含む商品に関する情報を格納します

    倉庫テーブル: 倉庫 ID、名前、住所、その他のフィールドを含む倉庫情報を保存します。
  • 商品倉庫関連付けテーブル: 商品と倉庫の関連付けを確立し、各倉庫内の商品の数量、保管時間、その他の情報を保存します
  • 3. バックエンド開発

データベース接続の作成
    まず、PHP でデータベースへの接続を作成する必要があります。これを実現するには、mysqli 拡張ライブラリによって提供される関数を使用できます。 
  1. $servername = "localhost";
$username = "root";
$password = "";
$dbname = "warehouse_management";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);

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


    API インターフェイスの作成

    フロントエンドによって送信されたリクエストを処理して返す一連の API インターフェイスを作成する必要があります。対応するデータ。一般的な API インターフェイスの例をいくつか示します。

  2. すべての倉庫情報を取得します。 
    3. $app->get('/warehouses', function () use ($app, $conn) {
 $sql = "SELECT * FROM warehouses";
 $result = $conn->query($sql);

 $warehouses = array();

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

 $app->response->headers->set('Content-Type', 'application/json');
 echo json_encode($warehouses);
});

指定された倉庫の商品情報を取得します。 :
    $app->get('/warehouses/:id/goods', function ($id) use ($app, $conn) {
  $sql = "SELECT * FROM goods_warehouses WHERE warehouse_id = $id";
  $result = $conn->query($sql);

  $goods = array();

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

  $app->response->headers->set('Content-Type', 'application/json');
  echo json_encode($goods);
});

  • #指定された倉庫に新しい商品を追加します: 

    $app->post('/warehouses/:id/goods', function ($id) use ($app, $conn) {
  $request = json_decode($app->request->getBody());

  $name = $request->name;
  $description = $request->description;
  $quantity = $request->quantity;
  $date = date('Y-m-d H:i:s');

  $sql = "INSERT INTO goods_warehouses (warehouse_id, name, description, quantity, date) VALUES ($id, '$name', '$description', $quantity, '$date')";

  if ($conn->query($sql) === TRUE) {
      $response = array('status' => 'success');
  } else {
      $response = array('status' => 'error', 'message' => $conn->error);
  }

  $app->response->headers->set('Content-Type', 'application/json');
  echo json_encode($response);
});
  • #商品の数量を更新します: 

    $app->put('/goods/:id/quantity', function ($id) use ($app, $conn) {
  $quantity = json_decode($app->request->getBody());

  $sql = "UPDATE goods_warehouses SET quantity = $quantity WHERE id = $id";

  if ($conn->query($sql) === TRUE) {
      $response = array('status' => 'success');
  } else {
      $response = array('status' => 'error', 'message' => $conn->error);
  }

  $app->response->headers->set('Content-Type', 'application/json');
  echo json_encode($response);
});

  • 4. フロントエンド開発

Vue アプリケーションの作成

Vue を使用してユーザー インターフェイスを構築する必要があります。まず、HTML で Vue ライブラリを導入し、Vue インスタンスを作成する必要があります。 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>仓库管理系统</title>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
 <div id="app">
     <!-- 在这里编写Vue模板代码 -->
 </div>
 
 <script src="js/app.js"></script>
</body>
</html>
  1. API リクエストの送信

    Vue インスタンスで API リクエストを送信し、返されたデータを処理する必要があります。一般的に使用されるコード例を次に示します。

    2. すべての倉庫情報を取得します。 
  2. var app = new Vue({
 el: '#app',
 data: {
     warehouses: []
 },
 mounted() {
     axios.get('/api/warehouses')
         .then(response => {
             this.warehouses = response.data;
         })
         .catch(error => {
             console.log(error);
         });
 }
});

  3. 指定された倉庫の商品情報を取得します。 : 
    4. var app = new Vue({
  el: '#app',
  data: {
      goods: []
  },
  mounted() {
      var id = 1; // 仓库ID

      axios.get('/api/warehouses/' + id + '/goods')
          .then(response => {
              this.goods = response.data;
          })
          .catch(error => {
              console.log(error);
          });
  }
});
    #指定された倉庫に新しい商品を追加します:
  • var app = new Vue({
  el: '#app',
  data: {
      name: '',
      description: '',
      quantity: ''
  },
  methods: {
      addGoods() {
          var id = 1; // 仓库ID

          axios.post('/api/warehouses/' + id + '/goods', {
              name: this.name,
              description: this.description,
              quantity: this.quantity
          })
          .then(response => {
              console.log(response.data);
          })
          .catch(error => {
              console.log(error);
          });
      }
  }
});

    #商品の数量を更新します:
    • var app = new Vue({
  el: '#app',
  data: {
      goodsId: '',
      quantity: ''
  },
  methods: {
      updateQuantity() {
          axios.put('/api/goods/' + this.goodsId + '/quantity', this.quantity)
              .then(response => {
                  console.log(response.data);
              })
              .catch(error => {
                  console.log(error);
              });
      }
  }
});

  • 五、まとめ
    • PHPとVue開発を利用することで、倉庫管理の貨物追跡機能を簡単に実装できます。 PHP はデータベースと対話する機能を提供し、Vue はユーザー インターフェイスの構築と API リクエストの送信に役立ちます。この記事では、開発作業に役立つことを期待して、いくつかの具体的なコード例を示します。開発おめでとうございます！

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

php JavaScript mysql html mysqli 接口 并发 数据库 apache
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PHP マイクロサービスを使用して分散サービスの監視と管理を実装する方法次の記事：PHP マイクロサービスを使用して分散サービスの監視と管理を実装する方法

関連記事

続きを見る