Comment utiliser PHP et Vue pour implémenter la fonction de gestion des membres de la gestion d'entrepôt

Comment utiliser PHP et Vue pour implémenter la fonction de gestion des membres de la gestion d'entrepôt

Dans la société des affaires d'aujourd'hui, la gestion des membres joue un rôle important dans le développement des entreprises. Afin de mieux gérer les informations sur les membres et d'améliorer l'efficacité de la gestion des entrepôts, nous pouvons utiliser PHP et Vue pour implémenter la fonction de gestion des membres de la gestion des entrepôts. Ce qui suit présentera les étapes de mise en œuvre spécifiques et fournira des exemples de code pertinents.

1. Conception de la base de données

Tout d'abord, nous devons concevoir une table d'adhésion pour stocker les informations sur les membres. Le tableau peut contenir les champs suivants : identifiant de membre, nom de membre, numéro de téléphone portable du membre, numéro de carte d'identité de membre et d'autres informations. Cette table peut être créée à l'aide d'une base de données MySQL.

2. Implémentation back-end

1. Créez un fichier PHP nommé "member.php" pour gérer les demandes liées à l'adhésion.
2. Dans le fichier "member.php", connectez-vous d'abord à la base de données, vous pouvez utiliser le code suivant :

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

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

Veuillez remplacer "username" et "password" par le nom d'utilisateur et le mot de passe de la base de données, et remplacer "database" " avec le nom de la base de données .

3. Pour implémenter la fonction d'obtention de toutes les informations sur les membres, vous pouvez utiliser le code suivant :

$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 "暂无会员信息";
}

Ce code interrogera toutes les informations sur les membres de la base de données et les renverra au front-end au format JSON.

4. Pour implémenter la fonction d'ajout de membres, vous pouvez utiliser le code suivant :

$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;
}

Ce code obtiendra le nom, le numéro de téléphone portable et le numéro d'identification du membre depuis le front-end et les insérera dans la base de données.

5. Pour implémenter la fonction de suppression de membres, vous pouvez utiliser le code suivant :

$id = $_POST["id"];

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

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

Ce code obtiendra l'identifiant du membre depuis le front-end et le supprimera de la base de données.

3. Implémentation front-end

1. Créez une instance Vue et introduisez la bibliothèque Vue et la bibliothèque Axios dans le fichier "index.html".
2. Dans l'instance Vue, utilisez Axios pour envoyer une requête, obtenir la liste des membres et l'afficher sur la page. Vous pouvez utiliser le code suivant :

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

Ce code enverra une requête au backend, obtiendra la liste des membres et l'attribuera à l'attribut "members" dans l'instance Vue.

3. Afficher la liste des membres sur la page. Vous pouvez utiliser le code suivant :

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

Ce code affichera la liste des membres sur la page et ajoutera un bouton supprimer pour chaque membre.

4. Implémentez la fonction d'ajout de membres. Vous pouvez utiliser le code suivant :

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

Ce code affichera un formulaire sur la page pour ajouter des informations sur les nouveaux membres. Lorsque l'utilisateur clique sur le bouton "Ajouter", la méthode "addMember" sera appelée.

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

Ce code enverra une demande au backend, ajoutera les informations sur les membres à la base de données et actualisera la liste des membres.

5. Implémenter la fonction de suppression de membres. Vous pouvez utiliser le code suivant :

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

Ce code enverra une requête au backend, supprimera le membre sélectionné de la base de données et actualisera la liste des membres.

Grâce aux étapes ci-dessus, nous pouvons utiliser PHP et Vue pour implémenter la fonction de gestion des membres de la gestion d'entrepôt. De cette manière, nous pouvons gérer plus facilement les informations sur les membres et améliorer l’efficacité de la gestion des entrepôts. J'espère que le contenu ci-dessus vous sera utile !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!