React:Afficher la liste des produits

folder Projet: VentesReactNodeJS (FullStack :backEndProject et front_end_project)
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(err,null);
}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 liste.js dans le projet :front_end_project

  1. 1Créer la components src/components/Produits/liste permettant d'afficher le tableau d'object envoyer la méthode afficherAll() du controller ProduitController du projet backEndProject

React: Créer la component liste.js

npx crcf components/Produits/liste
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:[]
}
}
/*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</h3>
<Table striped bordered hover>
<thead>
<tr>
<th>#</th>
<th>Nom</th>
<th>qteStock</th>
<th>prix</th>
</tr>
</thead>
<tbody>
{/*Boucler sur la tableau et afficher son contenu*/}
{this.state.listeProduit.map(p=>(
<tr>
<td>{p.id}</td>
<td>{p.nom}</td>
<td>{p.qtestock}</td>
<td>{p.prix}</td>
</tr>
))}
</tbody>
</Table>
</div>);
}
}

export default Liste;

React: Créer la component navigation permettant d'afficher les liens pour gérer le projet test_react_projects

npx crcf components/navigation
import React, { Component } from "react";
import {Button,Nav,Navbar,Form,Container,FormControl,NavDropdown} from 'react-bootstrap';

class Navigation extends Component {
render() {
return <Navbar bg="light" expand="lg">
<Container fluid>
<Navbar.Brand href="/">Gestion Ventes</Navbar.Brand>
<Navbar.Toggle aria-controls="navbarScroll" />
<Navbar.Collapse id="navbarScroll">
<Nav
className="me-auto my-2 my-lg-0"
style={{ maxHeight: '100px' }}
navbarScroll
>
<NavDropdown title="Produits" id="produits">
<NavDropdown.Item href="/produits/ajouter">Ajouter</NavDropdown.Item>
<NavDropdown.Item href="/produits/">Liste Produits</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Utilisateurs" id="utilisateur">
<NavDropdown.Item href="utilisateurs/ajouter">Ajouter</NavDropdown.Item>
<NavDropdown.Item href="utilisateurs/">Liste Utilisateurs</NavDropdown.Item>
</NavDropdown>
<NavDropdown title="Ventes" id="utilisateur">
<NavDropdown.Item href="/ventes/vendre">Vendre</NavDropdown.Item>
<NavDropdown.Item href="/ventes/">Liste Ventes</NavDropdown.Item>
<NavDropdown.Item href="/ventes/facture">Facture</NavDropdown.Item>
<NavDropdown.Item href="/ventes/Statistiques">Statistiques</NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav>
<Nav.Link href="/utilisateurs/connexion">Connexion</Nav.Link>
<Nav.Link href="/utilisateurs/inscription">Créer Compte</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>;
}
}

export default Navigation;

React: Créer les routes dans la component principale App.js

Installer react-router-dom

font_end_project>npm install react-router-dom --save

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 Liste from './components/Produits/liste/liste.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/>}/>
</Routes>
</Router>
</div>
);
}

export default App;

Demarer le backEndProject

backEndProject>node Serveur.js

Demarer le front_end_project

font_end_project>npm start