4-2-Flask核心-其他功能.md · txd/woniu-doc

---

## 蜗牛学院 - 系列教材 - Flask开发

---

### 第四章 - 第二课：Flask核心 - 模块化与拦截器

---

### 课程目标

1. 理解URL重写向的使用及在HTTP协议层面的实现原理
2. 理解Session和Cookie在Flask中的用法。
3. 理解模块化设计在Flask中的运用。
4. 理解拦截器的使用和全局控制。
5. 理解如何在Flask中定制错误页面，如404、500等页面。

### 课程实验

1. 利用Flask编程结合原理，对Flask的关键部件进行学习和运用。

### 课堂引入

1. 对于一个后台开发框架来说，其核心功能主要就是对HTTP协议的处理、对页面的渲染和对数据库的操作，而像前一节课学习的路由和参数，包括本次课程学习的URL重定向、Session和Cookie的处理、拦截器的使用、错误页面的定制等，其实均是在处理HTTP协议。这基本上是任何一套后台Web开发框架所必备的核心功能。
2. Python作为一门简洁的语言，Flask作为一个轻量级的Web开发框架，在进行上述处理时，都是非常简单的。

### 授课进程

#### 一、URL重定向

对于前端页面来说，要重定向到另外一个页面，在JavaScript中使用“location.href=<网址>”就可以进行页面跳转。但是在服务器端中，如何进行页面重定向呢？假设有这样一个场景，用户在没有正常登录的情况下访问一个要登录后才能访问的页面，后台发现用户没有登录时，直接重定向到登录页面，此时就需要进行重定向。下述代码演示了Flask进行重定向的过程。

```python
from flask import session, redirect, url_for # 先导入模块

@app.route('/login')
def login():
    return '登录页面的内容'

# 使用redirect和url_for()进行重定向
@app.route('/list/<id>')
def list(id):
    if session.get('islogin') is None:
        # return redirect('/login')       # 未登录时直接跳转到登录页面地址
        return redirect(url_for('login'))  # 也可以使用url_for来绑定接口函数实现跳转
    else:
        return "正常页面内容展示"
```

上述代码中引入了session模块用于校验客户端状态，下一节将介绍具体用法。Flask主要通过引入redirect函数用于完成重定向操作，至于重定向到哪个页面，要么直接在redirect函数中指定路由地址，要么使用url_for调用接口函数实现URL地址构建。注意，url_for函数的参数不是路由地址，而是路由地址对应的函数名称。

#### 二、Session和Cookie

为了保持HTTP协议的状态，必须使用Session和Cookie。Flask同样具备处理Session和Cookie的能力。处理Session时只需要引入Flask中的session模块，而处理Cookie则利用make_response函数重定义响应头，代码及注释如下。

```python
# 先引入session模块和make_response函数
from flask import session, make_response
import os   # 用于生成随机数，作为Session ID的生成依据

app = Flask(__name__)
app.config['SECRET_KEY'] = os.urandom(24)  # 配置Session的随机数种子

# session cookie
# http://127.0.0.1/setsession
@app.route('/setsession')
def setsession():
    session['username'] = 'zjl'
    session['school'] = 'niit'
    session['class'] = '2011'
    return "set session end"

# http://127.0.0.1/getsession
@app.route('/getsession')
def getsession():
    print(session['username'])
    print(session['school'])
    print(session['class'])
    return "get session end"

# http://127.0.0.1/login?username=woniu&password=123456
@app.route('/login')
def login():
    username = request.args.get('username')
    password = request.args.get('password')
    if username == 'woniu' and password == '123456':
        # 设置两个session变量islogin和username并赋值
        session['islogin'] = 'true'
        session['username'] = username

response = make_response('恭喜你，登录成功.')
    # 通过往响应头写入Set-Cookie字段的方式往浏览器生成两个Cookie变量
    # Cookie变量username，其值为username变量的值，有效期为30秒
    response.set_cookie('username', username, max_age=30)
    response.set_cookie('password', password, max_age=30)

return response     # 将响应写入前端

if __name__ == '__main__':
    app.run(debug=True)
```

启动Flask，并打开F12调试工具监控网络请求，得到的请求和响应数据如下图所示。

![image-20210513150314774](https://woniumd.oss-cn-hangzhou.aliyuncs.com/test/dengqiang/20210513150314.png)

通过响应可以看到，后台已经正常返回了三条Set-Cookie的响应，包含Session ID、username和password三个变量。同时在服务器端也可以读取到Session变量的值，读取Session和Cookie变量的值使用以下两个方法。

```python
islogin = session.get('islogin')  # 读取Session变量的值
username = request.cookies.get('username')  # 读取Cookie变量的值
```

需要注意的是，读取Cookie变量的值必须在Cookie生成后的下一个请求和响应里面才能读取，并且Cookie最终是保存在浏览器端而不是服务器端。例如，用户登录成功后响应中生成了Cookie变量，设置Cookie的有效期为一个月，那么一个月内如果不清空浏览器缓存数据，都可以读取到Cookie的值。在相同的域名下面，Cookie的值不仅可以通过后台代码读取，也可以通过JavaScript读取。读取到Cookie的值后，可以填充到登录表单里面，这样可以实现保存登录信息的目的而不需要用户再次输入用户名和密码。

#### 三、保存登录信息

保存登录实现自动登录的方式还有以下三种。

（1） 通过JavaScript调用浏览器的WebStorage接口将用户名和密码信息保存起来，每次打开首页时直接将用户名和密码信息发送给后台，后台检验通过后直接返回登录成功后的响应，这个过程不需要弹出登录界面，可实现自动登录。但是需要掌握WebStorage的用法。

（2） 直接将Session ID作为一条Cookie进行永久保存，并且在服务器端也将本次生成的Session ID保存于数据库中，浏览器端保存的Session ID和服务器端保存的Session ID一致则实现登录。这种方式需要重新定义Session ID的保存方式，也涉及一些底层代码的修改。

（3）所以，通常采用第三种方式实现用户的自动登录。当用户打开网站首页时，直接在后台代码中读取浏览器Cookie，然后检验该Cookie里面保存的用户名和密码是否有效，有效则直接完成登录，返回登录后的信息。在实现蜗牛笔记的自动登录的功能时，本书将采用这一种方式完成。

#### 四、Blueprint模块化

在开发一套系统的时候，都需要把不同的功能模块放在不同的源代码里面，便于代码的维护和管理。前面的演示代码均是在main.py这一个源文件中进行的，所以读者并不会对模块化的问题有什么特别的感受。设想一下这种场景，假设蜗牛笔记有用户模块，文章模块，评论模块，后台模块等多个功能模块。在定义路由器的时候，这么多模块不可能都把路由器定义在main.py一个文件中。但是如果定义在不同的Python源文件中，那么就需要在其他模块中引入main.py中的app变量，因为定义路由时，装饰器必须调用@app.route才能实现，于是代码就应该按照下面的方式来实现。

```python
demo.py模块中的代码：

# 从入口模块中改Flask的实例app变量
from main import app

@app.route('/demo')
def demo():
return "这是另外一个模块中的页面"

main.py模块中的代码：

# 从demo模块中导入所有函数
from demo import *

if __name__ == '__main__':
    app.run(debug=True)
```

上述代码并不难理解，只是从Python代码的风格上来看，会发现demo.py和main.py出现了递归引入的问题，main引用demo，demo又引用main。虽然Flask并不会出现错误，但是不建议通过这样的方式进行模块化处理，而是使用Flask内置的blueprint模块专门进行模块化处理，使开发过程更加标准。上述代码重构为以下的方式。

```python
demo.py模块中的代码：

# 从入口模块中改Flask的实例app变量
from flask import Blueprint

# 实例化Blueprint并设置模块名称
test = Blueprint("test", __name__)

@test.route('/demo')
def demo():
    return "这是另外一个模块中的页面"

main.py模块中的代码：

# 导入其他模块并注册到app中
from demo import *
app.register_blueprint(test)

if __name__ == '__main__':
    app.run(debug=True)
```

#### 五、拦截器

拦截器提供了一种机制使开发者可以定义在一个请求执行的前后执行的代码，也可以在一个请求的执行前阻止其执行。本质上是一种拦截和过滤的功能，相当于定义了针对请求处理的公共模块功能，但是不需要专门调用，Flask会自行处理。现在有这样一个场景：用户没有登录正常情况下是不能访问授权页面和后台接口，但是如果用户记得相应的URL地址，就很有可能导致直接发送请求非法进入。常规处理方式就是对每一个接口进行校验，下面的代码演示了其处理方式。

```python
@app.route('/get', methods=['GET'])
def page():
    if not 'islogin' in session:
        return redirect("跳转到登录页面")
    else:
        return "某个授权页面的内容"
    
@app.route('/post', methods=['POST'])
def add():
    if not 'islogin' in session:
        return redirect("跳转到登录页面")
    else:
        return "新增一条记录成功"
    
@app.route('/edit', methods=['PUT'])
def update():
    if not 'islogin' in session:
        return redirect("跳转到登录页面")
    else:
        return "修改一条记录成功"
```

上述代码中，对每一个请求的处理都需要判断一下用户是否登录，如果没有登录则跳转到登录页面。显然这样的处理方式不够优雅，而且当接口数量越来越多以后，维护工作也变得异常复杂，甚至很有可能导致某些接口忘记校验出现安全漏洞。另外，如果校验规则发生了变化，又得重新校验，重新修改代码。Flask的拦截器可以非常优雅地解决这一问题，请看下面的代码和注释。

```python
# 使用before_request装饰器进行拦截经过系统的所有请求并进行处理（app模块）
@app.before_request
def before():
    print('app.before_request')
    if not 'islogin' in session:
        print('not login.')
        return redirect(url_for('login'))  # 未登录则跳转到登录界面
    else:
        print('already login.')
        pass    # 如果已经登录，则不做任何拦截，该代码可以省略

# 进入登录页面
@app.route('/login')
def login():
    return render_template('login.html')
```

上述拦截器会随Flask的启动而开始工作，并拦截所有请求然后进行判断，如果没有登录，则直接跳转到登录界面。但是上述代码存在一个严重的BUG，由于系统会拦截所有请求，当然也包括登录页面本身的GET请求和页面中的图片请求等，全部都会被拦截，进而导致死循环地跳转到登录页面，最终导致无法正常访问。要解决这个问题，就需要设置一些白名单，让拦截器放行，请看下面的代码演示。

```python
# 为拦截器设置哪些请求地址可以放行，不需要校验
@app.before_request
def before():
    url = request.path   # 获取到请求的地址，如/login, /code.jpg, /article/1
    # 在列表中设置白名单（当然，如果业务需要，也可以设置黑名单
    pass_list = ['/', '/reg', '/login', '/vcode']
    # 静态资源如图片，CSS和JS代码等，可以通过后缀名来进行放行
    suffix = url.endswith('.png') or url.endswith('.jpg') or \
             url.endswith('.css') or url.endswith('.js')
    if url in pass_list or suffix:
        pass       # 如果在白名单中，则不做拦截
    elif not 'islogin' in session:
        return redirect(url_for('login'))

# 进入登录页面
@app.route('/login')
def login():
    return render_template('login.html')

@app.route('/view')
def view():
    return "这是授权页面，必须登录后才能访问"

if __name__ == '__main__':
    app.run(debug=True)
```

除了before_request拦截器外，Flask还有after_request拦截器用于在请求处理完之后和发送响应给前端之前进行拦截处理，通常用于重新设置一些公共的响应内容。例如，在跨域处理的时候，需要往响应的头里面写入允许远程主机上的JavaScript代码访问的字段。除此以外，Flask也定义了teardown_request这个拦截器，其功能与after_request类似，其差别在于：after_request是在请求没有遇到异常的情况下处理，而teardown_request则无论是否有异常都正常拦截。

但是对于一个复杂系统来说，接口非常多，而不同的接口也会有不同的校验规则，如果全部将其放到app模块中进行拦截（即全局拦截器）显然不太现实。所以，此时可以使用模块拦截器，将不同的拦截器定义在Blueprint模块中，相当于模块拦截器只处理当前模块内的请求。比如下面的代码定义了一个只针对test模块的拦截器。

```python
from flask import Blueprint

# 实例化Blueprint并设置模块名称
test = Blueprint("test", __name__)

@test.before_request
def handler():
    url = request.url
    return "正在拦截：" + url    # 只有访问 /demo 时才会输出

@test.route('/demo')
def demo():
    return "这是另外一个模块中的页面"
```

对于定义在app模块中的全局拦截器来说，编者建议慎用，因为会针对所有请求进行拦截处理，比较消耗服务器资源。尤其对于蜗牛笔记来说，很多接口是不需要登录或者权限就可以直接访问的，完全没有拦截的必要，此时建议优先考虑使用模块拦截器。全局拦截器通常应用于企业内部系统，用户不登录便则无法进行任何操作的情况，此时使用全局拦截器就可以将未登录用户拦截在所有请求之外。

#### 六、定制错误页面

Flask的默认错误页面比较简单，大概长成这样。

![image-20210513150917148](https://woniumd.oss-cn-hangzhou.aliyuncs.com/test/dengqiang/20210513150917.png)

404错误页面主要是指浏览器输入的URL地址不存在，导致服务器端找到不相应资源。但是这个页面显得并不友好，也不美观，所以需要定制这个错误页面，比如设计成我们想要的任何一个页面风格。

![image-20210513150946360](https://woniumd.oss-cn-hangzhou.aliyuncs.com/test/dengqiang/20210513150946.png)

在Flask要定义404错误页面（或500错误页面），可以按照如下方式进行。

```python
# 在main.py中使用装饰器errorhandler并传递错误码给装饰器参数
@app.errorhandler(404)
def page_not_found(e):
    # 当出现404错误时，渲染自定义错误页面，如图4-6所示
    return render_template('error-404.html'), 404

@app.errorhandler(500)
def page_not_found(e):
return render_template('error-500.html'),500
# 查看出错页面的方式有两种，一种是真实的错误，Flask会自动重定向到404页面
# 一种是直接在代码中抛出错误，使用abort函数，通常这种情况适用于500错误
@app.route('/testerror')
def test_error():
    if 'islogin' in session:
        return render_template('index.html')
    else:
        abort(500)
```

除了使用abort函数来处理基于错误状态码的自定义页面外，也可以在Flask的代码中直接根据代码的运行情况使用render_template函数来渲染任意错误页面。另外，定义了错误页面后，达到了提醒用户的目的，但是通常还建议做一个自动跳转功能，如跳转到首页。可以为上述的404错误页面添加一个JavaScript的setTimeout函数来实现延时自动跳转的功能。这样既提醒了用户，也不需要用户去进行操作，更加人性化一些。

```html
<div class="container">
    <div class="row">
        <div class="col-10" style="margin: auto">
            <img src="/img/404.png" class="img-fluid" />
        </div>
    </div>
</div>
<script>
    setTimeout(function () {
        location.href = '/';   // 两秒后跳转到首页
    }, 2000);
</script>
```

### 课程小结

1. 本次课程内容相对较杂一些，但是知识点本身难度并不高，尤其对于有过部分开发经验的同学来说，是容易理解的。Flask在实现这套技术时，使用了非常简洁的规范来定义即可，并不需要具备复杂的逻辑处理。
2. Flask核心功能的两次课程，是后续Web开发过程中必备的知识，请各位同学务必认真掌握。

### 随堂作业

1. 实现上述代码并完全理解的工作机制。

### 扩展内容

URL地址重定向在HTTP协议层面的实现原理为：在HTTP协议中，服务器端本身是不具备直接重定向的能力的，后台重定向的本质是在请求的响应中发回一个状态为302的重定向响应，并在响应中通过标头的Location字段告诉浏览器跳转的目标地址，最终是通过浏览器来实现重定向跳转的。下图展示的是服务器端重定向的响应情况。

![image-20210513145148161](https://woniumd.oss-cn-hangzhou.aliyuncs.com/test/dengqiang/20210513145148.png)

其实除了使用后台重定向之外，也可以通过响应一个正常的HTML页面来实现前端重定向，甚至还可以使用JavaScript的setTimeout函数实现延迟重定向。

```javascript
# 调用JS的setTimeout和location.href实现前端延迟重定向
@app.route('/red')
def redirect():
    html = '这是重定向页面，2秒后将跳转到首页.'
    html += '<script>'
    html += 'setTimeout(function() {location.href = "/";}, 2000);'
    html += '</script>'
    return html   # 直接将html返回浏览器，浏览器会解析为JavaScript代码执行
```

txd/woniu-doc

簡介

發行版

貢獻者

近期動態