Flask向Jinja2模板中传入数据

目录

可以传入哪些数据？

传入原子类型数据

传入列表、元组、字典和集合

传入函数

传入对象实例

---

可以传入哪些数据？

可以将Python中的原子类型、列表、元组、集合、字典、方法、函数甚至对象实例。。。传入到html文件中使用。

传入原子类型数据

使用flask模块中的render_template函数将python数据传入到html中。

下面的例子传入一个整型数据和一个浮点型数据。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show Jinja2 function</title>
</head>
<body>
    <p>atom int: {{demo_int}}</p>
    <p>atom float: {{demo_float}}</p>
</body>
</html>

HTML文件中的8、9行分别接收两个传入的数据（整型和浮点型）。

Python脚本：

import webbrowser
from flask import Flask, render_template

app = Flask(__name__)

@ app.route("/")
def index():
    atom_int = 23
    atom_float = 6.7
    return render_template("show.html",
                           demo_int=atom_int,
                           demo_float=atom_float)


if __name__ == '__main__':
    host = "0.0.0.0"
    port = "8890"
    url = "http://127.0.0.1:%s" % port

    webbrowser.open(url)
    app.run(host=host, port=port)

使用关键字参数将Python中的数据发送给HTML中定义好的“变量”。

指定8890端口并使用webbrowser.open()打开网页。

运行结果：

传入列表、元组、字典和集合

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show Jinja2 function</title>
</head>
<body>
    <p>list: {{demo_list}}</p>
    <p>tuple: {{demo_tuple}}</p>
    <p>dict: {{demo_dict}}</p>
    <p>set: {{demo_set}}</p>
</body>
</html>

8 ～ 11行分别接收传入的列表、元组、字典、集合。

python脚本：

import webbrowser
from flask import Flask, render_template

app = Flask(__name__)

@ app.route("/")
def index():
    my_list = ["Python", "C", "Java", "HTML", "CSS", "Go"]
    my_tuple = (6, 7, 23)
    my_dict = {"China": "Beijing", "Japan": "Tokyo"}
    my_set = {"main", "reflect", "package"}
    return render_template("show.html",
                           demo_list=my_list,
                           demo_tuple=my_tuple,
                           demo_set=my_set,
                           demo_dict=my_dict)


if __name__ == '__main__':
    host = "0.0.0.0"
    port = "8890"
    url = "http://127.0.0.1:%s" % port
    webbrowser.open(url)

    app.run(host=host, port=port)

原理同上。只是将传入的数据做了改动。

运行结果：

传入函数

可以将函数传入到html中。也可在html中调用传入的函数。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show Jinja2 function</title>
</head>
<body>
    <p>func1: {{func1}}</p>
    <p>func2(): {{func2("In html file use python function. Interesting.")}}</p>
</body>
</html>

第8行接收一个函数。第9行接收该函数后并调用该函数。

⚠️注意：html中调用接收的python函数时一定要符合python语法规则（即参数数量、配型匹配）

python脚本：

import webbrowser
from flask import Flask, render_template

app = Flask(__name__)

def fun(message):
    return message

@ app.route("/")
def index():
    return render_template("show.html",
                           func1=fun,
                           func2=fun)


if __name__ == '__main__':
    host = "0.0.0.0"
    port = "8890"
    url = "http://127.0.0.1:%s" % port
    webbrowser.open(url)

    app.run(host=host, port=port)

在这个例子中用同一个函数fun传入到html中定义的两个“变量”func1和func2。

运行结果：

可以看出在html中接收一个函数但不调用的时候，页面上呈现该函数对象在服务端的内存地址。

接收函数并调用的情况下，页面上呈现函数返回结果。

传入对象实例

可以将对象实例传入模板中，甚至可以调用对象实例的方法。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>show Jinja2 function</title>
</head>
<body>
    <p>instance: {{instance}}</p>
    <p>method: {{instance.demo()}}</p>
</body>
</html>

Python脚本：

import flask
import webbrowser

app = flask.Flask(__name__)

class Demo(object):
    def demo(self):
        return "Inner Demo class demo method."

@ app.route("/")
def index():
    d = Demo()
    return flask.render_template("show.html", instance=d)

if __name__ == '__main__':
    host = "0.0.0.0"
    port = "7443"
    url = "http://127.0.0.1:%s" % port

    webbrowser.open(url)
    app.run(host=host, port=port)

运行结果：