Créer un exemple SPA à l'aide de Python et React

Avec le développement continu de la technologie Internet, de plus en plus de sites Web commencent à adopter l'architecture SPA (Single Page Application). SPA fait référence à la présentation de la totalité ou de la majeure partie du contenu sur une seule page et à la mise à jour dynamique du contenu de la page via le client, plutôt que d'utiliser la méthode traditionnelle multipage. Dans cet article, nous utiliserons Python et React pour créer un exemple SPA simple afin de démontrer l'idée de base et la méthode de mise en œuvre de SPA.

1. Configuration de l'environnement

Avant de commencer à construire, nous devons configurer un environnement de développement. Tout d'abord, vous devez installer Node.js et npm est un outil permettant d'exécuter JavaScript côté serveur, et npm est le gestionnaire de packages pour Node.js. Deuxièmement, nous devons installer Python et les bibliothèques nécessaires qui y sont associées.

Afin de faciliter la gestion et le déploiement, nous utiliserons Django comme framework back-end pour construire notre projet. Nous pouvons utiliser la commande suivante pour installer Django :

pip install Django

En même temps, nous devons installer d'autres bibliothèques Python, notamment django-cors-headers, djangorestframework et django-webpack-loader. Ces bibliothèques rendront notre framework back-end plus complet et fourniront davantage de support pour notre construction front-end.

pip install django-cors-headers djangorestframework django-webpack-loader

2 Construire le front-end

Avant de construire le front-end, nous devons définir certaines structures de répertoires. Nous allons créer un dossier appelé frontend dans le répertoire racine du projet pour stocker notre code front-end. Sous le dossier frontend, nous allons créer un dossier nommé src pour stocker notre code React, et un dossier nommé public pour stocker nos modèles HTML, images et autres fichiers de ressources.

Ensuite, nous utiliserons la commande npx pour créer une application React, nommée frontend :

npx create-react-app frontend

Ensuite, nous devons utiliser npm pour installer certaines bibliothèques nécessaires, notamment réagir-router-dom , axios, bootstrap, réagir-bootstrap et prop-types.

npm installreact-router-dom axios bootstrapreact-bootstrap prop-types

Une fois l'installation terminée, nous pouvons commencer à écrire du code React. Nous chargerons dynamiquement nos composants React en fonction du routage, et utiliserons également axios dans les composants pour échanger des données avec le backend.

3. Construire le backend

Avant de construire le backend, nous devons définir certaines structures de répertoires. Nous allons créer un dossier nommé backend dans le répertoire racine du projet pour stocker notre code backend. Sous le dossier backend, nous allons créer un dossier appelé modèles pour stocker nos fichiers de modèles HTML.

Tout d'abord, nous devons créer un projet Django nommé mysite :

django-admin.py startproject mysite backend

Ensuite, nous devons ajouter quelques configurations nécessaires dans le fichier mysite/mysite/settings.py. Plus précisément, nous devons définir STATIC_URL, STATICFILES_DIRS, TEMPLATE_DIRS, CORS_ORIGIN_ALLOW_ALL, REST_FRAMEWORK et WEBPACK_LOADER.

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "frontend/build/static")]
TEMPLATE_DIRS = [os.path.join(BASE_DIR, "frontend/public")]
CORS_ORIGIN_ALLOW_ALL = True
REST_FRAMEWORK = {'DEFAULT_RENDERER_CLASSES' : ('rest_framework.renderers.JSONRenderer', )}
WEBPACK_LOADER = {'DEFAULT' : {'BUNDLE_DIR_NAME' : 'dist/', 'STATS_FILE' : os.path.join( BASE_DIR, 'frontend', 'webpack-stats.json')}}

Après avoir effectué ces configurations, nous pouvons commencer à écrire notre code backend. Nous définirons un fichier appelé vues.py pour gérer nos requêtes HTTP.

Dans la fonction d'affichage, nous utiliserons le nom du composant React comme paramètre de route pour charger dynamiquement notre modèle React et l'envoyer au front-end.

4. Créer des outils d'empaquetage

Pendant le déploiement réel, nous devons utiliser webpack pour empaqueter les composants React et les ressources associées dans un fichier. Afin de faciliter la gestion, nous pouvons intégrer le nom du composant React dans le fichier de configuration Webpack, afin qu'il puisse générer le fichier de packaging correspondant en fonction du nom du composant.

Après avoir effectué ces préparatifs, nous pouvons intégrer ensemble le code front-end et back-end. Nous pouvons utiliser le service de fichiers statiques de Django pour publier les fichiers du package React et les modèles HTML ensemble sur la même page Web afin de terminer la construction de notre exemple SPA.

5. Résumé

Dans cet article, nous avons construit un exemple de SPA en utilisant Python et React, et avons démontré l'idée de base et la méthode de mise en œuvre de SPA. À partir de cet exemple, nous pouvons voir que l'architecture SPA peut rendre l'ensemble du site plus rapide, plus efficace et plus facile à maintenir. J'espère que cet article sera utile aux débutants. Si vous rencontrez des problèmes ou avez des questions, n'hésitez pas à nous contacter pour communiquer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!