码迷,mamicode.com
首页 > 其他好文 > 详细

【Flask】jinja2

时间:2019-09-29 09:40:45      阅读:94      评论:0      收藏:0      [点我收藏+]

标签:code   ict   safe   rom   ups   jin   mic   遍历   图片   

渲染数据

数据准备

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

技术图片
STUDENT = {‘name‘: ‘Old‘, ‘age‘: 38, ‘gender‘: ‘中‘},

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

STUDENT_DICT = {
    1: {‘name‘: ‘Old‘, ‘age‘: 38, ‘gender‘: ‘中‘},
    2: {‘name‘: ‘Boy‘, ‘age‘: 73, ‘gender‘: ‘男‘},
    3: {‘name‘: ‘EDU‘, ‘age‘: 84, ‘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‘, ‘age‘: 38, ‘gender‘: ‘中‘},

@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,render_template,request
app = Flask(__name__)

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

@app.route(‘/login‘,methods=["POST","GET"])
def login():
    if request.method == "GET":
        return render_template("login.html",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,render_template,request
app = Flask(__name__)

STUDENT_DICT = {
    1: {‘name‘: ‘Old‘, ‘age‘: 38, ‘gender‘: ‘中‘},
    2: {‘name‘: ‘Boy‘, ‘age‘: 73, ‘gender‘: ‘男‘},
    3: {‘name‘: ‘EDU‘, ‘age‘: 84, ‘gender‘: ‘女‘},
}
@app.route(‘/login‘,methods=["POST","GET"])
def login():
    if request.method == "GET":
        return render_template("login.html",stu=STUDENT_DICT)

if __name__ == ‘__main__‘:
    app.run("0.0.0.0", 9876)
技术图片

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

 技术图片

Markup

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

技术图片
from flask import Flask,render_template,request
from markupsafe import Markup

app = Flask(__name__)

@app.route(‘/login‘,methods=["POST","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">

【Flask】jinja2

标签:code   ict   safe   rom   ups   jin   mic   遍历   图片   

原文地址:https://www.cnblogs.com/youxiu123/p/11605774.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!