Rumah > Artikel > pembangunan bahagian belakang > 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
。
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) );
inventory
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 );
<?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); } ?>
<?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); ?>
<?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"; } ?>
<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>
import Vue from 'vue'; import Products from './components/Products.vue'; new Vue({ render: h => h(Products) }).$mount('#app');
Letakkan kod bahagian hadapan dalam direktori yang sesuai dan gunakan Vue CLI atau alatan lain untuk membina dan membungkusnya.
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!