render tsx页面怎么写less

转载

mob64ca1403c772 2024-10-31 18:33:02

文章标签 render tsx页面怎么写less html flask 复用 文章分类 架构后端开发

第三章 Flask——模板语言之Jinja2及render_template

一、Jinja2介绍

二、Flask中的render_template

一、Jinja2介绍

什么是Jinja2（what）：

Flask中默认的模板语言是Jinja2，Jinja2是基于python的模板引擎，功能比较类似于于PHP的smarty，J2ee的Freemarker和velocity。它能完全支持unicode，并具有集成的沙箱执行环境，应用广泛。jinja2使用BSD授权。

做一些字段准备

STUDENT = {'name': 'xjy', 'age': 26, 'gender': '男'},

STUDENT_LIST = [
    {'name': 'neymar', 'age': 26, 'gender': '男'},
    {'name': 'aaa', 'age': 73, 'gender': '男'},
    {'name': 'bbb', 'age': 84, 'gender': '女'}
]

STUDENT_DICT = {
    1: {'name': 'neymar', 'age': 26, 'gender': '中'},
    2: {'name': 'aaa', 'age': 73, 'gender': '男'},
    3: {'name': 'bbb', 'age': 84, 'gender': '女'},
}

Jinja2模板语言之流程控制：

for

{% for foo in g %}

{% endfor %}

{% if g %}

{% elif g %}
    
{% else %}
    
{% endif %}

1.接下来我们将不同数据类型的数据传递到前端（student）

准备数据

STUDENT = {'name': 'xjy', 'age': 26, 'gender': '男'},

STUDENT_LIST = [
    {'name': 'neymar', 'age': 26, 'gender': '男'},
    {'name': 'aaa', 'age': 73, 'gender': '男'},
    {'name': 'bbb', 'age': 84, 'gender': '女'}
]

STUDENT_DICT = {
    1: {'name': 'neymar', 'age': 26, 'gender': '中'},
    2: {'name': 'aaa', 'age': 73, 'gender': '男'},
    3: {'name': 'bbb', 'age': 84, 'gender': '女'},
}

（1）STUDENT

后端

render tsx页面怎么写less_flask

前端

render tsx页面怎么写less_render tsx页面怎么写less_02

（2）STUDENT_LIST

render tsx页面怎么写less_html_03

render tsx页面怎么写less_复用_04

（3）STUDENT_DICT

传递方式一：

render tsx页面怎么写less_html_05

传递方式二：

render tsx页面怎么写less_flask_06

render tsx页面怎么写less_flask_07

以上三种所有代码：

render tsx页面怎么写less_flask_08

render tsx页面怎么写less_html_09

from flask import Flask,render_template

app = Flask(__name__)

app.debug = True

STUDENT = {'name': 'xjy', 'age': 26, 'gender': '男'}

STUDENT_LIST = [
    {'name': 'neymar', 'age': 26, 'gender': '男'},
    {'name': 'aaa', 'age': 73, 'gender': '男'},
    {'name': 'bbb', 'age': 84, 'gender': '女'}
]

STUDENT_DICT = {
    1: {'name': 'neymar', 'age': 26, 'gender': '中'},
    2: {'name': 'aaa', 'age': 73, 'gender': '男'},
    3: {'name': 'bbb', 'age': 84, 'gender': '女'},
}


@app.route('/stu')
def stu():
    return render_template('student.html',student=STUDENT,stu_list=STUDENT_LIST,stu_dict=STUDENT_DICT)


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

py文件

render tsx页面怎么写less_flask_08

render tsx页面怎么写less_html_09

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Student</title>
</head>
<body>
<div>{{ student }}</div>
<div>{{ stu_list }}</div>
<div>{{ stu_dict }}</div>
<table border="2px">
    <tr>
        <td>name</td>
        <td>age</td>
        <td>gender</td>
    </tr>
    <tr>
        <td>{{ student.name }}</td>
        <td>{{ student["age"] }}</td>
        <td>{{ student.get("gender") }}</td>
    {% for stu in stu_list %}
        <tr>
            <td>{{ stu.get("name") }}</td>
            <td>{{ stu.age }}</td>
            <td>{{ stu["gender"] }}</td>
        </tr>
    {% endfor %}
    {% for id,stu in stu_dict.items() %}
        <tr>
            <td>{{ id }}</td>
            <td>{{ stu.get("name") }}</td>
            <td>{{ stu.age }}</td>
            <td>{{ stu["gender"] }}</td>
        </tr>
    {% endfor %}
</table>
</body>
</html>

html文件

render tsx页面怎么写less_flask_12

2.safe

后端代码

from flask import Flask
from flask import render_template

app = Flask(__name__)

@app.route("/")
def index():
    tag = "<input type='text' name='user' value='DragonFire'>"
    return render_template("index.html",tag=tag)


app.run("0.0.0.0",5000)

前端代码

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

如果直接这样使用会出现如下情况

render tsx页面怎么写less_html_13

如果想避免这种情况有两种解决方案：

方案一：

修改前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag | safe}}  <!--  加上个 \  管道符,然后 safe  -->
</body>
</html>

方案二：

修改后端

导入模块

from flask import Markup  # 导入 flask 中的 Markup 模块

from flask import Flask
from flask import render_template
from flask import Markup  # 导入 flask 中的 Markup 模块

app = Flask(__name__)


@app.route("/")
def index():
    tag = "<input type='text' name='user' value='DragonFire'>"
    markup_tag = Markup(tag)  # Markup帮助咱们在HTML的标签上做了一层封装,让Jinja2模板语言知道这是一个安全的HTML标签
    print(markup_tag,
          type(markup_tag))  # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'>
    return render_template("index.html", tag=markup_tag)


app.run("0.0.0.0", 5000, debug=True)

方案一与方案二得到的效果是一样的

3.在Jinja2中执行Python函数(模板中执行函数)

首先在文件中定义一个函数

后端代码

from flask import Flask
from flask import render_template

app = Flask(__name__)

#定义一个函数,把它传递给前端
def a_b_sum(a,b):
    return a+b

@app.route("/")
def index():
    return render_template("index.html", tag=a_b_sum)


app.run("0.0.0.0", 5000, debug=True)

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ tag }}
    <br>
    {{ tag(99,1) }}
</body>
</html>

得到效果如下

render tsx页面怎么写less_复用_14

还可以定义全局函数,无需后端传递给前端,Jinja2直接就可以执行的函数

后端代码

from flask import Flask
from flask import render_template
from flask import Markup  # 导入 flask 中的 Markup 模块

app = Flask(__name__)


@app.template_global()  # 定义全局模板函数
def a_b_sum(a, b):
    return a + b


@app.template_filter()  # 定义全局模板函数
def a_b_c_sum(a, b, c):
    return a + b + c


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


app.run("0.0.0.0", 5000, debug=True)

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {{ a_b_sum(99,1) }}
    <br>
    {{ 1 | a_b_c_sum(197,2) }}
</body>
</html>

得到结果如下

render tsx页面怎么写less_html_15

尤其是@app.template_filter() 它的调用方式比较特别,这是两个Flask中的特殊装饰器

4.Jinja2模板复用 block

如果我们前端页面有大量重复页面,没必要每次都写,可以使用模板复用的方式复用模板

前端代码:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Welcome</h1>
    <h2>下面的内容是不一样的</h2>
    {% block content %}

    {% endblock %}
    <h2>上面的内容是不一样的,但是下面的内容是一样的</h2>
    <h1>Good</h1>
</body>
</html>

{% extends "index.html" %}
{% block content %}
    <form>
        用户名:<input type="text" name="user">
        密码:<input type="text" name="pwd">
    </form>
{% endblock %}

home.html

{% extends "index.html" %}
{% block content %}
    <h1>HOME</h1>
{% endblock %}

后端代码

from flask import Flask
from flask import render_template

app = Flask(__name__)


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


@app.route("/home")
def home():
    return render_template("home.html")


app.run("0.0.0.0", 5000, debug=True)

效果如下：

render tsx页面怎么写less_复用_16

render tsx页面怎么写less_flask_17

大概是这样一个效果

在这两个页面中,只有 block 中的内容发生了变化,其他的位置完全一样

5.Jinja2模板语言的模块引用 include

<form>
    用户名:<input type="text" name="user">
    密码:<input type="text" name="pwd">
</form>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Welcome OldboyEDU</h1>
    <h2>下面的内容是不一样的</h2>
    {% include "login.html" %}
    <h2>上面的内容是不一样的,但是下面的内容是一样的</h2>
    <h1>OldboyEDU is Good</h1>
</body>
</html>

后端代码

from flask import Flask
from flask import render_template

app = Flask(__name__)


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


app.run("0.0.0.0", 5000, debug=True)

效果如下：

render tsx页面怎么写less_复用_18

6.Jinja2模板语言中的宏定义

前端代码

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

<h1>Welcome OldboyEDU</h1>

{% macro type_text(name,type) %}
    <input type="{{ type }}" name="{{ name }}" value="{{ name }}">
{% endmacro %}

<h2>在下方是使用宏来生成input标签</h2>

{{ type_text("one","text") }}
{{ type_text("two","text") }}

</body>
</html>

宏定义一般情况下很少应用到,但是要知道有这么个概念

二、Flask中的render_template

render tsx页面怎么写less_html_19