Étude approfondie : technologie de base de développement full-stack Vue3+Django4

Étude approfondie : technologie de base de développement full-stack Vue3+Django4

1 Introduction
À l'ère Internet d'aujourd'hui, le développement full-stack est devenu une tendance. Vue3 est un framework front-end, tandis que Django4 est un framework back-end Python populaire. En combinant Vue3 et Django4, nous pouvons réaliser un développement full-stack et créer des applications Web puissantes. Cet article approfondira les technologies de base de Vue3 et Django4 pour aider les lecteurs à mieux comprendre l'utilisation de ces deux frameworks.

2. Introduction à Vue3
Vue3 est un framework JavaScript léger qui fournit un moyen simple et flexible de créer des interfaces Web. Vue3 adopte un nouveau système réactif, qui permet de synchroniser automatiquement les modifications des données avec l'interface, améliorant considérablement l'efficacité du développement. Dans le même temps, Vue3 introduit également de nouvelles fonctionnalités, telles que l'API de composition et Teleport, rendant l'organisation du code et l'optimisation des performances plus pratiques.

3. Introduction à Django4
Django4 est un framework backend Python populaire qui fournit un moyen efficace de créer des applications Web. Django4 est basé sur le modèle architectural MVC (Model-View-Controller) et divise l'application en trois couches : vue, modèle et contrôleur, rendant le code plus maintenable et réutilisable. Dans le même temps, Django4 fournit également des fonctions pratiques, telles que la génération automatique du backend Admin, l'ORM (Object Relational Mapping) et la validation de formulaire.

4. Utilisation combinée de Vue3 et Django4
Dans le développement full-stack, la méthode la plus courante consiste à utiliser Vue3 pour le développement front-end et Django4 pour le développement back-end. Ci-dessous, nous présenterons comment utiliser Vue3 et Django4 ensemble à travers un exemple simple.

1. Développement front-end (Vue3)
   Tout d'abord, nous devons créer un projet Vue3. À l'aide de l'outil de ligne de commande, exécutez la commande suivante dans le répertoire spécifié pour créer un nouveau projet Vue3 :

   vue create myproject

   Copier après la connexion

Ensuite, nous pouvons entrer dans le répertoire du projet et démarrer le serveur de développement :

cd myproject
npm run serve

Dans Vue3, nous pouvons utiliser des composants pour construire notre page. Ce qui suit est un exemple de code de composant simple pour afficher un texte Hello World :

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello World'
        }
    }
}
</script>

<style scoped>
h1 {
    color: red;
}
</style>

2. Développement back-end (Django4)
   Dans le développement back-end, nous devons d'abord installer l'environnement de développement Django4. Utilisez la commande suivante pour installer Django4 :

   pip install django

   Copier après la connexion

Ensuite, nous pouvons utiliser la commande suivante pour créer un nouveau projet Django4 :

django-admin startproject myproject

Ensuite, nous pouvons aller dans le répertoire du projet et démarrer le serveur de développement :

cd myproject
python manage.py runserver

Dans Django4, nous pouvons définir des modèles pour décrire nos structures de données. Ce qui suit est un exemple de code simple pour représenter un utilisateur (Utilisateur) :

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=50)
    email = models.EmailField(max_length=254)

3. Interaction back-end
   Dans l'utilisation combinée de Vue3 et Django4, l'interaction entre le front-end et le back-end est très importante. Dans le front-end (Vue3), nous pouvons utiliser des bibliothèques réseau telles qu'Axios pour envoyer des requêtes HTTP afin d'interagir avec le back-end (Django4). Ce qui suit est un exemple de code simple pour obtenir les données de la liste d'utilisateurs du backend et les afficher sur la page frontend :

   <template>
     <div>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
     </div>
   </template>
   
   <script>
   import axios from 'axios';
   
   export default {
    data() {
        return {
            users: []
        }
    },
    mounted() {
        this.fetchUsers();
    },
    methods: {
        fetchUsers() {
            axios.get('/api/users')
                .then(response => {
                    this.users = response.data;
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
   }
   </script>

   Copier après la connexion

Dans le backend (Django4), nous pouvons définir des vues API pour gérer les requêtes envoyées par le frontend, et Return les données correspondantes. Voici un exemple de code simple pour renvoyer les données de la liste d'utilisateurs au front-end :

from django.shortcuts import render
from django.http import JsonResponse
from .models import User

def user_list(request):
    users = User.objects.all()
    data = [{'id': user.id, 'name': user.name} for user in users]
    return JsonResponse(data, safe=False)

5. Résumé
En étudiant en profondeur les technologies de base de Vue3 et Django4, nous pouvons les utiliser ensemble pour réaliser un développement full-stack. Dans le front-end (Vue3), nous pouvons utiliser des composants pour créer des pages et interagir avec les données back-end via des bibliothèques réseau telles qu'Axios. Dans le backend (Django4), nous pouvons définir des modèles pour décrire la structure des données et gérer les requêtes envoyées par le frontend via des vues API. En apprenant et en appliquant les technologies de base de Vue3 et Django4, nous pouvons créer des applications Web puissantes et performantes. Je souhaite aux lecteurs du succès dans leur cheminement vers le développement full-stack !

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!