1. 后台
from flask import Flask,render_template,request,redirect,session,url_for,jsonify,make_response,Markup,flash,get_flashed_messages

app = Flask(__name__)

app.config.from_object("settings.DevelopmentConfig")

STUDENT_DICT = {
    1:{'name':'王龙泰','age':38,'gender':'中'},
    2:{'name':'小东北','age':73,'gender':'男'},
    3:{'name':'田硕','age':84,'gender':'男'},
}

@app.route('/index/<int:nid>',methods=["GET","POST"])
def index(nid):
    return render_template('index.html',stu_dic=STUDENT_DICT)   #向前端传递了一个字典
  1. 前端
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>学生列表</h1>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>选项</th>
            </tr>
        </thead>
        <tbody>
            {% for k,v in  stu_dic.items() %}
                <tr>
                    <td>{{k}}</td>
                    <td>{{v.name }}</td>
                    <td>{{v.age}}</td>
                    <td>{{v.gender}}</td>
                    <td>
                        <a href="/detail/{{k}}">查看详细</a>
                       
                        <a href="/delete/{{k}}">删除</a>

                    </td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
</body>
</html>

前台传入一个字典，可以执行python的语法对字典进行操作，同时还支持，字典名.key名的形式访问对应key的值，如上述代码v.name。同时也支持其他python语法，如 dict.get() list[‘xx’]

  1. 后台向前台传值，支持的数据类型

（1）向传入前台的html标签，要向在前台正常显示，需要在后台使用Markup，或者在前台加入管道符

后台使用Markup

from flask import Markup

def func(arg):
    return arg + 1

@app.route('/tpl')
def tpl():
    context = {
        'users':['longtai','liusong','zhoahuhu'`在这里插入代码片`],
        'txt':Markup("<input type='text' />"),   #后台处理方式
        'func':func       #向前台传函数名，方便前台调用
    }
        return render_template('tpl.html',**context)    #注意传入命名关键字参数前面加**

或前台使用管道符

{{txt|safe}}

（2）前台代码调用后台的函数

{{func(6)}}

也可以定义全局函数，这样后台不用向前台传递函数名也能直接调用，全局函数定义有两种方式，选择其中一种即可，但调用方式有区别

@app.template_global()
def sb(a1, a2):
    return a1 + a2
# {{sb(1,9)}}        前台调用方式

@app.template_filter()
def db(a1, a2, a3):
    return a1 + a2 + a3
     # {{ 1|db(2,3) }}     前台调用方式，第一个参数写在管道符前面，这种调用的结果可以用于前台if的判断条件

定义全局函数@app.template_filter()在前台调用时可以作为if的判断条件

{% if 1|db(2,3) %}
    <div>666</div>
{% else %}
    <div>999</div>
{% endif %}

（3）直接前台导入html

{% include "form.html" %}

（4）继承其他页面
如tpl.html需要继承layout.html的样式，可进行如下定义

layout.html如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <h1>模板</h1>
    {% block content %}{% endblock %}
</body>
</html>

tpl.html如下

{% extends "layout.html"%}       <!--继承的页面-->


{% block content %}
    {{users.0}}
    {{users[0]}}
    {{txt}}
    <!--{{txt|safe}}-->
    {{func(6)}}
    {{sb(1,9)}}
    {{ 1|db(2,3) }}
    {% if 1|db(2,3) %}
        <div>666</div>
    {% else %}
        <div>999</div>
    {% endif %}

    {% include "form.html" %}

    {% macro ccccc(name, type='text', value='') %}
        <h1>宏</h1>
        <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
        <input type="submit" value="提交">
    {% endmacro %}

    {{ ccccc('n1') }}

    {{ ccccc('n2') }}

{% endblock %}

(5)在同一页面多次使用相同功能标签可以定义宏

{% macro ccccc(name, type='text', value='') %}    <!--定义宏-->
    <h1>宏</h1>
    <input type="{{ type }}" name="{{ name }}" value="{{ value }}">
    <input type="submit" value="提交">
{% endmacro %}

{{ ccccc('n1') }}     <!--调用宏-->

{{ ccccc('n2') }}