首頁  >  文章  >  後端開發  >  如何使用PHP和Vue實現倉庫管理系統

如何使用PHP和Vue實現倉庫管理系統

WBOY
WBOY原創
2023-09-25 08:49:021452瀏覽

如何使用PHP和Vue實現倉庫管理系統

如何使用PHP和Vue實現倉庫管理系統

一、介紹
倉庫是企業中非常重要的一個環節,對於企業的物品管理來說,倉庫的管理是至關重要的。採用現代化的倉庫管理系統可以提高倉庫作業效率、減少人力錯誤,更能滿足企業物流需求。

本文將介紹如何使用PHP和Vue框架來發展一個簡單的倉庫管理系統。我們將透過具體的程式碼範例來說明實現過程。

二、建置開發環境
在開始之前,我們需要建構一個開發環境。需要安裝以下軟體:

  1. 一個支援PHP的web伺服器,如Apache或Nginx;
  2. PHP環境;
  3. 資料庫,如MySQL;
  4. Vue.js

三、設定資料庫
在MySQL中建立一個名為"warehouse"的資料庫,並建立以下兩個表格:

  1. 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;
  2. 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;

四、後端實作

  1. #建立一個名為"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());
    }
    ?>
  2. 建立一個名為"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);
    ?>

    五、前端實作

  3. 建立一個名為"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>

六、測試

  1. 將上述程式碼儲存到指定檔案中,並將檔案放置在web伺服器的根目錄下;
  2. 啟動web伺服器和PHP環境;
  3. 在瀏覽器中輸入http://localhost/index.html,即可存取倉庫管理系統。

七、總結
本文透過使用PHP和Vue框架來示範了一個簡單的倉庫管理系統的實作過程。透過這個例子,你可以了解如何利用PHP與Vue的優勢和特點來開發一個實用的倉庫管理系統,並在實務上不斷豐富和完善。希望本文能對你的學習和開發工作有所幫助。

以上是如何使用PHP和Vue實現倉庫管理系統的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn