Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue-tutorial php-php.cn

Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue

WBOY

Lepaskan： 2023-09-25 08:56:01

asal

1412 orang telah melayarinya

Bagaimana untuk melaksanakan sistem pengurusan gudang menggunakan PHP dan Vue

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;

Salin selepas log masuk

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;

Salin selepas log masuk

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());
}
?>

Salin selepas log masuk

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!