Flask基础一

一、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()

执行控制台输出：

* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

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

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

六行Flask

from flask import Flask

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

重启程序，刷新页面

实现了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

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

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页面，效果如下：

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

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

遇到上述的问题，基本上就是你的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

选择yes

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

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

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

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

前期学习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模块

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")
def home():  # 视图函数
    print(request)
    return "ok"


if __name__ == '__main__':
    app.run("0.0.0.0", 5000, debug=True)

重启flask，访问登陆页面

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

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)

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

查看Pycharm控制台输出：

<Request 'http://127.0.0.1:5000/req' [POST]>
POST
ImmutableMultiDict([('user', 'aaa'), ('pwd', '123')])
aaa
123
<dict_keyiterator object at 0x0000022829C909F8>
user
pwd

解释一个@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地址直接传递参数

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

ImmutableMultiDict([('id', '18'), ('age', '20')])
127.0.0.1 - - [06/Sep/2018 20:30:16] "GET /req?id=18&age=20 HTTP/1.1" 200 -
18
20
['id', 'age']
['18', '20']
{'id': ['18'], 'age': ['20']}

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

request.args 是获取url中的参数

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

request.values

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

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

<form action="/req?id=1&age=20" method="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","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控制台输出：

CombinedMultiDict([ImmutableMultiDict([('age', '20'), ('id', '1')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '112')])])
127.0.0.1 - - [06/Sep/2018 20:43:01] "POST /req?id=1&age=20 HTTP/1.1" 200 -
1
xiao
{'user': 'xiao', 'pwd': '112', 'age': '20', 'id': '1'}

form表单的坑

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

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

修改login.html

<form action="/req?id=1&user=20" method="post">

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

查看Pycharm控制台输出：

CombinedMultiDict([ImmutableMultiDict([('id', '1'), ('user', '20')]), ImmutableMultiDict([('user', 'xiao'), ('pwd', '123')])])
1
20
{'user': '20', 'pwd': '123', 'id': '1'}

发现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控制台输出：

{'csrftoken': '5dbnoXpHe4dYUPZqCejRBleKc5HznLKY2sAgmTLqxSjL2kBPKLYAt9yxvPlNNMHf'}

request.headers

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

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

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

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

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

Connection: keep-alive
Upgrade-Insecure-Requests: 1
Content-Length: 17
Content-Type: application/x-www-form-urlencoded
Accept-Language: zh-CN,zh;q=0.9,en-US;q=0.8,en;q=0.7
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
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Origin: http://127.0.0.1:5000
Accept-Encoding: gzip, deflate, br
Referer: http://127.0.0.1:5000/login
Host: 127.0.0.1:5000
Cache-Control: max-age=0
Cookie: csrftoken=5dbnoXpHe4dYUPZqCejRBleKc5HznLKY2sAgmTLqxSjL2kBPKLYAt9yxvPlNNMHf

request.data

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

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

mimetype的类型以及字符串：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控制台输出：

b''

为什么是空的呢？注意：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)

访问登陆页面

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

点击提交，效果如下：

查看Pycharm控制台输出：

ImmutableMultiDict([('file', <FileStorage: 'abc.txt' ('text/plain')>)])
<FileStorage: 'abc.txt' ('text/plain')>

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

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

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"

直接访问页面

查看Pycharm控制台输出：

/req
127.0.0.1 - - [06/Sep/2018 21:35:35] "GET /req HTTP/1.1" 200 -

http://127.0.0.1:5000/req
http://127.0.0.1:5000/

request.json

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

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

修改后端代码：

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

使用postman发送一个json数据

查看返回值

查看Pycharm控制台输出：

{'id': 1}

四、模板语言Jinja2

Jinja2

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

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

STUDENT = {'name':'韩雪','age':24,'gender':'女'}

STUDENT_LIST = [
    {'name':'韩雪','age':24,'gender':'女'},
    {'name':'舒畅','age':23,'gender':'女'},
    {'name':'唐嫣','age':25,'gender':'女'},
]

STUDENT_DICT = {
    {'name':'韩雪','age':24,'gender':'女'},
    {'name':'舒畅','age':23,'gender':'女'},
    {'name':'唐嫣','age':25,'gender':'女'},
}

但是前提我们要知道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，访问页面

从这个例子中，可以看出来，字典传入前端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>

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

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

{% for foo in student %}
    <tr>
        <td>{{ foo }}</td>
    </tr>
{% endfor %}

修改前端：

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

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

大字典

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

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

数据集合

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

后端：

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

前端：

<!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>

View Code

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

这里可以看出来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>

访问首页，效果如下：

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

第一种，从前端入手

修改前端代码：

{{ tag|safe }}

刷新页面，效果如下：

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

后端代码：

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)

前端代码：

<body>
{{ tag }}
<br>
{#传入2个参数#}
{{ tag(99,1) }}
</body>

刷新页面，效果如下：

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

还可以定义全局函数，无需后端传递给前端，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中的特殊装饰器

刷新页面，效果如下：

模板服用block

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

前端代码：

index.html文件中的内容

posted @ 2018-09-06 17:58 黑色彩虹阅读(491) 评论(0) 编辑收藏举报

刷新页面返回顶部

黑色彩虹

在涅贵不淄，暖暖内含光。

Flask基础一

一、Flask初始

三大主流Web框架对比

Flask的安装与HelloWorld

三行Flask

六行Flask

二、render redirect HttpResponse

HttpResponse

redirect

render (render_template)

指定templates路径

三、request

methods

request.method

request.form

request.args

request.values

form表单的坑

request.cookies

request.headers

request.data

request.files

request.获取各种路径

request.json

四、模板语言Jinja2

Jinja2

for

if

字典

列表

大字典

数据集合

**{}字典

Jinja2的高阶用法

safe

执行Python函数

模板服用block

公告