上节回顾
- 什么是蓝图?
- 为什么用蓝图?
- 实例化蓝图?
- 怎么将蓝图注册到核心app上?
模版引擎
-
什么是模版引擎?
- 模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。(摘自 百度百科)
-
模版引擎都有什么?flask用的是什么模版引擎?
- 模版引擎有很多种,像 PHP(smarty), Python(Janjia,marco) , Java(Thymeleaf ,Freemarker) 等
- Flask 常用的模版引擎 是 Jinjia2
-
模版渲染
- 在
app
模块 新建一个templates
文件夹,然后里面新建index.html
文件
- 在
app.web.user.py
中 引入render_templates
函数 - 启动程序
- 运行结果
http://127.0.0.1:8888/user
- 在
-
templates只能在app下吗?
- flask 框架 默认templates(模版文件)安装在项目的根目录下,项目跟目录是根据flask的核心app一直,所以鉴于本例,templates只能在app下。
- 如果我不想让我的模版文件夹在app下,我可不可以更改位置呢?答案是可以的,你可以在
Flask(__name__)
这里更新一下就行template_folder()
,具体代码如下:
- 在 系统目录外新建
template/index.html
- 运行结果
http://127.0.0.1:8888/user
Jinjia2 模版语法
普通变量
<div> {{ username }} </div>
if 循环语句
{% if True %}
print('-----')
{% else %}
print('****')
{% endif %}
{% if username == 'xiao' %}
print('xiao')
{% elif username == 'da'%}
print('da')
{% else %}
print('other')
{% endif %}
for循环
{% for i in range(10) %}
print(i)
{% endfor %}
宏定义(macro)
# 定义宏
{% macro input(name, value='', type='text', size=20) -%}
<input type="{{ type }}" name="{{ name }}" value="{{
value|e }}" size="{{ size }}">
{%- endmacro %}
# 使用宏
<p>{{ input('username') }}</p>
<p>{{ input('password', type='password') }}</p>
最终代码
<p><input type='text' name='username',size=20 ></p>
<p><input type='password' name='password',size=20 ></p>
# 定义宏
{% macro test(type,name,value) %}
<input type='{{ type }}' name='{{ name }}' value='{{ value }}'/>
{% endmacro %}
{{ test(type='text',name='username',value='xiao') }}
{{ test(type='password',name='pwd',value='1234') }}
最终生成的代码
<input type='text' name='username' value='xiao'>
<input type='password' name='pwd' value='1234'>
模版继承
- 语法
# 父文件
{% block 名称 %}
# 代码块
{% endblock %}
# 子文件
{% block 名称 %}
# 这是子文件内容
{% endblock %}
- 举例
# base.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>这是头部</h2>
{% block section %}
{% endblock %}
<h2>这是底部</h2>
</body>
</html>
# child.html
{% extends 'base.html' %} #导入 base.html
{% block section %} # 块名称需要和base.html中的块名称一致
这是中间位置
{% endblock %}