PHP と Vue を使用して倉庫管理用のサプライヤー管理機能を開発する方法

タイトル: PHP と Vue を使用した倉庫管理のためのサプライヤー管理機能の開発

前書き:
現代の企業では、倉庫管理とサプライヤー管理は非常に重要ですリンク。倉庫管理は商品の入庫、出庫、棚卸などの業務を指しますが、仕入先管理は仕入先情報の追加、編集、削除、照会などの機能を管理します。この記事では、PHP と Vue を使用して倉庫管理のサプライヤー管理機能を開発する方法と、具体的なコード例を紹介します。

1. 環境の準備

1. 必要なツール: PHP、Vue.js、MySQL など
2. 関連する PHP 拡張機能 (PDO 拡張機能など) をインストールする必要がありますおよび Vue .js プラグイン (axios など)

2. データベース設計
MySQL データベースに 2 つのテーブル (倉庫とサプライヤー) を作成します。
倉庫テーブルは、倉庫 ID、倉庫名、倉庫住所、その他のフィールドを含む倉庫情報を保存するために使用されます。
サプライヤー テーブルは、サプライヤー ID、サプライヤー名、担当者、連絡先番号、その他のフィールドを含むサプライヤー情報を保存するために使用されます。

3. バックエンド開発

1. サプライヤー関連のリクエストを処理するために、supplier.php という名前の PHP ファイルを作成します。

2. サプライヤー リストを取得するコードを記述し、PDO を使用してデータベースに接続し、SQL ステートメントを実行してサプライヤー リスト情報を取得します。結果を JSON 形式でフロントエンドに返します。
   サンプル コードは次のとおりです:

   <?php
   // 获取供应商列表
   $db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
   $stmt = $db->prepare("SELECT * FROM supplier");
   $stmt->execute();
   $result = $stmt->fetchAll(PDO::FETCH_ASSOC);
   echo json_encode($result);
   ?>

   ログイン後にコピー

3. サプライヤーを追加するコードを記述します。フロントエンドは POST リクエストを通じてサプライヤー情報をsupplier.phpに送信し、バックエンドはサプライヤー情報をsupplier.phpに送信します。 end はデータをデータベースに挿入します。
   サンプル コードは次のとおりです:

   <?php
   // 添加供应商
   $db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
   $stmt = $db->prepare("INSERT INTO supplier (name, contact, phone) VALUES (?, ?, ?)");
   $stmt->bindParam(1, $_POST['name']);
   $stmt->bindParam(2, $_POST['contact']);
   $stmt->bindParam(3, $_POST['phone']);
   $stmt->execute();
   ?>

   ログイン後にコピー

4. サプライヤーを編集するコードを記述します。フロントエンドは POST リクエストを通じてサプライヤー情報をsupplier.php に送信し、バックエンドはサプライヤー情報を送信します。 -end は、サプライヤー ID に応じてデータベースを更新し、対応するデータを指定します。
   サンプル コードは次のとおりです:

   <?php
   // 编辑供应商
   $db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
   $stmt = $db->prepare("UPDATE supplier SET name=?, contact=?, phone=? WHERE id=?");
   $stmt->bindParam(1, $_POST['name']);
   $stmt->bindParam(2, $_POST['contact']);
   $stmt->bindParam(3, $_POST['phone']);
   $stmt->bindParam(4, $_POST['id']);
   $stmt->execute();
   ?>

   ログイン後にコピー

5. サプライヤーを削除するコードを記述します。フロントエンドは POST リクエストを通じてサプライヤー ID をsupplier.php に送信し、バックエンドはサプライヤー ID を送信します。 -end は、サプライヤー ID をデータベースから削除します。
   サンプル コードは次のとおりです:

   <?php
   // 删除供应商
   $db = new PDO("mysql:host=localhost;dbname=test", "username", "password");
   $stmt = $db->prepare("DELETE FROM supplier WHERE id=?");
   $stmt->bindParam(1, $_POST['id']);
   $stmt->execute();
   ?>

   ログイン後にコピー

4. フロントエンド開発

1. Vue.js プロジェクトでサプライヤー管理コンポーネントを作成し、 SupplierManagement .vue という名前を付けます。

2. このコンポーネントでは、axios を使用してサプライヤー リストを取得するリクエストを送信し、そのデータを変数サプライヤーに保存します。
   サンプルコードは以下のとおりです。

   <template>
     <div>
       <table>
         <tr v-for="supplier in suppliers" :key="supplier.id">
           <td>{{ supplier.name }}</td>
           <td>{{ supplier.contact }}</td>
           <td>{{ supplier.phone }}</td>
         </tr>
       </table>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
       return {
         suppliers: []
       };
     },
     mounted() {
       axios.get('supplier.php').then(response => {
         this.suppliers = response.data;
       });
     }
   };
   </script>

   ログイン後にコピー

3. サプライヤーの追加、編集、削除の機能をコンポーネントに追加します。 axios 経由で POST リクエストを送信すると、対応するデータがsupplier.phpに送信されます。
   サンプルコードは以下のとおりです。

   <template>
     <div>
       <!-- 添加供应商 -->
       <input type="text" v-model="name" placeholder="供应商名称">
       <input type="text" v-model="contact" placeholder="联系人">
       <input type="text" v-model="phone" placeholder="联系电话">
       <button @click="addSupplier">添加供应商</button>
       <!-- 编辑供应商 -->
       <input type="text" v-model="editName" placeholder="供应商名称">
       <input type="text" v-model="editContact" placeholder="联系人">
       <input type="text" v-model="editPhone" placeholder="联系电话">
       <button @click="editSupplier">编辑供应商</button>
       <!-- 删除供应商 -->
       <input type="text" v-model="deleteId" placeholder="供应商ID">
       <button @click="deleteSupplier">删除供应商</button>
       <!-- 展示供应商列表 -->
       <table>
         <tr v-for="supplier in suppliers" :key="supplier.id">
           <td>{{ supplier.name }}</td>
           <td>{{ supplier.contact }}</td>
           <td>{{ supplier.phone }}</td>
         </tr>
       </table>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
     data() {
       return {
         name: '',
         contact: '',
         phone: '',
         editName: '',
         editContact: '',
         editPhone: '',
         deleteId: '',
         suppliers: []
       };
     },
     mounted() {
       this.getSuppliers();
     },
     methods: {
       getSuppliers() {
         axios.get('supplier.php').then(response => {
           this.suppliers = response.data;
         });
       },
       addSupplier() {
         axios.post('supplier.php', {
           name: this.name,
           contact: this.contact,
           phone: this.phone
         }).then(response => {
           this.getSuppliers();
         });
       },
       editSupplier() {
         axios.post('supplier.php', {
           id: this.editId,
           name: this.editName,
           contact: this.editContact,
           phone: this.editPhone
         }).then(response => {
           this.getSuppliers();
         });
       },
       deleteSupplier() {
         axios.post('supplier.php', {
           id: this.deleteId
         }).then(response => {
           this.getSuppliers();
         });
       }
     }
   };
   </script>

   ログイン後にコピー

   上記は、PHPとVueを使用して倉庫管理のサプライヤー管理機能を開発する具体的なコード例です。これらのサンプルコードを通じて、サプライヤーの追加、編集、削除、クエリなどの機能を実装し、倉庫管理の効率と精度を向上させることができます。もちろん、これは簡単な例であり、実際の開発では機能の追加や改善が必要になる場合があります。この記事がお役に立てば幸いです!

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