2. 前端html渲染-jinJa2


文章目录

  • 2. 前端html渲染-jinJa2
  • 1. 模板渲染
  • 1.1 通过url访问直接返回html
  • 2. 通过模板访问对象
  • 3. 模板中使用过滤器
  • 3.1 使用内置过滤器
  • 3.2 自定义过滤器
  • 4. 模板中的控制语句
  • 5. 模板继承
  • 6. 加载静态文件


1. 模板渲染

1.1 通过url访问直接返回html

步骤:

  1. 从flask包中导入 render_template
  2. 在app.py ，url对应方法的返回如下：
@app.route("/blog2/<blog_id>")
def blog_detail2(blog_id):
    return render_template("blog_detail.html", blog_id=blog_id)

需要注意，和 Java 开发不同的是这里 需要加上 .html， 即blog_detail.html

  1. 在thymeleaf包下创建 blog_detail.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎来到第{{ blog_id }}个博客</h1>
</body>
</html>

前端使用 双大括号 {{}} 来接收后端返回的值

2. 通过模板访问对象

后端传递过来的值可能是一个对象，那么前端如何访问对象的属性

在app.py中：

class Book:
    def __init__(self, name, author):
        self.name = name
        self.author = author

@app.route('/book_detail/<book_id>')
def book_detail(book_id):
    book1 = Book('111', '11')
    book2 = {
        'book_name':'222',
        'book_author':'22'
    }
    return render_template('book_detail.html', book=book1, book2=book2)

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

在tymeleaf包下创建 book_detail.html

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

<div>欢迎来到第{{ book_id }}本书</div>
<div>对象属性访问：{{ book.name }}, {{ book.author }}</div>
<div>字典值访问:{{ book2.book_name }}, {{ book2.book_author }}</div>
</body>
</html>

html中仍然是使用 双大括号 来接收后端返回的值, 并使用 对象.属性名, 字典对象.关键字 的形式访问对象属性值和字典值

3. 模板中使用过滤器

3.1 使用内置过滤器

在 book_detail.html 中

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

<div>欢迎来到第{{ book_id }}本书</div>
<div>对象属性访问：{{ book.name }},name长度 {{ book.name|length }}, {{ book.author }}</div>
<div>字典值访问:{{ book2.book_name }}, {{ book2.book_author }}</div>
</body>
</html>

显示结果：

flask javascript跳转 flask return html_flask javascript跳转

即过滤器的使用方式：a|b, 对a进行b操作, a是后端的返回值，可以是对象的属性值，也可以是字典值

3.2 自定义过滤器

首先在 app.py 中自定义过滤器

class Book:
    def __init__(self, name, author, time):
        self.name = name
        self.author = author
        self.time = time

def datetime_format(value, format="%Y年%m月%d日 %H：%M"):
    return value.strftime(format)
# 将自定义的过滤器添加到模板中, 其中第二个参数 dformat 即为前端html中 | 后面使用的参数
app.add_template_filter(datetime_format, 'dformat')

@app.route('/book_detail/<book_id>')
def book_detail(book_id):
    mytime = datetime.now()
    book1 = Book('111', '11', mytime)
    book2 = {
        'book_name':'222',
        'book_author':'22'
    }
    return render_template('book_detail.html', book=book1, book2=book2)

自定义的过滤器一定要添加到模板中

app.add_template_filter(自定义的过滤器的方法名, 前端使用该过滤器的参数名)

在前端 book_detail.html 中

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

<div>欢迎来到第{{ book_id }}本书</div>
<div>对象属性访问：{{ book.name }},name长度 {{ book.name|length }}, {{ book.author }}, {{ book.time|dformat }}</div>
<div>字典值访问:{{ book2.book_name }}, {{ book2.book_author }}</div>
</body>
</html>

显示结果：

flask javascript跳转 flask return html_flask javascript跳转_02

4. 模板中的控制语句

在 app.py 中定义：

class Book:
    def __init__(self, name, author, time, number, comments):
        self.name = name
        self.author = author
        self.time = time
        self.number = number
        self.comments = comments

class Comment:
    def __init__(self, username, content):
        self.username = username
        self.content = content

def datetime_format(value, format="%Y年%m月%d日 %H：%M"):
    return value.strftime(format)
# 将自定义的过滤器添加到模板中, 其中第二个参数 dformat 即为前端html中 | 后面使用的参数
app.add_template_filter(datetime_format, 'dformat')

@app.route('/book_detail/<book_id>')
def book_detail(book_id):
    mytime = datetime.now()
    comment_list = []
    comment_list.append(Comment('aaa', 'aaaaa'))
    comment_list.append(Comment('bbb', 'bbbb'))
    book1 = Book('111', '11', mytime, 12, comment_list)
    book2 = {
        'book_name':'222',
        'book_author':'22'
    }
    return render_template('book_detail.html', book=book1, book2=book2)

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

在 book_detail.html 中展示：

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

<div>欢迎来到第{{ book_id }}本书</div>
<div>对象属性访问：{{ book.name }},name长度 {{ book.name|length }}, {{ book.author }}, {{ book.time|dformat }}</div>
<div>字典值访问:{{ book2.book_name }}, {{ book2.book_author }}</div>

    
    
<h2>控制语句</h2>
{% if book.number > 0 %}
<div>{{ book.name }} 仍有存货</div>
{% else %}
    <div>{{ book.name }} 已卖完</div>
{% endif %}

<h2>for循环展示书籍对应的评论</h2>
{% for comment in book.comments %}
<div>用户 {{ comment.username }} 的评论为 {{ comment.content }}</div>
{% endfor %}
</body>
</html>

控制语句使用 大括号加上百分号 来声明

5. 模板继承

模板继承指的是前端的模板继承

首先创建父模板 base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
{% block body %}
{% endblock %}

{% block div %}
{% endblock %}

</body>
</html>

父模板更多是定义界面的结构，并通过 {% block 名称}{%endblock} 的方式进行挖空，对应的位置由子页面填充

创建子模版 child.html

{% extends "base.html" %}

{% block title %}
title111
{% endblock %}

{% block body %}
body222
{% endblock %}

{% block div %}
div3333
{% endblock %}

子模版通过 {% extends "base.html" %} 继承父模板, 并进行填入内容

6. 加载静态文件

使用 url_for 函数加载静态文件

创建 static.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#加载css文件#}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style1.css') }}">

    <script src="{{ url_for('static', filename='js/my.js') }}"></script>
</head>
<body class="bod">
{#加载静态文件演示#}
<img src="{{ url_for('static', filename='image/11.jpg') }}" style="width: 600px;height: 600px" alt="">
</body>
</html>