Building full-stack applications: Vue3 Django4 practical case
Introduction:
With the development of mobile Internet, full-stack development has attracted more and more attention. Full-stack development engineers can independently complete front-end and back-end development to improve development efficiency. In this article, we will introduce how to use the latest Vue3 and Django4 to build a full-stack application, and provide a practical case.
1. Introduction to Vue3 framework
Vue3 is one of the most popular front-end frameworks at present. It adopts a new API style called "combined API" to make the code more readable and maintainable. . Vue3 also introduces some new features, such as Teleport, Suspense, Fragment, etc., making the development experience richer.
Before writing a Vue3 application, we first need to install and configure the Vue3 development environment. We can use npm or yarn to install Vue3:
$ npm install -g @vue/cli
2. Introduction to Django framework
Django is an efficient, flexible and safe Python web development framework. It provides a complete set of tools for processing web requests, Components for accessing databases, processing forms, etc. Building complex web applications is easy with Django.
In order to use the latest Django4, we first need to install Python and Django. We can use the pip command to install Django:
$ pip install Django
3. Build a full-stack application
Now, we are ready to build a full-stack application. We will use Vue3 as the front-end framework and Django as the back-end framework to build a simple task management application.
$ django-admin startproject task_manager
This command will create a Django project named task_manager in the current directory.
$ cd task_manager $ python manage.py startapp tasks
This command will create an application named tasks in the Django project.
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)This will define a model named Task, which contains the title, description and creation time of the task.
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)This will define a view function named tasks_list for handling GET and POST requests. GET request returns a list of all tasks, while POST request is used to create new tasks.
from rest_framework import serializers
from .models import Task
class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = ['id', 'title', 'description', 'created_at']This will define a serializer named TaskSerializer for serializing and decoding the Task model. Serialization.
from django.urls import path
from tasks.views import task_list
urlpatterns = [
path('api/tasks/', task_list, name='task-list'),
]This will configure a URL route named task-list, which maps the task_list view function to the /api/tasks/ path.
4. Build Vue3 application
Now that we have completed the back-end construction, we will use Vue3 to build the front-end page.
$ vue create task-manager
This command will create a Vue3 project named task-manager.
$ cd task-manager $ npm install axios
axios is a powerful HTTP client for sending asynchronous requests. We will use axios to communicate with the Django backend.
<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>This will define a Vue component named TaskList for displaying the task list.
Then, create a file named CreateTask.vue and add the following code:
<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>This will define a Vue component named CreateTask for creating new tasks.
<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>This will make the TaskList and CreateTask components display normally in the App page, and the fetchTasks method will be triggered when the task is created.
5. Run the application
Now that we have completed the front-end and back-end development work, we can run the application for testing.
$ cd task_manager $ python manage.py runserver
$ cd task-manager $ npm run serve
结束语：
通过本文的介绍，我们了解了如何使用Vue3和Django4构建全栈应用的基本步骤。通过实战案例，我们学习了如何在Vue3中发送请求，并在Django中处理请求数据。希望本文对您的全栈开发学习之路有所帮助。
The above is the detailed content of Building a full-stack application: Vue3+Django4 practical case. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
