Construire une application full-stack : cas pratique Vue3+Django4

Créer des applications full-stack : cas pratique Vue3+Django4

Introduction :
Avec le développement de l'Internet mobile, le développement full-stack attire de plus en plus d'attention. Les ingénieurs de développement full-stack peuvent effectuer indépendamment le développement front-end et back-end pour améliorer l’efficacité du développement. Dans cet article, nous présenterons comment utiliser les dernières versions de Vue3 et Django4 pour créer une application full-stack, et fournirons un cas pratique.

1. Introduction au framework Vue3
Vue3 est l'un des frameworks front-end les plus populaires actuellement. Il adopte un nouveau style d'API appelé « API combinée » pour rendre le code plus lisible et maintenable. Vue3 introduit également de nouvelles fonctionnalités, telles que Teleport, Suspense, Fragment, etc., rendant l'expérience de développement plus riche.

Avant d'écrire une application Vue3, nous devons d'abord installer et configurer l'environnement de développement Vue3. Nous pouvons utiliser npm ou Yarn pour installer Vue3 :

$ npm install -g @vue/cli

2. Introduction au framework Django
Django est un framework de développement Web Python efficace, flexible et sûr. Il fournit un ensemble complet de processus pour traiter les requêtes Web, accéder aux bases de données et traiter les formulaires. , etc. composants. Créer des applications Web complexes est facile avec Django.

Pour utiliser le dernier Django4, nous devons d'abord installer Python et Django. Nous pouvons utiliser la commande pip pour installer Django :

$ pip install Django

3. Créez une application full-stack
Maintenant, nous sommes prêts à créer une application full-stack. Nous utiliserons Vue3 comme framework front-end et Django comme framework back-end pour créer une application simple de gestion de tâches.

1. Créer un projet Django
   Tout d'abord, nous devons créer un projet Django. Ouvrez une fenêtre de ligne de commande et exécutez la commande suivante :

$ django-admin startproject task_manager

Cette commande créera un projet Django nommé task_manager dans le répertoire courant.

2. Créer une application Django
   Ensuite, nous devons créer une application dans le projet Django. Exécutez la commande suivante dans la ligne de commande :

$ cd task_manager
$ python manage.py startapp tasks

Cette commande créera une application nommée tâches dans le projet Django.

3. Définir le modèle de base de données
   Dans le projet Django, nous devons définir le modèle de base de données pour stocker les données des tâches. Ouvrez le fichier task/models.py et ajoutez le code suivant :

from django.db import models

class Task(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

Cela définira un modèle nommé Task, qui contient le titre, la description et l'heure de création de la tâche.

4. Créer une vue API
   Ensuite, nous devons créer la fonction de vue pour gérer les requêtes API. Ouvrez le fichier task/views.py et ajoutez le code suivant :

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

from .models import Task
from .serializers import TaskSerializer

@api_view(['GET', 'POST'])
def task_list(request):
    if request.method == 'GET':
        tasks = Task.objects.all()
        serializer = TaskSerializer(tasks, many=True)
        return Response(serializer.data)
    elif request.method == 'POST':
        serializer = TaskSerializer(data=request.data)
        if serializer.is_valid():
            serializer.save()
            return Response(serializer.data, status=201)
        return Response(serializer.errors, status=400)

Cela définira une fonction de vue appelée task_list pour gérer les requêtes GET et POST. La requête GET renvoie une liste de toutes les tâches, tandis que la requête POST est utilisée pour créer de nouvelles tâches.

5. Créer un sérialiseur API
   Dans le projet Django, nous devons créer un sérialiseur pour sérialiser et désérialiser les données. Le sérialiseur est chargé de convertir le modèle de base de données en données au format JSON et de convertir les données JSON en modèle de base de données. Créez un fichier nommé serializers.py dans le répertoire des tâches et ajoutez le code suivant :

from rest_framework import serializers

from .models import Task

class TaskSerializer(serializers.ModelSerializer):
    class Meta:
        model = Task
        fields = ['id', 'title', 'description', 'created_at']

Cela définira un sérialiseur nommé TaskSerializer pour sérialiser et désérialiser le modèle de tâche.

6. Configurer le routage d'URL
   Enfin, nous devons configurer le routage d'URL pour mapper la vue API à une URL spécifique. Ouvrez le fichier task_manager/urls.py et ajoutez le code suivant :

from django.urls import path

from tasks.views import task_list

urlpatterns = [
    path('api/tasks/', task_list, name='task-list'),
]

Cela configurera une route URL appelée task-list, qui mappe la fonction d'affichage task_list au chemin /api/tasks/.

4. Créer l'application Vue3
Maintenant que nous avons terminé la construction du back-end, nous allons utiliser Vue3 pour créer la page front-end.

1. Créer un projet Vue3
   Tout d'abord, nous devons créer un projet Vue3. Exécutez la commande suivante dans la ligne de commande :

$ vue create task-manager

Cette commande créera un projet Vue3 nommé task-manager.

2. Installer les modules dépendants
   Après avoir créé le projet, nous devons installer certains modules dépendants. Exécutez la commande suivante dans la ligne de commande :

$ cd task-manager
$ npm install axios

axios est un puissant client HTTP pour envoyer des requêtes asynchrones. Nous utiliserons axios pour communiquer avec le backend Django.

3. Écriture de composants Vue
   Ensuite, nous devons écrire des composants Vue pour afficher la liste des tâches et créer une interface pour les nouvelles tâches. Ouvrez le fichier TaskList.vue dans le répertoire src/components et ajoutez le code suivant :

<template>
  <div>
    <h1>Task List</h1>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    }
  },
  mounted() {
    this.fetchTasks()
  },
  methods: {
    async fetchTasks() {
      const response = await this.$http.get('/api/tasks/')
      this.tasks = response.data
    }
  }
}
</script>

Cela définira un composant Vue nommé TaskList pour afficher la liste des tâches.

Ensuite, créez un fichier appelé CreateTask.vue et ajoutez le code suivant :

<template>
  <div>
    <h1>Create Task</h1>
    <input type="text" v-model="title" placeholder="Title">
    <input type="text" v-model="description" placeholder="Description">
    <button @click="createTask">Create</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    async createTask() {
      const data = {
        title: this.title,
        description: this.description
      }
      await this.$http.post('/api/tasks/', data)
      this.title = ''
      this.description = ''
      this.$emit('task-created')
    }
  }
}
</script>

Cela définira un composant Vue appelé CreateTask pour créer de nouvelles tâches.

4. Modifier le composant App
   Enfin, nous devons modifier le composant App.vue et ajouter les composants TaskList et CreateTask à la page. Ouvrez le fichier src/App.vue et modifiez le code suivant :

<template>
  <div>
    <task-list @task-created="fetchTasks" />
    <create-task @task-created="fetchTasks" />
  </div>
</template>

<script>
import TaskList from './components/TaskList.vue'
import CreateTask from './components/CreateTask.vue'

export default {
  components: {
    TaskList,
    CreateTask
  },
  methods: {
    fetchTasks() {
      this.$refs.taskList.fetchTasks()
    }
  }
}
</script>

Cela affichera les composants TaskList et CreateTask normalement dans la page App, et la méthode fetchTasks sera déclenchée lors de la création de la tâche.

5. Exécutez l'application
Maintenant, nous avons terminé le travail de développement front-end et back-end et pouvons exécuter l'application à des fins de test.

1. 启动Django后端
   在命令行中运行以下命令，启动Django后端服务器：

$ cd task_manager
$ python manage.py runserver

2. 启动Vue3前端
   在一个新的命令行窗口中运行以下命令，启动Vue3前端服务器：

$ cd task-manager
$ npm run serve

3. 测试应用
   现在，打开浏览器，访问http://localhost:8080，就可以看到应用的界面了。在任务列表中，可以看到已经创建的任务，点击“Create Task”按钮，可以创建新的任务。

结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。

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!