ホームページ > 記事 > バックエンド開発 > PHP と Vue を使用して倉庫管理用のサプライヤー管理機能を開発する方法

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

WBOYオリジナル: 2023-09-26 16:51:11991ブラウズ

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

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

1. 環境の準備

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

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

3. バックエンド開発

サプライヤー関連のリクエストを処理するために、supplier.php という名前の PHP ファイルを作成します。
サプライヤーリストを取得するコードを記述し、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);
?>
```
サプライヤーを追加するコードを記述します。フロントエンドは 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();
?>
```
サプライヤーを編集するコードを記述します。フロントエンドは 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();
?>
```
サプライヤーを削除するコードを記述します。フロントエンドは 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. フロントエンド開発

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

このコンポーネントでは、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>

サプライヤーの追加、編集、削除の機能をコンポーネントに追加します。 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 サイトの他の関連記事を参照してください。

php sql mysql json pdo JS 数据库 axios

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHPとVueを使って倉庫管理の倉庫レイアウト管理機能を実装する方法次の記事：PHPとVueを使って倉庫管理の倉庫レイアウト管理機能を実装する方法

続きを見る