So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue-PHP-Tutorial-php.cn

So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue

WBOY

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

Original

1446 Leute haben es durchsucht

So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue

1. Das Lager ist ein sehr wichtiges Glied im Unternehmen. Die Verwaltung des Lagers ist von entscheidender Bedeutung. Die Einführung eines modernen Lagerverwaltungssystems kann die Effizienz des Lagerbetriebs verbessern, manuelle Fehler reduzieren und die Logistikanforderungen von Unternehmen besser erfüllen.

In diesem Artikel wird erläutert, wie Sie mithilfe des PHP- und Vue-Frameworks ein einfaches Lagerverwaltungssystem entwickeln. Wir veranschaulichen den Implementierungsprozess anhand konkreter Codebeispiele.

2. Richten Sie eine Entwicklungsumgebung ein

Bevor wir beginnen, müssen wir eine Entwicklungsumgebung einrichten. Die folgende Software muss installiert sein:

Datenbank, wie z. B. MySQL;
Vue.js
3 Datenbank

Artikel: Wird zum Speichern von Artikelinformationen im Lager verwendet, einschließlich Artikel-ID, Name, Menge und anderen Feldern

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;

Nach dem Login kopieren

Lagerbestand: wird für Aufzeichnungen verwendet. Der Ein- und Ausgangsverlauf jedes Artikels, einschließlich Artikel-ID, Menge, Typ (eingehend oder ausgehend), Datum und anderer Felder.

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;

Nach dem Login kopieren

4. Backend-Implementierung

Erstellen Sie eine Datei mit dem Namen „config.php“, um Datenbankverbindungsparameter zu speichern.

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

Nach dem Login kopieren

Erstellen Sie eine Datei namens „index.php“, um Backend-Anfragen zu verarbeiten.

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

Nach dem Login kopieren

5. Frontend-Implementierung
Erstellen Sie eine Datei mit dem Namen „index.html“ zum Schreiben von Frontend-Seiten.

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

Nach dem Login kopieren

6. Testen Sie: Speichern Sie den obigen Code in der angegebenen Datei und legen Sie die Datei im Stammverzeichnis des Webservers ab.

Starten Sie den Webserver und die PHP-Umgebung.

Geben Sie http: ein : //localhost/index.html können Sie auf das Lagerverwaltungssystem zugreifen.

7. Zusammenfassung
Dieser Artikel demonstriert den Implementierungsprozess eines einfachen Lagerverwaltungssystems mithilfe des PHP- und Vue-Frameworks. Anhand dieses Beispiels erfahren Sie, wie Sie die Vorteile und Funktionen von PHP und Vue nutzen, um ein praxistaugliches Lagerverwaltungssystem zu entwickeln und dieses in der Praxis weiter zu bereichern und zu verbessern. Ich hoffe, dass dieser Artikel für Ihre Lern- und Entwicklungsarbeit hilfreich sein kann.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!