前后端分离开发入门在传统的Web应用开发里多数程序员会把浏览器当作前后端的分界线, 把浏览器中给用户作页面展示的部分称作前端, 把运行在服务器, 为前端供应业务逻辑与数据准备的所有代码统统叫做后端。所谓前后端分离的开发, 是前后端工程师约定好数据交互接口, 并行开展开发和测试, 后端仅提供数据, 不负责把数据渲染到页面上, 前端经由HTTP请求获取数据并负责将数据渲染到页面上, 此工作交由浏览器中的代码去完成。采用前后端分离进行开发, 存在着数不胜数诸多的益处, 接下来, 我们以简洁扼要简要之说一下这些好处:经过前后端分离, 能够达成前后端代码的解耦, 借此提升开发效率, 如果前后端沟通并约定好应用所需接口以及接口参数, 便能够开启并行开发, 无需等待对方开发工作完毕, 在此情形下, 能让前后端工程师都只专注自身开发工作, 对构建更好的团队有帮助, 同时, 在前后端分离开发模式里, 即便需求出现变更, 只要接口与数据格式维持不变, 后端开发人员就无需修改代码只需前端作出变动就行, 这样可增强代码的可维护性。前后端分离之后, 应用的代码已不再是前后端混合的状态, 仅是在运行期才会存在调用依赖关系, 如此一来, 维护代码的工作将会变得轻松愉悦许多, 再也不会出现改动一处便波及整体的情况。当你的代码变得简洁且整齐时, 代码的可读性以及可维护性都会有本质上的提升。它支持多终端以及服务化架构。往后端与前端分离之后, 同一组数据接口能够给不一样的终端供应服务, 更有利于去打造出多终端应用除此之外, 鉴于后端所提供的接口之间能够借由HTTP(S)来予以调用, 有助于打造服务化架构涵盖微服务。接下来我们就用前后端分离的方式来改写之前的投票应用。返回JSON格式的数据刚才已经讲过, 处于前后端分离的那种开发模式状况下, 后端得要给前端提供数据接口, 这些接口一般返回的是JSON格式那样的数据 在当前项目里呢, 我们能够先把对象处理成字典, 之后呢就能够借助封装的方式去给浏览器返回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)上部的代码之内, 咱们借由循环遍历去进行查询学科所获致的对象, 把每一个学科的数据给处理生成为一个字典, 接着将字典保存于名为的列表容器当中, 最终借由完成针对列表的序列化, 朝着浏览器返回JSON格式的数据。究其序列化的是一个列表而非字典, 因而需要指定safe参数的值为False才能够完成对的序列化, 不然的话会产生异常。大家或许已然发觉, 自行编写代码把一个对象转化成字典是颇为麻烦的, 要是对象拥有诸多属性且其中某些属性又关联到一个比较复杂的对象的话, 情形会变得愈发糟糕。鉴于此, 我们能够运用一个名为的三方库去简化将对象转化成字典的操作, 此三方库自身也给予了对框架的支持。安装三方库。pip install bpmappers编写映射器实现对象到字典转换。from bpmappers.djangomodel import ModelMapper from poll2.models import Subject class SubjectMapper(ModelMapper): class Meta: model Subject修改视图函数。def show_subjects(request): queryset Subject.objects.all() subjects [] for subject in queryset: subjects.append(SubjectMapper(subject).as_dict()) return JsonResponse(subjects, safeFalse)进行URL映射的配置, 之后对该接口予以访问, 能够获取到像如下所展示的JSON格式的数据。[ { no: 101, name: Python全栈人工智能, intro: Python是一种计算机程序设计语言。是一种面向对象的动态类型语言最初被设计用于编写自动化脚本(shell)随着版本的不断更新和语言新功能的添加越来越多被用于独立的、大型项目的开发。, create_date: 2017-08-01, is_hot: true },R0G.55Dz.cN // 此处省略下面的内容 ]要是不想在JSON数据里头呈现学科的设立时间, 那我们能够在映射器里排除属性要是期望把是否作为热门学科所对应的键命名为isHot它原本默认的名字是, 同样能够借由修改映射器达成。具体的操作办法如下所展示: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 (create_date, is_hot)再次查看学科接口返回的JSON数据。[ { no: 101, name: Python全栈人工智能, intro: Python是一种计算机程序设计语言。是一种面向对象的动态类型语言最初被设计用于编写自动化脚本(shell)随着版本的不断更新和语言新功能的添加越来越多被用于独立的、大型项目的开发。, isHot: true }, // 此处省略下面的内容 ]如欲获悉详细的使用指南, 需参考其官方文档, 该官方文档是以日语书写而成的, 只需运用浏览器的翻译功能把它译成你所熟知的语言便可。使用Vue.js渲染页面有关于Vue.js的知识, 在第21天直至第30天之前的内容里就已经讲过了, 这儿就不再去重复叙述了。要是期望全方位地知晓与研习Vue.js, 我整理出了视频形式的学习教程, 想要学习的人可以留言回复: “视频教程”, 进而领取视频教程。重新改写.html页面使用Vue.js来渲染页面。学科所有学科{{ subject.name }}{{ subject.intro }}前端页面要当作静态资源来部署, 这是前后端分离开发所必须的, 在项目实际上线时, 整个Web应用会进行动静分离, 静态资源借助Nginx或者服务器去部署, 生成动态内容的程序会部署在uWSGI或者服务器上, 对动态内容的请求会由Nginx或者被路由到uWSGI或者服务器上。于开发阶段时, 我们一般会运用自带的测试服务器, 要是打算尝试前后端分离, 那么能够先把静态页面放置在先前创建的那种用于放置静态资源的目录里, 对于不清楚的地方呀, 是可以留言的此前创建了一个自新手迈向大神的为期100天的专栏, 众多伙伴跟随其展开学习, 并且收获了诸多成果, 另外有伙伴跟我讲期望产出视频教程, 因观看起来会更加直观, 所以这也被整理出品了。