Bagaimana untuk memadam pengguna dalam bentuk vue

Vue ialah rangka kerja JavaScript moden yang digunakan secara meluas dalam bidang pembangunan web. Apabila anda membangunkan aplikasi web, anda biasanya memerlukan borang untuk membenarkan pengguna memasukkan maklumat. Walau bagaimanapun, kadangkala anda perlu memadam pengguna sedia ada daripada borang Seterusnya, mari kita lihat cara menggunakan Vue.js untuk mencapai fungsi ini.

1. Tunjukkan semua pengguna semasa

Mula-mula, kita perlu mendapatkan maklumat pengguna sedia ada dari bahagian belakang dan memaparkannya pada halaman hujung hadapan. Kita boleh menggunakan komponen Vue.js untuk mencapai fungsi ini. Tentukan atribut data dalam komponen untuk menyimpan semua maklumat pengguna. Kemudian, gunakan arahan v-for untuk mengulangi semua pengguna dan memaparkan butiran mereka.

<template>
  <div>
    <h2>All Users</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="deleteUser(user.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    deleteUser(id) {
      // TODO: Implement delete user functionality
    }
  },
  mounted() {
    // TODO: Fetch all users from backend and assign to this.users
  }
};
</script>

Dalam kaedah pemasangan komponen, kami boleh membuat permintaan kepada bahagian belakang untuk mendapatkan semua maklumat pengguna dan kemudian menyimpannya dalam tatasusunan this.users. Pada butang "Padam" setiap pengguna, kami menambah acara klik untuk mencetuskan kaedah deleteUser(), menghantar IDnya.

2. Padamkan pengguna yang ditentukan

Seterusnya, kita perlu memadamkan pengguna dengan ID yang ditentukan dalam kaedah deleteUser(). Kita boleh menggunakan pustaka axios untuk membuat permintaan DELETE ke bahagian belakang untuk memadamkan pengguna, dan mengemas kini tatasusunan this.users supaya senarai pengguna boleh dikemas kini.

<template>
  <div>
    <h2>All Users</h2>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="deleteUser(user.id)">Delete</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  methods: {
    deleteUser(id) {
      axios.delete(`/api/users/${id}`)
        .then(response => {
          // Successfully deleted user from backend.
          // Update users array to refresh table.
          this.users = this.users.filter(u => u.id !== id);
        })
        .catch(error => {
          console.log(`Error deleting user with ID ${id}.`, error);
        });
    }
  },
  mounted() {
    axios.get('/api/users')
      .then(response => {
        // Successfully fetched all users from backend.
        // Update users array to refresh table.
        this.users = response.data;
      })
      .catch(error => {
        console.log('Error fetching all users.', error);
      });
  }
};
</script>

Dalam contoh ini, kami menggunakan pustaka axios untuk membuat permintaan DELETE ke bahagian belakang dan lulus ID pengguna untuk dipadamkan sebagai parameter. Selepas berjaya memadamkan pengguna, kami mengemas kini tatasusunan this.users supaya senarai pengguna boleh dikemas kini. Kami juga menambah beberapa kod pengendalian ralat untuk mengendalikan kes-kes di mana pemadaman gagal.

Ringkasan

Dengan menggunakan perpustakaan Vue.js dan axios, kami boleh melaksanakan fungsi memadam pengguna sedia ada dalam borang dengan mudah. Kami mula-mula menghantar permintaan GET ke bahagian belakang untuk mendapatkan semua data pengguna dan memaparkannya pada halaman hujung hadapan. Kemudian, kami menambah butang "Padam" dan acara klik untuk mencetuskan kaedah padam. Dalam kaedah padam, kami menghantar permintaan DELETE ke bahagian belakang untuk memadamkan pengguna dengan ID yang ditentukan dan mengemas kini tatasusunan pengguna selepas berjaya memadamkan pengguna.

Atas ialah kandungan terperinci Bagaimana untuk memadam pengguna dalam bentuk vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!