Explication technique détaillée : construction d'un nouveau projet Vue3+Django4
Introduction :
De nos jours, le modèle de développement de séparation front-end et back-end est devenu une compétence essentielle pour le développement d'entreprise. Vue et Django sont des frameworks front-end et back-end très populaires. Leur combinaison peut grandement améliorer l'efficacité du développement et la qualité du code. Cet article présentera en détail comment créer un nouveau projet, en utilisant Vue3 comme framework front-end et Django4 comme framework back-end, fournissant aux lecteurs des exemples de code et des explications techniques détaillées.
1. Configuration de l'environnement
npm install -g @vue/cli
Créez un nouveau projet Vue3 à l'aide de la commande suivante :
vue create project-name
Pendant le processus d'initialisation du projet, vous devez sélectionner Vue3 comme version. Une fois l'initialisation terminée, entrez dans le répertoire du projet et utilisez la commande suivante pour exécuter le projet :
cd project-name npm run serve
pip install Django
Créez un nouveau projet Django :
django-admin startproject project-name
Entrez le répertoire du projet et utilisez la commande suivante pour exécuter le projet :
cd project-name python manage.py runserver
2. Débogage conjoint front-end et back-end
module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8000', // 后端地址 ws: true, changeOrigin: true } } } }
Ce code configure le serveur proxy pour transférer les requêtes API du front-end vers l'adresse du backend.
ALLOWED_HOSTS = ['localhost', '127.0.0.1'] INSTALLED_APPS = [ ... 'corsheaders', ... ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', ... ]
Ensuite, ajoutez le code suivant à la fin du fichier settings.py :
CORS_ALLOW_ALL_ORIGINS = True
Ce code est configuré pour autoriser les requêtes inter-domaines.
3. Interaction front-end et back-end
npm install axios
Ensuite, dans le composant qui doit appeler l'API, introduisez axios et envoyez la requête :
import axios from 'axios' axios.get('/api/example') .then(response => { console.log(response.data) }) .catch(error => { console.error(error) })
pip install djangorestframework
Ensuite, dans le répertoire de l'application Django, créez un nouveau fichier serializers.py et écrivez le code suivant :
from rest_framework import serializers class ExampleSerializer(serializers.Serializer): id = serializers.IntegerField() name = serializers.CharField(max_length=100)
Ensuite, créez un nouveau fichier views.py et écrivez The code suivant :
from rest_framework.decorators import api_view from rest_framework.response import Response from .serializers import ExampleSerializer @api_view(['GET']) def example(request): data = [ {'id': 1, 'name': 'example1'}, {'id': 2, 'name': 'example2'}, ] serializer = ExampleSerializer(data, many=True) return Response(serializer.data)
Enfin, dans le répertoire du projet Django, recherchez le fichier urls.py et ajoutez le code suivant :
from django.urls import path from . import views urlpatterns = [ path('example/', views.example), ]
De cette façon, lorsque le front-end envoie une requête GET à /api/example, le back-end renverra des exemples de données.
Conclusion :
Grâce à l'explication détaillée de cet article, les lecteurs comprendront comment utiliser Vue3 comme framework front-end et Django4 comme framework back-end pour construire un nouveau projet. Nous avons expliqué le processus de configuration de l'environnement, de débogage conjoint front-end et back-end et l'interaction front-end et back-end, et avons fourni des exemples de code correspondants. J'espère que les lecteurs pourront maîtriser l'utilisation de base de Vue et Django grâce à cet article et pouvoir les appliquer à des projets réels.
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!