0
点赞
收藏
分享

微信扫一扫

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

在这里插入图片描述

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

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

一、代码直接生成HTML

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

# 先定义好HTML模板
html_template ='''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
</style>
</head>
    <body>
        <table>
        <tr>
        <th>id</th>
        <th>姓名</th>
        <th>电话号码</th>
        <th>地址</th>
        </tr>

        %s

        </table>
    </body>
</html>
'''

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 、MakoDjango也内置了一个这样的模板引擎。
我们修改一下代码,使用Django的模板引擎

# 先定义好HTML模板
html_template ='''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table {
    border-collapse: collapse;
}
th, td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
</style>
</head>
    <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>
</html>
'''

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

举报

相关推荐

0 条评论