Flask零基础到项目实战（三）Jinja2模板系统（二）

一、if语句

（1）语法

 {% if xxx %}
{% else %}
{% endif %}

if的使用，可以和python中相差无几。

（2）应用

main.py

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/<is_login>/')
def index(is_login):
if is_login == '1':
        user = {
'username' : u'站长',
'age' : 22
        }
return render_template('index.html', user= user)# 已经注册则传进去参数
else:
return render_template('index.html') # 没有注册则直接渲染


if __name__ == '__main__':
    app.run(debug=True)

在前端的Jinja2语法中，if可以进行判断：是否存在参数，存在的参数是否满足条件。。。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>这是一个模板文件</p>
{% if user and user.age > 18 %}
<a href="#">{{ user.username }}</a>
<a href="#">注销</a>
{% else %}
<a href="#">登录</a>
<a href="#">注册</a>
{% endif %}


</body>
</html>

测试：
1、传入有效的URL参数进行if判断

Flask零基础到项目实战（三）Jinja2模板系统（二）

2、传入无效的URL参数进行if判断

Flask零基础到项目实战（三）Jinja2模板系统（二）

二、for循环遍历

1. 字典的遍历

main.py

# for遍历字典
@app.route('/')
def index():
# 定义一个字典
    user = {
'username' : u'站长',
'age' : 22
    }
return render_template('index.html',user=user)

index.html

{% for k,v in user.items() %}
<p>{{ k }}:{{ v }}</p>
{% endfor %}

语法和python一样，可以使用items()、keys()、values()、iteritems()、iterkeys()、itervalues()

2.列表的遍历

main.py

# for遍历列表
@app.route('/')
def index():
    websites = ['www.baidu.com','www.google.com'] # 定义一个列表
return render_template('index.html',websites=websites)

index.html

{% for website in websites %}
<p>{{ website }}</p>
{% endfor %}

语法和python一样。

3.综合应用（列表和字典）

main.py

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
    books = [
        {
'name' : u'西游记',
'author' : u'吴承恩',
'price' : 88
        },
        {
'name': u'三国演义',
'author': u'罗贯中',
'price': 98
        },
        {
'name': u'红楼梦',
'author': u'曹雪芹',
'price': 89
        },
        {
'name': u'水浒传',
'author': u'施耐庵',
'price': 101
        }
    ]

return render_template('index.html', books=books)


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>综合运用列表和字典的模板文件</p>
<table>
<thead>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</thead>
<tbody>
{% for book in books %}
<tr>
<td>{{ book.name }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
{% endfor %}
</tbody>
</table>


</body>
</html>

效果：
Flask零基础到项目实战（三）Jinja2模板系统（二）

三、过滤器

过滤器简介：
Flask零基础到项目实战（三）Jinja2模板系统（二）
在上面的这个评论界面，有些评论者有头像，有些没有头像；过滤器的作用就是，如果有头像就显示头像，没有头像就显示默认的头像（无头像）。如上所示。

过滤器的作用对象是变量。

Flask零基础到项目实战（三）Jinja2模板系统（二）

1.语法

{{ avatar|default('xxx') }}

2.default过滤器

实例一（没有过滤器）：
main.py

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html', avatar='http://avatar.csdn.net/9/0/4/3_ly123963.jpg')


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>过滤器模板文件</p>

<img src="{{ avatar }}">
</body>
</html>

效果（加载后端上传的图片）：

Flask零基础到项目实战（三）Jinja2模板系统（二）

实例二（加上过滤器）：
main.py

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html') # 后端不上传图片，前端将加载默认的图片


if __name__ == '__main__':
    app.run(debug=True)

前端加上过滤器之后。
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>过滤器模板文件</p>

<img src="{{ avatar | default('http://noavatar.csdn.net/B/3/F/3_lighting_miaoxingren.jpg') }}">
</body>
</html>

效果（过滤器自动识别，后端没有上传则加载默认的图片）：

Flask零基础到项目实战（三）Jinja2模板系统（二）

3.length过滤器

length过滤器主要用于求列表或者字符串或者字典或者元组的长度。比如统计一篇文章评论的总数，一般都是使用过滤器完成的。
实例：
main.py

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
# 定义一个评论列表
    comments = [
        {
'user' : u'站长',
'content' : u'xxxxxxxxxxxx'
        },
        {
'user' : u'你猜',
'content' : u'yxyxyxyxyxy'
        },
        {
'user' : u'船长杰克',
'content' : u'tttttttmtmtmtmtd'
        }
    ]
return render_template('index.html',comments=comments)


if __name__ == '__main__':
    app.run(debug=True)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<p>过滤器模板文件</p>

<hr>

<p>评论数：（{{ comments|length }}）</p>
<ul>
{% for comment in comments %}
<li>
<a href="#">{{ comment.user }}</a>
<p href="#">{{ comment.content }}</p>
</li>
{% endfor %}

</ul>
</body>
</html>

效果：

Flask零基础到项目实战（三）Jinja2模板系统（二）

4.一些常用的过滤器

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)：计算一个长字符串中单词的个数。

四、继承和使用block

作用：可以把一些公共的代码放在父模板中，避免写重复的代码

1.语法

父模板：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
{%　block head　%}{% endblock %}
</head>
<div>
<h1>其他照旧</h1>
</div>

{% block MainContainer %}{% endblock %}
<body>

</body>
</html>

子模板：

{% extends 'base.html %}

{% block title %}
 名字
{% endblock %}

{% block head %}
<style>
 不同的风格文件
</style>
<link rel="stylesheet" href="">
<script>不同的脚本文件</script>
{% endblock %}

{% block MainContainer %}
<h1>这里是写具体内容的地方</h1>
{% endblock %}

实例：
main.py

#encoding: utf-8
from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index():
return render_template('index.html')

@app.route('/login')
def login():
return render_template('login.html')


if __name__ == '__main__':
    app.run(debug=True)

base.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.nav-header {
background: #3a3a3a;
height: 65px;
}
ul{
overflow: hidden;
}
ul li{
float: left;
list-style: none;
padding: 0 10px;
line-height: 65px;
}
ul li a{
color: #ffffff;
}
</style>
</head>
<body>
<div class="nav-header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">论坛</a> </li>
</ul>
</div>

{% block MainContainer %}{% endblock %}
</body>
</html>

index.html
使用这个模板之后，所有的代码必须写到block里面去！

{% extends 'base.html' %}

{% block MainContainer %}
<p>这里是首页</p>
{% endblock %}

{% extends 'base.html' %}

{% block MainContainer %}
<p>这里是注册页面</p>
{% endblock %}

五、URL链接和加载静态文件

通用语法：

url_for('static',filename='路径')

1.url跳转

视图函数中：

@app.route('/login/)
def login_function():
return render_template('login.html')

方法一：
html文件里面


<a href="/login/">点击我</a>

方法二（推荐）：

html文件里面

<a href="{{ url_for('login_function') }}">点击我</a>

2.加载静态文件

方法一：

html文件里面


<link rel="stylesheet" href="static/css/index.css">

方法二（推荐）：

html文件里面


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

加载图片方法（推荐）：

html文件里面

<img src="{{ url_for('static',filename='images/logo.png') }}">

加载Js文件方法（推荐）：

html文件里面

<script src="{{ url_for('static',filename='js/index.js') }}">

秒客网

Flask零基础到项目实战（三）Jinja2模板系统（二）

一、if语句

二、for循环遍历

1. 字典的遍历

2.列表的遍历

3.综合应用（列表和字典）

三、过滤器

1.语法

2.default过滤器

3.length过滤器

4.一些常用的过滤器

四、继承和使用block

1.语法

五、URL链接和加载静态文件

1.url跳转

2.加载静态文件

相关文章

Flask零基础到项目实战（三）Jinja2模板系统 （二）

一、if语句

二、for循环遍历

1. 字典的遍历

2.列表的遍历

3.综合应用（列表和字典）

三、过滤器

1.语法

2.default过滤器

3.length过滤器

4.一些常用的过滤器

四、继承和使用block

1.语法

五、URL链接和加载静态文件

1.url跳转

2.加载静态文件

相关文章

Flask零基础到项目实战（三）Jinja2模板系统（二）