Rumah > Artikel > pembangunan bahagian belakang > Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue

Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue

WBOYasal: 2023-09-25 08:49:021389semak imbas

Cara menggunakan PHP dan Vue untuk melaksanakan sistem pengurusan gudang

1 Pengenalan
Gudang adalah pautan yang sangat penting dalam perusahaan, pengurusan gudang adalah penting. Penggunaan sistem pengurusan gudang moden boleh meningkatkan kecekapan operasi gudang, mengurangkan ralat manual, dan lebih baik memenuhi keperluan logistik perusahaan.

Artikel ini akan memperkenalkan cara menggunakan rangka kerja PHP dan Vue untuk membangunkan sistem pengurusan gudang yang mudah. Kami akan menggambarkan proses pelaksanaan melalui contoh kod tertentu.

2. Sediakan persekitaran pembangunan
Sebelum kita mula, kita perlu menyediakan persekitaran pembangunan. Perisian berikut perlu dipasang:

Pelayan web yang menyokong PHP, seperti Apache atau Nginx
Persekitaran PHP
Pangkalan data, seperti MySQL
Vue.js

; pangkalan data

Buat pangkalan data dalam MySQL Pangkalan data bernama "gudang" dan buat dua jadual berikut:

item: digunakan untuk menyimpan maklumat item dalam gudang, termasuk ID item, nama, kuantiti dan medan lain

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;

stok: digunakan untuk rekod Sejarah kemasukan dan keluar setiap item, termasuk ID item, kuantiti, jenis (masuk atau keluar), tarikh dan medan lain.

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. Pelaksanaan Backend

Buat fail bernama "config.php" untuk menyimpan parameter sambungan pangkalan data.

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

Buat fail yang dipanggil "index.php" untuk mengendalikan permintaan bahagian belakang.

<?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. Pelaksanaan bahagian hadapan

Buat fail bernama "index.html" untuk menulis muka surat hadapan.

<!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. Uji

Mulakan pelayan web dan persekitaran PHP
Masukkan http: dalam pelayar; : //localhost/index.html, anda boleh mengakses sistem pengurusan gudang.

7 Ringkasan

Artikel ini menunjukkan proses pelaksanaan sistem pengurusan gudang yang mudah dengan menggunakan rangka kerja PHP dan Vue. Melalui contoh ini, anda boleh belajar cara menggunakan kelebihan dan ciri PHP dan Vue untuk membangunkan sistem pengurusan gudang yang praktikal, dan terus memperkaya dan menambah baiknya dalam amalan. Saya harap artikel ini dapat membantu kerja pembelajaran dan pembangunan anda.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php mysql nginx html JS 数据库 apache http

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Cara menggunakan PHP untuk melaksanakan fungsi pendaftaran penggunaArtikel seterusnya：Cara menggunakan PHP untuk melaksanakan fungsi pendaftaran pengguna

Artikel berkaitan

Lihat lagi