Comment implémenter la fonction de suppression de données en utilisant PHP et Vue

Comment utiliser PHP et Vue pour implémenter la fonction de suppression de données

Introduction :
Dans le développement Web, l'ajout, la suppression, la modification et la vérification des données sont une opération courante. Cet article présentera en détail comment implémenter la fonction de suppression de données grâce à la combinaison de PHP et Vue, y compris l'écriture de Vue front-end et le traitement de PHP back-end.

1. Implémentation frontale

1. Créer un composant Vue
   Tout d'abord, créez un composant à supprimer dans le fichier du composant Vue, tel que DeleteButton.vue. Ce composant contient un bouton qui déclenche l'action de suppression.

<script><br>export par défaut {<br> méthodes : {</script>

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

}
}

2. Utiliser axios pour envoyer des requêtes
   Afin de communiquer avec le backend, nous devons utiliser le plugin Vue axios pour envoyer des requêtes HTTP. Tout d'abord, installez axios dans le projet :

npm install axios

Ensuite, introduisez axios dans DeleteButton.vue et envoyez la requête dans la méthode delete. Supposons que notre interface de suppression soit delete.php, qui doit recevoir un paramètre id comme identification des données à supprimer.

<script><br>importer des axios depuis 'axios';</script>

exporter par défaut {
méthodes : {

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

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

}
}

Implémentation du backend

1. Créer un fichier delete.php
   Créez un delete.php dans le répertoire racine du projet pour recevoir et traiter la demande de suppression transmise par le front-end.

$id = $_GET['id']; // Récupère le paramètre id transmis par le front-end

// Ajoutez la logique de suppression des données ici

// Renvoyez la réponse
$ réponse = [
'statut' => 'succès',
'message' => 'Supprimer avec succès'
];

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

2. Connectez-vous à la base de données pour supprimer les données
   Ajoutez le code pour vous connecter à la base de données et supprimez les données dans delete.php. En prenant la base de données MySQL comme exemple, supposons que notre table de données soit nommée utilisateurs et que nous devions supprimer les données dont l'ID est l'ID du paramètre transmis.

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

$id = $_GET['id'] ; // Récupère le paramètre id transmis par le front-end

// Créer une connexion
$conn = new mysqli($servername, $username, $password, $dbname);

// Vérifier la connexion
if ($ conn-> connect_error) {
die("Échec de la connexion : " . $conn->connect_error);
}

// Supprimer les données
$sql = "SUPPRIMER DES utilisateurs OÙ id = ${id}";

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

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

];
} else {
$response = [

'status' => 'error',
'message' => '删除失败'

];
}

$conn- >close( );

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

Résumé :
Grâce aux composants frontaux de Vue et au plug-in axios, nous pouvons facilement communiquer avec le back-end Communiquer et réaliser la fonction de suppression de données. Le backend utilise PHP pour se connecter à la base de données et effectuer des opérations de suppression de données en fonction des paramètres transmis par le frontend. Cette combinaison peut améliorer efficacement l'efficacité du développement et garantir la sécurité des données.

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!