So implementieren Sie die Datenlöschfunktion mit PHP und Vue

So verwenden Sie PHP und Vue, um die Datenlöschfunktion zu implementieren

Einführung:
In der Webentwicklung ist das Hinzufügen, Löschen, Ändern und Überprüfen von Daten ein häufiger Vorgang. In diesem Artikel wird detailliert beschrieben, wie die Datenlöschfunktion durch die Kombination von PHP und Vue implementiert wird, einschließlich des Schreibens von Front-End-Vue und der Verarbeitung von Back-End-PHP.

1. Front-End-Implementierung

1. Vue-Komponente erstellen
   Erstellen Sie zunächst eine Komponente zum Löschen in der Vue-Komponentendatei, z. B. DeleteButton.vue. Diese Komponente enthält eine Schaltfläche, die die Löschaktion auslöst.

<script><br>Exportstandard {<br> Methoden: {</script>

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

}
}

2. Axios zum Senden von Anfragen verwenden
   Um mit dem Backend zu kommunizieren, müssen wir das Vue-Plugin Axios zum Senden von HTTP-Anfragen verwenden. Installieren Sie zunächst Axios im Projekt:

npm install axios

Führen Sie als Nächstes Axios in DeleteButton.vue ein und senden Sie die Anfrage in der Löschmethode. Angenommen, unsere Löschschnittstelle ist delete.php, die einen ID-Parameter zur Identifizierung der zu löschenden Daten erhalten muss.

<script> <br>Erstellen Sie eine delete.php im Stammverzeichnis des Projekts, um die vom Frontend übergebene Löschanforderung zu empfangen und zu verarbeiten. </script>

$id = $_GET['id']; // Den vom Frontend übergebenen ID-Parameter abrufen

// Hier die Logik zum Löschen von Daten hinzufügen

// Die Antwort zurückgeben

$ Antwort = [

'Status' => 'Erfolg',

'Nachricht' => 'Erfolgreich löschen'
1. ];
   
header('Content-Type: application/json');

echo json_encode($response);

? >

Mit der Datenbank verbinden, um Daten zu löschen

Fügen Sie den Code zum Herstellen einer Verbindung mit der Datenbank und zum Löschen von Daten in delete.php hinzu. Nehmen wir als Beispiel die MySQL-Datenbank und gehen davon aus, dass unsere Datentabelle benannte Benutzer sind und wir die Daten löschen müssen, deren ID die übergebene Parameter-ID ist.

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

$password = "";

$dbname = "test";

$id = $_GET['id'] ; // Holen Sie sich den vom Frontend übergebenen ID-Parameter

// Erstellen Sie eine Verbindung
2. $conn = new mysqli($servername, $username, $password, $dbname);
   
// Überprüfen Sie die Verbindung

if ($ conn-> connect_error) {

die("Verbindung fehlgeschlagen: " . $conn->connect_error);
}

// Daten löschen
$sql = "DELETE FROM users WHERE id = ${id}";

if ($ conn->query($sql) === TRUE) {

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

];

} else {

$response = [

'status' => 'success',
'message' => '删除成功'

];
}

$conn- >close( );

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

echo json_encode($response);
?>

Zusammenfassung:
Über die Front-End-Komponenten und das Axios-Plug-in von Vue, Wir können problemlos mit dem Back-End kommunizieren und die Datenlöschfunktion realisieren. Das Backend verwendet PHP, um eine Verbindung zur Datenbank herzustellen und Datenlöschvorgänge basierend auf den vom Frontend übergebenen Parametern durchzuführen. Diese Kombination kann die Entwicklungseffizienz effektiv verbessern und die Datensicherheit gewährleisten.

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