PHP と Vue を使用して倉庫管理のための在庫管理機能を開発する方法-PHPチュートリアル-php.cn

PHP と Vue を使用して倉庫管理のための在庫管理機能を開発する方法

WBOY

リリース： 2023-09-24 10:28:02

オリジナル

646 人が閲覧しました

PHP と Vue を使用して倉庫管理のための在庫管理機能を開発する方法

PHP と Vue を使用して倉庫管理の在庫管理機能を開発する方法

はじめに:
電子商取引と O2O 業界の発展に伴い、倉庫は企業にとって管理は非常に重要であり、業務効率とユーザーエクスペリエンスがますます重要になっています。倉庫管理の効率的な運用を実現するために、PHP と Vue を使用して在庫管理システムを構築できます。この記事では、PHPとVueを使って倉庫管理の在庫管理機能を開発する方法と、具体的なコード例を詳しく紹介します。

1. データベーステーブルを作成する
まず、倉庫管理に関連するデータを保存するデータベーステーブルを作成する必要があります。この例では、products と inventory という 2 つのテーブルを作成します。

#製品 テーブル

CREATE TABLE products (
  id INT(11) NOT NULL AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  price DECIMAL(10, 2) NOT NULL,
  PRIMARY KEY (id)
);

ログイン後にコピー

##在庫
テーブル<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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 );</pre><div class="contentsignin">ログイン後にコピー</div></div>

次に、PHP を使用して、フロントエンドのリクエストを処理し、データベースと対話するために使用されるバックエンドインターフェイスを開発します。

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

ログイン後にコピー

フロントエンド部分では、Vue を使用してユーザーインターフェイスを構築し、バックエンドインターフェイスを呼び出して在庫管理機能を実装します。

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

ログイン後にコピー

バックエンドコードをデプロイする

フロントエンドコードの構成
プロジェクトの実行

この記事では、PHP と Vue を使用して倉庫管理の在庫管理機能を開発する方法を学びました。まずデータベーステーブルを作成し、PHP を使用してバックエンドインターフェイスを記述し、商品リストの取得と在庫数量の更新機能を実装しました。次に、Vue を使用してユーザーインターフェイスを構築し、バックエンドインターフェイスを呼び出すことで在庫管理機能を実装しました。この記事が、読者が PHP と Vue をよりよく理解し、倉庫管理のための在庫管理機能を開発するために適用するのに役立つことを願っています。

以上がPHP と Vue を使用して倉庫管理のための在庫管理機能を開発する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。