第21天:Web开发 Jinja2模板引擎

简介: 第21天:Web开发 Jinja2模板引擎

在之前的文章中,简单介绍了Python Web开发框架Flask,知道了如何写个Hello World,但是距离用Flask开发真正的项目,还有段距离,现在我们目标更靠近一些 —— 学习下Jinja2模板。


模板的作用


模板是用来做什么的呢?模板是用来更高效地生成相应时的Html文本的,没有模板,可以手写,比如之前的hello world示例,写段html代码:

  1. Hello world!



对于简单的练习还行,但对于规模大的,动态化程度高的项目来说,这样写就有些勉强了,即,不利于项目和产品化。那么模板有什么好处呢:


  1. 能让展现逻辑和业务逻辑 展示逻辑即UI,就是用来给用户看和操作的,业务逻辑是业务规则,比如什么条件可以注册,什么权限能考到什么。模板将展现逻辑封装起来,业务逻辑写在视图函数中。


  1. 能使项目更易维护 由于展现逻辑和业务逻辑的分离,它们可以由不同的开发人员来维护,不会有代码冲突的问题



  1. 使项目更加安全 在做交互式开发中,有个原则: 永远不要相信用户的输入,因为恶意用户可能通过输入来注入(关于注入以后有机会可以单独聊聊),而模板在一定程度上会防注入,例如用户输入一点html代码作为输入,默认情况下模板会将其替换为网络安全字符,以防止恶意注入。


  1. 能提高开发效率 有了模板,相当于一个展示逻辑的函数,所以就可以被复用,可以用在不同的视图函数中,也可以用在不同的项目中


思考下:上面提到的展现逻辑业务逻辑,为什么不直接说成前台后台呢? 如果你有答案和想法,欢迎留言讨论。


Jinja2模板引擎


Jinja2是Flask框架默认支持的模板引擎,并不是唯一也不是最好(因人而异,没有最好)模板引擎,不同的Web框架,比如Django、Nodejs等都有自己的模板引擎,甚至一些程序员自己实现的模板引擎(我就这么干过),但大体思路是一样的,都是要将数据替换或者转换到,用特殊格式标记了位置的模板中,以合成动态的html,这种技术不新鲜,在之前的打印模板,如水晶报表里就有,无非就是标记和语法不同而已,所以要举一反三。


引入渲染函数


像其他功能一样,要使用模板引擎,先引入

  1. from flask import render_template

注意:要将将模板文件放置在项目根目录(即 print(__file__)显示的路径)下的 templates文件夹中


例如模板文件 hello.html为:

  1. Hello {{ name }}


{% endraw %}



视图函数可以写成:

  1. @app.route('/user/')
  2. def index(name):
  3.    return render_template('hello.html', name=name)

Flask提供的 render_template函数把Jinja2模板引擎集成到了程序中。render_template函数第一个参数是模板的文件名,随后的参数都是键值对,表示模板中变量的对应的真实值,在上面代码中,模板会接收到一个名为 name的变量



变量


模板文件就是普通的文本文件,然后将需要替换的部分用双大括号( {{}})标记出来,双大括号中,表示要替换的变量名,这个变量支持基本数据类型,以及列表、词典、对象和元组。如模板 template.html:

  1. A value form a string: {{ name }}.


  2. A value form a int: {{ myindex }}.


  3. A value form a list: {{ mylist[3]] }}.


  4. A value form a list, with a variable index: {{ mylist[myindex] }}.


  5. A value form a dictionary: {{ mydict['key'] }}.


  6. A value form a tuple: {{ mytuple }}.


  7. A value form a tuple by index: {{ mytuple[myindex] }}.



{% endraw %}



视图函数代码:



  1. @app.route('/template/')
  2. def template():
  3.    name ='Jinja2 模板引擎'
  4.    myindex =1
  5.    mylist =[1,2,3,4]
  6.    mydict ={
  7.       key:'age',
  8.       value:'25'
  9.    }
  10.    mytuple =(1,2,3,4)
  11.    return render_template('template.html', name=name, myindex=myindex, mylist=mylist, mydict=mydict, mytuple=mytuple)



显示结果:


image.png


过滤器


有些时候需要对要在模板中替换的值做一些特殊处理,比如首字母大写,去掉前后空格等等,有种选择就是使用过滤器。


说明


Jinjia2模板引擎中,过滤器类似于Linux命令中的管道,例如将字符串变量的首字母大写

{% raw %}


  1. {{ name | capitalize}}


{% endraw %}

过滤器可以拼接,和linux的管道命令一样,如对值进行全部变大写,并且去除前后空白字符:

{% raw %}

  1. {{ name | upper | trim }}


{% endraw %}


如上代码,过滤器和变量之间用管道符号 | 相连,相当于对变量值作进一步加工。

一些常用的过滤器


过滤器 说明
safe 渲染是不转义
capitalize 首字母大写
lower 所有字母小写
upper 所有字母大写
title 值中每个单词首字母大写
trim 删除首位空白字符
striptags 渲染时删除掉值中所有HTML标签

注意:safe过滤器,默认情况下,处于安全考虑,Jinja2会转义所有变量,例如一个变量的值为



Hello



, Jinja2会将其渲染成 <h1>Hello</>,浏览器会显示出原本的值,但是不会解释。如果需要浏览器解释的话,可以使用 safe 过滤器 例如模板文件 html.html为:

{% raw %}

  1. {{ html | safe }}


{% endraw %}



视图函数为:


  1. @app.route('/html')
  2. def html():
  3.    return render_template('html.html', html='bob')

注意:千万别在不可信的值上使用 safe 过滤器,例如用户在表单上输入的文本。

还有一些有用的过滤器



  • default,可以当变量未定义时,提供默认值,如果想将 falseFalse和空( none)视为未定义,需要提供第二个参数为 true{% raw %}
    {% endraw %}


  • 当变量 name的未定义时,上下两个显示效果一样,当值为 none时,上面会显示 Hellonone!, 而下面的会显示 Helloworld!


  1. Hello {{ name | default('world') }}!




  2. Hello {{ name | default('world', true)! }}



  • 列表过滤器 min, max, 得到列表中的最小值或最大值

自定义过滤器


过滤器虽然有很多,但总有不满足需求的时候,例如首行文字缩进、将金额转化为中文的大写等等。过滤器实质就是个函数,所以,第一定义一个过滤器函数,第二,注册到Jinjia2的过滤器中。


  1. # 定义过滤器函数
  2. def mylen(arg):#实现一个可以求长度的函数
  3.    return len(arg)
  4. def interval(test_str, start, end):# 返回字符串中指定区间的内容
  5.    return test_str[int(start):int(end)]

  6. # 注册过滤器
  7. env = app.jinja_env
  8. env.filters['mylen']= mylen
  9. env.filters['interval']= interval

  10. # 视图函数
  11. @app.route('/myfilter')
  12. def myfilter():
  13.    return render_template('myfilter.html', phone='13300000000')

模板文件



{% raw %}


  1. 电话号码是:{{ phone }}, 长度为:{{ phone | mylen }},运营商号:{{ phone | interval(0,3) }}


{% endraw %}

过滤器注册代码还可以写在初始化代码 __init__.py

控制结构

很多时候,需要更智能的模板渲染,即能给渲染编程,比如男生一个样式,女生一样样式,控制结构指令需要用指令标记来指定,下面介绍下一些简单的控制结构

条件


即在模板中用 if-else控制结构


{% raw %}

  1. {%if gender=='male'%}
  2.    Hello,Mr{{ name }}
  3. {%else%}
  4.    Hello,Ms{{ name }}
  5. {% endif %}

{% endraw %}

视图函数

  1. @app.route('/hello2//')
  2. def hello2(name, gender):
  3.    return render_template('hello2.html', name=name, gender=gender)

在控制结构里,代码语法同 python


循环


循环对于渲染列表,很有帮助,循环的标记是 for。例如奖列表的内容显示在 ul

{% raw %}


    • {% for name in names %}
    •    
    • {{ name }}

    • {% endfor %}


{% endraw %}


例如给定一个学生列表,将其用无序列表 ul显示出来


宏——模板中的函数


模板中可以定义宏,相当于定义了一个函数,可以重复使用,让逻辑更清晰。首先,定义一个宏:


mymacro.html {% raw %}


  1. {% macro render_name(name)%}
  2.    
  3. {{ name }}li>
  4. {% endmacro %}

{% endraw %} 然后使用宏, 例如将循环结构的例子中,显示名称的地方,改为调用宏 {% raw %}


    •    {% for name in names %}
    •        {{ render_name(name) }}
    •    {% endfor %}


{% endraw %}

调用宏,和调用函数是一样的,不过要将代码写在 {{}}双大括号内。一般我们会将宏存在单独的文件中,以便复用,在需要用到宏的地方,引用就好了

{% raw %}

  1. {%import'mymarco.html'as macros %}

    •    {%for name in names %}
    •        {{ macros.render_name(name)}}
    •    {% endfor%}
    • ul>

{% endraw %}

如上所述,用improt引入宏定义文件,通过as指定别名,和python的模块引入一样。指定别名是一个良好的编程习惯,可以将一个复杂的东西形象化,同时像一个命名空间一样,有效的避免冲突。

include

另外可以将多个模板片段写入一个单独文件,再包含( include)在所有模板中,以提高开发效率:

{% raw %}

  1. {% include 'common.html'%}

{% endraw %}

include进来的文件,相当于将文件中的内容复制到 include的位置,所以自使用之前需要考虑仔细

模板继承

如果觉得 include过于呆板,灵活性差,Jinja2模板引擎还有更高级的功能——继承。类似于Python代码中类的继承,一起看看。首先定义一个基类, base.html: {% raw %}



  1.    {% block head %}
  2.    </span><span style="color: #1B1918;">{% block title %}{% endblock%} - My Application</span><span style="color: #F22C40;">
  3.    {% endblock %}


  4.    {% block body %}
  5.        

    这是基类的内容


  6.    {% endblock %}


{% endraw %}

其中的 block标签,定义了可以被子类重构(替换)的部分,每个 blcok标签,需要指定一个特殊的名称,例如 headtitle等,以便子类用特定的名称来重构。另外 block标签需要有结束标签 endblock,类似于类C语言中的大括号,当然 block标签也可以嵌套。接下来,定义一个子类模板 hello3.html:

{% raw %}

  1. {%extends"base.html"%}
  2. {% block title %}Index{% endblock %}
  3. {% block head %}
  4.    {{super()}}
  5.    </span><span style="color: #1B1918;"></</span><span style="color: #1B1918;">style</span><span style="color: #1B1918;">></span></code></span><br /></li><li><span style="color: #4A4A4A;"><code><span style="color: #1B1918;">{%</span><span style="color: #1B1918;"> endblock </span><span style="color: #1B1918;">%}</span></code></span><br /></li><li><span style="color: #4A4A4A;"><code><span style="color: #1B1918;">{%</span><span style="color: #1B1918;"> block body </span><span style="color: #1B1918;">%}</span></code></span><br /></li><li><span style="color: #4A4A4A;"><code><span style="color: #1B1918;">    </span><span style="color: #1B1918;">{{</span><span style="color: #1B1918;"> </span><span style="color: #6666EA;">super</span><span style="color: #1B1918;">()</span><span style="color: #1B1918;"> </span><span style="color: #1B1918;">}}</span></code></span><br /></li><li><span style="color: #4A4A4A;"><code><span style="color: #1B1918;">    </span><span style="color: #7B9726;"><h3></span><span style="color: #1B1918;">这是子类的内容</span><span style="color: #1B1918;"> </span><span style="color: #407EE7;">Hello</span><span style="color: #1B1918;"> world</span><span style="color: #1B1918;">!</</span><span style="color: #1B1918;">h</span><span style="color: #1B1918;">></span></code></span><br /></li><li><span style="color: #4A4A4A;"><code><span style="color: #1B1918;">{%</span><span style="color: #1B1918;"> endblock </span><span style="color: #1B1918;">%}</span></code></span><br /></li></ol><div>{% endraw %}</div><div>效果如图所示:</div><div><br /></div><div><br /></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2F183ffca4febd49db8154759e72f6b3e4.png%22%2C%22originWidth%22%3A759%2C%22originHeight%22%3A285%2C%22name%22%3A%22image.png%22%2C%22size%22%3A101360%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A379.5%2C%22height%22%3A143%7D"></span></div><div><br /></div><div>通过 <code><span>extends</span></code>标记来指定需要继承的基类,然后用 <code><span>block</span></code>标记来设置子类需要替换调基类中的内容,只要 <code><span>block</span></code>指定的名称一样就行。另外,如不需要完全替换调基类的内容,可以在子类 <code><span>block</span></code>中,调用 <code><span>super</span></code>方法,以获取基类在此名称下的内容,这样就能达到更号的灵活性。</div><h3 id="80N0X">总结</h3><div>今天介绍了Jinja2模板引擎的基本用法和特点,期望通过不同的特点,让你了解到模板的基本用法,以便更快的使用和进一步学习更深入的内容。另外,想通过Jinja2模板引擎,说明模板的基本特征,以便触类旁通、举一反三,更快的学习其他优秀的模板, 同时也想说明,模板不仅仅可以用在Web的开发中,还可以用在自动化编码、测试等众多领域。最后在本章开头,留了个思考题,为什么不将<strong>展现逻辑</strong>和<strong>业务逻辑</strong>说成是<strong>前台</strong>和<strong>后台</strong>呢?如果你有答案,欢迎留言交流。</div><h3 id="79bk2">参考</h3><ul style="text-align: justify;"><li><span style="color: #4A4A4A;">图书: Flask Web开发 </span><span style="color: #0080FF;"><a href="https://item.jd.com/12418677.html" target="_blank">https://item.jd.com/12418677.html</a></span><br /></li><li><span style="color: #4A4A4A;">API-Jinja Documentation(2,10.x) </span><span style="color: #0080FF;"><a href="https://jinja.palletsprojects.com/en/2.10.x/api/#the-context" target="_blank">https://jinja.palletsprojects.com/en/2.10.x/api/#the-context</a></span><br /></li><li><span style="color: #4A4A4A;"><span>ansible基础-Jinjia2模板——过滤器 </span></span><br /><span style="color: #0080FF;"><a href="https://www.cnblogs.com/mauricewei/p/10056379.html" target="_blank">https://www.cnblogs.com/mauricewei/p/10056379.html</a></span><br /></li></ul>
目录
相关文章
|
2天前
|
前端开发 JavaScript API
探索现代Web开发中的动态数据交互——前端与后端整合实战
本文探讨了现代Web开发中前端与后端整合的关键技术点,通过实际案例演示了如何利用JavaScript和Node.js实现动态数据交互,全面解析从数据请求到响应的全过程。
|
2天前
|
自然语言处理 前端开发 Java
Servlet与JSP:Java Web开发的基石技术详解
【6月更文挑战第23天】Java Web的Servlet与JSP是动态网页的核心。Servlet是服务器端的Java应用,处理HTTP请求并响应;JSP则是结合HTML与Java代码的页面,用于动态内容生成。Servlet通过生命周期方法如`init()`、`service()`和`destroy()`工作,而JSP在执行时编译成Servlet。两者在MVC架构中分工,Servlet处理逻辑,JSP展示数据。尽管有Spring MVC等框架,Servlet和JSP仍是理解Web开发基础的关键。
|
2天前
|
安全 编译器 PHP
探索PHP 8的新特性及其对现代Web开发的影响
【6月更文挑战第22天】随着PHP 8的发布,这一广泛使用的服务器端脚本语言迎来了重大升级。本文将深入探讨PHP 8引入的关键新特性,包括JIT编译器、联合类型、命名参数、匹配表达式以及错误处理和异常改进等。这些新特性不仅提升了性能,还增强了类型系统和语言的表达能力,为现代Web开发带来了新的机遇和挑战。我们将分析这些变化如何影响编码实践,优化策略,并讨论开发者如何适应这些变革以构建更快、更安全、更易于维护的应用程序。
|
2天前
|
搜索推荐 Java 数据库连接
探索Java Web开发:Servlet与JSP的协同工作原理
【6月更文挑战第23天】Java Web开发中,Servlet和JSP协同打造动态网站。Servlet是服务器端的Java程序,处理HTTP请求并执行复杂逻辑;JSP则结合HTML和Java,生成动态内容。Servlet通过`doGet()`等方法响应请求,JSP在首次请求时编译成Servlet。两者常搭配使用,Servlet处理业务,JSP专注展示,通过`RequestDispatcher`转发实现数据渲染。这种组合是Java Web应用的基础,即使新技术涌现,其价值仍然重要,为开发者提供了强大的工具集。
|
2天前
|
前端开发 JavaScript API
现代Web开发中的前后端分离架构
本篇文章探讨了前后端分离架构在现代Web开发中的应用与优势。
|
18小时前
|
前端开发 JavaScript
web开发前端适配
web开发前端适配
4 0
|
3天前
|
存储 Java 容器
Web后端开发中对三层架构解耦之控制反转与依赖注入
Web后端开发中对三层架构解耦之控制反转与依赖注入
9 0
|
3天前
|
XML 前端开发 Java
基于Springboot的web后端开发三层架构上手实操
基于Springboot的web后端开发三层架构上手实操
9 0
|
3天前
|
XML 前端开发 JavaScript
后端请求响应和分层解耦web开发的三层架构
后端请求响应和分层解耦web开发的三层架构
8 0
|
4天前
|
前端开发
【Web开发】CSS教学(超详细,满满的干货)
【Web开发】CSS教学(超详细,满满的干货)
5 0