Détails techniques : construction du nouveau projet Vue3+Django4

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

1. Configuration de l'environnement front-end
   Tout d'abord, assurez-vous d'avoir installé l'environnement Node.js. Ensuite, installez Vue CLI 4.x à l'aide de la commande suivante :

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

2. Configuration de l'environnement back-end
   Tout d'abord, assurez-vous d'avoir installé l'environnement Python 3.9. Ensuite, utilisez le. commande suivante pour installer Django 4.x :

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

1. Configuration front-end
   Dans le répertoire racine du projet Vue3, recherchez le fichier vue.config .js, s'il n'existe pas, créez-le manuellement. Ajoutez le code suivant au fichier :

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.

2. Configuration du backend
   Dans le répertoire racine du projet Django, recherchez le fichier settings.py, modifiez ALLOWED_HOSTS et INSTALLED_APPS comme suit :

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

1. Demande front-end
   Dans le projet Vue3, les requêtes API sont effectuées à l'aide de la bibliothèque axios. Tout d'abord, installez axios à l'aide de la commande suivante :

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)
  })

2. Réponse backend
   Dans Django, utilisez Django Rest Framework (DRF) pour construire l'API. Tout d'abord, utilisez la commande suivante pour installer DRF :

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!