前后端分离开发入门DjangoVue.js 实战前后端分离是现代 Web 开发的主流模式核心是将页面渲染、交互逻辑前端与数据处理、业务逻辑后端解耦通过标准化的 API 接口实现数据交互。本文以 Django后端 Vue.js前端为例详解前后端分离开发的核心流程、优势及实战技巧。一、前后端分离核心概念1. 传统开发 vs 分离开发模式核心特点弊端 / 优势传统开发后端渲染页面Django 模板前后端代码耦合弊端开发效率低、代码维护难、不支持多终端分离开发后端仅提供数据接口JSON前端负责渲染优势并行开发、代码解耦、支持多终端PC / 移动端、易扩展微服务架构2. 前后端分离的核心优势1.提升开发效率前后端约定接口后可并行开发无需等待对方完成需求变更时只要接口格式不变后端无需修改代码。2.增强可维护性前后端代码解耦维护时互不影响避免 “牵一发而动全身”。3.适配多终端同一套后端接口可支撑 PC、移动端、小程序等多终端降低开发成本。4.便于服务化架构后端接口可通过 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, safeFalse)2. 优化实现使用 bpmappers 简化对象序列化手动转换对象为字典效率低、易出错可使用bpmappers库支持 Django 模型快速实现对象→字典的映射。步骤 1安装依赖pip install bpmappers步骤 2编写模型映射器Mapperfrom 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, safeFalse)步骤 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 langen head meta charsetUTF-8 title学科信息/title style /* 此处省略层叠样式表 */ /style /head body div idcontainer h1扣丁学堂所有学科/h1 hr div idmain dl v-forsubject in subjects dt a :href/static/html/teachers.html?sno subject.no {{ subject.name }} /a img v-ifsubject.is_hot src/static/images/hot-icon-small.png /dt dd{{ subject.intro }}/dd /dl /div /div script srchttps://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自带的测试服务器如果要尝试前后端分离可以先将静态页面放在之前创建的放静态资源的目录下具体的做法可以参考项目完整代码。总结1. 前后端分离的核心是后端提供 JSON 接口、前端负责渲染通过bpmappers可简化 Django 模型到 JSON 的序列化2. Vue.js 通过fetch调用后端接口利用v-for/v-if等指令实现数据驱动的页面渲染3. 开发阶段需注意跨域问题django-cors-headers生产环境建议动静分离部署NginxuWSGI。AI神器,助力学习,工作国内直接使用顶级AI工具谷歌浏览器访问https://www.nezhasoft.cloud/r/vMPJZr