如何使用PHP和Vue开发仓库管理的库存管理功能
引言:
随着电商和O2O行业的发展,仓库管理对于企业的运营效率和用户体验变得愈发重要。为了实现仓库管理的高效运作,我们可以借助PHP和Vue来构建一个库存管理系统。本文将详细介绍如何使用PHP和Vue开发仓库管理的库存管理功能,并提供具体的代码示例。
一、创建数据库表
首先,我们需要创建数据库表来存储仓库管理相关的数据。在这个示例中,我们将创建两个表,分别是products
和inventory
。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
products
表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 );
inventory
表<?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');
配置前端代码
将前端代码放在一个合适的目录下,并使用Vue CLI或其他工具进行构建和打包。
以上是如何使用PHP和Vue开发仓库管理的库存管理功能的详细内容。更多信息请关注PHP中文网其他相关文章!