Python程序设计任务驱动式教程（微课版）教案 单元11 基于Flask框架的Web程序设计（电子教案）.docx

PAGE15

单元11基于Flask框架的Web程序设计

【任务11-1】在网页中显示文本信息与展示图片

【任务描述】

（1）在PyCharm集成开发环境中创建Flask项目11-1，并在文件夹11-1中自动创建两个子文件夹“static”和“templates”。

（2）在文件夹“templates”中创建2个网页文件，分别命名为“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”的代码编辑窗口，

在该代码编辑窗口输入程序代码。

fromflaskimportFlask,render_template

app=Flask(__name__)

@app.route(/text)

defshowText():

returnrender_template(showText.html)

@app.route(/image)

defshowImage():

returnrender_template(showImage.html)

if__name__==__main__:

app.run()

3．创建2个网页文件

在文件夹“templates”中创建2个网页文件，分别命名为“showText.html”和“showImage.html”。

网页文件showText.html的代码如下所示。

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

title浏览文本内容/title

/head

body

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

pThesunisshining,thespringisfulloflifeandeverythingisrenewed/p

/body

/html

网页文件showImage.html的代码如下所示。

!DOCTYPEhtml

htmllang=en

head

metacharset=UTF-8

title浏览图片/title

/head

body

imgsrc={{url_for(static,filename=hh.jpg)}}width=400height=400alt=title=/

/body

/html

单击工具栏中【保存】按钮，分别保存程序文件11-1.py、2个网页文件“showText.html”和“showImage.html”。

4．运行Flask项目

在PyCharm主窗口选择【Run】菜单，在弹出的下拉菜单中选择【Run】菜单项。

在弹出的【Run】对话框中选择“11-1”选项，程序“11-1.py”开始运行。

先在浏览器中，输入网址“:5000/text”，则在页面中输出文字“阳光明媚、春意盎然、万象更新”和“Thesunisshining,thespringisfulloflifeandeverythingisrenewed”。

然后在浏览器中，输入网址“:5000/image”，则在页面中展示一张图片。

图11-9在浏览器中输入网址“:5000/image”显示的网页效果

【任务11-2】基于Flask框架设计简单用户登录程序

【任务描述】

（1）在PyCharm集成开发环境中创建Flask项目11-2，并在文件夹11-2中自动创建两个子文件夹“static”和“templates”。

（2）在文件夹“templates”中创建个网页文件，命名为“11-2.html”，在该网页中设置用户登录界面，登录界面主要包括输入用户名和密码的两个文本输入框，【提交】和【重置】两个按钮。

（3）在项目11-2创建Python程序文件“11-2.py”。程序中首先判断HTTP请求方式，如果浏览器请求方式为POST，首先获取表单输入框中的用户名和密码，如果用户名和密码都正确，则使用页面跳转方法redirect()，打开百度首页，否则加载网页11-2.html，并在该页中显示“登录失败”的提示信息；如果浏览器的请求为GET请求，则在程序中调用render