Flask HTML模板引擎详解

模板引擎说明：

模板文件就是按照一定的规则书写的展示效果的HTML文件模板引擎就是负责按照指定规则进行替换的工具模板引擎选择jinja2。

一、渲染模板的方法

1、将渲染的模板进行返回

1	`render_template()`

2、渲染字符串返回

1	`render_templates_string()`

实例

@app.route('/')

def index():

#将模板内容响应给用户

return render_template('index.html')

#渲染一内容响应给用户

return render_template_string('<h1 style="color:green;font-size:18px;">原谅色</h1>')

二、模板的语法

模板中只存在俩种语法

1、变量

#像模板文件中传参

return render_template('index.html',title='首恶')

{{ title }}

2、标签

{% 标签名 %}

注意：

在模板中使用字典中的键需要像使用对象得方式来调用

如果在模板中给定的变量不存在则插入的是空字符串不会报错

三、过滤器

常用的过滤函数abs(value)：返回一个数值的绝对值。示例：-1|abs
default(value,default_value,boolean=false)：如果当前变量没有值，则会使用参数中的值来代替。示例：name|default(‘xiaotuo’)——如果name不存在，则会使用xiaotuo来替代。boolean=False默认是在只有这个变量为undefined的时候才会使用default中的值，如果想使用python的形式判断是否为false，则可以传递boolean=true。也可以使用or来替换。
escape(value)或e：转义字符，会将<、>等符号转义成HTML中的符号。显例：content|escape或content|e。
first(value)：返回一个序列的第一个元素。示例：names|first
format(value,*arags,**kwargs)：格式化字符串。比如：{{ "%s" - "%s"|format('Hello?',"Foo!") }}将输出：Helloo? - Foo!
last(value)：返回一个序列的最后一个元素。示例：names|last。
length(value)：返回一个序列或者字典的长度。示例：names|length。
join(value,d=u”)：将一个序列用d这个参数的值拼接成字符串。
safe(value)：如果开启了全局转义，那么safe过滤器会将变量关掉转义。示例：content_html|safe。
int(value)：将值转换为int类型。
float(value)：将值转换为float类型。
lower(value)：将字符串转换为小写。
upper(value)：将字符串转换为小写。
replace(value,old,new)： 替换将old替换为new的字符串。
truncate(value,length=255,killwords=False)：截取length长度的字符串。
striptags(value)：删除字符串中所有的HTML标签，如果出现多个空格，将替换成一个空格。
trim：截取字符串前面和后面的空白字符。
string(value)：将变量转换成字符串。
wordcount(s)：计算一个长字符串中单词的个数。

过滤器使用管道符 | 来使用的

1、{{ var|abs }} 返回一个数值的绝对值

2、default 设置默认值

只有当给定的变量不存在时则执行默认值

当设置default的boolean的时候会执行默认值

1	`<li>{{ data.bool\|default('我是默认值',boolean=True) }}</li>`

3、first: 取出变量中的第一个字符

4、last: 取出变量中的最后一个字符

5、format：字符的格式化

1	`<li>{{` `'我叫%s 我今年%d岁了我的存款为 %.2f'\|format('罗铁汉',38,23) }}</li>`

6、length: 返回变量值的长度

7、join: 拼接成字符串

1 2	`<li>{{ [1,2,3,4]\|join('') }}</li>` `<li>{{ [1,2,3,4]\|join('x') }}</li>`

8、safe: 不转义标签原样显示

9、lower 转为小写

10、upper 转为大写

11、replace 替换

1	`<li>{{ data.string\|replace('a','x') }}</li>`

12、striptages 去除HTML标签

四、标签

语法格式：{% 标签名 %}

(1) if

实例

{% if data.bool %}

<li>{{ data.bool }}值为真</li>

{% elif True %}

<li>{{ True }}职位真</li>

{% else %}

<li>{{ data.bool }}值为假</li>

{% endif %}

(2) for 循环

实例

{% for i in data.xxxx %}

{# 错误的迭代方法TypeError: 'bool' object is not iterable #}

{# {% for i in data.bool %}#}

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

{% else %}

<li>当迭代的变量不存在时则执行else</li>

{% endfor %}

注意：

break continue 不能够在这里使用

迭代字典

{% for k,v in data.items() %}

<li>{{ k }}=>{{ v }}</li>

{% endfor %}

获取当前迭代的状态

变量	描述
loop.index	获取当前迭代的索引从1开始
loop.index0	获取当前迭代的索引从0开始
loop.first	是否为第一次迭代
loop.last	是否为最后一次迭代
loop.length	迭代的长度

(4) set 模板引擎变量

语法：

{% set messages = get_flash_messages() %}

{{ messages }} 可以在当前定义的html模板中任何地方使用。

(3) with 模板引擎变量作用域

语法：

{% with messages = get_flash_messages() %}

{{ messages }} 只能在 with中使用

{% endwith %}

六、注释

{# 多行注释 #}

七、文件包含 include

相当于把一个文件拷贝到当前的你的包含的位置

实例

{% include 'common/header.html' %}

<div>我是中间的内容</div>

{% include 'common/footer.html' %}

注意：

1、包含的公共的文件中只存放公共的代码除此以外什么都不要存在

2、导入的时候如果文件和在同一级别直接导入就可以如果包含在某个目录中需要写出路径

1 2	`{%` `include` `'common/header.html'` `%}` `{%` `include` `'test.html'` `%}`

八、宏 macro

概念：类似python中的函数

实例

在macro.html中

{% macro input(name,type='text',value='') %}

<input type="{{ type }}" name="{{ name }}" value="{{ value }}">

{% endmacro %}

8.1、宏的调用

{{ input('text','username','') }}

{{ input() }}

{{ input(type='password',name='userpass') }}

8.2、宏的导入

(1) import

{% import 'test.html' as test %}

{% import 'common/test.html' as test %}

<p>用户名： {{ test.input(type='password',name='userpass') }}</p>

(2) form import

{% from 'test.html' import input %}

{% from 'common/test.html' import input %}

<p>用户名： {{ input(type='password',name='userpass') }}</p>

注意：

宏的调用只能在定义的下方去调用否则未定义
宏如果存在形参且没有默认值则可以调用(没意义)
形参的默认值需要遵循默认值规则有默认值的参数放右侧
可以正常使用关键字参数

九、继承 extends

语法：

{% extends %} 继承某个模板
{% block %} 挖坑和填坑
{{ super() }} 调用被替换掉的代码

base.html

<!DOCTYPE html>
<html lang="en">
<head>
{% block header %}<meta charset="UTF-8">{% block meta %}{% endblock %}<title>{% block title%}首页{% endblock %}</title><style>{% block style %}p{color:red;}{% endblock %}</style>{% block link %}{% endblock %}{% block script %}{% endblock %}
{% endblock %}
</head>
<body><header>头部</header>{% block con %}我是中间的内容部分
{% endblock %}<footer>尾部</footer></body>
</html>

index.html继承 base.html

{% extends 'common/base.html' %}{% block title %}我的首页
{% endblock %}{% block style %}{{ super() }}p{color:green;}
{% endblock %}{% block con %}<p>我是首页的内容</p>
{% endblock %}

注意：

如果当替换某个样式的时候所有原来的样式都消失了去查看是否使用了super()

十、flask-bootstrap

安装

1 3	`pip` `install` `flask-bootstrap` `sudo` `pip3` `install` `flask-bootstrap`

使用继承 bootstrap/base.html 基础模板改造成适用于自己网站的base.html基础模板，自己的base.html

{% extends 'bootstrap/base.html' %}{% block navbar %}<nav class="navbar navbar-inverse" style="border-radius: 0px;"><div class="container-fluid"><!-- 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="#bs-example-navbar-collapse-1" 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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><span class="glyphicon glyphicon-signal" aria-hidden="true"></span></a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页 <span class="sr-only">(current)</span></a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >发帖子</a></li></ul><ul class="nav navbar-nav navbar-right"><form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search"></div><button type="submit" class="btn btn-default">Submit</button></form><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></li><li class="dropdown"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">个人中心 <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >个人信息</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改头像</a></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >修改密码</a></li><li role="separator" class="divider"></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Separated link</a></li><li role="separator" class="divider"></li><li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >退出登录</a></li></ul></li></ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --></nav>{% endblock %}{% block content %}<div class="container">{% block pagecontent %}网页的中间内容部分写在当前的位置{% endblock %}</div>
{% endblock %}

使用 index.html

{% extends 'common/base.html' %}
{% block title %}首页
{% endblock %}

十一、错误页面的定制

manage.py

@app.errorhandler(404)def page_not_found(e):return render_template('common/error.html',error=e,code=404)@app.errorhandler(500)
def server_error(e):return render_template('common/error.html',error=e,code=500)

error.html

{% extends 'common/base.html' %}
{% block title %}{{ code }}错误
{% endblock %}
{% block pagecontent %}<div class="alert alert-danger" role="alert">{{ error }}</div>
{% endblock %}

十二、视图传递多个参数

(1) 原始传参

@app.route('/')

def index():

return render_template('index.html',arg1=1,arg2=2...)

(2) 使用字典

@app.route('/')

def index():

return render_template('index.html',arg={arg1:1,arg2:2...})

# kwarg={arg1:1,arg2:2...}

return render_template('index.html',``)

(3) 使用全局变量g

@app.route('/')

def index():

g.name = '张三'

g.age = 18

return render_template('index.html')

模板中

<ol>

<li>{{ g.name }}</li>

<li>{{ g.age }}</li>

</ol>

(4) 使用 **locals()

@app.route('/')

def index():

name = '张三'

age = 18

print(locals())

return render_template('index.html',**locals())

模板中

1 2	`<li>{{ name }}</li>` `<li>{{ age }}</li>`

十三、url_for 构造绝对的链接地址

@app.route('/test/')

def test():

print(url_for('index',_external=True))

return 'test'

十四、加载静态资源

静态资源：图片，css，js，视频，音频，，

实例

1	`<img` `src="{{ url_for('static',filename='img/17.jpg') }}"` `alt="">`

十五、基本的项目结构

1、模板继承

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>{% block title %}{% endblock %}</title>     盒子1                  <!-- <link rel="stylesheet" href="/static/css/commons.css" /> -->   引入 css第一种方式<link rel="stylesheet" href="{{ url_for('static',filename='css/commons.css') }}" />    引入css第二种方式{% block css %}{% endblock %}  　　　　盒子2
</head>
<body><div class="pg-header"></div><div class="pg-body">{% block body %}{% endblock %}    盒子3</div>{% block js %}{% endblock %}      盒子4
</body>
</html>

2、连接数据库

'''
db_pool.py
创建数据库连接池
'''import time
import pymysql
import threading
from DBUtils.PooledDB import PooledDB, SharedDBConnectionPOOL = PooledDB(creator=pymysql,  # 使用链接数据库的模块maxconnections=6,  # 连接池允许的最大连接数，0和None表示不限制连接数mincached=2,  # 初始化时，链接池中至少创建的空闲的链接，0表示不创建maxcached=5,  # 链接池中最多闲置的链接，0和None不限制maxshared=3,# 链接池中最多共享的链接数量，0和None表示全部共享。PS: 无用，因为pymysql和MySQLdb等模块的 threadsafety都为1，所有值无论设置为多少，_maxcached永远为0，所以永远是所有链接都共享。blocking=True,  # 连接池中如果没有可用连接后，是否阻塞等待。True，等待；False，不等待然后报错maxusage=None,  # 一个链接最多被重复使用的次数，None表示无限制setsession=[],  # 开始会话前执行的命令列表。如：["set datestyle to ...", "set time zone ..."]ping=0,# ping MySQL服务端，检查是否服务可用。# 如：0 = None = never, 1 = default = whenever it is requested, 2 = when a cursor is created, 4 = when a query is executed, 7 = alwayshost='47.93.4.198',port=3306,user='root',password='123',database='s6',charset='utf8'
)

3、sqlhelper.py

'''
因为每次操作都需要连接连接池，获取游标等，所以把这些操作封装起来
'''from utils.pool import db_pool
import pymysqlclass SQLHelper(object):def __init__(self):self.conn = Noneself.cursor = Nonedef open(self, cursor=pymysql.cursors.DictCursor):self.conn = db_pool.POOL.connection()self.cursor = self.conn.cursor(cursor=cursor)def close(self):self.cursor.close()self.conn.close()def fetchone(self, sql, params):cursor = self.cursorcursor.execute(sql, params)result = cursor.fetchone()return resultdef fetchall(self, sql, params):cursor = self.cursorcursor.execute(sql, params)result = cursor.fetchall()return resultdef __enter__(self):self.open()return selfdef __exit__(self, exc_type, exc_val, exc_tb):self.close()

4、login.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-
from flask import Blueprint, request, render_template, redirect, session,current_app
from utils.pool import db_pool
from utils.pool.sqlhelper import SQLHelper
account = Blueprint('account', __name__)@account.route('/login', methods=['GET', 'POST'])
def login():if request.method == 'GET':return render_template('login.html')else:# 方式一# helper = SQLHelper()# helper.open()# result = helper.fetchone('select * from users where name=%s and pwd = %s',[request.form.get('user'),request.form.get('pwd'),])# helper.close()# 方式二：with SQLHelper() as helper:result = helper.fetchone('select * from users where name=%s and pwd = %s',[request.form.get('user'),request.form.get('pwd'),])if result:current_app.auth_manager.login(result['name'])return redirect('/index')return render_template('login.html')

5、应用flask-session

from flask_session import Session#引入session后，注册app
app = Flask(__name__)
Session(app)

6、settings.py

#!/usr/bin/env python
# -*- coding:utf-8 -*-
import redisclass BaseConfig(object):SESSION_TYPE = 'redis'  # session类型为redisSESSION_KEY_PREFIX = 'session:'  # 保存到session中的值的前缀SESSION_PERMANENT = False  # 如果设置为True，则关闭浏览器session就失效。SESSION_USE_SIGNER = False  # 是否对发送到浏览器上 session:cookie值进行加密class ProductionConfig(BaseConfig):SESSION_REDIS = redis.Redis(host='47.93.4.195', port=6379, password='123123')  # 用于连接redis的配置class DevelopmentConfig(BaseConfig):SESSION_REDIS = redis.Redis(host='47.93.4.196', port=6379, password='123123')  # 用于连接redis的配置class TestingConfig(BaseConfig):SESSION_REDIS = redis.Redis(host='47.93.4.197', port=6379, password='123123')  # 用于连接redis的配置