首頁 > 文章 > 後端開發 > 如何使用PHP和Vue開發倉庫管理的供應商管理功能

如何使用PHP和Vue開發倉庫管理的供應商管理功能

WBOY原創: 2023-09-26 16:51:111002瀏覽

標題：使用PHP和Vue開發倉庫管理的供應商管理功能

前言：
在現代企業中，倉庫管理和供應商管理是非常重要的環節。倉庫管理涉及物品的入庫、出庫、庫存等操作，而供應商管理則是指對供應商資訊的管理，包括新增、編輯、刪除、查詢等功能。本文將介紹如何使用PHP和Vue來開發倉庫管理的供應商管理功能，並提供具體的程式碼範例。

一、環境準備

所需工具：PHP、Vue.js、MySQL等
需要安裝相關的PHP擴充（如PDO擴充）和Vue .js外掛（如axios）

二、資料庫設計
在MySQL資料庫中建立兩張表：warehouse和supplier。
warehouse表格用於儲存倉庫的信息，包括倉庫ID、倉庫名稱、倉庫位址等欄位。
supplier表用於儲存供應商的信息，包括供應商ID、供應商名稱、聯絡人、聯絡電話等欄位。

三、後端開發

建立PHP文件，命名為supplier.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，後端將資料插入資料庫。
範例程式碼如下：

<?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，後端根據供應商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刪除資料庫中對應的數據。
範例程式碼如下：

<?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();
?>

四、前端開發

在Vue.js專案中建立一個供應商管理的元件，命名為SupplierManagement .vue。

在該元件中，使用axios發送請求獲取供應商列表，並將資料存放在變數suppliers中。
範例程式碼如下：

<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中文網其他相關文章！

php sql mysql json pdo JS 数据库 axios

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何利用PHP和Vue實現倉庫管理的倉庫佈局管理功能下一篇：如何利用PHP和Vue實現倉庫管理的倉庫佈局管理功能

看更多