So implementieren Sie mit PHP und Vue die Mitgliederverwaltungsfunktion der Lagerverwaltung

So verwenden Sie PHP und Vue, um die Mitgliederverwaltungsfunktion der Lagerverwaltung zu implementieren

In der heutigen Geschäftsgesellschaft spielt die Mitgliederverwaltung eine wichtige Rolle bei der Entwicklung von Unternehmen. Um die Mitgliederinformationen besser zu verwalten und die Effizienz der Lagerverwaltung zu verbessern, können wir PHP und Vue verwenden, um die Mitgliederverwaltungsfunktion der Lagerverwaltung zu implementieren. Im Folgenden werden die spezifischen Implementierungsschritte vorgestellt und relevante Codebeispiele bereitgestellt.

1. Datenbankdesign

Zuerst müssen wir eine Mitgliedertabelle entwerfen, um Mitgliedsinformationen zu speichern. Die Tabelle kann die folgenden Felder enthalten: Mitglieds-ID, Mitgliedsname, Mitglieds-Mobiltelefonnummer, Mitglieds-ID-Kartennummer und andere Informationen. Diese Tabelle kann mit einer MySQL-Datenbank erstellt werden.

2. Back-End-Implementierung

1. Erstellen Sie eine PHP-Datei mit dem Namen „member.php“, um mitgliedschaftsbezogene Anfragen zu bearbeiten.
2. Stellen Sie in der Datei „member.php“ zunächst eine Verbindung zur Datenbank her. Sie können den folgenden Code verwenden:

$conn = new mysqli("localhost", "username", "password", "database");

if ($conn->connect_error) {
    die("连接数据库失败: " . $conn->connect_error);
}

Bitte ersetzen Sie „Benutzername“ und „Passwort“ durch den Benutzernamen und das Passwort der Datenbank und ersetzen Sie „Datenbank“. " mit dem Namen der Datenbank.

3. Um die Funktion zum Abrufen aller Mitgliedsinformationen zu implementieren, können Sie den folgenden Code verwenden:

$sql = "SELECT * FROM members";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    $members = array();
    while ($row = $result->fetch_assoc()) {
        $members[] = $row;
    }
    echo json_encode($members);
} else {
    echo "暂无会员信息";
}

Dieser Code fragt alle Mitgliedsinformationen aus der Datenbank ab und gibt sie im JSON-Format an das Frontend zurück.

4. Um die Funktion zum Hinzufügen von Mitgliedern zu implementieren, können Sie den folgenden Code verwenden:

$name = $_POST["name"];
$phone = $_POST["phone"];
$idCard = $_POST["idCard"];

$sql = "INSERT INTO members (name, phone, id_card) VALUES ('$name', '$phone', '$idCard')";

if ($conn->query($sql) === TRUE) {
    echo "添加会员成功";
} else {
    echo "添加会员失败: " . $conn->error;
}

Dieser Code ruft den Namen, die Mobiltelefonnummer und die ID-Nummer des Mitglieds vom Frontend ab und fügt sie in die Datenbank ein.

5. Um die Funktion zum Löschen von Mitgliedern zu implementieren, können Sie den folgenden Code verwenden:

$id = $_POST["id"];

$sql = "DELETE FROM members WHERE id=$id";

if ($conn->query($sql) === TRUE) {
    echo "删除会员成功";
} else {
    echo "删除会员失败: " . $conn->error;
}

Dieser Code ruft die Mitglieds-ID vom Frontend ab und löscht sie aus der Datenbank.

3. Front-End-Implementierung

1. Erstellen Sie eine Vue-Instanz und führen Sie die Vue-Bibliothek und die Axios-Bibliothek in der Datei „index.html“ ein.
2. Verwenden Sie in der Vue-Instanz Axios, um eine Anfrage zu senden, die Mitgliederliste abzurufen und sie auf der Seite anzuzeigen. Sie können den folgenden Code verwenden:

new Vue({
  el: '#app',
  data: {
    members: []
  },
  mounted() {
    this.fetchMembers();
  },
  methods: {
    fetchMembers() {
      axios.get('member.php')
        .then(response => {
          this.members = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
});

Dieser Code sendet eine Anfrage an das Backend, ruft die Mitgliederliste ab und weist sie dem Attribut „Mitglieder“ in der Vue-Instanz zu.

3. Mitgliederliste auf der Seite anzeigen. Sie können den folgenden Code verwenden:

<div id="app">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>姓名</th>
        <th>手机号码</th>
        <th>身份证号码</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="member in members">
        <td>{{ member.id }}</td>
        <td>{{ member.name }}</td>
        <td>{{ member.phone }}</td>
        <td>{{ member.id_card }}</td>
        <td>
          <button @click="deleteMember(member.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Dieser Code zeigt die Mitgliederliste auf der Seite an und fügt für jedes Mitglied eine Schaltfläche zum Löschen hinzu.

4. Implementieren Sie die Funktion zum Hinzufügen von Mitgliedern. Sie können den folgenden Code verwenden:

<div id="app">
  <form @submit.prevent="addMember">
    <input type="text" v-model="name" placeholder="姓名" required>
    <input type="tel" v-model="phone" placeholder="手机号码" required>
    <input type="text" v-model="idCard" placeholder="身份证号码" required>
    <button type="submit">添加</button>
  </form>
  <table>
    <!-- 省略会员列表展示的代码 -->
  </table>
</div>

Dieser Code zeigt ein Formular auf der Seite an, um neue Mitgliedsinformationen hinzuzufügen. Wenn der Benutzer auf die Schaltfläche „Hinzufügen“ klickt, wird die Methode „addMember“ aufgerufen.

methods: {
  addMember() {
    axios.post('member.php', {
      name: this.name,
      phone: this.phone,
      idCard: this.idCard
    })
    .then(response => {
      alert(response.data);
      this.fetchMembers();
      this.name = '';
      this.phone = '';
      this.idCard = '';
    })
    .catch(error => {
      console.log(error);
    });
  }
}

Dieser Code sendet eine Anfrage an das Backend, fügt Mitgliedsinformationen zur Datenbank hinzu und aktualisiert die Mitgliederliste.

5. Implementieren Sie die Funktion zum Löschen von Mitgliedern. Sie können den folgenden Code verwenden:

methods: {
  deleteMember(id) {
    axios.post('member.php', {
      id: id
    })
    .then(response => {
      alert(response.data);
      this.fetchMembers();
    })
    .catch(error => {
      console.log(error);
    });
  }
}

Dieser Code sendet eine Anfrage an das Backend, löscht das ausgewählte Mitglied aus der Datenbank und aktualisiert die Mitgliederliste.

Durch die oben genannten Schritte können wir PHP und Vue verwenden, um die Mitgliederverwaltungsfunktion der Lagerverwaltung zu implementieren. Auf diese Weise können wir die Mitgliederinformationen bequemer verwalten und die Effizienz der Lagerverwaltung verbessern. Ich hoffe, der obige Inhalt ist hilfreich für Sie!

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