Apprentissage approfondi : exemples de développement full-stack Vue3+Django4

Apprentissage approfondi : exemples de développement full-stack Vue3+Django4

Aperçu :
Avec le développement rapide des applications Web, le développement full-stack est devenu un sujet brûlant. En tant que frameworks front-end et back-end populaires, Vue et Django sont largement utilisés dans le développement full-stack. Cet article présentera comment utiliser les dernières versions de Vue3 et Django4 pour le développement full-stack, et utilisera un exemple pratique pour démontrer ses fonctions puissantes et son évolutivité flexible.

1. Configuration de l'environnement :
   Tout d'abord, nous devons nous assurer que Python, Node.js et Vue CLI ont été correctement installés. Il peut être installé à l'aide des commandes suivantes :
2. Installation de Python : https://www.python.org/downloads/
3. Installation de Node.js : https://nodejs.org/
4. Installation de Vue CLI : npm install - g @ vue/cli

5. Créer un projet Django :
   Tout d'abord, nous devons créer un nouveau projet Django. Ouvrez la ligne de commande et créez le projet à l'aide de la commande suivante :

   django-admin startproject myproject

6. Créer une application Django :
   Ensuite, nous devons créer une application Django. Allez dans le répertoire du projet et créez l'application à l'aide de la commande suivante :

   cd myproject
   python manage.py startapp myapp

7. Configurez le routage Django :
   Dans le fichier monprojet/monprojet/urls.py, configurez la route racine de Django et la sous-route de monapp :

   from django.urls import path, include
   
   urlpatterns = [
    path('api/', include('myapp.urls')),
   ]

8. Créer une vue Django :
   Dans le fichier myapp/views.py, créez la fonction de vue de Django :

   from django.shortcuts import render
   from django.http import JsonResponse
   
   def hello(request):
    return JsonResponse({'message': 'Hello, World!'})

9. Configurer le routage de Django :
   Dans le fichier myapp/urls.py, configurer le routage de monapp :

   from django.urls import path
   
   from . import views
   
   urlpatterns = [
    path('hello/', views.hello),
   ]

10. Démarrer le serveur Django :
    Démarrez le serveur de développement Django en utilisant la commande suivante :

    python manage.py runserver

    Visitez http://localhost:8000/api/hello/, vous devriez pouvoir voir les données JSON renvoyées.

11. Créer un projet Vue :
    Maintenant, nous devons créer un nouveau projet Vue. Ouvrez la ligne de commande et créez le projet à l'aide de la commande suivante :

    vue create myvueapp

    Remarque : lors de la création du projet, sélectionnez la configuration prédéfinie par défaut ou configurez-la selon vos propres besoins.

12. Configurez le proxy du serveur de développement Vue :
    Dans le répertoire racine du projet Vue, recherchez le fichier vue.config.js (sinon, créez-en un nouveau), et ajoutez la configuration suivante :

    module.exports = {
     devServer: {
         proxy: {
             '/api': {
                 target: 'http://localhost:8000',
                 ws: true,
                 changeOrigin: true
             }
         }
     }
    }

13. Créez le composant Vue :
    Dans le répertoire src du projet Vue, recherchez le fichier App.vue et remplacez son contenu par le code suivant :

    <template>
      <div>
     <h1 id="message">{{ message }}</h1>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       message: ""
     };
      },
      mounted() {
     this.fetchData();
      },
      methods: {
     fetchData() {
       fetch("/api/hello/")
         .then(response => response.json())
         .then(data => {
           this.message = data.message;
         })
         .catch(err => {
           console.log(err);
         });
     }
      }
    };
    </script>

14. Démarrez le serveur de développement Vue :
    Utilisez la commande suivante pour démarrer Vue serveur de développement :

    cd myvueapp
    npm run serve

    Visitez http://localhost :8080, vous devriez pouvoir voir les données obtenues à partir de l'API Django.

À ce stade, nous avons terminé avec succès l'exemple de développement full-stack Vue3+Django4. Grâce à cet exemple, nous avons appris comment configurer un environnement de développement, créer des projets Django et des projets Vue, et comment configurer le routage, créer des vues et des composants et obtenir des données de l'API back-end via AJAX.

Résumé :
Grâce à l'étude de cet article, nous avons une compréhension approfondie du développement full-stack de Vue3 et Django4, et avons mis en pratique un cas pratique. Le développement full stack nous offre une plus grande flexibilité et efficacité, nous permettant de répondre simultanément aux besoins front-end et back-end. J'espère que les lecteurs pourront avoir une compréhension plus approfondie du développement full-stack de Vue3+Django4 grâce à cet exemple et être capables d'appliquer ces connaissances et technologies dans 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!