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 à < code>/ 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!'}

rrreee

rrreee

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!