PHPとVueを使って倉庫管理向けの貨物分類管理機能を開発する方法-PHPチュートリアル-php.cn

PHPとVueを使って倉庫管理向けの貨物分類管理機能を開発する方法

王林

リリース： 2023-09-24 09:30:01

オリジナル

738 人が閲覧しました

PHPとVueを使って倉庫管理向けの貨物分類管理機能を開発する方法

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

はじめに:
現代の物流管理では、倉庫管理が重要な役割を果たしています効果。中でも商品の分類管理は倉庫の効率化に欠かせないものです。この記事では、PHPとVueを使って商品の分類管理機能を実装する簡易倉庫管理システムを開発する方法を紹介します。

1. 技術的な準備:

PHP バックエンド開発環境構築 (Apache サーバー、MySQL データベースなど)
Vue フロントエンド開発環境構築 (Node.js、Vue CLI など)
HTML、CSS、JavaScript の基本的な知識

2. データベース設計:
MySQL データベース: カテゴリ (商品分類テーブル) と製品 (商品テーブル)。具体的なテーブル構造は次のとおりです。

categories table:

id: 主キー、自動インクリメント
name: カテゴリ名

products テーブル：

id: 主キー、自動インクリメント
name: 商品の名前
category_id: 属するカテゴリの外部キー所属

3. バックエンド開発 (PHP):

データベース接続の作成:

<?php
$con=mysqli_connect("localhost","my_user","my_password","my_db");
if (mysqli_connect_errno()){
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?>

ログイン後にコピー

作成分類リストを取得するインターフェイス:

<?php
$sql = "SELECT * FROM categories";
$result = mysqli_query($con, $sql);

$data = [];
while($row = mysqli_fetch_array($result)){
  $data[] = $row;
}

echo json_encode($data);
?>

ログイン後にコピー

特定のカテゴリの商品のリストを取得するインターフェイスを作成します:

<?php
$category_id = $_GET['category_id'];
$sql = "SELECT * FROM products WHERE category_id = '$category_id'";
$result = mysqli_query($con, $sql);

$data = [];
while($row = mysqli_fetch_array($result)){
  $data[] = $row;
}

echo json_encode($data);
?>

ログイン後にコピー

商品を追加するインターフェース:

<?php
$name = $_POST['name'];
$category_id = $_POST['category_id'];

$sql = "INSERT INTO products (name, category_id) VALUES ('$name', '$category_id')";
if(mysqli_query($con, $sql)){
  echo "Product added successfully";
}
else{
  echo "Error: " . mysqli_error($con);
}

mysqli_close($con);
?>

ログイン後にコピー

IV 、フロントエンド開発 (Vue):

倉庫管理のメインページを作成:

<template>
  <div class="container">
 <h1>仓库管理系统</h1>
 <div class="categories">
   <h2>货物分类</h2>
   <ul>
     <li v-for="category in categories" :key="category.id" @click="getProducts(category.id)">
       {{ category.name }}
     </li>
   </ul>
 </div>
 <div class="products">
   <h2>货物列表</h2>
   <ul>
     <li v-for="product in products" :key="product.id">
       {{ product.name }}
     </li>
   </ul>
   <form @submit="addProduct">
     <input type="text" v-model="productName" placeholder="货物名称">
     <select v-model="selectedCategory">
       <option v-for="category in categories" :key="category.id" :value="category.id">
         {{ category.name }}
       </option>
     </select>
     <button type="submit">添加货物</button>
   </form>
 </div>
  </div>
</template>

<script>
export default {
  data() {
 return {
   categories: [],
   products: [],
   selectedCategory: '',
   productName: ''
 }
  },
  mounted() {
 this.getCategories();
  },
  methods: {
 getCategories() {
   // 发送GET请求获取分类列表
   // 更新categories数据
 },
 getProducts(categoryId) {
   // 发送GET请求获取某个分类下的货物列表
   // 更新products数据
 },
 addProduct(e) {
   e.preventDefault();
   // 发送POST请求添加新的货物
   // 更新products数据
   this.productName = '';
   this.selectedCategory = '';
 }
  }
}
</script>

ログイン後にコピー

5. プロジェクトを実行します。

バックエンドプロジェクトが PHP サーバーにデプロイされます。
フロントエンドプロジェクトは Vue CLI を使用してパッケージ化され、生成された Index.html ファイルがブラウザで開かれます。

結論:
PHPとVueを利用することで、倉庫管理の貨物分類管理機能を簡単に開発できます。この記事では、読者が関連テクノロジを実際のプロジェクトに適用するのに役立つことを期待して、具体的なコード例を提供します。もちろん、上記の例以外にも、実際のニーズに応じて、さらに機能拡張や最適化を行うことも可能です。コーディングを楽しんでください!

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