Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan inventori untuk pengurusan gudang

Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan inventori untuk pengurusan gudang

Pengenalan:
Dengan perkembangan industri e-dagang dan O2O, pengurusan gudang telah menjadi semakin penting untuk kecekapan operasi dan pengalaman pengguna perusahaan. Untuk mencapai operasi pengurusan gudang yang cekap, kami boleh menggunakan PHP dan Vue untuk membina sistem pengurusan inventori. Artikel ini akan memperkenalkan secara terperinci cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan inventori pengurusan gudang, dan menyediakan contoh kod khusus.

1. Buat jadual pangkalan data
Pertama, kita perlu buat jadual pangkalan data untuk menyimpan data berkaitan pengurusan gudang. Dalam contoh ini, kami akan membuat dua jadual, produk dan inventori. products和inventory。

1. products 表

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

Jadual produk

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

Jadual inventori

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. Pembangunan backend
2. Seterusnya, kami menggunakan PHP untuk membangunkan antara muka belakang mengendalikan permintaan dari bahagian hadapan dan berinteraksi dengan pangkalan data.

3. Sambung ke pangkalan data

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

Dapatkan senarai produk

<?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";
}
?>

Kemas kini kuantiti inventori

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>

menggunakan antara muka bahagian hadapan ke hadapan dan panggil antara muka belakang Untuk merealisasikan fungsi pengurusan inventori.
Dapatkan senarai produk dan paparkan

import Vue from 'vue';
import Products from './components/Products.vue';

new Vue({
  render: h => h(Products)
}).$mount('#app');

Buat contoh Vue
1. rrreee
   
2. Empat Jalankan projek
   
3. Gunakan kod hujung belakang yang sesuai
   Gunakan kod hujung belakang yang sesuai. pelayan PHP.

Konfigurasikan kod bahagian hadapan

Letakkan kod bahagian hadapan dalam direktori yang sesuai dan gunakan Vue CLI atau alatan lain untuk membina dan membungkusnya.

Jalankan projek🎜Buka pelayar dan akses fail kemasukan projek untuk melihat senarai produk dan fungsi kemas kini kuantiti inventori. 🎜🎜🎜Kesimpulan: 🎜Melalui artikel ini, kami mempelajari cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan inventori untuk pengurusan gudang. Kami mula-mula mencipta jadual pangkalan data dan menggunakan PHP untuk menulis antara muka belakang untuk melaksanakan fungsi mendapatkan senarai produk dan mengemas kini kuantiti inventori. Kemudian, kami menggunakan Vue untuk membina antara muka pengguna dan melaksanakan fungsi pengurusan inventori dengan memanggil antara muka bahagian belakang. Saya harap artikel ini dapat membantu pembaca lebih memahami dan menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan inventori untuk pengurusan gudang. 🎜

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk membangunkan fungsi pengurusan inventori untuk pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!