Démarrage rapide : Guide de démarrage pour le développement Full-Stack de Vue3+Django4

Démarrage rapide : Guide de démarrage pour le développement Full-Stack de Vue3+Django4

Avec le développement rapide d'Internet, le développement full-stack est devenu l'une des tendances technologiques les plus en vogue ces dernières années. Dans le développement full-stack, il s'agit d'un moyen courant de développer en combinant des frameworks front-end et back-end. Cet article vous mènera dans le monde du développement full-stack Vue3+Django4 et fournira un guide d'introduction pour les débutants.

Vue3 est la dernière version du framework Vue.js. Il offre des performances plus élevées, une meilleure expérience de développement et davantage de nouvelles fonctionnalités. Django est un framework Web Python avancé qui offre des fonctionnalités riches et une évolutivité. Leur combinaison crée des applications Web puissantes et modernes.

Avant de commencer, assurez-vous que Node.js, Vue CLI et Python sont correctement installés. Une fois l'installation terminée, nous pouvons commencer à créer notre projet. Tout d'abord, créez un projet Vue3 à l'aide de Vue CLI, ouvrez un terminal et exécutez la commande suivante :

vue create myproject

Pendant le processus de création, vous pouvez choisir l'option Utiliser le préréglage Vue3, qui vous fournira une configuration prête à l'emploi incluant Vue. Routeur et Vuex. Une fois la création terminée, nous entrons dans le répertoire du projet et installons les packages de dépendances de Vue et Django :

cd myproject
npm install vue@next
pip install Django

Ensuite, nous devons créer une application Django dans le projet, créée par la commande suivante :

django-admin startproject backend
cd backend
python manage.py startapp api

Après la création terminé, nous pouvons commencer à écrire du code. Tout d'abord, nous devons ajouter le chemin du fichier statique de Vue dans le fichier settings.py de Django, rechercher l'URL STATIC_URL et ajouter le code suivant en dessous :

STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist'),
]

Ensuite, nous créons un nouveau fichier urls.py pour le traitement et la requête frontale de Vue. Ce fichier se trouve dans le répertoire api. Écrivez le code suivant :

from django.urls import path
from . import views

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

Ensuite, nous écrivons le code logique dans le fichier vues.py pour gérer les requêtes du front-end Vue. Écrivez le code suivant :

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

def api(request):
    data = {
        'message': 'Hello from Django API!'
    }
    return JsonResponse(data)

Dans cet exemple simple, nous renvoyons simplement une réponse JSON contenant un message simple. Dans les applications réelles, vous pouvez écrire une logique plus complexe pour gérer différentes requêtes.

Ensuite, nous devons écrire le code front-end avec Vue. Allez dans le répertoire du projet et installez Vue Router et Axios :

cd frontend
npm install vue-router@next axios

Ensuite on ouvre le fichier src/router/index.js et on ajoute le code suivant :

import { createWebHistory, createRouter } from 'vue-router'
import Home from '../views/Home.vue'
import API from '../views/API.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/api',
    name: 'API',
    component: API
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Dans cet exemple, on définit deux routes : '/' Home correspondante composant, '/api' correspond au composant API. Ensuite, nous créons les composants Home.vue et API.vue dans le répertoire src/views. Ici, il suffit d'afficher quelques informations textuelles.

Nous pouvons désormais envoyer des requêtes dans le composant API.vue pour obtenir des données de l'API Django. Utilisez le code suivant pour remplacer le contenu d'origine :

<template>
  <div>
    <h1 id="message">{{ message }}</h1>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('/api/')
      .then(response => {
        this.message = response.data.message
      })
      .catch(error => {
        console.error(error)
      })
  }
}
</script>

Dans cet exemple, nous avons envoyé une requête GET dans la fonction hook montée du composant, obtenu les données renvoyées par l'API Django et affiché les données sur la page.

Nous avons maintenant réalisé une application full-stack de base utilisant Vue3 et Django4. Vous pouvez exécuter la commande suivante pour démarrer le serveur de développement :

cd ..
python manage.py runserver

Ensuite, ouvrez http://localhost:8000/ dans votre navigateur et vous verrez une page contenant les données de l'API Django.

Grâce aux conseils de cet article, nous vous avons amené à compléter le guide d'introduction au développement full-stack Vue3+Django4. J'espère que cela sera utile aux débutants, et j'espère également que vous pourrez apprendre et explorer davantage le domaine du développement full-stack. allez!

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!