Bases pour pratiquer : Démarrer avec le développement full-stack Vue3+Django4

Bases à pratiquer : Une introduction au développement full-stack Vue3+Django4

Présentation :
Le développement full-stack signifie qu'un développeur peut gérer le travail front-end et back-end en même temps, ce qui est de plus en plus et plus courant dans le développement Web moderne, important. Cet article expliquera comment utiliser Vue3 et Django4 pour le développement full-stack et fournira quelques exemples de code pour aider les lecteurs à démarrer.

1. Installation et configuration de Vue3
   Tout d'abord, nous devons installer Vue CLI pour créer et gérer nos projets Vue. Exécutez la commande suivante sur la ligne de commande pour installer Vue CLI :

   npm install -g @vue/cli

   Une fois l'installation terminée, utilisez la commande suivante pour créer un nouveau projet Vue :

   vue create my-project

   Sélectionnez en fonction des invites et sélectionnez l'option par défaut.

2. Créer des composants Vue
   Dans un projet Vue, nous pouvons utiliser des composants pour créer des interfaces utilisateur. Dans le répertoire src du projet Vue, créez un dossier nommé "components" et un fichier nommé "HelloWorld.vue". Dans ce fichier, nous pouvons écrire le code de notre composant, par exemple :

   <template>
     <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
     </div>
   </template>
   
   <script>
   export default {
     data() {
    return {
      message: 'Hello World!'
    }
     },
     methods: {
    changeMessage() {
      this.message = 'New Message!'
    }
     }
   }
   </script>

   Il s'agit d'un composant simple qui contient un titre et un bouton qui modifie le contenu du titre lorsque l'on clique sur le bouton.

3. Configuration de Django4
   Ensuite, nous devons installer Django et créer un nouveau projet Django. Exécutez la commande suivante depuis la ligne de commande pour installer Django :

   pip install django==4.0.0

   Une fois l'installation terminée, créez un nouveau projet Django à l'aide de la commande suivante :

   django-admin startproject myproject

   Cela créera un nouveau projet Django nommé "monprojet" dans le répertoire courant.

4. Créer des vues et des URL Django
   Dans le répertoire racine de votre projet Django, ouvrez le fichier settings.py et ajoutez le contenu suivant au paramètre INSTALLED_APPS :

   INSTALLED_APPS = [
    ...
    'rest_framework',
    'myapp',  // myapp是我们将要创建的应用的名称，根据需要修改
    ...
   ]

   Ensuite, ajoutez le contenu suivant à la fin des paramètres Fichier .py :

   REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.AllowAny',
    ]
   }

   Cela configurera Django pour utiliser le framework REST pour créer l'API.

Ensuite, créez une application nommée "myapp" dans le répertoire racine du projet Django :

python manage.py startapp myapp

Dans le répertoire myapp, ouvrez le fichier views.py et ajoutez le contenu suivant :

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!'})

Il s'agit d'un simple view, lorsque nous accédons à l'URL, renverra une réponse JSON contenant "Hello World!"

Ensuite, dans le répertoire myproject, ouvrez le fichier urls.py et ajoutez le contenu suivant :

from django.urls import path
from myapp.views import hello_world

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

Cela associera notre fonction d'affichage au chemin URL '/api/hello/'.

5. Exécutez le projet
   Maintenant, nous avons terminé la configuration de base de Vue et Django. Ensuite, nous devons connecter l'application Vue et le projet Django.

Dans le répertoire racine du projet Vue, ouvrez le fichier "main.js" et ajoutez le contenu suivant :

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$http = axios
app.mount('#app')

Cela configurera globalement l'application Vue pour utiliser axios comme client HTTP.

Dans le répertoire racine de votre projet Vue, ouvrez le fichier "App.vue" et ajoutez le contenu suivant :

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="getMessage">Get Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    getMessage() {
      this.$http.get('http://localhost:8000/api/hello/')
        .then(response => {
          this.message = response.data.message
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>

Cela enverra une requête à la vue de Django lorsque vous cliquerez sur le bouton et affichera le message renvoyé sur la page.

Maintenant, nous avons terminé toutes les configurations. Dans le répertoire racine du projet Vue, exécutez la commande suivante pour démarrer le serveur de développement Vue :

npm run serve

Dans le répertoire racine du projet Django, exécutez la commande suivante pour démarrer le serveur de développement Django :

python manage.py runserver

Maintenant, visitez " http://localhost:8080", vous verrez une page contenant un bouton "Hello World!". Lorsque vous cliquez sur le bouton, la page affichera "Hello World!".

Ceci est un guide d'introduction au développement full-stack avec Vue3 et Django4. Avec l'exemple de code présenté dans cet article, vous pouvez apprendre à créer une application de base Vue et Django et à les connecter ensemble. J'espère que cela vous aidera dans votre parcours de 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!