Heim > Artikel > Backend-Entwicklung > So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue

So implementieren Sie ein Lagerverwaltungssystem mit PHP und Vue

WBOYOriginal: 2023-09-25 08:49:021452Durchsuche

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;

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;

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

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

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>

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!

php mysql nginx html JS 数据库 apache http

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So verwenden Sie PHP zur Implementierung der BenutzerregistrierungsfunktionNächster Artikel：So verwenden Sie PHP zur Implementierung der Benutzerregistrierungsfunktion

In Verbindung stehende Artikel

Mehr sehen