flask三: 模版

一.html模版示例：

新建html文件：application/templates/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>这是首页</h1>
    <p>{{ msg }}</p>
</body>
</html>

在views.py视图函数，return渲染后的模版，使用render_template()渲染

from flask import Blueprint
from flask import render_template

first_blue = Blueprint('first_blue', __name__)

@first_blue.route("/")
def index():
    # return "这是首页"
    return render_template('index.html', msg="首页参数")

 二.Jinjia2模版

python中的jinjia2中文文档：http://docs.jinkan.org/docs/jinja2/templates.html

flask的jinjia2英文文档：https://jinja.palletsprojects.com/en/master/


1.变量、for和if标签示例：

a.模版T：students.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentsList</title>
</head>
<body>

<ul>
    {% for student in student_list %}
        <li>{{ student }}</li>
    {% endfor %}
</ul>

<hr>
{% if a %}
    <h1>这是A: {{ a }}</h1>
{% endif %}

<hr>
{% if a == b %}
    <h1>a:{{ a }}等于b:{{ b }}</h1>
{% endif %}
</body>
</html>

 b.视图V：

@first_blue.route('/students/')
def students():
    student_list = ["名字%d" % i for i in range(10)]
    return render_template("students.html", student_list=student_list, a=5, b=5)

 

2.block、extends结构标签：化整为零，拆分

示例：
a.父模版：挖坑---block(声明坑)
templates/user/base_user.html 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>

    {% block ext_css %} {% endblock %}

</head>
<body>

<div>
    {% block header %} {% endblock %}

    {% block content %} {% endblock %}

    {% block foot %} {% endblock %}

    {% block ext_js %} {% endblock %}
</div>


</body>
</html>

 b.子模版：继承父模版--extends，填坑--block(填坑)

templates/user/user_register.html 
{% extends 'user/base_user.html' %}

{% block content %} <h2>这是register的content</h2>{% endblock %}

 c.视图：

@first_blue.route('/user-register/')
def user_register():
    return render_template('user/user_register.html', title="注册页")

 

二次填坑示例：
孙模版，继承子模版，子模版继承父模版。
默认覆盖它的上级的坑。
a.templates/user/user_register_agin.html 继承自user_register.html 
{% extends 'user/base_user.html' %}

{% block content %} <h2>二次填坑.....register的content</h2>{% endblock %}

 b.视图：

@first_blue.route('/user-register-again/')
def user_register_again():
    return render_template('user/user_register_again.html', title="注册页222")

 

注：如果继承后保留上级块中的内容，即不覆盖，使用 {{ supper() }}

{% extends 'user/base_user.html' %}

{% block content %} {{ super() }} <h2> 二次填坑 </h2> {% endblock %}

 

3.include包含标签：化零为一，包含其它模版

示例：
 a.templates/banner.html 
<div>
    <h2>这是banner</h2>
</div>

 b. include，包含banner模版

templates/user/user_register3.html

{% extends 'user/user_register.html' %}

{% block content %}
    {{ super() }}
    <h5>再次注册</h5>
    {% include 'banner.html' %}
{% endblock %}

 

 

4. marco宏标签：在模版中自定义函数，给其它地方调用

 
示例：templates/macro_test1.html
定义macro、调用macro 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>

    {% block ext_css %} {% endblock %}

</head>
<body>

<div>
    {% macro hello() %}
        <p>这是一个macro</p>
    {% endmacro %}
</div>

{{ hello() }}
{{ hello() }}
{{ hello() }}
{{ hello() }}

</body>
</html>

 示例：导入macro

templates/functions/functionSet1.html

{% macro hello() %}
    <p>这是一个macro</p>
{% endmacro %}

{% macro sayHi(name) %}
    <p>hi, {{ name }}</p>
{% endmacro %}

 

在一个html文件中，导入另外一个文件中的macro 
{% extends 'user/base_user.html' %}

{% block content %}
    {{ super() }}
    <br>
    <p>再次注册</p>

    {% from 'functions/function_set1.html' import sayHi %}
    {{ sayHi("Jerry") }}
    {{ sayHi("Json") }}
{% endblock %}

 

5.for循环标签

示例：
模版： 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentsList</title>
</head>
<body>

{% for student in student_list %}
    {% if loop.first %}
        <li style="color: red">序号: {{ loop.index }}--index: {{ loop.index0 }}--学生: {{ student }}</li>
    {% elif loop.last %}
        <li style="color: blue">序号: {{ loop.index }}--index:{{ loop.index0 }}--学生: {{ student }}</li>
    {% else %}
        <li>序号: {{ loop.index }}--index:{{ loop.index0 }}--学生: {{ student }}</li>
    {% endif %}
{% endfor %}
</body>
</html>
视图： 
@first_blue.route('/students/')
def students():
    student_list = ["名字%d" % i for i in range(10)]
    return render_template("students.html", student_list=student_list, a=5, b=3)

 6.过滤器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>StudentsList</title>
</head>
<body>

原始值: &nbsp;&nbsp; {{ message }}<br>
首字母大写title: &nbsp;&nbsp; {{ message|title }}<br>
全部大写upper: &nbsp;&nbsp; {{ message|upper }}<br>
全部小写lower: &nbsp;&nbsp; {{ message|lower }}<br>
capitalize: &nbsp;&nbsp; {{ message|capitalize }}<br>
{{ message|trim }}<br>
{{ message|reverse }}<br>
{{ message|format }}<br>
{{ message|striptags }}<br>
</body>
</html>

三. flask-bootstrap插件

 四.模版路径

模版路径，默认在Flask(app)创建的路径下

自己指定模版路径：

  • 在Flask创建app的时候，指定template_folder
  • 在蓝图创建的是时候，也可以指定template_folder

在模版中，和python代码一样，可以使用url_for()反向解析 

五.静态资源路径

静态资源路径，默认在Flask(app)创建的路径下

自己指定静态资源路径：

  • 在Flask创建app的时候，指定static_folder
  • 在蓝图创建的是时候，也可以指定static_folder 
    <link rel="stylesheet" href="/static/css/students.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/students.css') }}">
<a> href="{{ url_for('apps.get_user_list') }}?page={{ page }}&per_page={{ per_page }}"</a>

     

 

 

 
 

posted on 2020-06-18 22:21  myworldworld  阅读(110)  评论(0)    收藏  举报

导航