React: Liste des produits +Datable
- 1Créer la méthode afficherAll() dans src/models/Produits :permettant d'exécuter la requête Sql :select * from produit
- 2Créer la méthode afficherAll() dans src/controllers/ProduitController:permettant d'appelere la methode afficherAll() du model Produit et envoyer le resultat au projet FontEnd de React
- 3Ajouter la route :http://localhost:8081/produits/ mappé avec la fonction afficherAll() du controller ProduitController
/**Afficher tout les produits**/
Produit.afficherAll = (result) =>{
connexion.query('SELECT * FROM produit', (err, res)=>{
if(err){
result(null,err);
}else{
/*retourne la liste des produits*/
result(null,res);
}
})
}
/*Afficher tout les produits*/
exports.afficherAll = (req, res)=> {
ProduitModel.afficherAll((err, produits) =>{
if(err)
/*si erreur envoyer l'erreur*/
res.send(err);
/*sinon envoyer la liste des produits*/
res.send(produits)
})
}
/*Afficher tout les produit*/
routerProduits.get('/', produitController.afficherAll);
Installer DataTable librairie
- 1Créer la components src/components/Produits/ListeProduitAvecDatatable permettant d'afficher le tableau d'object envoyer la méthode afficherAll() du controller ProduitController du projet backEndProject
import React, { Component } from "react";
import axios from "axios";
import {Table} from 'react-bootstrap';
/*Importer le module DataTable*/
import DataTable from 'react-data-table-component';
/*1*** Paramèter le le tableau du module Databale selon les données à afficher
Produit(id,nom,prix,qteStock)
*/
const columns = [
{
name: 'id',
selector: 'id',
sortable: true,
},
{
name: 'nom',
selector: 'nom',
sortable: true,
},
{
name: 'prix',
selector: 'prix',
sortable: true,
},
{
name: 'qtestock',
selector: 'qtestock',
sortable: true,
},
];
class ListeProduitAvecDatatable extends Component {
constructor(props) {
super(props);
/*Créer une state avec un tableau vide qui sera remplir par le backend*/
this.state={
listeProduit:[]
}
}
/*récupérer la liste des produit from le backEndproject*/
componentDidMount() {
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() {
return(
<div>
<h3>La liste des produits avecc <b>DataTable</b></h3>
<DataTable
title=""
columns={columns}
data={this.state.listeProduit}
pagination
highlightOnHover
/>
</div>);
}
}
export default ListeProduitAvecDatatable;
App.js
import './App.css';
/*des classe qui permet de créer des routes pour
/produits/ajouter/
/produits/
....
*/
import {
BrowserRouter as Router,
Route,
Routes
} from "react-router-dom";
/*importer les styles boostrap*/
import 'bootstrap/dist/css/bootstrap.min.css';
/*Importer les components*/
import Ajouter from './components/Produits/ajouter/ajouter.js'
import ListeProduitAvecDatatable from './components/Produits/ListeProduitAvecDatatable/ListeProduitAvecDatatable.js'
import ListePagination from './components/Produits/listePagination/listePagination.js'
import Liste from './components/Produits/liste/liste.js'
import Details from './components/Produits/details/details.js'
import Navigation from './components/navigation/navigation.js'
function App() {
return (
<div>
{/*Définir un router */}
<Router>
<Navigation/>
<Routes>
<Route exact path="/produits/" element={<Liste/>}/>
<Route exact path="/produits/ajouter" element={<Ajouter/>}/>
<Route exact path="/produits/:id" element={<Details/>}/>
<Route exact path="/produitsListe" element={<ListePagination/>}/>
<Route exact path="/produitsDatatable" element={<ListeProduitAvecDatatable/>}/>
</Routes>
</Router>
</div>
);
}
export default App;
Demarer le backEndProject
Demarer le front_end_project
