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月前
|
SQL 前端开发 关系型数据库
如何开发一套研发项目管理系统?(附架构图+流程图+代码参考)
研发项目管理系统助力企业实现需求、缺陷与变更的全流程管理,支持看板可视化、数据化决策与成本优化。系统以MVP模式快速上线,核心功能包括需求看板、缺陷闭环、自动日报及关键指标分析,助力中小企业提升交付效率与协作质量。
|
5月前
|
NoSQL 数据可视化 安全
如何开发一套车辆管理系统?(附架构图+流程图+代码参考)
本文介绍了如何通过搭建车辆管理系统(VMS)帮助企业摆脱传统管理方式,实现流程化、可视化、合规化和自动化。内容涵盖系统架构、关键功能模块、数据模型、API设计、前后端实现及实施建议,提供可落地的技术方案,助力企业降低隐形成本、提升管理效率与透明度,实现数据驱动决策。
|
5月前
|
JSON 文字识别 BI
如何开发车辆管理系统中的加油管理板块(附架构图+流程图+代码参考)
本文针对中小企业在车辆加油管理中常见的单据混乱、油卡管理困难、对账困难等问题,提出了一套完整的系统化解决方案。内容涵盖车辆管理系统(VMS)的核心功能、加油管理模块的设计要点、数据库模型、系统架构、关键业务流程、API设计与实现示例、前端展示参考(React + Antd)、开发技巧与工程化建议等。通过构建加油管理系统,企业可实现燃油费用的透明化、自动化对账、异常检测与数据分析,从而降低运营成本、提升管理效率。适合希望通过技术手段优化车辆管理的企业技术人员与管理者参考。
|
5月前
|
消息中间件 缓存 JavaScript
如何开发ERP(离散制造-MTO)系统中的生产管理板块(附架构图+流程图+代码参考)
本文详解离散制造MTO模式下的ERP生产管理模块,涵盖核心问题、系统架构、关键流程、开发技巧及数据库设计,助力企业打通计划与执行“最后一公里”,提升交付率、降低库存与浪费。
|
4月前
|
前端开发 JavaScript BI
如何开发车辆管理系统中的车务管理板块(附架构图+流程图+代码参考)
本文介绍了中小企业如何通过车务管理模块提升车辆管理效率。许多企业在管理车辆时仍依赖人工流程,导致违章处理延误、年检过期、维修费用虚高等问题频发。将这些流程数字化,可显著降低合规风险、提升维修追溯性、优化调度与资产利用率。文章详细介绍了车务管理模块的功能清单、数据模型、系统架构、API与前端设计、开发技巧与落地建议,以及实现效果与验收标准。同时提供了数据库建表SQL、后端Node.js/TypeScript代码示例与前端React表单设计参考,帮助企业快速搭建并上线系统,实现合规与成本控制的双重优化。
|
5月前
|
消息中间件 JavaScript 前端开发
如何开发ERP(离散制造-MTO)系统中的技术管理板块(附架构图+流程图+代码参考)
本文详解ERP(离散制造-MTO)系统中的技术管理板块,涵盖产品定义、BOM、工序、工艺文件及变更控制的结构化与系统化管理。内容包括技术管理的核心目标、总体架构、关键组件、业务流程、开发技巧与最佳实践,并提供完整的参考代码,助力企业将技术数据转化为可执行的生产指令,提升制造效率与质量。
|
5月前
|
消息中间件 JavaScript 关系型数据库
如何开发一套ERP(离散制造-MTO)系统(附架构图+流程图+代码参考)
本文介绍了面向离散制造-MTO(按订单生产)模式的ERP系统设计与实现方法。内容涵盖ERP系统定义、总体架构设计、主要功能模块解析、关键业务流程(订单到交付、BOM展开、MRP逻辑、排产等)、开发技巧(DDD、微服务、事件驱动)、参考代码示例、部署上线注意事项及实施效果评估。旨在帮助企业与开发团队构建高效、灵活、可扩展的ERP系统,提升订单交付能力与客户满意度。
|
5月前
|
NoSQL 关系型数据库 BI
如何开发一套固定资产管理系统?(附架构图+流程图+代码参考)
固定资产管理涉及采购、入库、维修、盘点、报废等多个环节,是企业资产保值增值的关键。本文详解固定资产管理系统(FAMS)的核心功能、系统架构、资产全生命周期流程,并提供功能设计、开发实操技巧与关键代码示例,涵盖台账、申购、入库、报修、处置、盘点等重点模块。内容聚焦企业落地实践,帮助提升资产管理效率、降低风险、保障审计合规。
|
4月前
|
运维 监控 安全
公链开发中的高可用架构设计要点
本指南提供公链高可用架构的可复用流程与模板,涵盖目标拆解、先决条件、分步执行、故障排查及验收标准,结合跨链DApp与量化机器人案例,提升落地效率与系统稳定性。
|
4月前
|
消息中间件 运维 监控
交易所开发核心架构拆解与流程图
本文系统解析交易所架构核心要素,从接入层到清算结算,结合系统流程图拆解各模块职责与协作机制。深入剖析撮合引擎、账本设计与风控逻辑,建立性能、可用性、安全性等多维评估标准,并提供可落地的流程图绘制、压测优化与进阶学习路径,助力构建高效、安全、可扩展的交易系统。(238字)

推荐镜像

更多