Python Web开发(六):前后端分离的架构

简介: Python Web开发(六):前后端分离的架构

前面,我们的数据展示在界面上是这样的:
在这里插入图片描述

很不好看。
因为我们返回的其实就是字符串,并不是HTML。要好看一些,我们可以使用HTML来展示数据。

一、代码直接生成HTML
HTML本身其实也是字符串,只是这个字符串里面的内容是符合HTML语言规范的。
既然它也是字符串,我们可以使用Python直接构建出 HTML 字符串内容。
修改:

先定义好HTML模板

html_template ='''
<!DOCTYPE html>




<body>
    <table>
    <tr>
    <th>id</th>
    <th>姓名</th>
    <th>电话号码</th>
    <th>地址</th>
    </tr>
    
    %s
    
    
    </table>
</body>


'''

def listcustomers(request):

# 返回一个 QuerySet 对象 ,包含所有的表记录
qs = Customer.objects.values()

# 检查url中是否有参数phonenumber
ph =  request.GET.get('phonenumber',None)

# 如果有,添加过滤条件
if ph:
    qs = qs.filter(phonenumber=ph)

# 生成html模板中要插入的html片段内容
tableContent = ''
for customer in  qs:
    tableContent += '<tr>'

    for name,value in customer.items():
        tableContent += f'<td>{value}</td>'

    tableContent += '</tr>'

return HttpResponse(html_template%tableContent)

将其放在我们的sales/views文件中:
在这里插入图片描述

我们用一个变量 html_template 存储html模板, 然后 代码中生成html 里面需要插入的表格记录的内容,这个内容是html片段,也就是 html 表格的每行 。
最后填入到 html_template 模板里面,就产生了完整的HTML 字符串。最后返回该 html 文档 字符串 即可。修改后,再次访问 http://127.0.0.1:8080/sales/customers/
得到如下内容:
在这里插入图片描述
动态填入:
在这里插入图片描述

二、使用模板
上面我们是用Python代码直接拼接出html内容。
但是这种方式,我们代码处理比较麻烦。特别是,如果html里面有多处内容需要填入,使用Python代码直接拼接就显得很繁杂,不好维护。
很多后端框架都提供了一种 模板技术, 可以在html 中嵌入编程语言代码片段, 用模板引擎(就是一个专门处理HTML模板的库)来动态的生成HTML代码。
比如JavaEE 里面的JSP。Python 中有很多这样的模板引擎 比如 jinja2 、Mako, Django也内置了一个这样的模板引擎。
我们修改一下代码,使用Django的模板引擎

先定义好HTML模板

html_template ='''
<!DOCTYPE html>




<body>
    <table>
    <tr>
    <th>id</th>
    <th>姓名</th>
    <th>电话号码</th>
    <th>地址</th>
    </tr>

    {% for customer in customers %}
        <tr>

        {% for name, value in customer.items %}            
            <td>{{ value }}</td>            
        {% endfor %}
        
        </tr>
    {% endfor %}
            
    </table>
</body>


'''

from django.template import engines
django_engine = engines['django']
template = django_engine.from_string(html_template)

def listcustomers(request):

# 返回一个 QuerySet 对象 ,包含所有的表记录
qs = Customer.objects.values()

# 检查url中是否有参数phonenumber
ph =  request.GET.get('phonenumber',None)

# 如果有,添加过滤条件
if ph:
    qs = qs.filter(phonenumber=ph)

# 传入渲染模板需要的参数
rendered = template.render({'customers':qs})

return HttpResponse(rendered)

然后,访问浏览器,可以得到一样的结果:
在这里插入图片描述

对比 Python直接产生 HTML,大家可以发现,使用模板引擎的好处,就是产生HTML的代码更简单方便了。
因为我们可以直接把要生成的 HTML片段 写在 HTML模板 里面。
然后,只需要传入渲染模板所需要的参数就可以了,模板引擎会自动化帮我们生成的HTML
上面只是一种模板用法的简单演示。

三、前后端分离架构
有了模板引擎,对我们后端开发来说,简化了程序员后端生成HTML的任务,提高了开发效率。
但是,通常后端开发人员的核心任务不是开发前端界面, 而且大部分后端开发人员对前端界面开发还是不熟悉的。
前端界面的开发还是得由前端人员去做。
如果动态的界面内容都是由后端模板生成, 就意味着前端开发人员要接触后端的模板。
比如这里,就需要他们了解Django的HTML模板。
或者需要前端人员提供他们做好的HTML, 交给后端人员,再由后端人员把它修改成Django模板。
这样有什么问题?

不利于前后端开发任务的分离,前后端开发人员要做额外的沟通。

如果前端除了web浏览器,还有手机APP的话, APP 不需要服务端返回HTML, 就得再开发一套数据接口

渲染任务在后端执行,大大的增加了后端的性能压力。
尤其是有的HTML页面很大, 当有大量的用户并发访问的时候, 后端渲染工作量很大,很耗费CPU 资源。

现在随着 浏览器中javascript 解释器性能的突飞猛进,以及一些前端模板库和框架的流行。很多架构师将 页面的html 内容生成 的任务放到前端。
这样 服务端就只负责提供数据, 界面的构成全部在前端(浏览器前端或者手机前端)进行,称之为前端渲染。只是这个工作在前端执行, 使用前端的 框架库去完成,比如 Angular,React,Vue。
这样 界面完全交给前端开发人员去做, 后端开发只需要提供前端界面所需要的数据就行了。
前端 和 后端 之间的交互就完全是 业务数据了。这样需要 定义好 前端和后端 交互数据 的接口。

目录
相关文章
|
5月前
|
API C++ 开发者
PySide vs PyQt:Python GUI开发史诗级对决,谁才是王者?
PySide 和 PyQt 是 Python GUI 开发领域的两大利器,各有特色。PySide 采用 LGPL 协议,更灵活;PyQt 默认 GPL,商业使用需授权。两者背后团队实力雄厚,PySide 得到 Qt 官方支持,PyQt 由 Riverbank Computing 打造。API 设计上,PySide 简洁直观,贴近原生 Qt;PyQt 增加 Pythonic 接口,操作更高效。性能方面,两者表现优异,适合不同需求的项目开发。选择时可根据项目特点与开源要求决定。
342 20
|
7月前
|
前端开发 JavaScript 关系型数据库
基于Python+Vue开发的商城管理系统源码+运行步骤
基于Python+Vue开发的商城管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的网上商城管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
212 7
|
3月前
|
数据采集 存储 数据库
Python爬虫开发:Cookie池与定期清除的代码实现
Python爬虫开发:Cookie池与定期清除的代码实现
|
4月前
|
人工智能 搜索推荐 数据可视化
用 Python 制作简单小游戏教程:手把手教你开发猜数字游戏
本教程详细讲解了用Python实现经典猜数字游戏的完整流程,涵盖从基础规则到高级功能的全方位开发。内容包括游戏逻辑设计、输入验证与错误处理、猜测次数统计、难度选择、彩色输出等核心功能,并提供完整代码示例。同时,介绍了开发环境搭建及调试方法,帮助初学者快速上手。最后还提出了图形界面、网络对战、成就系统等扩展方向,鼓励读者自主创新,打造个性化游戏版本。适合Python入门者实践与进阶学习。
334 1
|
4月前
|
存储 算法 数据可视化
用Python开发猜数字游戏:从零开始的手把手教程
猜数字游戏是编程入门经典项目,涵盖变量、循环、条件判断等核心概念。玩家通过输入猜测电脑生成的随机数,程序给出提示直至猜中。项目从基础实现到功能扩展,逐步提升难度,适合各阶段Python学习者。
193 0
|
6月前
|
程序员 测试技术 开发工具
怎么开发Python第三方库?手把手教你参与开源项目!
大家好,我是程序员晚枫。本文将分享如何开发Python第三方库,并以我维护的开源项目 **popdf** 为例,指导参与开源贡献。Popdf是一个PDF操作库,支持PDF转Word、转图片、合并与加密等功能。文章涵盖从fork项目、本地开发、单元测试到提交PR的全流程,适合想了解开源贡献的开发者。欢迎访问[popdf](https://gitcode.com/python4office/popdf),一起交流学习!
209 21
怎么开发Python第三方库?手把手教你参与开源项目!
|
4月前
|
数据采集 存储 监控
抖音直播间采集提取工具,直播间匿名截流获客软件,Python开发【仅供学习】
这是一套基于Python开发的抖音直播间数据采集与分析系统,包含观众信息获取、弹幕监控及数据存储等功能。代码采用requests、websockets和sqlite3等...
|
5月前
|
机器学习/深度学习 算法 测试技术
图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析
本文探讨了基于图的重排序方法在信息检索领域的应用与前景。传统两阶段检索架构中,初始检索速度快但结果可能含噪声,重排序阶段通过强大语言模型提升精度,但仍面临复杂需求挑战
139 0
图神经网络在信息检索重排序中的应用:原理、架构与Python代码解析
|
5月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
6月前
|
前端开发 JavaScript 关系型数据库
基于Python+Vue开发的美容预约管理系统源码+运行
基于Python+Vue开发的美容预约管理系统(前后端分离),这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Python编程技能,同时锻炼他们的项目设计与开发能力。通过学习基于Python的美容诊所预约管理系统项目,大学生可以在实践中学习和提升自己的能力,为以后的职业发展打下坚实基础。
92 9

热门文章

最新文章

推荐镜像

更多