前后端分离开发入门：Django+Vue.js 实战

前后端分离是现代 Web 开发的主流模式，核心是将页面渲染、交互逻辑（前端）与数据处理、业务逻辑（后端）解耦，通过标准化的 API 接口实现数据交互。本文以 Django（后端）+ Vue.js（前端）为例，详解前后端分离开发的核心流程、优势及实战技巧。

一、前后端分离核心概念

1. 传统开发 vs 分离开发

2. 前后端分离的核心优势

1. 1. 提升开发效率：前后端约定接口后可并行开发，无需等待对方完成；需求变更时，只要接口格式不变，后端无需修改代码。
2. 2. 增强可维护性：前后端代码解耦，维护时互不影响，避免 “牵一发而动全身”。
3. 3. 适配多终端：同一套后端接口可支撑 PC、移动端、小程序等多终端，降低开发成本。
4. 4. 便于服务化架构：后端接口可通过 HTTP (S) 调用，易扩展为微服务架构。

接下来我们就用前后端分离的方式来改写之前的投票应用。

二、Django 后端：实现 JSON 数据接口

后端核心职责是提供标准化的 JSON 格式数据接口，无需关注页面渲染，专注于数据处理和业务逻辑。

1. 基础实现：手动序列化对象为 JSON

以 “获取学科列表” 为例，手动将模型对象转换为字典，再通过JsonResponse返回 JSON 数据：

defshow_subjects(request):    queryset = Subject.objects.all()    subjects = []for subject in queryset:        subjects.append({'no': subject.no,'name': subject.name,'intro': subject.intro,'isHot': subject.is_hot        })return JsonResponse(subjects, safe=False)

2. 优化实现：使用 bpmappers 简化对象序列化

手动转换对象为字典效率低、易出错，可使用bpmappers库（支持 Django 模型）快速实现对象→字典的映射。

步骤 1：安装依赖

pip install bpmappers

步骤 2：编写模型映射器（Mapper）

from bpmappers.djangomodel import ModelMapperfrom poll2.models import SubjectclassSubjectMapper(ModelMapper):classMeta:        model = Subject

步骤 3：优化视图函数

defshow_subjects(request):    queryset = Subject.objects.all()    subjects = []for subject in queryset:        subjects.append(SubjectMapper(subject).as_dict())return JsonResponse(subjects, safe=False)

步骤 4：配置 URL 映射

urlpatterns = [    path('api/subjects/', show_subjects),]

然后访问该接口，可以得到如下所示的JSON格式数据。

[{"no":1,"name":"Python全栈+人工智能","intro":"Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。","is_hot":true},// 此处省略下面的内容]

如果不希望在JSON数据中显示学科的成立时间，我们可以在映射器中排除create_date属性；如果希望将是否为热门学科对应的键取名为isHot（默认的名字是is_hot），也可以通过修改映射器来做到。具体的做法如下所示：

from bpmappers import RawFieldfrom bpmappers.djangomodel import ModelMapperfrom poll2.models import SubjectclassSubjectMapper(ModelMapper):    isHot = RawField('is_hot')classMeta:        model = Subject        exclude = ('is_hot', )

再次查看学科接口返回的JSON数据。

[{"no":101,"name":"Python全栈+人工智能","intro":"Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。","isHot":true},// 此处省略下面的内容]

关于bpmappers详细的使用指南，请参考它的官方文档，这个官方文档是用日语书写的，可以使用浏览器的翻译功能将它翻译成你熟悉的语言即可。

三、Vue.js 前端：渲染页面数据

接下来我们通过前端框架Vue.js来实现页面的渲染。如果希望全面的了解和学习Vue.js，建议阅读它的官方教程或者在YouTube上搜索Vue.js的新手教程（Vue.js Crash Course）进行学习。

重新改写subjects.html页面，使用Vue.js来渲染页面。