当前位置: article > 正文

Web前端之Flask框架--flask简介、Jinja2模板引擎_前端flask框架

作者：小蓝xlanll | 2024-03-03 22:04:00

踩

前端flask框架

文章目录

一、flask简介

1、架构简介

当用户使用浏览器访问网站的页面信息时，会有如下的经历：
当用户通过浏览器提交一个请求时，首先将请求提交给NGINX服务器，然后经过中间人uWSGI转换协议，使请求能够提交给使用不同协议的Flask等，并进行处理，处理结束后再原路返回，将请求结果返回给用户。
其中：

NGINX服务器是一个Web服务器，一般企业前端会选择NGINX服务器，但是由于用户量很大，所以在NGINX的后端会有很多个阿帕奇服务器，使用超文本协议–HTTP协议
后端中的Flask等使用的协议却不是HTTP协议，是WSGI协议
uWSGI–wWeb,sServer,gGateway,iInterface.即前端服务的网关接口。uWSGI既可以与NGINX通信，也可以与Web通信，因此uWSGI作为一个中间人使NGINX和Flask可以通信。与NGINX通信的协议为http协议，与Web通信的协议为WSGI协议，

在这里插入图片描述

Nginx (engine x) 是一个高性能的HTTP和反向代理 web服务器，同时也提供了IMAP/POP3/SMTP服务。（由一个俄罗斯人发明，可以接收的请求量达到了10k，因此更靠近用户）
uWSGI是一个Web服务器，它实现了WSGI协议、uwsgi、http等协议。http协议和nginx进行交流，WSGI协议和后端的python代码，wed框架进行交流。
Framework即架构，它是一个语言开发软件，提供了软件开发的框架，使开发更具工程性、简便性和稳定性。常用的就是django和flask框架，flask用于小项目，django用于大项目。

2、什么是Flask

Flask是一个Web框架, 就是提供一个工具库和技术来允许你构建一个Web应用程序.这个Web应用程序可以是一些Web页面,博客, wiki ,基于 Web 的日历应用或商业网站。

Flask依赖模块(还有一些别的，这里介绍一个):
web服务网关接口（Web Server Gateway Interface,缩写为WSGI

Werkzeug 一个WSGI工具包，是为python语言定义的web服务器和web应用程序或框架之间的一种简单而通用的借口,其他语言也有类似的接口）
jinja2模板引擎

3.Flask的优势

Flask属于微框架（ micro-framework )这一类别,微架构通常是很小的不依赖外部库的框架(安装时不会下载一些附带的依赖包，根据你实际使用的情况自己下载需要的包)。

框架很轻量
更新时依赖小
专注于安全方面的bug

二、实现简单的Web网站

1、Flask第一个网站

两个名词：
路由：

@app.route('') #根据选择的路径，判断采用哪个试图函数

视图函数：

def 函数名（）：#视图函数（函数名一定不能重复）：给用户返回查看的页面信息

代码：

from flask import Flask

# __name__确定此flask项目的所在位置
app=Flask(__name__)

# 实现首页：http://172.25.254.1:9999/(访问首页)
@app.route('/') #路由：根据选择的路径，判断采用哪个试图函数
def index(): #视图函数（函数名一定不能重复）：给用户返回查看的页面信息
    return '这是网站的首页'

@app.route('/login/')
def login():
    return '正在登录。。'

@app.route('/logout')
def logout():
    return '正在登出。。。'


if __name__ == '__main__':
    #运行flask项目，默认IP和端口为127.0.0.1，5000
    # 如何特色化指定IP和端口：host='0.0.0.0'指开放本机的所有ip ，port=5000必须是整型
    # debug=True开启调试模式（在测试环境中开启，生产环境一定要关闭）
    app.run(host='192.168.1.111',port=9998,debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

注意：
在windows系统中，IP地址需要改成自己本地主机的IP；
通过ipconfig查询
在这里插入图片描述

2、设置动态路由

"""
http://www.csdn.org/1200
http://www.csdn.org/1202
http://www.csdn.org/1203
http://www.csdn.org/1204

动态路由：http://csdn.org/<userid>
"""
from flask import Flask,request

app=Flask(__name__)

@app.route('/<int:userid>')
def useridinfo(userid):
    return '正在查看用户%s的详细博客。。。'%(userid)

@app.route('/welcom/<string:username>')
def welcom(username):
    return '欢迎访问%s用户的主页'%(username)

"""
http://movie.douban.com/top250?start=254filter=
"""
#request 存储用户请求页面的所有头部信息
@app.route('/top250')
def top250():
    users=['user%s'%(i) for i in range(100)]
    print('客户端的用户代理:',request.user_agent)#返回客户端的用户代理
    print('请求页面的头部信息',request.headers)
    print('客户端的IP地址',request.remote_addr)
    print('客户端请求的参数详细信息',request.args)
    print('客户端http请求的方法',request.method)#http请求方法 get:会在地址栏显示

    #获取用户请求的URRL地址里的key值对应的value值
    start=int(request.args.get('start'))#返回的是字符串，转化为整型
    user=request.args.get('user')
    return 'top250 显示数据：%s条 用户名：%s'%(start,user)
    import json
    return json.dumps(users[start:start + 10])  # 返回的是列表，转为字符串

if __name__ == '__main__':
    app.run(host='192.168.1.111',port=9999,debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

运行结果：
在这里插入图片描述

return ‘top250 显示数据：%s条用户名：%s’%(start,user) 执行的结果；

客户端的用户代理: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko Core/1.70.3706.400 SLBrowser/10.0.3974.400
请求页面的头部信息 Accept: text/html, application/xhtml+xml, image/jxr, */*
Accept-Language: zh-CN
Accept-Encoding: gzip, deflate
Host: 192.168.1.111:9999
Connection: Keep-Alive
User-Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; rv:11.0) like Gecko Core/1.70.3706.400 SLBrowser/10.0.3974.400

客户端的IP地址 192.168.1.111
客户端请求的参数详细信息 ImmutableMultiDict([('start', '22'), ('user', 'anan')])
客户端http请求的方法 GET1
2
3
4
5
6
7
8
9
10

return json.dumps(users[start:start + 10]) 执行的结果‘
在这里插入图片描述

三、HTTP请求方法的实现

1、HTTP请求常见的方式(get,post)的区别：

提交查询信息或者信息不重要时，使用get

url可见性：
get:参数url可见
post：参数不可见
数据传输：
get: 通过拼接url进行传递参数
post: 通过body体传输参数
缓存性：
get请求是可以缓存的
post请求不可以缓存
后退页面的反应：
get请求页面后退时，不产生影响
post请求页面后退时，会重新提交请求
传输数据的大小：
get一般传输数据大小不超过2-4k(根据浏览器不同，限制不一样，但相差不大)
post请求传输数据可以无限大
安全性：原则上
get安全性较低
post安全性较高

2、模板渲染

例如：hello {{name}}【请求的用户名不同，hello后面跟的内容不一样】
如果若用户返回的信息为：name = westos
就将name=westos填入 —> hello westos
这个过程就叫做模板渲染。

flask和django一样都配备了Jinja2模板引擎，可以使用 render_template() 方法来渲染模板.

3.重定向和错误（redirect,error）

重定向：

比如当访问一个页面，如果没有登录，页面会自动跳转即重新定向到登录页面让你你登录。
使用redirect() 函数把用户重定向到其他地方

错误：

比如当用户访问页面信息时，不想让用户获取页面，给用户返回一个错误页面，类似python代码中的抛出异常
使用abort() ，放弃请求并返回错误代码

http状态码即HTTP请求中出现的错误：404 200 304 302 500

4开头客户端错误

5开头服务端错误

4.不同方法实现用户登录

1）get方法实现用户登录

代码：

from flask import Flask,render_template,request,redirect

app=Flask(__name__)
@app.route('/')
def index():
    return '<h1>主页</h1>'

@app.route('/login/')
def login():
    """
    一般情况下，不会直接把HTML文件内容直接返回
    而是将HTML文件保存到当前的templates目录中[templates目录一般必须写为这个名字]
    通过render_template方法调用；
    默认情况下，flask在程序文件夹中的templates子文件中寻找模板
    """
    return render_template('login.html')

#返回了login.html，在这个页面中，用户输入了登录信息后，提交到action='/login2/'
#通过login2函数来判断用户名和密码

#处理登录逻辑，判断用户名和密码
@app.route('/login2/')
def login2():
    #获取用户输入的用户名
    username=request.args.get('username',None)
    password=request.args.get('password',None)
    #逻辑处理，判断用户名和密码是否正确
    if username=='root' and password=='anan':
        #重定向到指定路由
        #如果登陆成功，进入主页
        return redirect('/')
    else:
        #如果登录失败，重定向到登陆界面，重新登录
        return redirect('/login/')


if __name__ == '__main__':
    app.run(host='192.168.1.111',port=9992,debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

得到的第一个页面
在这里插入图片描述
第二个页面

当输入的用户名和密码正确时，页面跳转至第一个页面；
输入的用户名或密码不正确时，页面跳转至第二个页面。

2）post方法实现用户登录

代码

from flask import Flask,render_template,request,redirect

app=Flask(__name__)
@app.route('/')
def index():
    return '<h1>主页</h1>'

#默认路由只支持get方法，如何指定接受post方法？
@app.route('/login/',methods=['GET','POST'])
def login():
    """
    1.用户访问网址：http://xxxx/login/,返回登录的html页面，
    主页页面时通过get方法访问得到的，get是默认路由支持的提交方法
    2.返回了html页面，用户填写信息
    根据<form action='/login/' method='post'>提交到login，提交方法是post
    3.执行post提交的逻辑
    """
    if request.method=='POST':
        # post提交的数据如何获取？ request.form.get;
        # get提交的数据获取方法：request.args.get;
        #post提交的数据存放在一个表单中
        print(request.form)
        username=request.form.get('username',None)
        password=request.form.get('password',None)

        if username=='root' and password=='anan':
            #如果登陆成功，重定向进入主页
            return redirect('/')
        else:
            #render_templates()模板渲染，给html传递变量，传的是erro_message
            return render_template('login_post.html',error_message='用户名或者密码错误')
    else:
        return render_template('login_post.html')

if __name__ == '__main__':
    app.run(host='192.168.1.111',port=9949,debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

如果用户名或密码输入错误时
在这里插入图片描述
如果输入正确时

5.自定义错误页面

为什么要自定义错误页面？
如果在浏览器的地址栏中输入了不可用的路由，那么会显示一个状态码为404的错误页面

如何自定义错误页面？
像常规路由一样，flask允许程序使用基于模板的自定义错误页面 errorhandler()

最常见的错误代码有两个:
404:用户端请求位置页面或路由时显示
500:有未处理的异常时显示

代码

from flask import Flask,render_template

app=Flask(__name__)

@app.route('/welcom/<string:username>')
def welcom(username):
    return render_template('welcom.html',name=username)

@app.errorhandler(404)
def page_not_found(e):
    return render_template('404.html'),404

@app.errorhandler(500)
def internal_server_error(e):
    return render_template('500.html'),500

if __name__ == '__main__':
    app.run(host='192.168.1.111',port=9939,debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

templates目录中的welcom.html文件:

<!DOCTYPE HTML >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>welcom</title>
</head>
<body>
<!--定义变量通过两个花括号，花括号中写变量名 -->
<h1>欢迎用户{{name }}</h1>
</body>
</html>1
2
3
4
5
6
7
8
9
10

templates目录中的404.html文件:

<!DOCTYPE HTML >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>404</title>
</head>
<body>

<h1 style="color: chocolate">你寻找的网站迷路了。。。</h1>
</body>
</html>1
2
3
4
5
6
7
8
9
10

templates目录中的500.html文件:

<!DOCTYPE HTML >
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>500</title>
</head>
<body>

<h1 style="color: darksalmon">请耐心等待，稍后再试</h1>
</body>
</html>1
2
3
4
5
6
7
8
9
10

6.flask的日志记录

from flask import Flask
import logging

app=Flask(__name__)

#日志系统配置，设置文件存放位置
handler=logging.FileHandler('app.log',encoding='utf-8')
#设置日志文件存储格式
logging_format=logging.Formatter('%(asctime)s-%(levelname)s-%(filename)s-%(funcName)s-%(lineno)s-%(message)s')
#将日志文件处理对象和日志格式绑定
handler.setFormatter(logging_format)
#设置日志级别
handler.setLevel('DEBUG')
#将日志文件和app绑定
app.logger.addHandler(handler)

@app.route('/')
def index():
    app.logger.debug('hello')
    app.logger.error('error')
    app.logger.exception('exception')
    return 'index'

if __name__ == '__main__':
    app.run(debug=True)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

app.log显示

2020-03-02 23:55:29,782-DEBUG-04_flask日志记录.py-index-26-hello
2020-03-02 23:55:29,782-ERROR-04_flask日志记录.py-index-27-error
2020-03-02 23:55:29,782-ERROR-04_flask日志记录.py-index-28-exception
NoneType: None1
2
3

四、静态文件介绍

动态的 web 应用也需要静态文件，一般是 CSS , 图片和 JavaScript 文件。理想情况下你的服务器已经配置好了为你的提供静态文件的服务。

1、静态文件存储位置：

在开发过程中，Flask静态文件位于应用的/static目录中。

2、调用方式：

静态文件在文件系统中的位置是：static/style.css
{{ url_for(‘static’, filename = ‘style.css’)}} 1

五、会话session介绍

session 的对象，允许你在不同请求之间储存信息。这个对象相当于用密钥签名加密的 cookie ，即用户可以查看你的 cookie ，但是如果没有密钥就无法修改它。

使用会话之前你必须设置一个密钥。

# Set the secret key to some random bytes. Keep this really secret!
app.secret_key = b'_5#y2L"F4Q8z\n\xec]/'1

后台逻辑实现

@app.route('/')
def index():
    if 'username' in session:
        return 'Logged in as %s' % escape(session['username'])
    return 'You are not logged in'

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        session['username'] = request.form['username']
        return redirect(url_for('index'))
    return '''
        <form method="post">
            <p><input type=text name=username>
            <p><input type=submit value=Login>
        </form>
    '''

@app.route('/logout')
def logout():
    # remove the username from the session if it's there
    session.pop('username', None)
    return redirect(url_for('index'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

六、消息闪现

1、什么是消息闪现

消息闪现就是只展示一次的数据 / 参数；
闪现系统使得在一个请求结束的时候记录一个信息，然后仅仅在下一个请求中访问这个数据；
Flask提供了一个非常简单的方法来使用闪现系统向用户反馈信息；
Flask消息闪现可以给用户更好的体验。

2、应用场景

上传图片代码，加入消息闪现功能
进入首页只刷一次的广告
用户登录成功的闪现消息
用户登录失败的闪现消息
用户注册成功的闪现消息
用户注册失败的闪现消息

3、实现步骤

引入一个函数flash，用于存储展示的信息

from flask import flash

使用flash保存，实际上是暂时保存在session会话，存储时需要加密

app.comfig['SECRET_KEY']='anan' #加密盐

Flask后台中存储闪现信息

flash('要展示的闪现信息')

前端页面获取闪现信息

{{get_flashed_messages()}}

七、Jinja2模板引擎

1、什么是Jinja2模板引擎

Jinja2是一个现代的，设计者友好的，仿照Django模板的python模板语言。
它速度快，被广泛使用，并且提供了可选的模板执行环境保证安全。

python的Web开发中，业务逻辑（实质就是试图函数的内容）和页面逻辑（html文件）是分开的，使得代码的可读性增强，代码容易理解和维护；
模板渲染：在html文件中，通过动态赋值，将重新翻译好的html文件（模板引擎生效）返回给用户的过程；
其他的模板引擎：Mako，Template，Jinja2；
flask中默认的模板引擎是Jinja2
Django中默认的模板引擎是Mako

2、Jinja2语法

1）变量显示语法：

{{ 变量名 / 函数调用 }}

2）变量内置过滤器：

类似于python中的一些方法
完整的过滤器查看位置：http://jinja.pocoo.org/docs/templates/#builtin-filters

常用的过滤器:

safe 渲染值时不转义
capitalize 把值的首字母转换成大写，其他字母转换成小写
lower 把值转换成小写
upper 把值转换成大写
title 把值中每个单词的首字母都转换成大写
trim 把值的首尾空格去掉
striptags 渲染之前把值中所有的html标签都删掉

from flask import Flask, render_template

app = Flask(__name__)
@app.route('/')
def index():
text= """
    <h1>hello world</h1>
    """
    return render_template('jinja2.html', text=text)
if __name__ == '__main__':
    app.run()1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--safe过滤器，展示原本的html，不将它进行转义-->
{{ text | safe }}
<!--striptages把值中所有的html标签都删掉，只展示文本-->
{{ text | striptags }}

</body>
</html>1
2
3
4
5
6
7
8
9
10
11
12
13

不进行转义及去标签时
在这里插入图片描述
第一行：用safe进行转义后
第二行：用striptags进行去标签后

3)如何自定义过滤器

i、for循环:

{% for i in li %}
	xxxx
{% endfor %}1
2

例如：

{% for user in users%}
<tr>
    <td>{{ user.username}}</td>
    <td>{{ user.password}}</td>
</tr>
{% endfor%}1
2
3
4
5

ii、if语句

{% if 条件%}
    xxxx
{% elif 条件%}
    xxxx
{% else %}
    xxxx
{% endif %}        1
2
3
4
5
6

例如：

<!--如果用户登录，显示注销-->
<!--如果没有登录，显示登录和注册-->
<!--如何判断是否登录：session.get('username')-->
{% if session.get('username')%}
     <li><a href='logout'>注销</a></li>
{% else %}
     <li><a href='login'>登录</a></li>
     <li><a href='register'>注册</a></li>
{% endif %}          1
2
3
4
5
6
7
8

4）宏操作

可以理解为python中的函数

i、如何定义宏：

相当于python中定义函数def，利用关键字macro

{% macro 宏名称（参数）%}
      xxxx
{% endmacro %}      1
2

ii、如何调用宏

{{宏名称（）}}

{# 声明Jinja2的宏 #}
{% macro fun(id) %}
     <h1>hello {{id}}</h1>
{% endmacro %}
{# 调用宏#}
{{ fun(1) }}
{{ fun(2) }}
{{ fun(3) }}1
2
3
4
5
6
7