目录
1.模板 - Templates
- 模板中的语法
- 变量
变量时一种特殊的占位符,告诉模板引擎该位置的值是从渲染模板时的数据中来获取的
在视图中:
@app.route('/')
def index():
render_template('xxx.html',name='sf.zh',age=18)
name 和 age 就是要传递到 xxx.html 中的变量
在模板中:
{{变量名}}
练习:在01_temp.html基础上,完成下列效果显示
书名:《钢铁是咋炼成的》
作者:奥斯特洛夫斯基
价格:32.5
出版社:北京大学出版社 - 过滤器
- 什么是过滤器
过滤器是允许在变量输出显示之前改变变量的值 - 过滤器的语法
{{变量|过滤器}}
Jinja2 变量过滤器过滤器名 说明 capitalize 首字符变大写,其他字符变小写 lower 把值转换成小写 upper 把值转换成大写 title 把值中的每个单词的首字符变大写 trim 把值两端的空格去掉 -
控制结构
-
if结构
{% if 条件 %}
{% endif %}
{% if 条件 %}
满足条件要执行的代码
{% else %}
不满足条件要执行的代码
{% endif %}
查看下面示例 01_temp.html 21行 -
for结构
{% for 变量 in 元组|列表|字典}
{% endfor %} -
宏
使用{% macro %} 标签声明宏
//声明
{% macro show(str) %}
<h1>{{str}}</h1>
{% endmacro %}
//调用
{{show(uname)}}
查看下面示例 Run1.py 27行 / 01_temp.html 68行
为了方便重复使用,允许将宏放在单独的模板文件中声明定义-
创建macro.html
{% mscro show(str) %}
<h1>{{str}}</h1>
{% endmacro %}{% mscro show_li(str) %}
<li>{{str}}</li>
{% endmacro %} -
在使用的网页中,导入macro.html
{% import 'macro.html' as macros %}
{{ macros.show_li(uname) }}
查看下面示例 Run1.py 28行 / 01_temp.html 80行 / macro.html
-
-
模板的包含
在多处重复使用的模板代码可以放在单独的文件中,可以被其他的模板所包含(引用)
{% include 'xxx.html' %}
查看下面示例 Run1.py 47行 / 02-head.html / 03-index.html
-
- 什么是过滤器
- 变量
-
静态文件
-
什么是静态文件
在Flask中不能与服务器动态交互的文件都是静态文件
如:css,js,图片,音视频,... ... -
静态文件的处理
所有静态文件都保存在项目文件夹中的 static 文件夹中,在访问静态文件的时候需要通过/static/资源路径 进行访问
<img src = '/static/资源路径'>
反向解析:
url_for('static',filename='<file_path>')
<img src="{{url_for('static',filename='images/b04.jpg')}}">
查看下面示例Run1.py 47行 / 03-index.html 17行
-
-
模板的继承
-
什么是模板的继承
模板的继承类似于类的继承,如果在一个模板中出现的大量内容是另外一个模板的话,那么就可以使用继承的方式来简化开发 -
语法
-
父模板中
需要定义出哪些内容在子模板中是可以被重写的
{% block 块名 %}
{% endblock %}
block:定义允许在子模板中被修改的内容-
在父模板中正常显示,没有任何影响
-
在子模板中可以被重写
-
-
子模板中
-
使用{% extends '父模板名称' %} 来完成继承
-
使用{% block 块名 %} 来重写父模板中的同名内容
{% block 块名 %}
覆盖掉父模板中的内容
{% endblock %}
允许通过{{super()}} 来调用父模板中的内容
查看下面示例 Run1.py 52行,56行 / 04-parent.html / 05-child.html
-
-
-
2.自定义错误页面
- 404 的错误处理
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html'),404 - 500的错误处理
@app.errorhandler(500)
def internal_server_error(e):
return render_template('500.html'),500
... ...
404.html,500.html 需要自定义
查看下面示例 Run1.py 59行 / 404.html
以上示例:
Run1.py
from flask import Flask, render_template
app = Flask(__name__)
class Person(object):
name = None
def say(self):
return "hello i'm a person "
@app.route('/temp')
def temp():
# dic = {
# 'title':'我的第一个模板',
# 'bookName':'钢铁是咋练成的',
# 'author':'奥斯特洛夫斯基',
# 'price':32.5,
# 'publisher':'北京大学出版社',
# }
title = '我的第一个模板'
bookName = '钢铁是咋练成的'
author = '奥斯特洛夫斯基'
price = 32.5
publisher = '北京大学出版社'
list = ["金毛狮王","青衣父王","紫衫龙王","白眉鹰王"]
tup = ("刘德华","张学友","黎明","郭富城")
dic = {
'LW':'老魏',
'WWC':'隔壁老王',
'LZ':'吕泽',
'MM':'萌萌',
'PY':'皮爷',
}
per = Person()
per.name = '漩涡鸣人'
uname = 'uzumaki naruto'
print(locals())
return render_template('01_temp.html',params=locals())
@app.route('/login')
def login():
return '这里是登录页面'
@app.route('/index')
def index():
return render_template('03-index.html',uname='测试变量')
@app.route('/parent')
def parent():
return render_template('04-parent.html')
@app.route('/child')
def child():
return render_template('05-child.html')
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html'),404
if __name__ == '__main__':
app.run(debug=True)
01_temp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{params.title}}</title>
</head>
<body>
{% if params.uname %}
<h1>欢迎:{{params.uname}}</h1>
{% endif %}
{% if uname %}
<h1>欢迎:{{uname}}</h1>
{% else %}
<h1>
<a href="{{url_for('login')}}">登录</a>
</h1>
{% endif %}
<!-- for 循环 -->
<div style="font-size: 22px;">
{% for str in params.list %}
<p>{{str}}</p>
{% endfor %}
</div>
<ul>
{% for str in params.tup %}
<li>{{str}}</li>
{% endfor %}
</ul>
<div style="color: #f60;">
{% for key,value in params.dic.items() %}
<h2>{{key}}:{{value}}</h2>
{% endfor %}
</div>
<h2>书名:<<{{params.bookName}}>></h2>
<h2>作者:{{params.author}}</h2>
<h2>价格:{{params.price}}</h2>
<h2>出版社:{{params.publisher}}</h2>
<!-- 获取列表中的第二个元素 -->
<h2>list[1]:{{params.list.1}}</h2>
<h2>list[1]:{{params.list[1]}}</h2>
<!-- 获取元组中的第三个元素 -->
<h2>tup[2]:{{params.tup.2}}</h2>
<h2>tup[2]:{{params.tup[2]}}</h2>
<!-- 获取字典中的键为 WWC 的值-->
<h2>dic['PY']:{{params.dic.PY}}</h2>
<h2>dic['WWC']:{{params.dic['WWC']}}</h2>
<!-- 获取per对象的name属性值-->
<h2>per.name:{{params.per.name}}</h2>
<!-- 调用 per 对象的 say 方法-->
<h2>per.say():{{params.per.say()}}</h2>
<!-- 过滤器 -->
<h2>原始值:{{params.uname}}</h2>
<h2>capitalize : {{params.uname|capitalize}}</h2>
<h2>upper : {{params.uname|upper}}</h2>
<h3>title : {{params.uname|title}}</h3>
<!-- 声明一个 宏 -->
{% macro show(str) %}
<li style="color:#f60;">{{str}}</li>
{% endmacro %}
<h2>使用宏显示数据</h2>
<ul>
{% for str in params.list %}
{{show(str)}}
{% endfor %}
</ul>
<!-- 引入 macro.html 并使用 show_li 宏 -->
{% import 'macro.html' as macros %}
<ul>
{% for str in params.tup %}
{{macros.show_li(str)}}
{% endfor %}
</ul>
</body>
</html>
macro.html
{% macro show_li(str) %}
<li>
<p style="font-size:20px;">内容:</p>
<span style="color:#f60;">{{str}}</span>
</li>
{% endmacro %}
02-head.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<div class="top">
<h2>网页头部</h2>
<h2>{{uname}}</h2>
</div>
<div class="nav">
<ul>
<li>
<a href="#">导航1</a>
</li>
<li>
<a href="#">导航2</a>
</li>
<li>
<a href="#">导航3</a>
</li>
</ul>
</div>
</div>
</body>
</html>
03-index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 包含 02-head.html 内容到当前模板中来 -->
{% include '02-head.html' %}
<!-- 网页的主体 -->
<div class="container">
<div class="f1">
<h2>这是主体内容</h2>
</div>
</div>
<p>
<img src="/static/images/b04.jpg" width="350">
<img src="{{url_for('static',filename='images/b04.jpg')}}" width="350">
</p>
</body>
</html>
04-parent.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是父模板中 头部内容</h1>
{% block container %}
<h1>这是父模板中 主体内容</h1>
{% endblock %}
<h1>这是父模板中 底部内容</h1>
</body>
</html>
05-child.html
{% extends '04-parent.html' %}
<!-- 重写 04-parent.html 的 container 的内容 -->
{% block container %}
<!-- 调用父母版中的内容 -->
{{ super() }}
<h1>这是子模板中被重写的内容</h1>
{% endblock %}
404.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>你要查找的资源不存在!!!</h1>
</body>
</html>