Partir de zéro : projet de nouvelle technologie Vue3+Django4

Partir de zéro : projet de nouvelle technologie Vue3+Django4

Introduction :
Dans le domaine technologique en développement rapide d'aujourd'hui, le développement full-stack est devenu une tendance. En tant que frameworks populaires pour le développement front-end et back-end, Vue et Django disposent non seulement d'un large éventail d'applications, mais apportent également des fonctionnalités plus intéressantes et puissantes dans les dernières versions. Cet article présentera comment utiliser Vue3 et Django4 pour créer un nouveau projet technologique et démontrera leur puissance à travers des exemples de code.

1. Planification et préparation du projet
Avant de commencer, nous devons planifier et préparer le projet. Tout d’abord, nous devons nous assurer que Node.js, Python et l’environnement de développement Django sont installés. Nous pouvons ensuite créer un nouveau projet Vue en installant la CLI Vue avec la commande suivante :

npm install -g @vue/cli
vue create my-project
cd my-project

Ensuite, nous sommes prêts à créer le projet Django. Installez Django via la commande suivante :

pip install Django

Ensuite, nous pouvons créer un nouveau projet Django via la commande suivante :

django-admin startproject myproject
cd myproject

2. Développement front-end : Vue3

1. Créer des composants Vue
   Dans Vue3, nous pouvons utiliser le <script setup> syntaxe pour écrire des composants. Voici un exemple simple :

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

<script setup>
import { ref } from 'vue'

const message = ref('Hello, Vue3')
const description = ref('This is a demo project')
</script>

2. Présentation des composants
   Dans l'application principale, nous pouvons introduire notre composant Vue et le restituer dans le DOM. Voici un exemple :

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script setup>
import MyComponent from '@/components/MyComponent.vue'
</script>

3. Développement backend : Django4

1. Création de vues Django
   Dans Django, nous pouvons utiliser des vues pour gérer les requêtes HTTP et renvoyer des réponses. Voici un exemple simple :

from django.http import JsonResponse

def my_view(request):
    data = {
        'message': 'Hello, Django4',
        'description': 'This is a demo project'
    }
    return JsonResponse(data)

2. Configuration du routage d'URL
   Dans Django, nous pouvons mapper les requêtes aux vues correspondantes via le routage d'URL. Voici un exemple :

from django.urls import path
from .views import my_view

urlpatterns = [
    path('my-view/', my_view, name='my-view'),
]

4. Connectez le front-end et le back-end : interface API
Une fois le front-end et le back-end prêts, nous devons les connecter via l'interface API. Dans Vue3, nous pouvons utiliser la bibliothèque axios pour envoyer des requêtes HTTP. Voici un exemple :

import axios from 'axios'

axios.get('/api/my-view/')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

Dans Django, nous pouvons utiliser Django REST Framework pour créer et gérer des interfaces API. Voici un exemple :

from rest_framework.decorators import api_view
from rest_framework.response import Response

@api_view(['GET'])
def my_view(request):
    data = {
        'message': 'Hello, Django4',
        'description': 'This is a demo project'
    }
    return Response(data)

5. Déploiement et tests du projet
Après avoir terminé le développement et réussi le test, nous pouvons déployer le projet. Pour le déploiement front-end, nous pouvons utiliser la commande build de Vue CLI pour générer des fichiers statiques et les déployer sur le serveur. Pour le déploiement backend, nous pouvons utiliser la commande runserver de Django pour démarrer le serveur. Nous pouvons également utiliser Nginx comme serveur Web pour inverser les requêtes proxy front-end et back-end.

6. Résumé
En utilisant Vue3 et Django4, nous pouvons facilement créer de puissants projets technologiques full-stack. La modularisation et le modèle de programmation réactif de Vue3 rendent le développement front-end plus efficace et élégant. Les vues, le routage d'URL et les interfaces API de Django4 rendent le développement back-end plus simple et plus flexible. J'espère que cet article vous aidera à apprendre et à maîtriser les technologies de Vue3 et Django4.

Exemple de code :

• Exemple de composant Vue
• Exemple de vue Django
• Exemple de connexion back-end
• Exemple de déploiement et de test de projet

Lien de référence :

• Documentation officielle de Vue : https://v3.vuejs .org/
• Documentation officielle de Django : https://docs.djangoproject.com/
• Documentation officielle de Django REST Framework : https://www.django-rest-framework.org/

Remarque : cet article est basé sur sur Vue CLI 4 .x et Django 4.x, certains exemples devront peut-être être ajustés en fonction des conditions réelles.

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!