【Flask】jinja2

发布时间：2020-12-20 10:28:30 所属栏目：Python 来源：网络整理

导读：渲染数据数据准备后端定义几个字符串,用于传递到前端 STUDENT = {‘name‘: ‘Old‘,‘age‘: 38,‘gender‘: ‘中‘},STUDENT_LIST = [ {‘name‘: ‘Old‘,{‘name‘: ‘Boy‘,‘age‘: 73,‘gender‘: ‘男‘},{‘name‘: ‘EDU‘,‘age‘: 84,‘gender

渲染数据

数据准备

后端定义几个字符串,用于传递到前端

STUDENT = {‘name‘: ‘Old‘,‘age‘: 38,‘gender‘: ‘中‘},STUDENT_LIST = [
    {‘name‘: ‘Old‘,{‘name‘: ‘Boy‘,‘age‘: 73,‘gender‘: ‘男‘},{‘name‘: ‘EDU‘,‘age‘: 84,‘gender‘: ‘女‘}
]

STUDENT_DICT = {
    1: {‘name‘: ‘Old‘,2: {‘name‘: ‘Boy‘,3: {‘name‘: ‘EDU‘,‘gender‘: ‘女‘},}

Jinja2模板中的流程控制

逻辑语法

Jinja2模板语言中的 for

{% for foo in g %}

{% endfor %}

Jinja2模板语言中的 if

{% if g %}

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

变量

{{}}

接下来,我们对这几种情况分别进行传递,并在前端显示成表格

1. 使用STUDENT字典传递至前端

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        {% for foo in stu %}
            <tr>
                <td>{{ foo.name }}</td>
                <td>{{ foo.age }}</td>
                <td>{{ foo.gender }}</td>
            </tr>
        {% endfor %}
    </tbody>
</table>
</body>
</html>

后端代码

from flask import Flask,render_template,request
app = Flask(__name__)
STUDENT = {‘name‘: ‘Old‘,@app.route(‘/login‘,methods=["POST","GET"])
def login():
    if request.method == "GET":
        return render_template("login.html",stu=STUDENT)

if __name__ == ‘__main__‘:
    app.run("0.0.0.0",9876)

2.?STUDENT_LIST?列表传入前端Jinja2 模板的操作

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        {% for foo in stu %}
            <tr>
                <td>{{ foo.get("name") }}</td>
                <td>{{ foo.age }}</td>
                <td>{{ foo["gender"] }}</td>
            </tr>
        {% endfor %}

    </tbody>
</table>

</body>
</html>

上面我们用了三种取值方式,这里foo就是每个字典

后端代码

from flask import Flask,request
app = Flask(__name__)

STUDENT_LIST = [
    {‘name‘: ‘Old‘,‘gender‘: ‘女‘}
]

@app.route(‘/login‘,stu=STUDENT_LIST)

if __name__ == ‘__main__‘:
    app.run("0.0.0.0",9876)

3.STUDENT_DICT?大字典传入前端 Jinja2 模板

?前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<table border="1px">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
    </thead>
    <tbody>
        {% for foo in stu %}
            <tr>
                <td>{{ foo }}</td>
                <td>{{ stu.get(foo).name }}</td>
                <td>{{ stu.get(foo).age }}</td>
                <td>{{ stu.get(foo).gender }}</td>

            </tr>
        {% endfor %}

    </tbody>
</table>

</body>
</html>

后端代码

from flask import Flask,request
app = Flask(__name__)

STUDENT_DICT = {
    1: {‘name‘: ‘Old‘,}
@app.route(‘/login‘,stu=STUDENT_DICT)

if __name__ == ‘__main__‘:
    app.run("0.0.0.0",9876)

在遍历字典的时候,foo 其实是相当于拿出了字典中的Key

Markup

该方法和django中的safe一样都是防止xss攻击、

from flask import Flask,request
from markupsafe import Markup

app = Flask(__name__)

@app.route(‘/login‘,"GET"])
def login():
    if request.method == "GET":
        my_in = Markup("<input type=‘text‘ name=‘uname‘>")
        return render_template("login.html",ss=my_in)

if __name__ == ‘__main__‘:
    app.run("0.0.0.0",9876)

前端页面生成的标签：

<input type="text" name="uname">

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!