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

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

はじめに:
電子商取引と O2O 業界の発展に伴い、倉庫は企業にとって管理は非常に重要であり、業務効率とユーザー エクスペリエンスがますます重要になっています。倉庫管理の効率的な運用を実現するために、PHP と Vue を使用して在庫管理システムを構築できます。この記事では、PHPとVueを使って倉庫管理の在庫管理機能を開発する方法と、具体的なコード例を詳しく紹介します。

1. データベース テーブルを作成する
まず、倉庫管理に関連するデータを保存するデータベース テーブルを作成する必要があります。この例では、products と inventory という 2 つのテーブルを作成します。

1. #製品 テーブル

   CREATE TABLE products (
     id INT(11) NOT NULL AUTO_INCREMENT,
     name VARCHAR(100) NOT NULL,
     price DECIMAL(10, 2) NOT NULL,
     PRIMARY KEY (id)
   );

2. ##在庫

   テーブル<pre class='brush:php;toolbar:false;'>CREATE TABLE inventory ( 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) ON DELETE CASCADE );</pre>

2. バックエンド開発

次に、PHP を使用して、フロントエンドのリクエストを処理し、データベースと対話するために使用されるバックエンド インターフェイスを開発します。

データベースに接続

1. <?php
   $servername = "localhost";
   $username = "root";
   $password = "";
   $dbname = "inventory";
   
   $conn = new mysqli($servername, $username, $password, $dbname);
   if ($conn->connect_error) {
     die("Connection failed: " . $conn->connect_error);
   }
   ?>

製品リストを取得

2. <?php
   $sql = "SELECT * FROM products";
   $result = $conn->query($sql);
   $products = array();
   
   if ($result->num_rows > 0) {
     while($row = $result->fetch_assoc()) {
       array_push($products, $row);
     }
   }
   
   echo json_encode($products);
   ?>

在庫数量を更新

3. <?php
   $data = json_decode(file_get_contents("php://input"), true);
   $productId = $data['product']['id'];
   $quantity = $data['product']['quantity'];
   
   $sql = "UPDATE inventory SET quantity = '$quantity' WHERE product_id = '$productId'";
   $result = $conn->query($sql);
   
   if ($result) {
     echo "success";
   } else {
     echo "error";
   }
   ?>

3. フロントエンド開発

フロントエンド部分では、Vue を使用してユーザー インターフェイスを構築し、バックエンド インターフェイスを呼び出して在庫管理機能を実装します。

製品リストを取得して表示する

1. <template>
     <div>
       <h2>产品列表</h2>
       <ul>
         <li v-for="product in products" :key="product.id">
           {{ product.name }} - ￥{{ product.price }}
           <input type="number" v-model="product.quantity" @change="updateInventory(product)">
         </li>
       </ul>
     </div>
   </template>
   
   <script>
   export default {
     data() {
       return {
         products: []
       };
     },
     mounted() {
       this.fetchProducts();
     },
     methods: {
       fetchProducts() {
         // 使用axios发送GET请求获取产品列表数据
         axios.get('/api/getProducts')
           .then(response => {
             this.products = response.data;
         })
       },
       updateInventory(product) {
         // 使用axios发送POST请求更新库存数量
         axios.post('/api/updateInventory', { product: product })
           .then(response => {
             if (response.data === 'success') {
               alert('库存数量更新成功');
             } else {
               alert('库存数量更新失败');
             }
         })
       }
     }
   };
   </script>

Vue インスタンスを作成する

2. import Vue from 'vue';
   import Products from './components/Products.vue';
   
   new Vue({
     render: h => h(Products)
   }).$mount('#app');

4プロジェクトを実行します。

バックエンド コードをデプロイする

バックエンド コードを適切な PHP サーバー ディレクトリに配置し、PHP サーバーを起動します。
1. 
   フロントエンド コードの構成
フロントエンド コードを適切なディレクトリに配置し、Vue CLI またはその他のツールを使用してビルドし、パッケージ化します。
2. 
   プロジェクトの実行
ブラウザを開き、プロジェクトのエントリファイルにアクセスすると、商品リストや在庫数更新機能が表示されます。
3. 
   
結論:

この記事では、PHP と Vue を使用して倉庫管理の在庫管理機能を開発する方法を学びました。まずデータベーステーブルを作成し、PHP を使用してバックエンドインターフェイスを記述し、商品リストの取得と在庫数量の更新機能を実装しました。次に、Vue を使用してユーザー インターフェイスを構築し、バックエンド インターフェイスを呼び出すことで在庫管理機能を実装しました。この記事が、読者が PHP と Vue をよりよく理解し、倉庫管理のための在庫管理機能を開発するために適用するのに役立つことを願っています。

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