Bagaimana untuk melaksanakan fungsi pemadaman data menggunakan PHP dan Vue

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pemadaman data

Pengenalan:
Dalam pembangunan web, menambah, memadam, mengubah suai dan menyemak data adalah operasi biasa. Artikel ini akan memperkenalkan secara terperinci cara melaksanakan fungsi pemadaman data melalui gabungan PHP dan Vue, termasuk penulisan Vue bahagian hadapan dan pemprosesan PHP bahagian belakang.

1. Pelaksanaan bahagian hadapan

1. Buat komponen Vue
   Pertama, buat komponen untuk pemadaman dalam fail komponen Vue, seperti DeleteButton.vue. Komponen ini mengandungi butang yang mencetuskan tindakan pemadaman. .

Menggunakan axios untuk menghantar permintaan
Untuk berkomunikasi dengan bahagian belakang, kami perlu menggunakan axios pemalam Vue untuk menghantar permintaan HTTP. Mula-mula, pasang axios dalam projek:

npm install axios

Seterusnya, perkenalkan axios dalam DeleteButton.vue dan hantar permintaan dalam kaedah padam. Andaikan bahawa antara muka pemadaman kami ialah delete.php, yang perlu menerima parameter id sebagai pengenalpastian data yang akan dipadamkan.

Buat delete.php dalam direktori akar projek untuk menerima dan memproses permintaan padam yang diluluskan oleh bahagian hadapan.

2. $id = $_GET['id']; // Dapatkan parameter id yang diluluskan oleh bahagian hadapan

// Tambah logik pemadaman data di sini

// Kembalikan respons

$ respons = [

'status' => 'berjaya',

'message' => 'Berjaya padam'
];

header('Content-Type: application/json');
echo json_encode($response) ;

? >

Sambung ke pangkalan data untuk memadam data

Tambahkan kod untuk menyambung ke pangkalan data dan padam data dalam delete.php. Mengambil pangkalan data MySQL sebagai contoh, anggap bahawa jadual data kami dinamakan pengguna, dan kami perlu memadamkan data yang IDnya ialah ID parameter yang diluluskan.

$servername = "localhost";
$username = "root";$password = "";

$dbname = "test";

$id = $_GET['id'] ; // Dapatkan parameter id yang diluluskan oleh bahagian hadapan

// Buat sambungan

$conn = mysqli baharu($nama pelayan, $nama pengguna, $kata laluan, $dbname);

// Semak sambungan
jika ($ conn-> connect_error) {
die("Sambungan gagal: " . $conn->connect_error);
}

// Padam data
$sql = "DELETE FROM users WHERE id = ${id}";

jika ($ conn->query($sql) === BENAR) {

$respons = [

2. deleteData() {
     // 在这里触发删除事件
   }

   
   ];
} lain {

$response = [

deleteData() {
  const id = 1; // 假设需要删除的数据的id为1

  axios.delete('delete.php', {
    params: {
      id: id
    }
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });
}

];
}

$conn- >close( );

header('Content-Type: application/json');

echo json_encode($response);

?>

Ringkasan:

Melalui komponen bahagian hadapan dan pemalam axios Vue, kita boleh berkomunikasi dengan mudah dengan bahagian belakang Berkomunikasi dan merealisasikan fungsi pemadaman data. Bahagian belakang menggunakan PHP untuk menyambung ke pangkalan data dan melaksanakan operasi pemadaman data berdasarkan parameter yang diluluskan oleh bahagian hadapan. Gabungan ini boleh meningkatkan kecekapan pembangunan dan memastikan keselamatan data dengan berkesan.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi pemadaman data menggunakan PHP dan Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!