在传统的Web应用开发中,大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端,而将运行在服务器为前端提供业务逻辑和数据准备的所有代码统称为后端。所谓前后端分离的开发,就是前后端工程师约定好数据交互接口,并行的进行开发和测试,后端只提供数据,不负责将数据渲染到页面上,前端通过HTTP请求获取数据并负责将数据渲染到页面上,这个工作是交给浏览器中的JavaScript代码来完成。
使用前后端分离开发有诸多的好处,下面我们简要的说下这些好处:
接下来我们就用前后端分离的方式来改写之前的投票应用。
刚才说过,在前后端分离的开发模式下,后端需要为前端提供数据接口,这些接口通常返回JSON格式的数据。在Django项目中,我们可以先将对象处理成字典,然后就可以利用Django封装的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)
上面的代码中,我们通过循环遍历查询学科得到的QuerySet
对象,将每个学科的数据处理成一个字典,在将字典保存在名为subjects
的列表容器中,最后利用JsonResponse
完成对列表的序列化,向浏览器返回JSON格式的数据。由于JsonResponse
序列化的是一个列表而不是字典,所以需要指定safe
参数的值为False
才能完成对subjects
的序列化,否则会产生TypeError
异常。
可能大家已经发现了,自己写代码将一个对象转成字典是比较麻烦的,如果对象的属性很多而且某些属性又关联到一个比较复杂的对象时,情况会变得更加糟糕。为此我们可以使用一个名为bpmappers
的三方库来简化将对象转成字典的操作,这个三方库本身也提供了对Django框架的支持。
安装三方库bpmappers
。
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, safe=False)
配置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,建议阅读它的官方教程或者在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自带的测试服务器,如果要尝试前后端分离,可以先将静态页面放在之前创建的放静态资源的目录下,具体的做法可以参考项目完整代码。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。