Maison > Article > interface Web > 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.
$ django-admin startproject task_manager
Cette commande créera un projet Django nommé task_manager dans le répertoire courant.
$ cd task_manager $ python manage.py startapp tasks
Cette commande créera une application nommée tâches dans le projet Django.
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.
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.
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.
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.
$ vue create task-manager
Cette commande créera un projet Vue3 nommé task-manager.
$ 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.
<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.
<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.
$ cd task_manager $ python manage.py runserver
$ cd task-manager $ npm run serve
结束语:
通过本文的介绍,我们了解了如何使用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!