Étape par étape : étapes de mise en œuvre du projet full stack Vue3+Django4

Étape par étape : étapes de mise en œuvre du projet full-stack Vue3+Django4

Avec le développement continu du développement Web, le développement full-stack est progressivement devenu une tendance. Vue et Django sont l'une des piles technologiques les plus populaires dans le développement front-end et back-end, et leur combinaison est également très puissante. Dans cet article, nous présenterons étape par étape comment implémenter un projet full stack à l'aide de Vue3 et Django4.

1. Préparation
   Tout d'abord, nous devons installer Node.js et Python localement, ainsi que les gestionnaires de packages correspondants npm et pip. Dans le même temps, nous avons également besoin d'un environnement de développement intégré (IDE), tel que VS Code.

2. Créez un projet Django
   Ouvrez le terminal, entrez le répertoire dans lequel vous souhaitez créer le projet, exécutez la commande suivante pour créer un projet Django :

   django-admin startproject myproject

3. Créez une application Django
   Entrez le répertoire du projet, exécutez le commande suivante pour créer une application Django :

   cd myproject
   python3 manage.py startapp myapp

4. Configurer la base de données Django
   Ouvrez le fichier settings.py et configurez les informations de la base de données, par exemple en utilisant SQLite :

   DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
   }

5. Créez un modèle de base de données
   Définissez votre modèle de base de données dans le Fichier models.py. Par exemple, nous créons un modèle utilisateur :

   from django.db import models
   
   class User(models.Model):
    name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)

6. Effectuer la migration de la base de données
   Exécutez la commande suivante pour effectuer la migration de la base de données :

   python3 manage.py makemigrations
   python3 manage.py migrate

7. Créez une vue Django
   Écrivez votre fonction de vue Django dans le fichier vues.py. Par exemple, nous créons une fonction de vue pour obtenir tous les utilisateurs :

   from django.shortcuts import render
   from django.http import JsonResponse
   from .models import User
   
   def get_users(request):
    users = User.objects.all()
    data = [{'name': user.name, 'email': user.email} for user in users]
    return JsonResponse({'users': data})

8. Créer un projet Vue
   Dans le terminal, entrez le répertoire dans lequel vous souhaitez créer un projet Vue et exécutez la commande suivante pour créer un projet Vue :

   vue create myproject

9. Configurer le proxy Vue
   Configurez le proxy de Vue dans le fichier myproject/vue.config.js pour transmettre la requête au backend Django :

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

10. Créez un composant Vue
    Créez un composant Users.vue dans le fichier src/views répertoire pour afficher la liste des utilisateurs :

    <template>
      <div>
     <ul>
       <li v-for="user in users" :key="user.name">
         {{ user.name }} - {{ user.email }}
       </li>
     </ul>
      </div>
    </template>
    
    <script>
    export default {
      data() {
     return {
       users: []
     }
      },
      created() {
     this.getUsers()
      },
      methods: {
     getUsers() {
       axios.get('/api/users')
         .then(response => {
           this.users = response.data.users
         })
     }
      }
    }
    </script>

11. Configurer le routage Vue
    Configurez le routage Vue dans le fichier src/router/index.js et utilisez le composant Users.vue comme route :

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Users from '../views/Users.vue'
    
    Vue.use(VueRouter)
    
    const routes = [
      {
     path: '/',
     name: 'Users',
     component: Users
      }
    ]
    
    const router = new VueRouter({
      mode: 'history',
      base: process.env.BASE_URL,
      routes
    })
    
    export default router

12. Exécutez le projet
    au racine de Django et Vue respectivement Exécutez la commande suivante dans le répertoire pour exécuter le projet :

    python3 manage.py runserver
    npm run serve

Maintenant, vous pouvez visiter http://localhost:8080 dans le navigateur pour voir votre projet full-stack. Le composant Utilisateurs obtiendra les données du backend Django et les affichera sur la page.

Résumé :
Grâce aux étapes ci-dessus, nous avons implémenté avec succès un projet full-stack utilisant Vue3 et Django4. En intégrant le développement front-end et back-end, nous pouvons développer plus efficacement des applications Web puissantes. J'espère que cet article vous sera utile et vous familiarisera mieux avec le processus de développement full-stack de Vue et Django.

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!