Create, Read, Update & Delete avec ReactJs
MERN
MongoDB, ExpressJs, Reactjs, NodeJs
Front-end : ReactJs
Back-end : NodeJs/MongoDB
Categorie
nomcategorie
imagecategorie
Base de donnée : DBCommerce
SGBD: MongoDB
URL : [Link]
Etapes pour CRUD opérations
1. Installation d’une application React
2. Configurer React routing
3. Crééer un formulaire avec Bootstrap
4. Submit form
5. Créer un REST API
6. Installer la bibliothèque Axios et insérer avec une requête POST
7. Afficher les données Backend avec get
8. Fonctions Edit et Update
9. Supprimper les données avec delete
[Link] d’une application React
C:\reactjs>npx create-react-app frontend
C:\reactjs>cd frontend
Code .
Installer bootstrap
npm install react-bootstrap bootstrap --save
Dans le fichier [Link] ajouter
import 'bootstrap/dist/css/[Link]';
import {Nav, Navbar,Form, FormControl} from 'react-bootstrap';
Pour vérifier bootstrap ajouter dans le fichier [Link] un bouton
<button className="btn btn-success">Envoyer</button>
Fichier [Link]
import React from 'react';
import 'bootstrap/dist/css/[Link]’;
import {Nav, Navbar,Form, FormControl} from 'react-bootstrap';
import logo from './[Link]';
import './[Link]';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/[Link]</code> and save to reload.
</p>
<a
className="App-link«ref="[Link]
<button className="btn btn-success">Envoyer</button>
</header>
</div> );}
export default App;
2. Configurer React routing
Il faut installer react-router-dom
npm install react-router-dom --save
Ajouter dans le fichier [Link] la ligne suivant :
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
Accéder au site
[Link]
Appuyer sur Components puis sélectionner navbar
Choisir un thème de menu et sélectionner le code relatif et copier le dans le fichier [Link]
<Navbar bg="primary" variant="dark">
<[Link] href="#home">Navbar</[Link]>
<Nav className="mr-auto">
<[Link] href="#home">Home</[Link]>
<[Link] href="#features">Features</[Link]>
<[Link] href="#pricing">Pricing</[Link]>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search"
className="mr-sm-2" />
<Button variant="outline-light">Search</Button>
</Form>
</Navbar>
Créer sous le dossier src le dossier Components/Categories
Dans le dossier Categoriescréer trois fichiers : [Link], [Link] et [Link]
Fichier Categories/[Link]
import React, {Component} from 'react'
export default class InsertCategorie extends Component
{
render(){
return(
<div>
<p>Bienvenue dans le composant Insert</p>
</div>
)
}
}
Fichier Categories/[Link]
import React, {Component} from 'react'
export default class ListCategories extends Component
{
render(){
return(
<div>
<p>Bienvenue dans le composant Edit</p>
</div>
)
}
}
Fichier Categories/[Link]
import React, {Component} from 'react'
export default class EditCategories extends Component
{
render(){
return(
<div>
<p>Bienvenue dans le composant View</p>
</div>
)
}
}
Dans le fichier [Link] on doit importer les trois fichier pour faire appel dans le menu crée
import InsertCategorie from './Categories/InsertCategorie';
import EditCategories from './Categories/EditCategories';
import ListCategories from './Categories/[Link]‘;
<Nav className="mr-auto">
<[Link] href="/categories">Liste des Catégories</[Link]>
<[Link] href="/insertcat">Inserer Catégorie</[Link]>
<[Link] href="/editcat">Modifier</[Link]>
</Nav>
<Switch>
<Route exact path='/insertcat ' component={InsertCategorie}/>
<Route exact path='/categories' component={ListCategories}/>
<Route exact path='/editcat/:id' component={EditCategories}/>
</Switch>
Fichier [Link]
import React from 'react';
import 'bootstrap/dist/css/[Link]';
import {Nav, Navbar,Form, FormControl} from 'react-bootstrap';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';
import InsertCategorie from './Categories/Insert';
import Edit from './Employe/Edit';
import View from './Employe/View';
import './[Link]';
Fichier [Link](suite)
function App() {
return (
<Router>
<Navbar bg="primary" variant="dark">
<[Link] href="#home">Gestion Commerciale</[Link]>
<Nav className="mr-auto">
<[Link] href="/">Liste des Employés</[Link]>
<[Link] href="/insert">Inserer</[Link]>
<[Link] href="/edit">Modifier</[Link]>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<button variant="outline-light">Chercher</button>
</Form>
</Navbar>
Fichier [Link](suite)
<Switch>
<Route exact path='/insert' component={Insert}/>
<Route exact path='/' component={View}/>
<Route exact path='/edit' component={Edit}/>
</Switch>
</Router>
);
}
export default App;
Fichier Employe/[Link]
import React, {Component} from 'react'
import {Form, Col,Button} from 'react-bootstrap';
export default class Insert extends Component
{
render(){
return(
<div>
<Col md="5">
<h3>Ajouter un nouvel utilisateur</h3>
<form>
<form-group>
<[Link]> Matricule</[Link]>
<[Link] type="text" placeholder="Saisir Matricule" />
<[Link] > Nom</[Link]>
<[Link] type="text" placeholder="Saisir Nom" />
<[Link] > Prénom</[Link]>
<[Link] type="text" placeholder="Saisir Prénom" />
<[Link] > E-Mail</[Link]>
<[Link] type="text" placeholder="Saisir Email" />
<br/>
<Button type="submit" variant="primary">Enregistrer</Button>
</form-group>
</form>
</Col>
</div>
)
}
}
On doit créer une fonction qui prend les valeurs des chaps de saisie et les insérer en utilisant la
méthode POST de NodeJs/MongoDB REST API Server
On doit commencer par créer le constructeur et initialiser le State et le relier avec les différents
événements dans le constructeur
constructor(props) {
super(props);
[Link] = { matricule: '',
nom:'',
prenom:'',
email:''
};
}
On doit maintenant relier les champs du formulaire aux variables state crée
On ajouter à notre input un événement onChange qui fait appel à une méthode onChange dont on va créer
pour chaque champs formulaire
<[Link] type="text" placeholder="Saisir Matricule" value={[Link]} onChange={[Link]} />
<[Link] type="text" placeholder="Saisir Nom" value={[Link]} onChange={[Link]} />
<[Link] type="text" placeholder="Saisir Prénom" value={[Link]} onChange={[Link]}/>
<[Link] type="text" placeholder="Saisir Email" value={[Link]} onChange={[Link]} />
Les méthodes onChange de chaque champs formulaire
onChangeMatricule=(e)=>{
[Link]({matricule:[Link]})
};
onChangeNom=(e)=>{
[Link]({nom:[Link]})
};
onChangePrenom=(e)=>{
[Link]({prenom:[Link]})
};
onChangeEmail=(e)=>{
[Link]({email:[Link]})
};
Les méthodes onSubmit pour envoyer le formulaire
onSubmit=(e)=>{
[Link]();
const obj={
matricule:[Link],
nom:[Link],
prenom:[Link],
email:[Link]
};
[Link](obj)
}
On doit faire appel à cette méthode dans le formulaire
<form onSubmit={[Link]}>
Remplir le formulaire=>Appuyer sur Enregistrer=>Inspecter=>Console: on obtient notre objet saisie
Insertion de l’objet crée par l’appel de la méthode POST NodeJS/MongoDB REST API
axios
Pour les projet qui doivent s'interfacer avec une API REST, Axios est un client
HTTP léger basé sur le service $http et similaire à l'API Fetch.
Axios est basé sur des promesses et nous pouvons donc profiter de async et
await plus lisible. Nous pouvons également intercepter et annuler des
demandes, et il existe une protection côté client intégrée contre la falsification
des demandes intersites.
Pour installer axios
npm install axios --save
On doit importer axios
import axios from 'axios';
La méthode onSubmit devient
onSubmit=(e)=>{
[Link]();
const obj={
matricule:[Link],
nom:[Link],
prenom:[Link],
email:[Link]
};
[Link]('[Link]
.then(res=>[Link]([Link]));
[Link]({matricule:'',nom:'',prenom:'',email:''})
}
Affichage de la liste des employés
Fichier [Link]
Dans le constructeur de la classe on crée un State pour intancier un tableau d’employés
constructor(props) {
super(props);
[Link] = { employes:[] };
}
On fait appel à la méthode de chargement de formulaire (onLoad) appelé dans React componentDidMount()
Cette méthode fait appel au service get qui renvoi la liste des employés dans le serveur
componentDidMount(){
[Link]('[Link]
.then(res=>{
[Link]({employes:[Link]});
})
.catch(function(error){
[Link](error)
})
}
Dans cette méthode on a fait appel à axios donc on doit importer le package axios
import axios from 'axios';
Le Tableau dans le fichier [Link] dont on va afficher les données
render(){
return(
<div>
<h3 align="center">Liste des employés</h3>
<Table striped bordered hover size="sm">
<thead>
<tr>
<th>Matricule</th>
<th>Nom</th>
<th>Prénom</th>
<th>Email</th>
<th colSpan="2">Actions</th>
</tr>
</thead>
<tbody>
{[Link]()}
</tbody>
</Table>
</div>
)
}
Dans le tableau nous avon:
1- fait appel à la balise Table, donc on doit importer le package react-bootstrap
import {Table} from 'react-bootstrap’;
2- on a fait appel à la méthode {[Link]()} pour cela on doit définir cette fonction
employesList=() =>{
return [Link](employe=>{
return <EmployeList emps={employe}/>
});
}
3- on a fait appel au composant EmployeList auquel on a envoyé l’objet employé retourné par
la méthode componentDidMount, donc on doit l’importer
import EmployeList from './EmployeList';
4- on doit ajouter le composant Employelist dans un nouveau fichier [Link]
pour cela l’objet envoyé par le composant View va être affecté à la variable props du composant EmployeList
const {emps}=[Link];
Fichier [Link]
import React, {Component} from 'react';
import {Button} from 'react-bootstrap';
export default class Employelist extends Component
{
render(){
const {emps}=[Link];
return(
<tr>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td>{[Link]}</td>
<td><Link to={"/edit/" + emps._id} className="btn btn-primary">Edit</Link></td>
<td><Button variant="danger" onClick={[Link]}>Supprimer</Button></td>
</tr>
)
}
}
Suppression d’un employé d’id donné
Dans le fichier [Link] on ajoute la méthode delete qui fait appel à la méthode REST API du serveur
<td><Button variant="danger" onClick={[Link]}>Supprimer</Button></td>
deleteEmp=()=>{
[Link]([Link]._id)
[Link]("[Link]
.then([Link]({redirect:true}))
.catch(err=>[Link](err))
}
Constructeur de la classe EmployeList
constructor(props) {
super(props);
[Link]={
redirect:false
}
}
La variable redirect change d’état et une redirection vers le composant / (home)
const {emps}=[Link];
const {redirect} = [Link];
if(redirect){
return<Redirect to = '/'/>
}
La structure du fichier [Link] a la même structure que le fichier [Link].
render(){
return(
<div>
<Col md="5">
<h3>Modifier un utilisateur</h3>
<form >
<form-group>
<[Link]> Matricule</[Link]>
<[Link] type="text" value={[Link]} onChange={[Link]} />
<[Link] > Nom</[Link]>
<[Link] type="text" value={[Link]} onChange={[Link]} />
<[Link] > Prénom</[Link]>
<[Link] type="text" value={[Link]} onChange={[Link]}/>
<[Link] > E-Mail</[Link]>
<[Link] type="text" value={[Link]} onChange={[Link]} />
<br/>
<Button type="submit" variant="primary">Enregistrer</Button>
</form-group>
</form>
</Col>
</div>
}
Les méthodes onChange()
onChangeMatricule=(e)=>{
[Link]({matricule:[Link]})
};
onChangeNom=(e)=>{
[Link]({nom:[Link]})
};
onChangePrenom=(e)=>{
[Link]({prenom:[Link]})
};
onChangeEmail=(e)=>{
[Link]({email:[Link]})
};
Les méthodes componentDidMount()
componentDidMount(){
[Link]('[Link]
.then(res => {
[Link]({
matricule:[Link],
nom:[Link],
prenom:[Link],
email:[Link]
});
})
.catch(function(error){
[Link](error)
})
Le constructeur de la classe Edit
constructor(props) {
super(props);
[Link] = { matricule: '',
nom:'',
prenom:'',
email:''
};
}
Les imports des packages
import React, {Component} from 'react'
import {Form, Col,Button} from 'react-bootstrap';
import axios from 'axios';
