How to use PHP and Vue to develop supplier management functions for warehouse management

Title: Using PHP and Vue to develop supplier management functions for warehouse management

Foreword:
In modern enterprises, warehouse management and supplier management are very important important link. Warehouse management involves operations such as the entry, exit, and inventory of items, while supplier management refers to the management of supplier information, including functions such as adding, editing, deleting, and querying. This article will introduce how to use PHP and Vue to develop the supplier management function of warehouse management, and provide specific code examples.

1. Environment preparation

1. Required tools: PHP, Vue.js, MySQL, etc.
2. Need to install relevant PHP extensions (such as PDO extensions) and Vue .js plug-in (such as axios)

2. Database design
Create two tables in the MySQL database: warehouse and supplier.
The warehouse table is used to store warehouse information, including warehouse ID, warehouse name, warehouse address and other fields.
The supplier table is used to store supplier information, including supplier ID, supplier name, contact person, contact number and other fields.

3. Back-end development

1. Create a PHP file named supplier.php to handle supplier-related requests.

2. Write code to obtain the supplier list, use PDO to connect to the database, and execute SQL statements to obtain the supplier list information. Return the results to the front end in JSON format.
   The sample code is as follows:

   <?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. Write the code to add a supplier. The front end sends the supplier information to supplier.php through a POST request, and the back end inserts the data into the database.
   The sample code is as follows:

   <?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. Write the code to edit the supplier. The front-end sends the supplier information to supplier.php through POST request, and the back-end updates the database according to the supplier ID. corresponding data.
   The sample code is as follows:

   <?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. Write the code to delete the supplier. The front-end sends the supplier ID to supplier.php through POST request, and the back-end deletes the supplier ID from the database. corresponding data.
   The sample code is as follows:

   <?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. Front-end development

1. Create a supplier management component in the Vue.js project and name it SupplierManagement .vue.

2. In this component, use axios to send a request to obtain the supplier list, and store the data in the variable suppliers.
   The sample code is as follows:

   <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. Add the functions of adding, editing and deleting suppliers in the component. Sending a POST request via axios sends the corresponding data to supplier.php.
   The sample code is as follows:

   <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>

   The above is a specific code example for using PHP and Vue to develop the supplier management function of warehouse management. Through these sample codes, we can implement functions such as adding, editing, deleting and querying suppliers, and improve the efficiency and accuracy of warehouse management. Of course, this is just a simple example, and some functions and improvements may need to be added in actual development. Hope this article helps you!

The above is the detailed content of How to use PHP and Vue to develop supplier management functions for warehouse management. For more information, please follow other related articles on the PHP Chinese website!