资源简介

单元11 基于Flask框架的Web程序设计
课程名称 Python程序设计任务驱动式教程 章名 基于Flask框架的Web程序设计
教学内容 基于Flask框架的Web程序设计 课时 4
项目性质 □演示性 □验证性 □设计性 √综合性
授课班级 授课日期 授课地点
教学目标 了解Flask的扩展包、Flask的安装 掌握创建与运行Flask程序的方法 掌握在Flask程序中定义路由的方法 掌握静态文件与模板生成
教学内容 创建与运行Flask程序 路由 静态文件与模板生成
教学重点 应用Flask框架进行Web程序设计
教学难点 应用Flask框架进行Web程序设计
教学准备 装有Python的计算机 教学课件PPT 教材：《Python程序设计任务驱动式教程（微课版）》
作业设计
11
教学过程
教学环节 教学内容与过程 （教学内容、教学方法、组织形式、教学手段）
课前组织 做好上课前的各项准备工作（打开计算机、打开课件、打开软件、打开授课计划、教案等），吸引学生注意力。
课程说明 【课前说明】 分别从Flask的扩展包、Flask的安装等知识点进行初步的了解。 【目的】 使学生从了解本节课的学习目标、学习重点、考评方式等方面明确课程学习的要求和目标。
课程内容描述 11.1 创建与运行Flask程序 11.1.1 在PyCharm中创建Flask项目 （1）成功启动PyCharm，进入集成开发环境。 （2）在PyCharm主窗口选择菜单【File】，在弹出的下拉菜单中选择【New Project】，打开【New Project】对话框，该对话框左侧列出很多项目模板，这里选择“Flask”，在“Location”文本框中输入Flask项目的存放位置和项目名称，例如“D:\PycharmProject\Unit11\11-1”，且完成其他的设置，如图所示。 也可以单击文本框右侧的按钮，在弹出的【Select Base Directory】对话框中直接选择项目存放位置，例如“D:\PycharmProject\Unit11”，然后单击【OK】按钮返回【New Project】对话框。 【New Project】对话框 Flask项目的存放位置、项目名称等设置都完成后，在【New Project】对话框中单击【Create】按钮，在弹出的【Open Project】对话框中单击【New Window】按钮，如图所示，即在新的窗口中打开创建的Flask项目。 在【Open Project】对话框中单击【New Window】按钮 这时会打开一个新的PyCharm窗口，接着完成后续工作，例如创建虚拟环境、激活环境等，【Creating Virtual Environment】对话框如图所示。 【Creating Virtual Environment】对话框 然后安装Flask相关文件与配置Flask项目，【Ensuring Flask is installed】对话框如图所示。 【Ensuring Flask is installed】对话框 Flask相关文件安装与Flask项目配置完成后，Pycharm将自动生成一个精简的Flask项目模板，Flask项目模板与app.py文件的代码编辑窗口如图所示。 Flask项目模板与app.py文件的代码编辑窗口 其中，app.py文件是入口程序，static文件夹用于存放CSS样式文件、图片文件等静态文件，templates文件夹是模板存放的位置，即存放网页文件的文件夹。 11.1.2 创建简单的Flask程序 Flask程序也是Python程序，扩展名为“.py”。 【实例11-1】创建一个简单的Flask程序，输出“Happy to learn Python” 实例11-1的代码如下所示。 from flask import Flask #导入Flask app = Flask(__name__) #创建Flask对象 @app.route('/') def index(): return "Happy to learn Python" if __name__ == '__main__': app.run() 实例11-1的运行结果如图所示。 实例11-1的运行结果 然后在浏览器地址栏中输入网址“http://127.0.0.1:5000/”，页面中输出“Happy to learn Python”，如图所示。 页面中输出“Happy to learn Python” 实例11-1中创建Flask的实例的代码为：Flask(__name__)，这里的参数使用“__name__”。 代码@app.route('/')使用route()装饰器告诉Flask什么样的URL能够触发调用函数index()，该函数返回想要显示在浏览器中的信息。 代码app.run()调用方法run()来让应用程序运行在本地服务器上，其中“if __name__ == '__main__':”是确保服务器在该程序被Python解释器直接执行的时候才会运行，而不是作为模块导入的时候执行。 如果调用方法run()时需要指定服务器IP地址和端口号，则可以添加服务器IP地址和端口号参数，代码为app.run(host='127.0.0.1'，port=5000)。 11.1.3 开启调试模式 虽然run()方法适用于启动本地的服务器，但是每次程序代码被修改后都需要手动重启，即调用方法run()让应用程序再一次运行时不会自动重新载入修改后的内容。 Flask内置了调试模式，可以自动重载代码并显示调试信息，这需要开启调试模式，有多种方法可以开启调试模式。 方法一：将FLASK_DEBUG环境变量的值设置为1。 方法二：使用如下代码。 app.debug=True app.run() 方法三：使用如下代码。 app.run( debug=True ) 这时候再次修改代码，然后再次运行程序，会发现Flask会自动重载代码。 11.2 路由 客户端（如Web浏览器）把请求发送给Web服务器，Web服务器再把请求发送给Flask程序实例。程序实例需要知道对每个URL请求运行哪些代码，所以需要处理URL到Python函数的映射关系。处理URL和函数之间关系的代码称为路由。 在Flask程序中定义路由的最简便的方式之一是使用程序实例提供的app.route()装饰器，把修饰的函数注册为路由。修饰器是Python的标准特性，可以使用不同的方式修改函数的行为，常用方法是使用修饰器把函数注册为事件的处理程序。 11.2.1 访问路径 Flask程序可以以访问路径形式设置访问路由，设置访问路径的基本语法格式如下。 @app.route('/path') 其中，path表示浏览网页时在“http://127.0.0.1:5000/”后面添加的路径值，例如“test”。 【实例11-2】创建Flask程序，演示访问路径的使用 实例11-2的代码如下所示。 from flask import Flask #导入Flask app = Flask(__name__) #创建Flask对象 @app.route('/') def index(): return "访问网站首页" @app.route('/test') def printInfo(): return "Happy to learn Python" if __name__ == '__main__': app.run() 运行实例11-2的代码，先在浏览器地址栏中输入网址“http://127.0.0.1:5000/”，则在页面中输出文字“访问网站首页”。 然后在浏览器地址栏中输入网址“http://127.0.0.1:5000/test”，则在页面中输出文字“Happy to learn Python”。 11.2.2 路径变量 如果希望获取“/path/2”这样的路径参数，就需要使用路径变量。路径变量的基本语法格式如下。 /path/ 路由设置传递参数有2种方式。 1．没有限定类型 语法格式为：/path/< variable_ame>。 2．限定数据类型 语法格式为：/path/< converter:variable_ame>，即在变量名称前加数据类型。 路径变量前常使用的数据类型如表所示。 路径变量前常使用的数据类型 序号数据类型作用1string默认选项，接受除了斜杠之外的字符串2int接受整数3float接受浮点数4path和string类似，还可以接受带斜杠的字符串5any匹配任何一种转换器6uuid接受UUID字符串
【实例11-3】创建Flask程序，演示路径变量与限定数据类型的使用 实例11-3的代码如下所示。 from flask import Flask #导入Flask app = Flask(__name__) #创建Flask对象 @app.route('/book/') def book_info(book_name): return "图书名称："+ book_name @app.route('/user/') def user_info(user_id): return "用户ID：" + str(user_id) if __name__ == '__main__': app.run() 运行实例11-3的代码，先在浏览器地址栏中输入网址“http://127.0.0.1:5000/Python程序设计”，则在页面中输出文字“图书名称：Python程序设计”。 然后在浏览器地址栏中输入网址“http://127.0.0.1:5000/user/2”，则在页面中输出文字“用户ID：2”。 11.2.3 构造URL 在Flask程序中给指定函数构造URL的基本语法格式如下。 url_for('函数名称' , 命名参数) 例如：url_for('index')、url_for('profile',username='admin')。 【实例11-4】创建Flask程序，演示给指定函数构造URL的方法 实例11-4的代码如下所示。 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')) 实例11-4的运行结果如下。 / /login /login id=2 /user/admin 11.2.4 HTTP方法 HTTP访问URL的方法有多种，常用的有GET、POST等请求方法。对于GET请求，浏览器告诉服务器只获取页面上的信息并发给服务器；对于POST请求，浏览器告诉服务器想在URL上发布新信息，并且由于POST请求只触发一次，服务器必须确保数据已经存储且仅存储一次，这是HTML表单通常发送数据到服务器的方法。 默认情况下，路由只回应GET请求，但是通过route()装饰器传递methods参数可以进行改变，告知服务器客户端想对请求的页面做些什么。 例如： from flask import request @app.route("/login", methods=['GET', 'POST']) def login(): if request.method == 'POST': pass else: pass Request对象是一个全局对象，利用它的属性和方法，可以方便地获取从页面传递过来的参数。该对象的method属性会返回HTTP方法的请求方式，例如POST或GET。 11.3 静态文件与模板生成 11.3.1 静态文件 Web程序中常常需要处理静态文件，静态文件主要包括CSS样式文件、JavaScript脚本文件、图片文件、字体文件等静态资源。 在Flask程序中需要使用url_for()函数并指定static文件夹名称和文件名称。在包中或模块所在的文件夹创建一个名为static的文件夹，然后在程序中使用“static”即可访问。例如引入文件夹static中的CSS样式文件style.css的代码如下。 url_for('static' , filename='style.css') 在页面中引入静态文件的示例代码如下。 11.3.2 Flask模板生成 Flask默认使用Jinja2作为模板，Flask会自动配置Jinja2模板，所以我们不需要进行其他配置。默认情况下，Flask程序的模板文件需要放在templates文件夹下。Jinja2模板是一个简单的纯文本文件，一般用HTML来书写。 1．render_template()方法 使用Jinja2模板时，只需要使用render_template()方法传入模板文件名和参数名即可，该方法的基本语法格式如下。 render_template( 模板文件名称 , [关键字参数] ) 其中，第1个参数是模板的文件名，第2个参数是可选参数，表示键值对象。 例如： return render_template('showText.html') render_template('11-5.html',name=username) 参数“name=username”是关键字参数，其中name表示参数名，与模板文件的变量同名；username是当前作用域中的变量，表示同名参数的值。 2．Flask模板的基本结构 Flask模板的基本结构有以下几种。 （1）` `.``.``.` `用于装载变量，模板渲染的时候，会使用同名参数传进来的值进行替换。 例如` name `，这里变量name使用模板渲染时同名参数name传进来的值进行替换。 （2）{% ... %}用于装载控制语句。 例如{% if name %}、{% else %}、{% endif %}。 （3）{# ... #}用于添加注释，模板渲染的时候会忽视这中间的值。 例如{#用户还没有登录#}。 3．Flask模板的参数传递 模板渲染时有以下两种传递参数的方式。 （1）使用“变量名称='变量值'”传递一个参数。 例如： render_template('11-5.html',name=username) （2）使用字典组织多个参数，并且加两个“*”转换成关键字参数传入。 例如： return render_template('about.html' , **{'user':'username'}) 4．Flask模板中的变量定义 （1）在模板中使用set语句定义全局变量。 在Flask模板内部可以使用set语句定义全局变量。只有定义了某个变量，变量定义位置之后的代码才可以使用该变量。在解释性语言中，变量的类型是运行时确定的，因此，这里的变量可以赋任何类型的值。 例如： {% set name='xx' %} 上面的语句创建的是全局变量，在定义之后的页面文件中都可以访问。 （2）使用with语句定义局部变量。 在Flask模板中，如果想让定义的变量只在部分作用域内有效，则需要使用with语句定义。在with语句中定义的变量只能在with语句内部使用，超出范围无效。 例如： {% with num= 2 %} ` num ` {% endwith %} 这样，num变量就只能在with语句内部使用。 在Flask模板中，也可以使用with语句来创建一个内部的作用域，将set语句放在with语句内部，这样创建的变量也只在with代码块中才有效。 例如： {% with %} {% set num=2 %} ` num ` {% endwith %} 【任务11-1】在网页中显示文本信息与展示图片 【任务描述】 （1）在PyCharm集成开发环境中创建Flask项目11-1，并在文件夹11-1中自动创建两个子文件夹static和templates。 （2）在文件夹templates中创建两个网页文件，分别命名为“showText.html”和“showImage. html”，网页中分别显示文本信息和展示图片。 （3）在项目Unit11中创建Python程序文件11-1.py，在程序中调用render_
template()方法加载网页文件。 【任务实施】 1．创建Flask项目11-1 成功启动PyCharm后，在指定位置“D:\PycharmProject\Unit11”创建Flask项目11-1。 2．创建Python程序文件11-1.py 在Flask项目11-1中新建Python程序文件11-1.py，然后在PyCharm主窗口打开程序文件11-1.py的代码编辑窗口，在该代码编辑窗口输入程序代码，程序文件11-1.py的代码如下所示。 from flask import Flask, render_template app = Flask(__name__) @app.route('/text') def showText(): return render_template('showText.html') @app.route('/image') def showImage(): return render_template('showImage.html') if __name__ == '__main__': app.run() 3．创建两个网页文件 在文件夹templates中创建两个网页文件，分别命名为“showText.html”和“showImage.html”。文件夹11-1中建立的子文件夹和网页文件如图所示。 文件夹11-1中建立的子文件夹和网页文件 网页文件showText.html的代码如下所示。

阳光明媚、春意盎然、万象更新

The sun is shining, the spring is full of life and everything is renewed

网页文件showImage.html的代码如下所示。 单击工具栏中的【保存】按钮，分别保存程序文件11-1.py以及网页文件showText.html和showImage.html。 4．运行Flask项目 在PyCharm主窗口选择【Run】菜单，在弹出的下拉菜单中选择【Run】。在弹出的【Run】对话框中选择“11-1”选项，程序文件11-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”，则在页面中展示一张图片，网页效果如图所示。 网页效果 【实例11-5】创建Flask程序，演示模板的基本结构 实例11-5的代码如下所示。 from flask import Flask,render_template app = Flask(__name__) #创建Flask对象 @app.route('/user/') @app.route('/user/') def user(username=None): return render_template('p11-5.html',name=username) if __name__ == '__main__': app.run() 网页文件p11-5.html的代码如下所示。 {% if name %}

当前用户：` name `

{% else %} {#用户还没有登录#}

请登录！

{% endif %} 运行实例11-5的代码，先在浏览器地址栏中输入网址“http://127.0.0.1:5000/user”，则在页面中输出文字“请登录！”。 然后在浏览器地址栏中输入网址“http://127.0.0.1:5000/user/admin”，则在页面中输出文字“当前用户：admin”。 【实例11-6】创建Flask程序，演示模板中使用set和with语句定义变量 实例11-6的代码如下所示。 from flask import Flask, render_template app = Flask(__name__) @app.route('/show') def showVariable(): return render_template('p11-6.html') if __name__ == '__main__': app.run() 网页文件p11-6.html的代码如电子活页11-1所示。 实例11-6的运行结果如下。 with语句前面的用户名：张三 第1个with语句里面的用户名：李四 第2个with语句里面的用户名：王五 with语句后面的用户名：张三 【任务11-2】基于Flask框架设计简单用户登录程序 【任务描述】 （1）在PyCharm集成开发环境中创建Flask项目11-2，并在文件夹11-2中自动创建两个子文件夹static和templates。 （2）在文件夹templates中创建一个网页文件，命名为“11-2.html”，在该网页中设置用户登录界面，用户登录界面主要包括输入用户名和密码的两个文本框，以及【提交】和【重置】两个按钮。 （3）在Flask项目11-2中创建Python程序文件11-2.py。程序中会判断HTTP请求方式，如果浏览器请求方式为POST，则获取表单文本框中的用户名和密码，若用户名和密码都正确，则使用页面跳转方法redirect()打开百度首页，否则加载网页11-2.html，并在该页面中显示“登录失败”的提示信息；如果浏览器请求方式为GET，则在程序中调用render_template()方法直接加载网页11-2.html，显示用户登录界面，等待用户输入用户名和密码。 【任务实施】 1．创建Flask项目11-2 成功启动PyCharm后，在指定位置“D:\PycharmProject\Unit11”创建Flask项目11-2。 2．创建Python程序文件11-2.py 在Flask项目11-2中新建Python程序文件11-2.py，在PyCharm主窗口打开程序文件11-2.py的代码编辑窗口。 3．编写Python程序代码 在新建文件11-2.py的代码编辑窗口输入程序代码，程序文件11-2.py的代码如下所示。 from flask import Flask, request, render_template, redirect app = Flask(__name__) # 绑定访问地址127.0.0.1:5000/login @app.route("/login", methods=['GET', 'POST']) def login(): if request.method == 'POST': username = request.form['username'] password = request.form['password'] if username == "admin" and password == "123456": return redirect("http://www.") else: text = "登录失败" return render_template('11-2.html', message=text) return render_template('11-2.html') if __name__ == '__main__': app.run(debug=True) 4．创建网页文件11-2.html 在文件夹11-2中的子文件夹templates中创建一个网页文件，命名为“11-2.html”。网页文件11-2.html的代码如电子活页11-2所示。 单击工具栏中的【保存】按钮，保存程序文件11-2.py和网页文件11-2.html。 5．运行Flask项目 在PyCharm主窗口选择【Run】菜单，在弹出的下拉菜单中选择【Run】。在弹出的【Run】对话框中选择“11-2”选项，程序文件11-2.py开始运行。 首先在浏览器地址栏中输入网址“http://127.0.0.1:5000/login”，则在页面显示用户登录界面，在“用户名”文本框中输入“admin”，在“密码”文本框中输入“123456”，如图所示。然后单击【提交】按钮，如果登录失败，则页面中会显示“登录失败”的提示文字；如果登录成功，则会打开百度首页。 在用户登录界面输入用户名和密码
总结评价 本单元主要学习创建与运行Flask程序、路由、静态文件与模板生成。

展开更多......

收起↑