Flask基础一

清疚 2023-10-09 11:07 39阅读 0赞

# 一、Flask初始 #

首先，要看你学没学过Django，如果学过Django的同学，请从头看到尾，如果没有学过Django的同学，并且不想学习Django的同学，请绕过第一部分。

## 三大主流Web框架对比 ##

1、Django主要特点是大而全，继承了很多组件，例如：Models Admin Form等等，不管你用得到用不到，反正它全都有，属于全能型框架

2、Tornado主要特点是原生异步非阻塞，在IO密集型应用和多任务处理上占据绝对性的优势，属于专注型框架

3、Flask主要特点小而轻，原生组件几乎为0，三方提供的组件请参考Django非常全面，属于短小精悍型框架

Django通常用于大型Web应用，由于内置组件足够大，所以使用Django开发可以一气呵成

Tornado通常用于API后端应用，游戏服务后台，其内部实现的异步非阻塞真是稳得一批

Flask通常应用于小型应用和快速构建应用，其强大的三方库，足以支撑一个大型的Web应用

Django优点是大而全，缺点也就暴露出来了，这么多的资源一次性全部加载，肯定会造成一部分的资源浪费

Tornado优点是异步，缺点是干净，连个session都不支持

Flask优点是精悍简单，缺点是你不会

总结：

Flask：
    1、轻，短小精悍
    2、快，三行代码开启服务
    缺点：
    1、组件大部分来源三方，flask-admin，flask-session
    2、flask大版本更新，组件更新速度慢
    
    Django：
    1、大而全，admin，models，Form，中间件，session
    2、一个框架解决所有问题
    缺点：
    1、一旦启动，所有资源全部加载，用不到的，浪费了
    2、太大了，结构复杂
    3、所有的组件，全部由Django自身控制
    
    Tornado：
    1、原生websocktet
    2、异步io
    3、非阻塞
    缺点：
    三方及原生组件几乎为0

## Flask的安装与HelloWorld ##

pip install Flask

### 三行Flask ###

from flask import Flask
    
    app = Flask(__name__)
    app.run()

执行控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td>&nbsp;* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)</td> 
  </tr> 
 </tbody> 
</table>

默认端口是5000，访问页面：

![1353628-20180906165313882-2039237252.png][]

因为没有定义路由，所以报404。但是服务是起来了！

### 六行Flask ###

from flask import Flask
    
    app = Flask(__name__)
    @app.route("/")
    def index():
        return "HelloWorld"
    app.run()

重启程序，刷新页面

![1353628-20180906165652257-1171572714.png][]

实现了Flask的第一个HelloWorld程序，解读一下代码

from flask import Flask  # 导入Flask类
    
    app = Flask(__name__)  # 实例化Flask对象app
    
    
    @app.route("/")  # app中的route装饰器
    def index():  # 视图函数
        return "HelloWorld"  # 返回响应提
    
    
    # 监听地址为0.0.0.0，表示服务器的所有网卡
    # 5000是监听端口
    # debug=True表示启动debug模式。当代码有改动时，Flask会自动加载，无需重启！
    app.run("0.0.0.0", 5000, debug=True)  # 启动Flask服务

注意：默认的debug模式是关闭的。如有代码改动，需要重启flask才能生效！但是开启debug模式，代码一有改动，会立刻加载，无需重启！

还有一点，app=Flask(\_\_name\_\_)。这里面的\_\_name\_\_表示标识模块的名字的一个系统变量

还可以是app=Flask("asdfasdf")，这样运行也没有问题。那么为什么要用\_\_name\_\_呢？

# 二、render redirect HttpResponse #

## HttpResponse ##

@app.route("/")  # app中的route装饰器
    def index():  # 视图函数
        return "HelloWorld"  # HttpResponse

在Flask中的HttpResponse在我们看来其实就是直接返回字符串

## redirect ##

from flask import Flask
    from flask import redirect  # 导入flask中的redirect
    
    app = Flask(__name__)
    
    
    # app中的route装饰器，用来指定视图函数的URL地址
    @app.route("/redi")
    def redi():  # 视图函数
        return redirect("/")  # redirect跳转至"/"
    
    
    @app.route("/")
    def index():  # 视图函数
        return "hello"
    
    
    if __name__ == "__main__":
        app.run("0.0.0.0", 5000, debug=True)

每当访问"/redi"这个地址的时候，视图函数redi会触发redirect("/")跳转到url地址："/"并会触发"/"对应的视图函数index()

访问url：http://127.0.0.1:5000/redi

![1353628-20180906173500084-257318059.png][]

查看网页工具，查看网络。它经历了2次请求！

![1353628-20180906173600729-1079925920.png][]

## render (render\_template) ##

编辑文件demo.py，代码如下

from flask import Flask  # 导入Flask类
    from flask import render_template  # 导入flask中的render_template
    
    app = Flask(__name__)
    
    
    @app.route("/home")
    def home():  # 视图函数
        # 渲染html模板，返回html页面
        return render_template('home.html')
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

在当前py文件目录中创建templates，在此目录下创建文件home.html

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

重启flask，访问home页面，效果如下：

![1353628-20180906174654532-1280731625.png][]

HTML模板渲染是每个Web框架中都必须有的

注意：如果要使用render\_template返回渲染的模板，请在项目的主目录中假如一个目录templates，否则可能会有一个jinja2的异常哦

![1353628-20180906175920245-1199297250.png][]

遇到上述的问题，基本上就是你的template的路径问题

为什么一定要创建templates文件夹呢？叫abc行不行呢？不行！看这一行代码

app = Flask(__name__)

使用Ctrl+鼠标左键，点击Flask，查看源码

def __init__(
            self,
            import_name,
            static_url_path=None,
            static_folder='static',
            static_host=None,
            host_matching=False,
            subdomain_matching=False,
            template_folder='templates',
            instance_path=None,
            instance_relative_config=False,
            root_path=None
        ):

看到template\_folder变量没有？文件均价必须叫这个名字！

## 指定templates路径 ##

注意：我的flask程序，是直接用新建py文件写的。所以这一行代码，会票黄

return render_template('home.html')

怎么解决呢？很简单！执行目录就好了

右键templates文件夹--→Mark Directory as--→Template Folder

![1353628-20180906185835488-125279198.png][]

选择yes

![1353628-20180906185931153-1759405138.png][]

选择Jinja2，Flask中默认的模板语言是Jinja2

Django的模板语言为Django，其实Django底层也是用Jinja2开发的。其他模板语言同理！

后续会讲到flask模板语法，你会发现，和Django几乎是一样的！

![1353628-20180906190342815-334363473.png][]

注意：如果直接使用Pycharm创建Flask项目，是不存在这个问题的！

![1353628-20180906190505143-1373505245.png][]

前期学习Flask，要先自己手动折腾，后期就可以用Pycharm创建了！

# 三、request #

每个框架中都有处理请求的机制（request），但是每个框架的处理方式和机制是不同的

为了了解Flask的request中都有什么东西，首先我们要写一个前后端的交互，基于HTML + Flask写一段前后端的交互

先写一段儿HTML form表单中提交方式是post action地址是/req

在templates目录创建文件login.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>欢迎登陆</h1>
    <form action="/req" method="post">
        <p>
            <input type="text" name="user" placeholder="请输入用户名">
        </p>
        <p>
            <input type="password" name="pwd" placeholder="请输入密码">
        </p>
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

写好一个标准form表单，一点提交，就向后端提交一个POST请求过去了，后端的接收方式就666了

首先要从flask包中导入request模块

重启flask，访问登陆页面

![1353628-20180906194324196-1894171277.png][]

输入表单，提交之后，报错！提示请求方式不被允许！

![1353628-20180906194454592-1502453793.png][]

## methods ##

为什么呢？因为默认路由只允许GET访问。那么需要加一个参数methods，允许POST访问

from flask import Flask  # 导入flask类
    from flask import render_template  # 导入flask中的render_template
    from flask import request  # 导入flask中的request
    
    app = Flask(__name__)
    
    
    @app.route("/login")
    def login():
        return render_template("login.html")
    
    
    @app.route("/req",methods=["POST"])  # 只允许POST
    def home():  # 视图函数
        print(request)  # request对象
        print(request.method)  # POST看来可以使用这种方式来验证请求方式
        # ImmutableMultiDict([('user','xiao'),('pwd','123')])
        print(request.form)
        # ImmutableMultiDict 它看起来像是Dict，使用字典方式取值
        print(request.form["user"])  # xiao
        print(request.form.get("pwd"))  # 123
        # 字典迭代器对象，keys表示获取所有值
        print(request.form.keys())
        # 既然是迭代器，就可以使用for循环了
        for i in request.form.keys():
            print(i)
        return "ok"
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

重新提交一次，就可以了！

![1353628-20180906195613291-1606002143.png][]

查看Pycharm控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;Request 'http://127.0.0.1:5000/req' [POST]&gt;<br>POST<br>ImmutableMultiDict([('user', 'aaa'), ('pwd', '123')])<br>aaa<br>123<br>&lt;dict_keyiterator object at 0x0000022829C909F8&gt;<br>user<br>pwd</p> </td> 
  </tr> 
 </tbody> 
</table>

解释一个@app.route("/req",methods=\["POST"\]):

methods=\["POST"\] 代表这个url地址只允许POST请求，是个列表也就是意味着可以允许多重请求方式，例如GET之类的

## request.method ##

1、request.method之肯定知道前端用什么方式提交的

Flask的request中给我们提供了一个method属性里面保存的就是前端的请求方式

print(request.method)  # POST 看来可以使用这种方式来验证请求方式

## request.form ##

2、request.form之拿他来举例的话再好不过了

Form表单中传递过来的值 使用request.form中拿到

print(request.form)  # ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])
    # ImmutableMultiDict 它看起来像是的Dict 就用Dict的方法取值试一下吧
    print(request.form["user"])  # xiao
    print(request.form.get("pwd"))  # 123
    # 看来全部才对了, ImmutableMultiDict 似乎就是个字典,再来玩一玩它
    print(list(request.form.keys()))  # ['user', 'pwd'] 看来是又才对了
    #如果以上所有的方法你都觉得用的不爽的话
    req_dict = dict(request.form)
    print(req_dict)  # 如果你觉得用字典更爽的话,也可以转成字典操作(这里有坑)

## request.args ##

3、request.args之你能看见的url参数全在里面

request.args中保存的是url中传递的参数

先把后端请求代码改动一下，允许POST和GET

from flask import Flask  # 导入flask类
    from flask import render_template  # 导入flask中的render_template
    from flask import request  # 导入flask中的request
    
    app = Flask(__name__)
    
    
    @app.route("/login")
    def login():
        return render_template("login.html")
    
    
    @app.route("/req",methods=["POST","GET"])  # 只允许POST和GET
    def home():  # 视图函数
        print(request.args)  # ImmutableMultiDict([('id','1'),('age','20')])
        print(request.args["id"])  # 1
        print(request.args.get("age"))  # 20
        print(list(request.args.keys()))  # ['id','age']
        print(list(request.args.values()))  # ['1','20']
        req_dict = dict(request.args)  # {'id':['1'],'age':['20']}
        print(req_dict)
        return "ok"
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

然后使用URL地址直接传递参数

![1353628-20180906203032425-1668423094.png][]

然后会在控制台中看到，ImmutableMultiDict

<table> 
 <tbody> 
  <tr> 
   <td> <p>ImmutableMultiDict([('id', '18'), ('age', '20')])<br>127.0.0.1 - - [06/Sep/2018 20:30:16] "GET /req?id=18&amp;age=20 HTTP/1.1" 200 -<br>18<br>20<br>['id', 'age']<br>['18', '20']<br>{'id': ['18'], 'age': ['20']}</p> </td> 
  </tr> 
 </tbody> 
</table>

request.args与request.form的区别就是：

request.args 是获取url中的参数

request.form 是获取form表单中的参数

## request.values ##

4、request.values 之 只要是个参数我都要

改动一下前端页面（login.html）代码：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;form action="/req?id=1&amp;age=20" method="post"&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

改动后端代码：

from flask import Flask  # 导入flask类
    from flask import render_template  # 导入flask中的render_template
    from flask import request  # 导入flask中的request
    
    app = Flask(__name__)
    
    
    @app.route("/login")
    def login():
        return render_template("login.html")
    
    
    @app.route("/req",methods=["POST","GET"])  # 只允许POST和GET
    def home():  # 视图函数
        print(request.values)  # CombinedMultiDict([ImmutableMultiDict([('id', '1'), ('age', '20')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])])
        print(request.values.get("id"))  # 1
        print(request.values["user"])  # Oldboy
        # 这回喜欢直接操作字典的小伙伴们有惊喜了！to_dict()方法可以直接将我们的参数全部转为字典形式
        print(request.values.to_dict())  # {'user': 'xiao', 'pwd': '123', 'id': '1', 'age': '20'}
        return "ok"
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

这是让我们在使用form表单提交的同时使用url参数提交

访问登陆页面，点击提交，查看Pycharm控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td> <p>CombinedMultiDict([ImmutableMultiDict([('age', '20'), ('id', '1')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '112')])])<br>127.0.0.1 - - [06/Sep/2018 20:43:01] "POST /req?id=1&amp;age=20 HTTP/1.1" 200 -<br>1<br>xiao<br>{'user': 'xiao', 'pwd': '112', 'age': '20', 'id': '1'}</p> </td> 
  </tr> 
 </tbody> 
</table>

## form表单的坑 ##

如果url和form中的Key重名的话，form中的同名的key中value会被url中的value覆盖

http://127.0.0.1:5000/req?id=1&user=20

修改login.html

<table> 
 <tbody> 
  <tr> 
   <td> <pre>&lt;form action="/req?id=1&amp;user=20" method="post"&gt;</pre> </td> 
  </tr> 
 </tbody> 
</table>

重新访问登陆页面，再次提交。

![1353628-20180906204731609-1332302670.png][]

查看Pycharm控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td> <pre>CombinedMultiDict([ImmutableMultiDict([('id', '1'), ('user', '20')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])])
1
20
{'user': '20', 'pwd': '123', 'id': '1'}</pre> </td> 
  </tr> 
 </tbody> 
</table>

发现user变成了20，**如果url和form中key重名的话，form中的同名的key中value会被url中的value覆盖**

## request.cookies  ##

5、request.cookies 之 存在浏览器端字符串儿也会一起带过来

前提是你要开启浏览器的cookies，request.cookies是将cookies中信息读取出来

修改demo.py中的home视图函数

def home():  # 视图函数
        print(request.cookies)
        return "ok"

重新登陆一次，查看Pycharm控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td>{'csrftoken': '5dbnoXpHe4dYUPZqCejRBleKc5HznLKY2sAgmTLqxSjL2kBPKLYAt9yxvPlNNMHf'}</td> 
  </tr> 
 </tbody> 
</table>

## request.headers ##

6、request.headers 之 请求头中的秘密

用来获取本次请求的请求头

修改demo.py中的home视图函数

def home():  # 视图函数
        print(request.headers)
        return "ok"

重新登陆一次，查看Pycharm控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td> <p>Connection: keep-alive<br>Upgrade-Insecure-Requests: 1<br>Content-Length: 17<br>Content-Type: application/x-www-form-urlencoded<br>Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7<br>User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36<br>Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8<br>Origin: http://127.0.0.1:5000<br>Accept-Encoding: gzip, deflate, br<br>Referer: http://127.0.0.1:5000/login<br>Host: 127.0.0.1:5000<br>Cache-Control: max-age=0<br>Cookie: csrftoken=5dbnoXpHe4dYUPZqCejRBleKc5HznLKY2sAgmTLqxSjL2kBPKLYAt9yxvPlNNMHf</p> </td> 
  </tr> 
 </tbody> 
</table>

## request.data ##

7、request.data 之 如果处理不了的就变成字符串儿存在data里面

你一定要知道request是基于mimetype进行处理的

mimetype的类型以及字符串：[http://www.w3school.com.cn/media/media\_mimeref.asp][http_www.w3school.com.cn_media_media_mimeref.asp]

如果不属于上述类型的描述，request就会将无法处理的参数转为Json存入到data中

其实我们可以将request.data，json.loads同样可以拿到里面的参数

修改demo.py中的home视图函数

def home():  # 视图函数
        print(request.data)
        return "ok"

重新登陆一次，查看Pycharm控制台输出：

为什么是空的呢？注意：request处理不了的就变成字符串存在data里面！

因为它能处理，所以才是空的！

## request.files ##

8、request.files 之 给我一个文件我帮你保管

如果遇到文件上传的话，request.files里面存的是你上传的文件，但是Flask在这个文件的操作中加了一定的封装，让操作变得极为简单

首先改下前端代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h1>欢迎登陆</h1>
    <form action="/req" method="post" enctype="multipart/form-data">
        <p>
            <input type="file" name="file">
        </p>
        <input type="submit" value="提交">
    </form>
    </body>
    </html>

再改后端代码：

from flask import Flask  # 导入flask类
    from flask import render_template  # 导入flask中的render_template
    from flask import request  # 导入flask中的request
    
    app = Flask(__name__)
    
    
    @app.route("/login")
    def login():
        return render_template("login.html")
    
    
    @app.route("/req",methods=["POST","GET"])  # 只允许POST和GET
    def home():  # 视图函数
        print(request.files)  # ImmutableMultiDict([('file', <FileStorage: 'abc.txt' ('text/plain')>)])
        print(request.files['file'])  # <FileStorage: 'abc.txt' ('text/plain')>
        my_file = request.files["file"]
        my_file.save("123.txt")  # 保存文件，里面可以写完整路径+文件名
        return "ok"
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

访问登陆页面

![1353628-20180906212219396-1734263924.png][]

上传一个文件，比如是abc.txt

![1353628-20180906212313097-999420884.png][]

点击提交，效果如下：

![1353628-20180906212338206-948299681.png][]

查看Pycharm控制台输出：

<table> 
 <tbody> 
  <tr> 
   <td> <p>ImmutableMultiDict([('file', &lt;FileStorage: 'abc.txt' ('text/plain')&gt;)])<br>&lt;FileStorage: 'abc.txt' ('text/plain')&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

这样我们就成功的保存了一个名叫123.txt的文件了，操作还是很简单的。保存目录为当前py文件目录！

注意：前端页面必须设置enctype=“multipart/form-data”，否则提交时，会报错

![1353628-20180906212755905-413062880.png][]

## request.获取各种路径 ##

9、request.获取各种路径 之 这些方法没必要记，但是要知道它存在

修改后端代码

def home():  # 视图函数
        # 获取当前的url路径
        print(request.path)  # /req
        # 当前url路径的上一级路径
        print(request.script_root)  #
        # 当前url的全部路径
        print(request.url)  # http://127.0.0.1:5000/req
        # 当前url的路径的上一级全部路径
        print(request.url_root)  # http://127.0.0.1:5000/
    
        return "ok"

直接访问页面

![1353628-20180906213038167-1654975235.png][]

查看Pycharm控制台输出：

## request.json ##

10、request.json 之 前提你得告诉是json

如果在请求中写入了“application/json”使用request.json则返回json解析数据，否则返回None

修改后端代码：

def home():  # 视图函数
        # 获取json数据
        print(request.json)
        return "ok"

使用postman发送一个json数据

![1353628-20180906214242884-1366417175.png][]

查看返回值

![1353628-20180906214310896-380326239.png][]

查看Pycharm控制台输出：

# 四、模板语言Jinja2 #

## Jinja2  ##

Flask中默认的模板语言是Jinja2 ，现在我们来一步一步的学习下Jinja2。

首先我们要在后端定义几个字符串，用于传递到前端

<table> 
 <tbody> 
  <tr> 
   <td> <pre>STUDENT = {'name':'韩雪','age':24,'gender':'女'}<br><br>STUDENT_LIST = [<br>    {'name':'韩雪','age':24,'gender':'女'},<br>    {'name':'舒畅','age':23,'gender':'女'},<br>    {'name':'唐嫣','age':25,'gender':'女'},<br>]<br><br>STUDENT_DICT = {
       <br>    {'name':'韩雪','age':24,'gender':'女'},<br>    {'name':'舒畅','age':23,'gender':'女'},<br>    {'name':'唐嫣','age':25,'gender':'女'},<br>}</pre> </td> 
  </tr> 
 </tbody> 
</table>

但是前提我们要知道Jinja2模板中的流程控制

### for ###

Jinja2模板语言中的for

{% for foo in session %}
    {
         { foo }}
    {% endfor %}

### if ###

Jinja2模板语言中的if

{% if session %}
    {% elif session %}
    {% else %}
    {% endif %}

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

### 字典 ###

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

后端demo.py

from flask import Flask  # 导入flask类
    from flask import render_template  # 导入flask中的render_template
    from flask import request  # 导入flask中的request
    
    app = Flask(__name__)
    
    STUDENT = {
        'name': '韩雪', 'age': 24, 'gender': '女'}
    
    STUDENT_LIST = [
        {
         'name': '韩雪', 'age': 24, 'gender': '女'},
        {
         'name': '舒畅', 'age': 23, 'gender': '女'},
        {
         'name': '唐嫣', 'age': 25, 'gender': '女'},
    ]
    
    STUDENT_DICT = {
        1: {
         'name': '韩雪', 'age': 24, 'gender': '女'},
        2: {
         'name': '舒畅', 'age': 23, 'gender': '女'},
        3: {
         'name': '唐嫣', 'age': 25, 'gender': '女'},
    }
    
    
    @app.route("/student")
    def student():
        return render_template("student.html", student=STUDENT)
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

前端student.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h3>学生列表</h3>
    <div>{
        { student }}</div>
    <table border="1px">
        <tr>
            <td>{
        { student.name }}</td>
            <td>{
        { student["age"] }}</td>
            <td>{
        { student.get("gender") }}</td>
        </tr>
    </table>
    </body>
    </html>

重新flask，访问页面

![1353628-20180906220818354-2098596492.png][]

从这个例子中，可以看出来，字典传入前端Jinja2模板语言中的取值操作，与Python中的Dict操作极为相似，并且多了一个student.name的对象操作

### 列表 ###

2、STUDENT\_LIST列表传入前端Jinja2模板的操作：

后端：

@app.route("/student_list")
    def student_list():
        return render_template("student.html",student=STUDENT_LIST)

前端：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h3>学生列表</h3>
    <div>{
        { student }}</div>
    <table border="1px">
        {% for foo in student %}
            <tr>
            <td>{
        { foo }}</td>
            <td>{
        { foo.name }}</td>
            <td>{
        { foo.get("age") }}</td>
            <td>{
        { foo["gender"] }}</td>
            </tr>
        {% endfor %}
    </table>
    </body>
    </html>

访问页面，注意：路径改了，效果如下：

![1353628-20180906221847082-1436564816.png][]

这里我们可以看出，如果是需要循环遍历的话，Jinja2给我们的方案是

<table> 
 <tbody> 
  <tr> 
   <td> <pre>{% for foo in student %}<br>    &lt;tr&gt;<br>        &lt;td&gt;{
       { foo }}&lt;/td&gt;<br>    &lt;/tr&gt;<br>{% endfor %}</pre> </td> 
  </tr> 
 </tbody> 
</table>

修改前端：

<div>{
        { student }}</div>
    <table border="1px">
        {% for foo in student %}
            <tr>
                <td>{
        { foo }}</td>
            </tr>
        {% endfor %}
    </table>

访问页面，注意：路径改了，效果如下：

![1353628-20180906222319097-1584025482.png][]

### 大字典 ###

3、STUDENT\_DICT大字典传入前端Jinja2模板

后端：

@app.route("/student_dict")
    def student_dict():
        return render_template("student.html",student=STUDENT_DICT)

前端：

<table border="1px">
        {% for foo in student %}
            <tr>
                <td>{
        { foo }}</td>
                <td>{
        { student.get(foo).name }}</td>
                <td>{
        { student[foo].get("age") }}</td>
                <td>{
        { student[foo]["gender"] }}</td>
            </tr>
        {% endfor %}
    </table>

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

访问页面，注意：路径变了，效果如下：

![1353628-20180906223024691-244235505.png][]

### 数据集合 ###

4、结合所哟的字符串全部传递前端Jinja2模板

后端：

@app.route("/allstudent")
    def allstudent():
        return render_template("student.html", student=STUDENT, student_list=STUDENT_LIST, student_dict=STUDENT_DICT)

前端：

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <h3>学生列表</h3>
    <div> _____________________________________</div>
    Welcome to : student
    <div>{
         { student }}</div>
    <table border="1px">
        <tr>
            <td>{
         { student.name }}</td>
            <td>{
         { student["age"] }}</td>
            <td>{
         { student.get("gender") }}</td>
        </tr>
    </table>
    <div> _____________________________________</div>
    Welcome to : student_list
    <div>{
         { student_list }}</div>
    <table border="1xp">
        {
          % for foo in student_list %}
            <tr>
                <td>{
         { foo }}</td>
                <td>{
         { foo.name }}</td>
                <td>{
         { foo.get("age") }}</td>
                <td>{
         { foo["gender"] }}</td>
            </tr>
        {
          % endfor %}
    </table>
    <div> _____________________________________</div>
    Welcome to : student_dict
    <div>{
         { student_dict }}</div>
    <table border="1xp">
        {
          % for foo in student_dict %}
            <tr>
                <td>{
         { foo }}</td>
                <td>{
         { student_dict.get(foo).name }}</td>
                <td>{
         { student_dict[foo].get("age") }}</td>
                <td>{
         { student_dict[foo]["gender"] }}</td>
            </tr>
        {
          % endfor %}
    </table>
    </body>
    </html>

访问页面，注意，路径改了，效果如下：

![1353628-20180906223851009-1043973963.png][]

这里可以看出来render\_template中可以传递多个关键字

### \*\*\{\}字典 ###

5、利用\*\*\{\}字典的方式传递参数

前端不变（标题4的前端代码）

后端：

@app.route("/allstudent")
    def allstudent():
        return render_template("student.html",
                               **{
        "student": STUDENT, "student_list": STUDENT_LIST, "student_dict": STUDENT_DICT})

刷新页面，效果同上！

## Jinja2的高阶用法 ##

### safe  ###

6.1.safe: 此时你与HTML只差一个safe

后端代码：

from flask import Flask
    from flask import render_template
    
    app = Flask(__name__)
    
    
    @app.route("/")
    def index():
        tag = '<input type="text" name="user" value="xiao">'
        return render_template("index.html", tag=tag)
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

在templates目录下新建文件index.html

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

访问首页，效果如下：

![1353628-20180906225210250-1571235221.png][]

似乎和我们想要的结果不太一样，有两种解决方案。

第一种，从前端入手

修改前端代码：

{
        { tag|safe }}

刷新页面，效果如下：

![1353628-20180906225406105-571606843.png][]

还有一种方式是从后端入手

后端代码：

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="xiao">'
        # Markup帮助咱们在HTML的标签上做了一层封装，让Jinja2模板语言知道这是一个安全的HTML标签
        markup_tag = Markup(tag)
        print(markup_tag, type(markup_tag))
        # <input type='text' name='user' value='DragonFire'> <class 'markupsafe.Markup'>
        return render_template("index.html", tag=markup_tag)
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

### 执行Python函数 ###

模板中执行函数，首先在文件中定义一个函数

后端代码：

from flask import Flask
    from flask import render_template
    
    app = Flask(__name__)
    
    
    # 定义一个函数，把它传递给前端
    def a_b_num(a, b):
        return a + b
    
    
    @app.route("/")
    def index():
        return render_template("index.html", tag=a_b_num)
    
    
    if __name__ == '__main__':
        app.run("0.0.0.0", 5000, debug=True)

前端代码：

刷新页面，效果如下：

![1353628-20180906230212801-354577944.png][]

看到结果就是函数加()执行得到的结果

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

后端代码：

from flask import Flask
    from flask import render_template
    
    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", tag="")
    
    
    if __name__ == '__main__':
        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>

两个函数的调用方式不太一样

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

刷新页面，效果如下：

![1353628-20180907000047057-916084527.png][]

### 模板服用block ###

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

前端代码：

index.html文件中的内容

转载于:https://www.cnblogs.com/Black-rainbow/p/9600039.html

[1353628-20180906165313882-2039237252.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906165313882-2039237252.png
[1353628-20180906165652257-1171572714.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906165652257-1171572714.png
[1353628-20180906173500084-257318059.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906173500084-257318059.png
[1353628-20180906173600729-1079925920.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906173600729-1079925920.png
[1353628-20180906174654532-1280731625.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906174654532-1280731625.png
[1353628-20180906175920245-1199297250.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906175920245-1199297250.png
[1353628-20180906185835488-125279198.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906185835488-125279198.png
[1353628-20180906185931153-1759405138.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906185931153-1759405138.png
[1353628-20180906190342815-334363473.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906190342815-334363473.png
[1353628-20180906190505143-1373505245.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906190505143-1373505245.png
[1353628-20180906194324196-1894171277.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906194324196-1894171277.png
[1353628-20180906194454592-1502453793.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906194454592-1502453793.png
[1353628-20180906195613291-1606002143.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906195613291-1606002143.png
[1353628-20180906203032425-1668423094.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906203032425-1668423094.png
[1353628-20180906204731609-1332302670.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906204731609-1332302670.png
[http_www.w3school.com.cn_media_media_mimeref.asp]: http://www.w3school.com.cn/media/media_mimeref.asp
[1353628-20180906212219396-1734263924.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906212219396-1734263924.png
[1353628-20180906212313097-999420884.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906212313097-999420884.png
[1353628-20180906212338206-948299681.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906212338206-948299681.png
[1353628-20180906212755905-413062880.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906212755905-413062880.png
[1353628-20180906213038167-1654975235.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906213038167-1654975235.png
[1353628-20180906214242884-1366417175.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906214242884-1366417175.png
[1353628-20180906214310896-380326239.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906214310896-380326239.png
[1353628-20180906220818354-2098596492.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906220818354-2098596492.png
[1353628-20180906221847082-1436564816.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906221847082-1436564816.png
[1353628-20180906222319097-1584025482.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906222319097-1584025482.png
[1353628-20180906223024691-244235505.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906223024691-244235505.png
[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif
[1353628-20180906223851009-1043973963.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906223851009-1043973963.png
[1353628-20180906225210250-1571235221.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906225210250-1571235221.png
[1353628-20180906225406105-571606843.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906225406105-571606843.png
[1353628-20180906230212801-354577944.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180906230212801-354577944.png
[1353628-20180907000047057-916084527.png]: https://images2018.cnblogs.com/blog/1353628/201809/1353628-20180907000047057-916084527.png