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('//')
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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indextitle>
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模板系统 (二)_第1张图片

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

Flask零基础到项目实战(三)Jinja2模板系统 (二)_第2张图片


二、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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indextitle>
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模板系统 (二)_第3张图片


三、过滤器

 过滤器简介:
Flask零基础到项目实战(三)Jinja2模板系统 (二)_第4张图片
在上面的这个评论界面,有些评论者有头像,有些没有头像;过滤器的作用就是,如果有头像就显示头像,没有头像就显示默认的头像(无头像)。如上所示。

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

Flask零基础到项目实战(三)Jinja2模板系统 (二)_第5张图片

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


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

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

效果(加载后端上传的图片):

Flask零基础到项目实战(三)Jinja2模板系统 (二)_第6张图片

实例二(加上过滤器):
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


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

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

效果(过滤器自动识别,后端没有上传则加载默认的图片):

Flask零基础到项目实战(三)Jinja2模板系统 (二)_第7张图片

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>indextitle>
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模板系统 (二)_第8张图片

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.语法

父模板:


<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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <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 %}

login.html

{% 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') }}">

你可能感兴趣的:(Python,Flask,Flask学习应用之路)