ホームページ > 記事 > バックエンド開発 > PHP と Vue を使用して倉庫管理システムを実装する方法

PHP と Vue を使用して倉庫管理システムを実装する方法

WBOYオリジナル: 2023-09-25 08:49:021447ブラウズ

1. はじめに
倉庫は、企業の重要なリンクです。商品管理、倉庫管理は重要です。最新の倉庫管理システムを導入すると、倉庫の運用効率が向上し、手動エラーが削減され、企業の物流ニーズをより適切に満たすことができます。

この記事では、PHP と Vue フレームワークを使用してシンプルな倉庫管理システムを開発する方法を紹介します。具体的なコード例を通して実装プロセスを説明します。

2. 開発環境をセットアップする
始める前に、開発環境をセットアップする必要があります。次のソフトウェアをインストールする必要があります:

PHP をサポートする Web サーバー (Apache や Nginx など);
PHP 環境;
データベース (MySQL など) ;
Vue.js

3. データベースのセットアップ
MySQL に「warehouse」という名前のデータベースを作成し、次の 2 つのテーブルを作成します:

item: 品目 ID、名前、数量、その他のフィールドを含む品目情報を倉庫に保存するために使用されます;

CREATE TABLE `item` (
 `id` INT(11) NOT NULL AUTO_INCREMENT,
 `name` VARCHAR(50) NOT NULL,
 `quantity` INT(11) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

stock: 出入りを記録するために使用されます各アイテムの在庫履歴。アイテム ID、数量、タイプ (入荷または発送)、日付、その他のフィールドが含まれます。

CREATE TABLE `stock` (
 `id` INT(11) NOT NULL AUTO_INCREMENT,
 `item_id` INT(11) NOT NULL,
 `quantity` INT(11) NOT NULL,
 `type` ENUM('in','out') NOT NULL,
 `date` DATE NOT NULL,
 PRIMARY KEY (`id`),
 KEY `item_id` (`item_id`),
 CONSTRAINT `stock_ibfk_1` FOREIGN KEY (`item_id`) REFERENCES `item` (`id`) ON DELETE CASCADE
) ENGINE=MyISAM AUTO_INCREMENT=1 DEFAULT CHARSET=utf8;

4. バックエンドの実装

データベース接続パラメータを保存する「config.php」という名前のファイルを作成します。

<?php
$dbhost = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'warehouse';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) {
 die('Could not connect: ' . mysqli_error());
}
?>

バックエンドリクエストを処理するために「index.php」という名前のファイルを作成します。

<?php
include('config.php');
$action = $_GET['action'];
if ($action == 'list') {
 $result = mysqli_query($conn, "SELECT * FROM item");
 $rows = array();
 while ($row = mysqli_fetch_assoc($result)) {
$rows[] = $row;
 }
 echo json_encode($rows);
} elseif ($action == 'add') {
 $name = $_POST['name'];
 $quantity = $_POST['quantity'];
 mysqli_query($conn, "INSERT INTO item (name, quantity) VALUES ('$name', $quantity)");
 echo mysqli_insert_id($conn);
} elseif ($action == 'update') {
 $id = $_POST['id'];
 $name = $_POST['name'];
 $quantity = $_POST['quantity'];
 mysqli_query($conn, "UPDATE item SET name='$name', quantity=$quantity WHERE id=$id");
} elseif ($action == 'delete') {
 $id = $_POST['id'];
 mysqli_query($conn, "DELETE FROM item WHERE id=$id");
}
mysqli_close($conn);
?>

5. フロントエンドの実装

フロントエンドページを記述するための「index.html」という名前のファイルを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>仓库管理系统</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.1/lib/theme-chalk/index.css">
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
 <div id="app">
<el-table :data="items" style="width: 500px;">
  <el-table-column type="index" label="序号"></el-table-column>
  <el-table-column prop="name" label="名称"></el-table-column>
  <el-table-column prop="quantity" label="数量"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
    </template>
  </el-table-column>
</el-table>
<el-dialog :visible.sync="dialogVisible" :before-close="handleCloseDialog" title="编辑物品">
  <el-form :model="currentItem" label-width="80px">
    <el-form-item label="名称">
      <el-input v-model="currentItem.name"></el-input>
    </el-form-item>
    <el-form-item label="数量">
      <el-input v-model.number="currentItem.quantity"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">确 定</el-button>
  </div>
</el-dialog>
<el-button type="primary" @click="handleAdd">新增</el-button>
 </div>
 <script>
var app = new Vue({
  el: '#app',
  data: {
    items: [],
    dialogVisible: false,
    currentItem: {}
  },
  methods: {
    fetchData() {
      axios.get('index.php?action=list').then(response => {
        this.items = response.data;
      });
    },
    handleAdd() {
      this.currentItem.name = '';
      this.currentItem.quantity = 0;
      this.dialogVisible = true;
    },
    handleSubmit() {
      if (this.currentItem.id) {
        axios.post('index.php?action=update', this.currentItem).then(() => {
          this.fetchData();
          this.dialogVisible = false;
        });
      } else {
        axios.post('index.php?action=add', this.currentItem).then(response => {
          this.currentItem.id = response.data;
          this.items.push(this.currentItem);
          this.dialogVisible = false;
        });
      }
    },
    handleCloseDialog(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done();
          this.dialogVisible = false;
        })
        .catch(() => {});
    },
    handleDelete(id) {
      axios.post('index.php?action=delete', { id }).then(() => {
        this.fetchData();
      });
    }
  },
  mounted() {
    this.fetchData();
  }
});
 </script>
</body>
</html>

6. テスト

上記のコードを指定したファイルに保存し、そのファイルを Web サーバーのルートディレクトリに配置します。
Web サーバーと PHP 環境を起動します;
ブラウザに http://localhost/index.html と入力して、倉庫管理システムにアクセスします。

7. 概要
この記事では、PHP と Vue フレームワークを使用した単純な倉庫管理システムの実装プロセスを示します。この例を通じて、PHP と Vue の利点と機能を使用して実用的な倉庫管理システムを開発し、実際にそれを強化および改善し続ける方法を学ぶことができます。この記事があなたの学習と開発作業に役立つことを願っています。

以上がPHP と Vue を使用して倉庫管理システムを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php mysql nginx html JS 数据库 apache http

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：PHPを使ってユーザー登録機能を実装する方法次の記事：PHPを使ってユーザー登録機能を実装する方法

続きを見る