download：Django4+Vue3全新技术实战全栈我的项目
Django 4+Vue 3的基本概念
Django 4
Django 4是一种基于Python语言的高级Web框架，它遵循MVC（模型-视图-控制器）模式，提供了一套残缺的工具和组件，用于疾速开发高效、平安、可扩大的Web利用1。Django 4相比于之前的版本，有以下几个次要的改良3：
反对ASGI（异步服务网关接口），能够让Django利用更好地利用异步编程和WebSockets等技术。
反对自动检测并修复零碎时区设置谬误，能够防止时区相干的问题。
反对JSONField字段在所有反对的数据库中应用，能够更不便地存储和查问JSON数据。
反对在模板中应用点号作为千位分隔符，能够更好看地显示数字。
反对在治理界面中自定义主题色彩，能够更个性化地定制外观。
Vue 3
Vue 3是一种基于JavaScript语言的渐进式前端框架，它通过响应式数据绑定和组件化零碎，让开发者能够轻松地构建交互式和简单的用户界面2。Vue 3相比于之前的版本，有以下几个次要的改良4：
应用Proxy对象重写了响应式零碎，能够进步性能和兼容性，同时反对更多的数据类型和操作。
引入了Composition API，能够让开发者更灵便地组织和复用逻辑代码，同时反对TypeScript类型推断。
引入了Teleport组件，能够让开发者更不便地将子组件渲染到任意地位，例如模态框或弹出层等。
引入了Fragments个性，能够让开发者在模板中返回多个根节点，而不须要额定的包裹元素。
引入了多个内置指令和组件，如v-model, v-show, v-if, v-for, Transition, KeepAlive等，能够简化常见的性能实现。
Django 4+Vue 3的劣势
应用Django 4+Vue 3开发Web利用有以下几个劣势：
能够利用Python和JavaScript两种风行且弱小的编程语言，编写高质量、高效率、高可读性的代码。
能够利用Django 4和Vue 3的新个性，如ASGI, JSONField, Composition API, Teleport等，进步利用的性能和用户体验。
能够享受Django和Vue生态系统中丰盛的资源和工具，如DRF, GraphQL, Vuex, Axios, Element UI等，疾速搭建和部署利用。
Django 4+Vue 3博客平台示例
为了展现如何应用Django 4+Vue 3构建一个博客平台，咱们将以「Django 4 + Vue.js 前后端拆散Web开发实战」为参考，简略实现一个前端页面，显示博客列表和博客详情。
首先，咱们须要创立一个Django 4+Vue 3我的项目，能够应用以下命令：
创立一个虚拟环境
python -m venv venv
激活虚拟环境
source venv/bin/activate
装置Django 4
pip install django
创立一个Django我的项目
django-admin startproject blog_project
进入我的项目目录
cd blog_project
创立一个Django利用
python manage.py startapp blog_app
装置Vue CLI
npm install -g @vue/cli
创立一个Vue利用
vue create blog_app_frontend
复制
接下来，咱们须要配置Django我的项目，次要包含以下几个步骤：
在settings.py文件中，增加blog_app到INSTALLED_APPS列表中，以注册利用。
在settings.py文件中，增加CORS_ALLOW_ALL_ORIGINS = True到开端，以容许跨域申请。
在urls.py文件中，增加path(‘api/’, include(‘blog_app.urls’))到urlpatterns列表中，以配置API路由。
在blog_app目录下，创立一个models.py文件，增加以下代码，以定义博客模型：
from django.db import models
定义一个博客模型类，继承自models.Model类
class Blog(models.Model):
# 定义一个题目字段，类型为字符型，最大长度为100title = models.CharField(max_length=100)# 定义一个内容字段，类型为文本型content = models.TextField()# 定义一个创立工夫字段，类型为日期工夫型，主动设置为以后工夫created_at = models.DateTimeField(auto_now_add=True)# 定义一个字符串示意办法，返回题目def __str__(self): return self.title复制
在blog_app目录下，创立一个serializers.py文件，增加以下代码，以定义博客序列化器：
from rest_framework import serializers
from .models import Blog
定义一个博客序列化器类，继承自serializers.ModelSerializer类
class BlogSerializer(serializers.ModelSerializer):
# 定义一个元数据类，指定模型和字段class Meta: model = Blog fields = ['id', 'title', 'content', 'created_at']复制
在blog_app目录下，创立一个views.py文件，增加以下代码，以定义博客视图：
from rest_framework import generics
from .models import Blog
from .serializers import BlogSerializer
定义一个博客列表视图类，继承自generics.ListAPIView类
class BlogListView(generics.ListAPIView):
# 指定查问集为所有的博客对象queryset = Blog.objects.all()# 指定序列化器为博客序列化器类serializer_class = BlogSerializer定义一个博客详情视图类，继承自generics.RetrieveAPIView类
class BlogDetailView(generics.RetrieveAPIView):
# 指定查问集为所有的博客对象queryset = Blog.objects.all()# 指定序列化器为博客序列化器类serializer_class = BlogSerializer复制
在blog_app目录下，创立一个urls.py文件，增加以下代码，以配置博客路由：
from django.urls import path
from .views import BlogListView, BlogDetailView
定义一个路由列表
urlpatterns = [
# 配置博客列表路由，对应BlogListView视图类path('blogs/', BlogListView.as_view()),# 配置博客详情路由，对应BlogDetailView视图类，并传入参数名为pk的门路变量path('blogs/<int:pk>/', BlogDetailView.as_view()),]