共计 2980 个字符，预计需要花费 8 分钟才能阅读完成。
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):
# 定义一个题目字段，类型为字符型，最大长度为 100
title = 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()),]
