React: Liste des produits +Datable

folder Projet: VentesReactNodeJS (FullStack :backEndProject et front_end_project)
Remarque :La partie backEnd ne sera pas modifiée en vas travailler avec les même apis déja crées dans la section liste produits
Seuelement la partie frontEnd(React) qui sera modifiée en ajoutant une nouvelle component ListeProduitAvecDatatable.js
Dans cette partie on va afficher la liste de produits de la table produit
Produit(id,nom,prix,qteStock)
BackEnd :Nodejs+ExpressJs+mysql:pour créer les RestApis
FrontEnd :React+Axios pour consommer les apis

BackEnd Créer les Apis :backEndProject

  1. 1Créer la méthode afficherAll() dans src/models/Produits :permettant d'exécuter la requête Sql :select * from produit
  2. 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
  3. 3Ajouter la route :http://localhost:8081/produits/ mappé avec la fonction afficherAll() du controller ProduitController

1.Model:créer la fonction afficherAll() dans src/models/Produit.js

/**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);
}
})
}

2.Controller: Créer la fonction afficherAll() dans src/controllers/ProduitController.js

/*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)
})
}

3.Routes: ajouter la ligne de routage dans src/routes/ProduitRoutes.js

/*Afficher tout les produit*/
routerProduits.get('/', produitController.afficherAll);

2.FrontEnd créer la vue ListeProduitAvecDatatable.js dans le projet :front_end_project

Installer DataTable librairie

npm install react-data-table-component styled-components
  1. 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

React: Créer la component ListeProduitAvecDatatable.js

npx crcf components/Produits/ListeProduitAvecDatatable
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;

React: Modifier la component App.js en ajoutant la route vers la component ListeProduitAvecDatatable.js

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

backEndProject>node Serveur.js

Demarer le front_end_project

font_end_project>npm start