crud Produits

• Install Django module: pip install django
• Run backend server: python .\manage.py runserver
• install Django rest framework pip install djangorestframework
• install Django CORS headers module pip install django-cors-headers

Fichiers:

Le fichier init.py est simplement un fichier vide qui indique que le dossier donné est un projet Python ou un module Python.

asgi.py est le point d'entrée pour les serveurs web compatibles asgi.

wsgi.py est le point d'entrée pour les serveurs web compatibles wsgi.

Le fichier urls.py contient toutes les déclarations d'URL nécessaires pour ce projet.

Le fichier settings.py contient tous les paramètres ou configurations nécessaires pour le projet.

manage.py est une utilité en ligne de commande qui aide à interagir avec le projet Django.

Base de donnèes: (SqLite)

APIs:

• GET :

• SEARCH :

• GET ONE PRODUCT:

• ADD :

• PUT :

• DELETE

Front End (React.Js)

Fichiers:

Le fichier Variables.js contient les uri comme l'url de l'api backend.

App.js utilise le framework react-router-dom pour gérer les routes de l'application. L'application affiche un titre, une barre de navigation et un composant Product qui est rendu lorsque l'utilisateur accède à la route /home. Le composant App est défini comme une fonction qui renvoie le JSX de l'application. Il utilise le composant BrowserRouter pour envelopper toute l'application et le composant Routes pour définir les routes de l'application. La barre de navigation est créée avec le composant NavLink de react-router-dom. Il permet de créer des liens vers différentes routes de l'application. Le composant Product est importé depuis le fichier Product.js et est défini comme une fonction qui renvoie le JSX du composant. Le composant Product affiche une liste de produits et permet à l'utilisateur de les ajouter, de les modifier et de les supprimer. Le CSS est importé depuis le fichier App.css et est utilisé pour styliser l'application..

Le dossier Pages contient les page Home et Produit

• Create react app: npx create-react-app my-app
• Installer les modules: npm i
• Run server : npm start

Interface:

Modèle Ajout/Modifier Produit: