Flask中的MTV架构之Templates

Flask 中的MTV架构之Templates

关注公众号“轻松学编程”了解更多。

1、Templates(模板引擎)

1.1 说明

模板文件就是按照特定规则书写的一个负责展示效果的HTML文件；模板引擎就是提供特定规则的解释和替换的工具.

1.2 Jinja2

在Flask中使用的就是该模板引擎，它是有flask核心开发组人员开发的，官方文档http://docs.jinkan.org/docs/jinja2/

1.3 Jinja2使用

a.目录结构
manage.py 项目启动控制文件
templates 所有的模板文件
b. 渲染模板文件
templates/hello.html

<h1>Hello Flask !</h1>

标签注释：{# 注释内容 #}

c. 渲染模板文件

return render_template('hello.html')

d.渲染模板字符串

return render_template_string('<h1>渲染字符串</h1>')

e.使用变量
var.html

{# 这里是注释，渲染的变量放在两个大括号中 ,g是代表全局变量的意思#}

   <h1>Hello {{ name }}</h1>

   <h1>Hello {{ g.name }}</h1>

f.传递name并渲染

return render_template('var.html', name='xiaoming')

g. 传递全局变量
g.name = ‘g的name属性’
g对象，在模板中使用不需要分配
h. 渲染模板字符串

return render_template_string('<h1>Hello {{ name }}</h1>',name='xxx')

i.使用函数

<h1>Hello {{ name | upper }}</h1>

j.模板函数

upper | 全部大写

lower | 全部小写

title | 每个单词首字母大写

capitalize | 首字母大写

trim | 去掉两边的空白

striptags | 过滤HTML标签

safe | 渲染时不转义，默认转义

不要滥用safe，否则可能不安全，只能用在自己信任的变量上

k. 流程控制
分之语句(if-else)

   {% if name %}

       <h1>Hello {{ name }} !</h1>

   {% else %}

       <h1>Hello world !</h1>

   {% endif %}

l.循环结构(for-in)

   <ol>

       {% for i in range(1, 6) %}

       <li>{{ i }}</li>

       {% endfor %}

   </ol>

m.文件包含

{% include 'include2.html' %}

n.宏的使用
采用类似于python中的函数的形式进行定义和调用，通常我们可以把特定功能的内容显示定义成一个宏，哪里使用哪里调用即可，避免了相同效果的代码重复书写。
o.宏的定义

   {# 定义宏 #}

   {% macro show_name(name) %}

       <h1>Hello {{ name }}</h1>

   {% endmacro %}

p.宏的导入

   {# 导入宏 #}

   {% from 'macro1.html' import show_name %}

r.宏的调用

   {# 调用宏 #}

   {{ show_name(name) }}

s.模板继承
父模板挖坑
parents.html

   <html>

   <head>

       <title>{% block title %}默认标题{% endblock %}</title>

   </head>

   <body>

       {% block body %}默认内容{% endblock %}

   </body>

   </html>

子模板填坑
children.html
继承父模板

   {# 继承自指定模板文件 #}

   {% extends 'parents.html' %}

填坑

   {# 可以对基础模板中的block进行删除，重写 #}

   {% block title %}欢迎登录{% endblock %}

   {# 重写基础模板中的block #}

   {% block body %}

       {# 保留基础模板中的内容 #}

       {{ super() }}

       <div>欢迎您的到来...</div>

   {% endblock %}

t.加载静态资源
默认目录为static
加载图片

<img src="{{ url_for('static', filename='cluo.jpg') }}">

u.加载CSS

{# 加载CSS #}

   {% block styles %}

       {{ super() }}

       <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='common.css') }}" />

   {% endblock %}

v.加载JS

   {# 加载JS #}

   {% block scripts %}

       {{ super() }}

       <script type="text/javascript" src="{{ url_for('static', filename='common.js') }}"></script>

   {% endblock %}

w.加载收藏夹的图标

   {# 加载收藏夹的图标 #}

   {% block head %}

       {{ super() }}

       <link rel="icon" type="image/x-icon" href="{{ url_for('static',filename='favicon.ico') }}" />

   {% endblock %}

1.4 flask-bootsrap

a.安装

 pip install flask-bootstrap

b.使用
导入类库

   # 导入类库

   from flask_bootstrap import Bootstrap

创建对象

bootstrap = Bootstrap(app)

测试模板boot.html

   {# 继承自bootstrap的基础模板 #}

   {% extends 'bootstrap/base.html' %}

   {% block title %}用户注册{% endblock %}

   {% block content %}

       <div class="container">欢迎注册</div>

   {% endblock %}

bootstrap/base.html中的block

| doc     | 整个HTML文档 |

| html    | html标签   |

| head    | head标签   |

| title   | title标签  |

| styles  | 引入css    |

| metas   | 一组meta标签 |

| body    | body标签   |

| navbar  | 用户自定义导航条 |

| content | 用户自定义内容  |

| scripts | 用户定义的JS  |

c.定义项目基础模板
一个项目中，很多页面都很相似，只有细微的差别，如果每个都定制势必会有大量的重复代码的书写。为了简化这种重复工作，我们通常为项目定制一个基础模板
步骤
1.从bootcss.com复制一个顺眼的导航条
2.将container-fluid改为container
3.显示反色导航条：navbar-inverse
4.将圆角改为直角：style=“border-radius: 0px;”
5.根据需要定制显示内容
6.修改折叠目标的定位：data-target=".navbar-collapse"
基础模板文件base.html

   {% extends 'bootstrap/base.html' %}

   {# 定制标题 #}

   {% block title %}默认标题{% endblock %}

   {# 定制导航条 #}

   {% block navbar %}

       <nav class="navbar navbar-inverse" style="border-radius: 0px;">

           <div class="container">

               <!-- Brand and toggle get grouped for better mobile display -->

               <div class="navbar-header">

                   <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                           data-target=".navbar-collapse" aria-expanded="false">

                       <span class="sr-only">Toggle navigation</span>

                       <span class="icon-bar"></span>

                       <span class="icon-bar"></span>

                       <span class="icon-bar"></span>

                   </button>

                   <a class="navbar-brand" href="#">首页</a>

               </div>

               <!-- Collect the nav links, forms, and other content for toggling -->

               <div class="collapse navbar-collapse">

                   <ul class="nav navbar-nav">

                       <li><a href="#">板块一</a></li>

                       <li><a href="#">板块二</a></li>

                   </ul>

                   <ul class="nav navbar-nav navbar-right">

                       <li><a href="#">注册</a></li>

                       <li><a href="#">登录</a></li>

                   </ul>

               </div><!-- /.navbar-collapse -->

           </div><!-- /.container -->

       </nav>

   {% endblock %}

   {# 定制内容 #}

   {% block content %}

       <div class="container">

           {# 这里可以为页面内容显示预留位置 #}

           {% block page_content %}默认内容{% endblock %}

       </div>

   {% endblock %}

d.错误页面定制
添加视图函数

   # 错误定制

   @app.errorhandler(404)

   def page_not_found(e):

       return render_template('404.html')

定制404.html

   {% extends 'base.html' %}

   {% block title %}出错了{% endblock %}

   {% block page_content %}<h1>臣妾实在找不到啊@_@</h1>{% endblock %}

url_for函数

携带GET参数

url_for('var', name='xiaoming', pwd='123456')

相当于 /var/?name=xiaoming&pwd=123456

构造完整的外部链接

url_for('var', name='xiaoming', pwd='123456', _external=True)

http://127.0.0.1:5000/var/?name=xiaoming&pwd=123456

在超链接中使用反向解析

<li>注册</li>

后记

【后记】为了让大家能够轻松学编程，我创建了一个公众号【轻松学编程】，里面有让你快速学会编程的文章，当然也有一些干货提高你的编程水平，也有一些编程项目适合做一些课程设计等课题。

也可加我微信【1257309054】，拉你进群，大家一起交流学习。
如果文章对您有帮助，请我喝杯咖啡吧！

公众号

关注我，我们一起成长~~