Maîtriser les technologies de base : développement full stack Vue3+Django4

Maîtrisez les technologies de base : développement full-stack Vue3+Django4

Dans le développement de logiciels modernes, le développement full-stack attire de plus en plus l'attention. Les ingénieurs de développement full-stack peuvent gérer simultanément des tâches telles que le développement front-end et back-end, ainsi que les opérations de bases de données. Dans cet article, nous explorerons comment utiliser Vue3 et Django4, deux frameworks de développement populaires, pour le développement full-stack et fournirons quelques exemples de code.

1. Avant-propos

Vue3 est la dernière version de Vue.js, qui offre aux développeurs de meilleures performances et maintenabilité. Django4 est un framework back-end populaire en langage Python, qui fournit de puissantes opérations de base de données et des fonctions de développement Web. En combinant Vue3 et Django4, nous pouvons implémenter une application full-stack efficace, flexible et évolutive.

2. Développement front-end : Vue3

Tout d'abord, nous devons mettre en place un projet Vue3. Créez un nouveau projet Vue3 à l'aide de la commande suivante :

vue create vue3-django4-full-stack

Ensuite, nous pouvons créer un composant Vue et démarrer le développement front-end. Dans Vue3, la façon dont les composants sont écrits a légèrement changé. Voici un exemple simple :

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

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3!'
    }
  }
}
</script>

Dans cet exemple, nous définissons un composant Vue et utilisons l'option data pour définir une variable message. Ensuite, référencez cette variable dans le modèle pour afficher un message. data选项来定义一个message变量。然后，在模板中引用这个变量来展示一条消息。

3. 后端开发：Django4

现在，我们需要设置一个Django4的项目。使用以下命令创建一个新的Django4项目：

django-admin startproject django4_full_stack

然后，我们需要创建一个Django应用程序并开始后端开发。使用以下命令创建一个新的Django应用程序：

cd django4_full_stack
python manage.py startapp backend

接下来，在backend目录下创建一个views.py文件，并添加以下代码示例：

from django.http import JsonResponse

def hello_vue(request):
    message = "Hello, Django4!"
    return JsonResponse({'message': message})

在这个示例中，我们定义了一个处理API请求的视图函数hello_vue，它返回一个包含一条消息的JSON响应。

4. 前后端交互：API调用

现在，我们需要在前端组件中调用后端的API。在Vue3中，我们可以使用axios库来发送HTTP请求。在Vue组件中，我们可以使用以下代码来调用后端API：

import axios from 'axios';

export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    axios.get('http://localhost:8000/api/hello_vue')
      .then(response => {
        this.message = response.data.message;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

在这个示例中，我们使用axios.get方法发送一个GET请求到http://localhost:8000/api/hello_vue地址，并在成功响应时将返回的消息赋值给message变量。

5. 启动应用程序

现在，我们已经完成了前端和后端的开发，并且在前后端之间建立了一个简单的API交互。接下来，我们需要启动前端和后端的开发服务器。在一个终端窗口中，使用以下命令运行Vue3开发服务器：

cd vue3-django4-full-stack
npm run serve

在另一个终端窗口中，使用以下命令运行Django4开发服务器：

cd django4_full_stack
python manage.py runserver

现在，我们可以在浏览器中访问http://localhost:8080

Développement backend : Django4

Maintenant, nous devons mettre en place un projet Django4. Créez un nouveau projet Django4 en utilisant la commande suivante :

rrreee🎜 Ensuite, nous devons créer une application Django et démarrer le développement backend. Créez une nouvelle application Django en utilisant la commande suivante : 🎜rrreee🎜Ensuite, créez un fichier views.py sous le répertoire backend et ajoutez l'exemple de code suivant : 🎜rrreee 🎜In Dans cet exemple, nous définissons une fonction de vue hello_vue qui gère les requêtes API et renvoie une réponse JSON contenant un message. 🎜
🎜Interaction back-end : appel d'API 🎜🎜🎜Maintenant, nous devons appeler l'API back-end dans le composant front-end. Dans Vue3, nous pouvons utiliser la bibliothèque axios pour envoyer des requêtes HTTP. Dans le composant Vue, nous pouvons utiliser le code suivant pour appeler l'API backend : 🎜rrreee🎜 Dans cet exemple, nous utilisons la méthode axios.get pour envoyer une requête GET à http:/ /localhost :8000/api/hello_vue et attribuez le message renvoyé à la variable message lorsque vous répondez avec succès. 🎜
🎜Démarrez l'application🎜🎜🎜Maintenant, nous avons terminé le développement du front-end et du back-end, et établi une interaction API simple entre le front-end et le back-end. Ensuite, nous devons démarrer les serveurs de développement front-end et back-end. Dans une fenêtre de terminal, exécutez le serveur de développement Vue3 avec la commande suivante : 🎜rrreee🎜 Dans une autre fenêtre de terminal, exécutez le serveur de développement Django4 avec la commande suivante : 🎜rrreee🎜 Nous pouvons maintenant accéder à http:// dans le navigateur /localhost:8080 et voyez le message affiché dans le composant frontal. 🎜🎜Résumé🎜🎜Cet article présente comment utiliser Vue3 et Django4 pour le développement full-stack et fournit quelques exemples de code. En apprenant Vue3 et Django4, deux frameworks de développement populaires, nous pouvons créer des applications full-stack efficaces, flexibles et évolutives. J'espère que cet article pourra vous aider à maîtriser ces deux technologies clés et à jouer un rôle dans le 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!