Maison > interface Web > Voir.js > le corps du texte

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

WBOY
Libérer: 2023-09-08 08:51:27
original
1187 Les gens l'ont consulté

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
Copier après la connexion

Créez un nouveau projet Vue3 à l'aide de la commande suivante :

vue create project-name
Copier après la connexion

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
Copier après la connexion
  1. 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
Copier après la connexion

Créez un nouveau projet Django :

django-admin startproject project-name
Copier après la connexion

Entrez le répertoire du projet et utilisez la commande suivante pour exécuter le projet :

cd project-name
python manage.py runserver
Copier après la connexion

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
      }
    }
  }
}
Copier après la connexion

Ce code configure le serveur proxy pour transférer les requêtes API du front-end vers l'adresse du backend.

  1. 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',
    ...
]
Copier après la connexion

Ensuite, ajoutez le code suivant à la fin du fichier settings.py :

CORS_ALLOW_ALL_ORIGINS = True
Copier après la connexion

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
Copier après la connexion

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)
  })
Copier après la connexion
  1. 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
Copier après la connexion

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)
Copier après la connexion

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)
Copier après la connexion

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),
]
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal