资源简介

(共32张PPT)
单元 9
基于Flask框架的Web程序设计
Python程序设计
知识入门
知识要点
1．Flask 的扩展包 2．Flask 的安装
1．Flask 的扩展包
（1）Flask-SQLalchemy ：用于操作数据库。
（3）Flask-Mail ：用于实现邮件功能。
（5）Flask-script ：用于插入脚本。
（7）Flask-RESTful ：提供开发REST API 的工具。
（9）Flask-Moment ：用于本地化日期和时间。
（8）Flask-Bootstrap ：用于集成前端Twitter Bootstrap 框架。
（6）Flask-Login ：作用判断用户状态。
（4）Flask-WTF ：用于实现表单功能。
（2）Flask-migrate ：用于管理迁移数据库。
2．Flask 的安装
使用pip 命令安装Flask，具体安装命令如下。
python -m pip install flask
如果要指定Flask 版本，可以使用以下命令。
python -m pip install flask==0.12.4
循序渐进
知识要点
9.1　创建与运行Flask程序 9.1.1　在PyCharm Professional Edition中创建Flask项目 9.1.2　创建简单的Flask程序 9.1.3　开启调试模式 9.2　路由 9.2.1　访问路径 9.2.2　路径变量 9.2.3　构造URL
9.2.4　HTTP请求方式
9.3　静态文件与模板生成
9.3.1　静态文件
9.3.2　生成Flask模板
【任务9-1】在网页中显示文本信息与图片
【任务9-2】基于Flask框架设计简单的用户登录程序
9.1.1　在PyCharm Professional Edition 中创建Flask 项目
01
OPTION
启动PyCharm Professional Edition，进入PyCharm Professional Edition 的集成开发环境。
02
OPTION
在PyCharm 窗口中选择【文件】菜单，然后选择【新建项目】命令，打开【新建项目】对话框，该对话框左侧列出很多项目模板，这里选择【Flask】，在“位置”输入框中输入Flask 项目的存放位置和名称，例如“D:\PycharmProject\Unit09\9-1”，并完成其他的设置。
OR
在输入框右侧单击【浏览】按钮，在弹出的【选择基目录】对话框中直接选择项目存放位置，例如“D:\PycharmProject\Unit09”，然后单击【确定】按钮返回【新建项目】对话框，并输入项目名称，例如“\9-1”。
9.1.1　在PyCharm Professional Edition 中创建Flask 项目
03
OPTION
Flask 项目的存放位置、名称、其他的设置都完成后，在【新建项目】对话框中单击【创建】按钮，在弹出的【打开项目】对话框中单击【新窗口】按钮，即在新的窗口中打开创建的Flask 项目。
04
OPTION
这时会打开一个新的PyCharm 窗口，在其中完成后续工作，例如创建虚拟环境、激活环境等，然后安装Flask 相关文件与配置Flask 项目，此时从显示【正在确保Flask 已安装】对话框，【正在确保Flask 已安装】对话框如图所示。
05
OPTION
Flask 相关文件安装与Flask 项目配置完成后，PyCharm 将自动生成一个精简的Flask 项目模板，如图所示。
其中，“app.py”文件是入口程序，“static”文件夹用于存放CSS 样式文件、图片文件等静态文件，“templates”文件夹是模板存放的位置，即存放网页文件的文件夹。
9.1.2　创建简单的Flask 程序
【实例9-1】创建一个简单的Flask 程序，输出“Happy to learn Python”
实例9-1 的代码如下所示
运行结果
Flask 程序也是Python 程序，其文件扩展名为“.py”。
from flask import Flask # 导入Flask 模块
app = Flask(__name__) # 创建Flask 对象
@app.route('/')
def index():
return "Happy to learn Python"
if __name__ == '__main__':
app.run()
9.1.3　开启调试模式
Flask 内置了调试模式，可用于自动重载代码并显示调试信息，有多种方法可以开启调试模式。
方法一：
将FLASK_DEBUG 环境变量的值设置为1。
方法二：
app.debug=True
app.run()
方法三：
app.run( debug=True )
开启调试模式后，修改代码，然后再次运行程序，会发现Flask 会自动重启。
循序渐进
知识要点
9.1　创建与运行Flask程序 9.1.1　在PyCharm Professional Edition中创建Flask项目 9.1.2　创建简单的Flask程序 9.1.3　开启调试模式 9.2　路由 9.2.1　访问路径 9.2.2　路径变量 9.2.3　构造URL
9.2.4　HTTP请求方式
9.3　静态文件与模板生成
9.3.1　静态文件
9.3.2　生成Flask模板
【任务9-1】在网页中显示文本信息与图片
【任务9-2】基于Flask框架设计简单的用户登录程序
9.2.1　访问路径
Flask 程序可以以访问路径的形式设置访问路由，访问路径设置的基本语法格式如下。
@app.route('/path')
其中，path 表示浏览网页时在“http://127.0.0.1:5000/”后面添加的路径值，例如“test”。
【实例9-2】创建Flask 程序，演示访问路径的使用方法
运行结果
运行实例9-2 的代码，在浏览器中输入网址“http://127.0.0.1:5000/”，页面中输出文字 “访问网站首页”。
然后在浏览器中输入网址“http://127.0.0.1:5000/test”，页面中将输出文字“Happy to learn Python”。
9.2.2　路径变量
1．没有限定数据类型
语法格式为：/path/< variable_ame>。
如果希望获取“/path/2”这样的路径参数，就需要使用路径变量。路径变量的基本语法格式如下。
/path/。
为路由设置传递参数有两种方式。
9.2.2　路径变量
2．有限定数据类型
语法格式为：/path/< converter:variable_ame>，即在变量名称前加数据类型。
路径变量前常用的数据类型及作用如表所示。
序号 转换器 作用
1 string 默认选项，接受除了斜杠之外的字符串
2 int 接受整数
3 float 接受浮点数
4 path 和string类似，还可以接受带斜杠的字符串
5 any 匹配任何一种转换器
6 uuid 接受UUID字符串
9.2.2　路径变量
【实例9-3】创建Flask 程序，演示路径变量与限定数据类型的使用方法
运行结果
运行实例9-3 的代码，在浏览器中输入网址“http://127.0.0.1:5000/Python 程序设计”，页面中输出文字“图书名称：Python 程序设计”。
然后在浏览器中输入网址“http://127.0.0.1:5000/user/2”，页面中输出文字“用户ID ：2”。
9.2.3　构造URL
在Flask 程序中给指定函数构造URL 的基本语法格式如下。
url_for(' 函数名称' , 命名参数)
例如：url_for('index')、url_for('profile',username='admin')。
【实例9-4】创建Flask 程序，演示给指定函数构造URL 的方法
运行结果
/
/login
/login id=2
/user/admin
from flask import Flask,url_for
app = Flask(__name__)
@app.route('/')
def index():
pass
@app.route('/login')
def login():
pass
@app.route('/user/')
def profile(username):
pass
with app.test_request_context():
print( url_for('index'))
print( url_for('login'))
print( url_for('login',id='2'))
print( url_for('profile',username='admin'))
9.2.4　HTTP 请求方式
HTTP 访问URL 的请求方式有多种，常用的有GET、POST 等。对于GET 请求，浏览器告诉服务器只获取页面上的信息并发给服务器；对于POST 请求，浏览器告诉服务器想在URL 上发布新信息，并且由于POST 请求只触发一次，服务器必须确保数据已经存储且仅存储一次，这是HTML 表单通常发送数据到服务器使用的方法。
默认情况下，路由只回应GET 请求，但是通过route() 装饰器传递methods 参数可以进行改变，告知服务器客户端想对请求的页面做些什么。
示例如下。
说明
request 对象是一个全局对象，利用它的属性和方法，可以方便地获取从页面传递过来的参数。该对象的method 属性用于返回HTTP 的请求方式，例如POST 和GET。
循序渐进
知识要点
9.1　创建与运行Flask程序 9.1.1　在PyCharm Professional Edition中创建Flask项目 9.1.2　创建简单的Flask程序 9.1.3　开启调试模式 9.2　路由 9.2.1　访问路径 9.2.2　路径变量 9.2.3　构造URL
9.2.4　HTTP请求方式
9.3　静态文件与模板生成
9.3.1　静态文件
9.3.2　生成Flask模板
【任务9-1】在网页中显示文本信息与图片
【任务9-2】基于Flask框架设计简单的用户登录程序
9.3.1　静态文件
Web 程序中常常需要处理静态文件，静态文件主要包括CSS 样式文件、JavaScript 脚本文件、图片文件、字体文件等静态资源。
在Flask 程序中需要使用url_for() 函数并指定相应文件夹名称和静态文件名称。在包或模块所在的文件夹中创建一个名为“static”的文件夹，然后在程序中使用“static”即可访问静态文件。例如引入文件夹“static”中的CSS 样式文件“style.css”的代码如下。
url_for('static' , filename='style.css')
在页面中引入静态文件的示例代码如下。



9.3.2　生成Flask 模板
1．render_template() 方法
使用Jinja 模板时，只需要使用render_template() 方法传入模板文件名和参数名即可，该方法的基本语法格式如下。
render_template( 模板文件名称 , [ 关键字参数] )
其中，第1 个参数是模板文件名，第2 个参数是可选参数，表示键值对象。
示例如下。
return render_template('showText.html')
render_template('11-5.html',name=username)
name=username 是关键字参数，name 表示参数名，与模板文件的变量名相同，username是当前作用域中的变量，表示同名参数的值。
9.3.2　生成Flask 模板
2．Flask 模板的基本结构
（1）` `
（2）{% %}
（3）{# #}
用于装载一个变量，渲染模板的时候，会使用同名参数传进来的值将其替换掉。
例如` name `，变量name 会使用渲染模板时的同名参数name 传进来的值替换。
用于装载一个控制语句。
例如{% if name %}、{% else %}、{% endif %}。
用于添加一个注释，渲染模板的时候会忽视两个“#”中间的值。
例如：{# 用户还没有登录#}。
9.3.2　生成Flask 模板
3．Flask 模板的参数传递
例如：render_template('11-5.html',name=username)。
例如：return render_template('about.html' , **{'user':'username'})。
（1）使用“变量名称=' 变量值'”传递一个参数
（2）使用字典组织多个参数，并且通过两个“*”将其转换成关键字参数传入
9.3.2　生成Flask 模板
4．Flask 模板中的变量定义
（1）在模板中使用set 语句定义全局变量
在Flask 模板内部可以使用set 语句定义全局变量，变量定义之后的代码才可以使用这个变量。在解释性语言中，变量的类型是运行时确定的，因此，这里的变量可以赋任何类型的值。
例如{% set name='xx' %}。
上面的语句创建的是全局变量。
9.3.2　生成Flask 模板
4．Flask 模板中的变量定义
在Flask 模板中，如果想让定义的变量只在某范围内有效，则需要使用with 语句定义局部变量，with 语句中定义的变量，只能在with 语句内部使用，超出范围无效。
（2）使用with 语句定义局部变量
在Flask 模板中，也可以使用with 语句来创建一个局部变量，将set 语句放在with 语句内部，这样创建的变量只在with 语句内有效。
示例如下。
{% with num= 2 %}
` num `
{% endwith %}
{% with %}
{% set num=2 %}
` num `
{% endwith %}
示例如下。
在网页中显示文本信息与图片
【任务9-1】
【任务描述】
（1）在PyCharm 中创建Flask 项目“9-1”，文件夹“9-1”中会自动创建两个子文件夹“static”和“templates”。
（2）在文件夹“templates”中创建两个网页文件，分别命名为“showText.html”和“showImage.html”，在网页中分别显示文本信息和图片。
（3） 在项目“Unit09” 中创建Python 程序文件“t9-1.py”， 在程序中调用render_template() 方法加载网页文件。
【任务9-1】
01
【任务实施】
02
创建Flask 项目“9-1”
创建Python 程序文件“t9-1.py”
【任务9-1】
【任务实施】
创建两个网页文件
03
网页文件“showText.html”的代码
网页文件“showImage.html”的代码
运行Flask 项目
04
在PyCharm 窗口中选择【运行】菜单，在弹出的下拉菜单中选择【运行】命令。在弹出的【运行】对话框中选择【t9-1】选项，程序文件“t9-1.py”开始运行。
先在浏览器中输入网址“http://127.0.0.1:5000/text”，页面中输出文字“阳光明媚、春意盎然、万象更新”和“The sun is shining, the spring is full of life and everything is renewed”。然后在浏览器中输入网址“http://127.0.0.1:5000/image”，页面中显示一张图片。
【实例9-5】
【实例9-5】创建Flask 程序，演示模板的基本结构
先在浏览器中输入网址“http://127.0.0.1:5000/user”，页面中输出文字“请登录！”。
然后在浏览器中输入网址“http://127.0.0.1:5000/user/admin”，页面中输出文字“当前用户：admin”。
实例9-5 的代码如下所示
网页文件“e9-5.html”的代码如下所示
运行实例9-5 的代码
【实例9-5】
【实例9-6】创建Flask 程序，演示在模板中使用set 和with 语句定义变量的方法
with 语句前面的用户名：张三
第1 个with 语句里面的用户名：李四
第2 个with 语句里面的用户名：王五
with 语句后面的用户名：张三
实例9-6 的代码如下所示
网页文件“e9-6.html”的代码如下所示
实例9-6 代码的运行结果如下
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/show')
def showVariable():
return render_template('e9-6.html')
if __name__ == '__main__':
app.run()
基于Flask 框架设计简单的用户登录程序
【任务9-2】
【任务描述】
（1）在PyCharm 中创建Flask 项目“9-2”，文件夹“9-2”中会自动创建两个子文件夹“static”和“templates”。
（2）在文件夹“templates”中创建一个网页文件，将其命名为“9-2.html”，在该网页中设置用户登录界面，用户登录界面主要包括输入用户名和密码的两个文本输入框、【提交】和【重置】两个按钮。
（3）在项目“9-2”中创建Python 程序文件“t9-2.py”。在程序中首先判断HTTP 请求方式，如果浏览器的请求方式为POST，先获取表单输入框中的用户名和密码，如果用户名和密码都正确，则使用页面跳转方法redirect() 打开百度首页，否则加载网页“9-2.html”，并显示“登录失败”的提示信息；如果浏览器的请求方式为GET，则在程序中调用render_template() 方法直接加载网页“9-2.html”，显示用户登录界面，等待用户输入用户名和密码。
【任务9-2】
01
【任务实施】
02
创建Flask 项目“9-2”
创建Python 程序文件“t9-2.py”
03
编写Python 代码
【任务9-2】
【任务实施】
创建网页文件“9-2.html”
04
运行Flask 项目
05
在PyCharm 窗口中选择【运行】菜单，在弹出的下拉菜单中选择【运行】命令。在弹出的【运行】对话框中选择【t9-2】选项，程序文件“t9-2.py”开始运行。
首先在浏览器中输入网址“http://127.0.0.1:5000/login”，页面中显示用户登录界面，在“用户名”输入框中输入“admin”，在“密码”输入框中输入“123456”，如图9-8 所示；然后单击【提交】按钮，如果登录失败，则在页面中会显示“登录失败”的提示文字，如果成功登录，则会打开百度首页。
THANKS

展开更多......

收起↑