基于python的前后端分离开发1 .前后端分离的概要返回JSON形式的数据使用Vue.js渲染页面
1 .前后端分离概述
在传统的web APP应用程序开发中，许多程序员将浏览器作为前后边界。 在浏览器中为用户显示页面的部分称为前端，在服务器上运行并为前端提供业务逻辑和数据而准备的所有代码统称为后端。 前端和后端分离的开发是指承诺前端和后端工程师交换数据的接口，并行进行开发和测试。 后端只提供数据，不负责在页面上呈现数据。 前端通过HTTP请求获取数据，并在页面上呈现数据。 这项工作交给浏览器中的JavaScript代码。
前后端分开开发有很多好处。 让我简单说明一下这些好处。
提升开发效率前后端分离后，可实现前后端代码解耦，只要前后端沟通约定APP所需的接口和接口参数，无需等待对方的开发工作完成即可并行开发在这种情况下，前端工程师只能专注于自己的开发，有助于建立更好的团队。 此外，在前端和后端分离的开发模式中，如果要求更改，但接口和数据格式不变，则后端开发人员只需要更改前端，不需要修改代码。增强代码的可维护性前后分离后，APP应用程序的代码只能在运行时具有调用相关性，而不是前后混淆。 这样，维护代码的工作就会变得轻松，就不会单枪匹马地活动身体了。 qxdxmg代码简洁干净可以提高代码的可读性和可维护性。支持多终端和服务化架构前后分离后，同一数据接口可以服务于不同的终端，有助于建立更多的终端APP应用； 它还可以在后端提供的接口之间通过http(s )调用，从而有助于构建包含微服务器的服务化架构。 python后端代码可以返回json格式的数据，并将从后端输出的内容返回到前端，然后使用Vue.js呈现前端页面
2 .在返回2.JSON格式数据的前端和另一种开发模式下，后端必须为前端提供数据接口。 这些接口通常返回JSON格式的数据。 在Django项目中，可以首先将对象视为词典，然后使用Django封装的JsonResponse将JSON格式的数据返回给浏览器。 具体做法如下。
defshow_subjects(request ) : queryset=subject.objects.all ) subjects=[] forsubjectinqueryset 3360 subjects.forsubjectinqueryset 360 ' name ' : subject.name，' intro': subject.intro， ' ishot ' : subject.is_hot } (returnjsonresponse (Suu shot ) subject.is _ hot ) ) returnJSON我们通过询问学科获得的querysson 将词典保存在名为subjects的列表容器中，最后利用JsonResponse完成列表序列化，并将JSON格式的数据返回给浏览器。 由于JsonResponse序列化列表而不是字典，因此必须将safe参数的值指定为False才能完成subjects序列化。 否则，将发生TypeError异常。
您可能已经知道，自己编写代码将对象转换成词典很麻烦。 如果对象的属性很多，并且某些属性与复杂的对象相关联，情况会更糟。 为此，可以使用名为bpmappers的三方库来简化将对象转换为词典的操作。 这个三方库本身也支持Django框架
安装第三方库bpmappers。
pipinstallbpmappers 3358 www.Sina.com /
frombpmappers.djangomodelimportmodelmapperfrompoll2. modelsimportsubjectclasssubjectmapper (模型映射器) 3360classmeta3360
defshow_subjects(request ) : queryset=subject.objects.all ) subjects=[ ] forsubjectinqueryset 3360 subjects.fory
URL patterns=[ path (API/subjects/'，show_subjects ) ] 编写映射器（实现对象到字典转换）
rong>。 [ { "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 Subjectclass SubjectMapper(ModelMapper): isHot = RawField('is_hot') class Meta: model = Subject exclude = ('is_hot', )再次查看学科接口返回的JSON数据。
[ { "no": 101, "name": "Python全栈+人工智能", "intro": "Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。", "isHot": true }, // 此处省略下面的内容]关于bpmappers详细的使用指南，请参考它的官方文档，这个官方文档是用日语书写的，可以使用浏览器的翻译功能将它翻译成你熟悉的语言即可。
3.使用Vue.js渲染页面接下来我们通过前端框架Vue.js来实现页面的渲染。如果希望全面的了解和学习Vue.js，建议阅读它的官方教程或者在w3school上学习Vue.js教程。
重新改写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 :rel="external nofollow" 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服务器上。