模板
应用开发中,很多页面骨架一样,但是内容不同,开发人员反复复制粘贴骨架html代码,模板就是为了解决次此类问题
模板是包含响应文本的文件,其中包含用占位变量表示的动态部分,其具体值只在请求的上下文中才能知道。将实际值替换变量,然后展现出来,这一过程称之为渲染
Jinja2模板引擎
Flask使用Jinja2模板引擎
示例:
templates/index.html
<h1>Hello World!</h1>
templates/user.html
<h1>Hello {{ name }}!</h1> //{{ name }} 表示一个变量,这是一种特殊的占位符
hello.py 渲染模板
from flask import Flask,render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/user/<name>')
def user(name):
return render_template('user.html',name=name)
变量
JinJa2 模板引擎能识别所有类型的变量
变量示例
<p>A value from a dictionary: {{ mydict['key'] }}.</p>
<p>A value from a list: {{ mylist[3] }}</p>
<p>A value from a list,with a variable index: {{ mylist[myintvar] }}</p>
<p>A value from an object's method: {{ myobj.somemethod() }}</p>
变量的值可以使用过滤器修改
Hello, {{ name|capitalize }} //将name值变成首字母大写,| 后面这个就叫过滤器
Jinja2 部分常用过滤器表
过滤器名 | 说明 |
---|---|
safe | 渲染时不转义 |
capitalize | 把值的首字母转换成大写,其他字母转化为小写 |
lower | 把值转化为小写 |
upper | 把值转化为大写 |
title | 把值中每个单词的首字母都转化成大写 |
trim | 把值的首尾空格去掉 |
striptags | 渲染之前把值中所有的html标签都删掉 |
默认情况下,Jinja2会转义所有变量,safe标签只能用在非用户输入且需要显示html代码的变量中
控制结构
JinJa2 提供了多种控制结构
条件判断语句
{% if user %}
Hello,{{ user }}!
{% else %}
Hello,Stranger!
{% endif %}
for循环
<ul>
{% for comment in comments %}
<li>{{ comment }}</li>
{% endfor %}
</ul>
宏
{% macro render_comment(comment) %}
<li>{{ comment }}</li>
{% endmacro %}
<ul>
{% for comment in comments %}
{{ render_comment(comment)}}
{% endfor %}
</ul>
重复使用宏
将宏另存为单独的文件
{% import 'macros.html' as macros %}
<ul>
{% for comment in comments %}
{{ macros.render_comment(comment) }}
{% endfor %}
</ul>
模板继承
base.html
<html>
<head>
<% block head %>
<title>{% block title %}{% endblock %}-My Appliaction</title>
{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
test.html
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block head %}
{{ super() }}
<style>
</style>
{% endblock %}
{% block body %}
<h1>Hello, World!</h1>
{% endblock %}
使用Flask-Bootstrap集成Bootstrap
Bootstrap是Twitter开发的一个开源web框架
导入flask扩展常用方式from flask_ import xxx
pip install flask-bootstrap4
hello.py
from flask import Flask,render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/user/<name>')
def user(name):
return render_template('user.html',name=name)
user.html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<div class="page-header">
<h1>Hello, {{ name }}!</h1>
</div>
</div>
{% endblock %}
自定义错误页面
hello.py
from flask import Flask,render_template
from flask_bootstrap import Bootstrap
app = Flask(__name__)
bootstrap = Bootstrap(app)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/user/<name>')
def user(name):
return render_template('user.html',name=name)
@app.errorhandler(404)
def page_not_found(e):
return render_template('404.html'),404
@app.errorhandler(505)
def internal_server_error(e):
return render_template('500.html'),500
404.html
<h1>Not Found</h1>
静态文件
默认设置下,Flask在应用根目录中名为static的子目录中寻找静态文件
base.html
{% extends "bootstrap/base.html" %}
{% block title %}Flasky{% endblock %}
{% block head %}
{{ super() }}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
<link rel="icon" href="{{ url_for('static', filename='favicon.ico') }}" type="image/x-icon">
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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="/">Flasky</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}