前后端分离开发入门：Django+Vue.js 实战
前后端分离是现代 Web 开发的主流模式，核心是将页面渲染、交互逻辑（前端）与数据处理、业务逻辑（后端）解耦，通过标准化的 API 接口实现数据交互。本文以 Django（后端）+ Vue.js（前端）为例，详解前后端分离开发的核心流程、优势及实战技巧。
一、前后端分离核心概念
1. 传统开发 vs 分离开发
| 模式 | 核心特点 | 弊端 / 优势 |
|---|---|---|
| 传统开发 | 后端渲染页面（Django 模板），前后端代码耦合 | 弊端：开发效率低、代码维护难、不支持多终端 |
| 分离开发 | 后端仅提供数据接口（JSON），前端负责渲染 | 优势：并行开发、代码解耦、支持多终端（PC / 移动端）、易扩展微服务架构 |
2. 前后端分离的核心优势
-
提升开发效率：前后端约定接口后可并行开发，无需等待对方完成；需求变更时，只要接口格式不变，后端无需修改代码。
-
增强可维护性：前后端代码解耦，维护时互不影响，避免 "牵一发而动全身"。
-
适配多终端：同一套后端接口可支撑 PC、移动端、小程序等多终端，降低开发成本。
-
便于服务化架构：后端接口可通过 HTTP (S) 调用，易扩展为微服务架构。
接下来我们就用前后端分离的方式来改写之前的投票应用。
二、Django 后端：实现 JSON 数据接口
后端核心职责是提供标准化的 JSON 格式数据接口，无需关注页面渲染，专注于数据处理和业务逻辑。
1. 基础实现：手动序列化对象为 JSON
以 "获取学科列表" 为例，手动将模型对象转换为字典，再通过JsonResponse返回 JSON 数据：
def show_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 ModelMapper
from poll2.models import Subject
class SubjectMapper(ModelMapper):
class Meta:
model = Subject步骤 3：优化视图函数
def show_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 RawField
from bpmappers.djangomodel import ModelMapper
from poll2.models import Subject
class SubjectMapper(ModelMapper):
isHot = RawField('is_hot')
class Meta:
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来渲染页面。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学科信息</title>
<style>
/* 此处省略层叠样式表 */
</style>
</head>
<body>
<div id="container">
<h1>扣丁学堂所有学科</h1>
<hr>
<div id="main">
<dl v-for="subject in subjects">
<dt>
<a :href="'/static/html/teachers.html?sno=' + subject.no">
{{ subject.name }}
</a>
<img v-if="subject.is_hot" src="/static/images/hot-icon-small.png">
</dt>
<dd>{{ subject.intro }}</dd>
</dl>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script>
let app = new Vue({
el: '#main',
data: {
subjects: []
},
created() {
fetch('/api/subjects/')
.then(resp => resp.json())
.then(json => {
this.subjects = json
})
}
})
</script>
</body>
</html>前后端分离的开发需要将前端页面作为静态资源进行部署，项目实际上线的时候，我们会对整个Web应用进行动静分离，静态资源通过Nginx或Apache服务器进行部署，生成动态内容的Python程序部署在uWSGI或者Gunicorn服务器上，对动态内容的请求由Nginx或Apache路由到uWSGI或Gunicorn服务器上。
在开发阶段，我们通常会使用Django自带的测试服务器，如果要尝试前后端分离，可以先将静态页面放在之前创建的放静态资源的目录下，具体的做法可以参考项目完整代码。
总结
-
前后端分离的核心是后端提供 JSON 接口、前端负责渲染，通过
bpmappers可简化 Django 模型到 JSON 的序列化； -
Vue.js 通过
fetch调用后端接口，利用v-for/v-if等指令实现数据驱动的页面渲染； -
开发阶段需注意跨域问题（
django-cors-headers），生产环境建议动静分离部署（Nginx+uWSGI）。
AI神器,助力学习,工作
国内直接使用顶级AI工具
谷歌浏览器访问：
https://www.nezhasoft.cloud/r/vMPJZr
