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。
这样 界面完全交给前端开发人员去做, 后端开发只需要提供前端界面所需要的数据就行了。
前端 和 后端 之间的交互就完全是 业务数据了。这样需要 定义好 前端和后端 交互数据 的接口。

目录
相关文章
|
28天前
|
监控 Java 持续交付
后端开发中的微服务架构实践与挑战####
在当今快速迭代的软件开发领域,微服务架构以其灵活性和可扩展性成为众多企业的首选。本文探讨了微服务架构的核心概念、实施策略及面临的主要挑战,旨在为后端开发者提供一个全面的指南。通过分析真实案例,揭示微服务在提升系统敏捷性的同时,如何有效应对分布式系统的复杂性问题。 ####
|
22天前
|
消息中间件 API 持续交付
后端开发中的微服务架构实践####
【10月更文挑战第21天】 本文深入探讨了微服务架构在后端开发中的应用,从基本概念出发,详细阐述了微服务的核心优势、设计原则及关键技术。通过实际案例分析,揭示了微服务如何助力企业应对复杂业务需求,提升系统的可扩展性、灵活性与可靠性。同时,也指出了实施微服务过程中可能面临的挑战,并提供了相应的解决方案和最佳实践。 ####
27 3
|
24天前
|
消息中间件 监控 持续交付
后端开发中的微服务架构设计与实践####
在当今快速发展的软件开发领域,微服务架构已成为构建高效、可扩展和易于维护应用的关键策略。本文将深入探讨微服务架构的核心概念、设计原则与实战技巧,通过实例解析如何在后端开发中有效实施微服务,以应对复杂业务需求和技术挑战。我们将从微服务的拆分策略、通信机制、数据管理到持续集成/持续部署(CI/CD)流程,全面剖析其背后的技术细节与最佳实践,为读者提供一份详尽的微服务架构设计与实践指南。 ####
|
14天前
|
运维 监控 Java
后端开发中的微服务架构实践与挑战####
在数字化转型加速的今天,微服务架构凭借其高度的灵活性、可扩展性和可维护性,成为众多企业后端系统构建的首选方案。本文深入探讨了微服务架构的核心概念、实施步骤、关键技术考量以及面临的主要挑战,旨在为开发者提供一份实用的实践指南。通过案例分析,揭示微服务在实际项目中的应用效果,并针对常见问题提出解决策略,帮助读者更好地理解和应对微服务架构带来的复杂性与机遇。 ####
|
12天前
|
消息中间件 运维 安全
后端开发中的微服务架构实践与挑战####
在数字化转型的浪潮中,微服务架构凭借其高度的灵活性和可扩展性,成为众多企业重构后端系统的首选方案。本文将深入探讨微服务的核心概念、设计原则、关键技术选型及在实际项目实施过程中面临的挑战与解决方案,旨在为开发者提供一套实用的微服务架构落地指南。我们将从理论框架出发,逐步深入至技术细节,最终通过案例分析,揭示如何在复杂业务场景下有效应用微服务,提升系统的整体性能与稳定性。 ####
29 1
|
18天前
|
监控 Serverless 云计算
探索Serverless架构:开发实践与优化策略
本文深入探讨了Serverless架构的核心概念、开发实践及优化策略。Serverless让开发者无需管理服务器即可运行代码,具有成本效益、高可扩展性和提升开发效率等优势。文章还详细介绍了函数设计、安全性、监控及性能和成本优化的最佳实践。
|
12天前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
14天前
|
消息中间件 运维 API
后端开发中的微服务架构实践####
本文深入探讨了微服务架构在后端开发中的应用,从其定义、优势到实际案例分析,全面解析了如何有效实施微服务以提升系统的可维护性、扩展性和灵活性。不同于传统摘要的概述性质,本摘要旨在激发读者对微服务架构深度探索的兴趣,通过提出问题而非直接给出答案的方式,引导读者深入
31 1
|
15天前
|
负载均衡 监控 API
后端开发中的微服务架构实践与挑战
本文深入探讨了微服务架构在后端开发中的应用,分析了其优势和面临的挑战,并通过案例分析提出了相应的解决策略。微服务架构以其高度的可扩展性和灵活性,成为现代软件开发的重要趋势。然而,它同时也带来了服务间通信、数据一致性等问题。通过实际案例的剖析,本文旨在为开发者提供有效的微服务实施指导,以优化系统性能和用户体验。
|
19天前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
27 7