看了这篇文章，你就能学会怎么用超火的 Vue3 前端框架和强大的 Python 开发框架 Django4 快速做个全栈应用！Vue3 就跟它名字一样直白易懂，不费劲就能上手，新手也不怕。Django4 就是Python里的Web神器，功能牛逼，安全稳定，处理各种Web请求、访问数据库、处理表单统统不在话下。跟着我说的步骤走，你就能轻松搞定一个任务管理应用，还能学到前后端如何默契配合，让数据传输和展示更方便。
安装和配置Vue3开发环境
$ npm install -g @vue/cli
想学Vue3开发？首先搞定环境！用npm或者yarn装上Vue3，就可以开始做项目。里面能写组件、设路径还能管状态。另外记得要善用Vue CLI这个神器，帮你快速搭建前端项目，省时又便捷！
$ pip install Django
安装Python和Django
$ django-admin startproject task_manager
想玩儿转 Django4？得装上 Python 和 Django！Python特别容易学会，功能牛逼到飞起，做 Web 开发正好适合。然后是 Django，用 Python 搞出来的 Web 框架，啥都有，让你快速搞定 Web 应用。用pip命令瞬间就可以把 Django安好，顺带还能创建一个新的 Django 项目。
$ cd task_manager $ python manage.py startapp tasks
创建Django项目和应用
咱们一起来搞个命令行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)
编写API视图和序列化器
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)
我们这个 Django 项目，还差那么一点点 API 接口就能让前端功能更好用了。首先，得搞个名叫`task_list`的视图函数处理各种 GET 和 POST 请求，比如获取任务清单、新建任务啥的都没问题。还有就是，别忘了给它装个序列化器，这样数据才能变成 JSON 格式，当然反过来也能做到！
配置URL路由
记得给每个API视图配个URL这样大家就知道怎么找自己需要的接口和拿到数据啦～比如“任务列表”，咱们可以把它关联到/api/tasks/这个位置。这样子的话，只要前端网页在这儿发个请求，就能轻松地查看或添加任务！
from rest_framework import serializers
from .models import Task
class TaskSerializer(serializers.ModelSerializer):
class Meta:
model = Task
fields = ['id', 'title', 'description', 'created_at']
安装依赖模块并编写Vue组件
Vue3项目里要用到axios这个强大的HTTP客户端库来搞定与后端的异步通讯接着，咱们就可以用Vue组件来搭任务列表和新建任务界面了。在TaskList.vue文件中放个任务列表组件，CreateTask.vue文件里加个新建任务组件，最后在App.vue文件里把它们拼凑好就完工！
from django.urls import path
from tasks.views import task_list
urlpatterns = [
path('api/tasks/', task_list, name='task-list'),
]
测试运行应用
搞定这个项目之后，我们就能让Django后台和Vue3前台都开始运行咯。进入浏览器输入网址就可以看到我们的应用！还可以试着去点那个“Create Task”，创建新的任务。学完这些知识和实战例子，你也就差不多懂怎么用Vue3向Django发请求，接着让它处理数据，做出一个完整的全栈应用。
$ vue create task-manager
本文教你如何在Vue3和Django4搭建全栈应用程序，附带实际案例，保证让你轻松学会！
$ cd task-manager $ npm install axios
评论0