Guide de développement de la pile complète Vue3+Django4

Guide de développement Full Stack Vue3+Django4

Avec la popularité du modèle de développement de séparation front-end et back-end, Vue et Django sont devenus les piles technologiques privilégiées par de nombreux développeurs. En tant que framework front-end populaire, Vue est facile à apprendre, flexible et efficace, tandis que Django est un framework back-end puissant qui fournit diverses fonctions nécessaires au développement d'applications Web.

Vue3 et Django4 récemment publiés apportent de nombreuses nouvelles fonctionnalités et améliorations intéressantes, améliorant l'efficacité du développement et l'expérience utilisateur. Cet article amènera les lecteurs à comprendre le guide de développement full-stack de Vue3+Django4, aidant les développeurs à mieux utiliser ces deux frameworks pour le développement full-stack.

Première étape : configurer l'environnement

Avant de commencer le développement full-stack, nous devons d'abord configurer un environnement de développement. Vue3 nécessite Node.js comme environnement d'exécution, tandis que Django4 nécessite la prise en charge de Python. Par conséquent, nous devons installer Node.js et Python séparément.

L'installation de Node.js est très simple. Téléchargez le package d'installation correspondant sur le site officiel et suivez les instructions pour l'installer. Une fois l'installation terminée, nous devons également installer l'outil d'échafaudage de Vue, vue-cli, qui peut être installé via la commande suivante :

npm install -g @vue/cli

L'installation de Python est également très simple. Vous pouvez télécharger le package d'installation correspondant depuis le site officiel et. puis installez-le selon les instructions. Une fois l'installation terminée, nous devons également installer Django et les packages d'extension associés. Vous pouvez utiliser la commande pip pour installer :

pip install Django

Étape 2 : Créer un projet Vue3

Après avoir configuré l'environnement de développement, nous pouvons commencer à créer le projet Vue3. Projet Vue3. Ouvrez le terminal de ligne de commande et utilisez la commande suivante pour créer un nouveau projet Vue3 :

vue create my-project

Configurez ensuite les options en fonction des invites, vous pouvez choisir la configuration manuelle et la configuration par défaut. Après avoir choisi la configuration manuelle, vous pouvez choisir différentes fonctionnalités et plug-ins en fonction de vos besoins.

Après avoir créé le projet, entrez dans le répertoire du projet et utilisez la commande suivante pour démarrer le serveur de développement :

cd my-project
npm run serve

De cette façon, vous pouvez accéder au projet dans le navigateur et voir la page d'accueil de Vue3.

Étape 3 : Créer un projet Django

Ensuite, nous devons créer un projet Django. Dans le terminal de ligne de commande, utilisez la commande suivante pour créer un nouveau projet Django :

django-admin startproject mysite

Après avoir créé le projet, entrez dans le répertoire du projet et utilisez la commande suivante pour démarrer le serveur de développement :

cd mysite
python manage.py runserver

De cette façon, vous pouvez accéder la page d'accueil de Django dans le navigateur .

Étape 4 : Connectez Vue3 et Django

Maintenant que nous avons un projet Vue3 et un projet Django, nous devons les connecter. Tout d'abord, nous devons configurer le proxy dans le projet Vue3 pour pouvoir accéder à l'API de Django. Créez un fichier vue.config.js dans le répertoire racine du projet Vue3, puis ajoutez la configuration suivante :

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

Ensuite, lorsque vous effectuez des requêtes API à l'aide d'axios ou d'autres bibliothèques client HTTP dans le projet Vue3, vous pouvez accéder directement à / apiChemin. /api路径。

在Django项目中，我们需要创建一个API视图来处理Vue3发送的请求。可以创建一个api.py文件，在其中编写API视图的逻辑。例如，可以使用Django的rest framework来快速创建RESTful API：

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

@api_view(['GET'])
def hello_world(request):
    return Response({'message': 'Hello, World!'})

然后，在Django项目的urls.py中添加这个API视图的路由：

from django.urls import path
from . import api

urlpatterns = [
    path('api/hello', api.hello_world),
]

这样，当在Vue3项目中发送GET请求到/api/hello时，Django将返回一个包含{'message': 'Hello, World!'}

Dans le projet Django, nous devons créer une vue API pour gérer les requêtes envoyées par Vue3. Vous pouvez créer un fichier api.py dans lequel vous écrivez la logique de la vue API. Par exemple, vous pouvez utiliser le framework rest de Django pour créer rapidement une API RESTful :

rrreee

Ensuite, ajoutez le parcours de cette vue API dans le urls.py du projet Django :

rrreee

De cette façon, lors de l'envoi d'une requête GET à /api/hello, Django renverra une réponse JSON contenant {'message' : 'Hello, World!'>.

Étape 5 : Développer les fonctions de l'application

Après les étapes ci-dessus, nous avons connecté avec succès Vue3 et Django et pouvons envoyer des requêtes API dans Vue3. Ensuite, nous pouvons commencer à développer des fonctions d’application en fonction de nos besoins.

Dans un projet Vue3, vous pouvez utiliser les nouvelles fonctionnalités de Vue3 telles que l'API de composition pour écrire la logique des composants. Vous pouvez utiliser Vue Router pour la gestion du routage frontal et Vuex pour la gestion de l'état.

Dans un projet Django, vous pouvez utiliser les modèles et les migrations de bases de données de Django pour définir et gérer des modèles de données. Vous pouvez utiliser les formulaires et modèles de Django pour gérer les entrées utilisateur et restituer l'interface.

Étape 6 : Déploiement et optimisation

La dernière étape consiste à déployer et optimiser notre application. Vous pouvez utiliser la commande d'empaquetage de Vue3 pour compiler le code frontal dans un fichier statique, puis le déployer sur le serveur.

Pour les projets Django, vous pouvez utiliser le serveur de développement intégré de Django pour les tests et le débogage, puis envisager d'utiliser Nginx+uWSGI pour le déploiement.

De plus, le code front-end et back-end peut être optimisé pour réduire le temps de chargement et améliorer les performances. Vous pouvez utiliser Webpack et Babel pour optimiser les projets Vue3, et utiliser les outils de mise en cache et de réglage des performances de Django pour optimiser les projets Django. 🎜🎜Conclusion🎜🎜Cet article présente le guide de développement full-stack Vue3+Django4, dans l'espoir d'aider les lecteurs à mieux utiliser ces deux frameworks pour le développement full-stack. Vue3 et Django4 fournissent des fonctions riches et des outils puissants, rendant le développement full-stack plus simple et plus efficace. Nous espérons que les lecteurs pourront utiliser habilement ces deux frameworks pendant le processus de développement et créer des applications plus exceptionnelles. 🎜

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!