React:Supprimer un produit
- 1Créer la méthode supprimer() dans src/models/Produits :permettant d'exécuter la requête Sql :delete from produit where id=?
- 2Créer la méthode supprimer() dans src/controllers/ProduitController:permettant d'appelere la methode supprimer() du model Produit pour supprimer le produit dont id est envoyer par le projet FontEnd de React
- 3Ajouter la route :http://localhost:8081/produits/id mappé avec la fonction supprimer() du controller ProduitController
/*Supprimer un produit par son ID*/
Produit.supprimer= (id, result)=>{
connexion.query('DELETE FROM produit WHERE id=?', [id], (err, res)=>{
if(err){
result(err, null);
}else{
result(null, res);
}
})
}
/*Supprimer un proudit*/
exports.supprimer = (req, res)=>{
ProduitModel.supprimer(req.params.id, (err, result)=>{
/*
req.params.id:recupère l'id passé envoyer par la request
/produits/7
*/
if(err)
res.json({status:false, message: 'Erreur le produit n'existe pas '});
res.json({status:true, message: 'Le produi est bien supprime'});
})
}
/*Supprimer un produit par sont id*/
routerProduits.delete('/:id',produitController.supprimer);
Modifier la vue components/Produits/liste/liste.js afin d'ajouter :
- 1La colonne Actions pour ajouter les buttons supprimer et Modifier
- 2La fonction supprimer(idProduit) qui permet d'appeler la fonction supprimer du backEnd
import React, { Component } from "react";
import axios from "axios";
import {Table} from 'react-bootstrap';
class Liste extends Component {
constructor(props) {
super(props);
/*Créer une state avec un tableau vide qui sera remplir par le backend*/
this.state={
listeProduit:[],
message:"",/*Stocker le message reçu du backEnd*/
statusResponse:"" /*Stocker le type (true=>OK,false=>Error) du message reçu du backEnd*/
};
}
/*récupérer la liste des produit from le backEndproject*/
componentDidMount() {
this.afficherAll();
}
/*Supprimer un produit*/
supprimer = (id) =>
{
//demander l'api
axios.delete('http://localhost:8081/apis/produits/'+id)
//attend er recevoir la réponse du serveur
.then(response => {
this.setState(
{
message:response.data.message,
statusResponse:response.data.status,
}
);
if(this.state.statusResponse==true)
{
/*Actualiser la liste des produits*/
this.afficherAll();
}
});
};
/*Appler l'api pour récupérer la liste des produit da la base de donnes*/
afficherAll = () =>
{
//demander l'api
axios.get('http://localhost:8081/apis/produits/')
//attend er recevoir la réponse du serveur
.then(response => {
//changer l'état du state afin de remplir le tableau listeProduit
this.setState({listeProduit:response.data});
});
};
render() {
/*Selo le type du message reçu on afficher une notification*/
let couleur="";
if (this.state.statusResponse==true) {
couleur ="alert alert-success";
}
else {
couleur ="alert alert-danger";
}
return(
<div>
<h3>La liste des produits</h3>
{/*Afficher le message si on a reçu une reponse serveur*/}
{this.state.message.length > 0 &&
<div className={ couleur} role="alert">
{this.state.message}
</div>
}
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{this.state.listeProduit.map(p=>(
<tr>
<td>{p.id}</td>
<td>{p.nom}</td>
<td>{p.qtestock}</td>
<td>{p.prix}</td>
<td>
{/*Appler la méthode supprimer en passant l'id du produit à supprimer*/}
<button onClick={() => this.supprimer(p.id)} className="btn btn-danger btn-block">Supprimer</button>
</td>
</tr>
))}
</tbody>
</Table>
</div>);
}
}
export default Liste;
Demarer le backEndProject
Demarer le front_end_project
