PythonWeb开发技术与应用（Flask版）（微课版） 课件全套 第1-7章 Flask基础 - 实例：简易博客系统

Flask课程——第一章初探Flask了解Web开发的基础概念完成Flask开发环境的搭建了解浏览网页的基本原理学习目标教学重点教学难点重点掌握Flask框架，知道它是什么，我们为什么要用它，我们怎么去使用它。教学难点难点是理解Web开发基础，框架的概念，应用的架构，模板引擎，表单处理等等内容。教学重难点简单Web程序认识Flask框架Flask的安装和配置请求与响应小结认识Flask框架Scenarioimport如今，我们可以看到各种各样的Web应用，但大家不知道如何搭建，本次课程学习简洁高效的Flask框架，构建Web应用01认识Flask框架Flask框架是什么？Flask是一个基于Python的轻量级Web应用框架，它旨在帮助开发者快速构建简单而强大的Web应用程序。与传统的重量级框架相比，Flask提供了更大的灵活性，使开发者能够根据项目的需求进行定制。2010Flask诞生早期阶段扩展和丰富生态系统python社区支持持续更新发展历程201320152015至今01为什么要有Flask框架?问题思考先说结论，为了让开发者在面对中小型项目能有更好的选择。python常用的web开发框架有Django，Django功能大而全，Flask只包含基本的配置,Django的一站式解决的思路，能让开发者不用在开发之前就在选择应用的基础设施上花费大量时间。Django有模板，表单，路由，基本的数据库管理等等内建功能。与之相反，Flask只是一个内核，默认依赖于2个外部库：Jinja2模板引擎和WSGI工具集--Werkzeug,flask的使用特点是基本所有的工具使用都依赖于导入的形式去扩展，flask只保留了web开发的核心功能。flask性能上基本满足一般web开发的需求,并且灵活性以及可扩展性上要优于其他web框架,对各种数据库的契合度都非常高​在真实的生产环境下，小项目开发快，大项目设计灵活，大家以后开发肯定是要按需求来思考什么框架会更高效。Flask的安装和配置02首先我们要会安装python的环境，然后在编译器里面安装flask相关的依赖先去官网下python环境，如下图所示。Flask的安装和配置找到对应版本，如下图所示。Flask的安装和配置下载完成后打开安装包进行安装，如图下图所示。安装之前勾选“AddPython3.7toPATH”复选框，以便Python自动配置环境变量。Flask的安装和配置按“Win+R”组合键打开“运行”对话框，输入“cmd”，打开命令提示符窗口输入pip-V命令来查看python版本及pip版本，如下图所示。Flask的安装和配置

使用pip方式来安装Flask，将镜像源配置成阿里云，然后再命令提示符窗口输入命令

pipinstallflask==1.1.1jinja2==2.11.3itsdangerous==2.0.1markupsafe==1.1.1werkzeug==0.16.1进行下载，成功的话如下图所示。Flask的安装和配置python环境配置和pycharm环境配置好了后，就可以创建Flask项目，如下图所示。创建Flask项目

运行项目，然后点击运行的链接就可以在浏览器访问了，如下图所示。创建Flask项目简单Web程序03一个简单Web程序Flask项目创建之后会包含一个简单的Web程序，本节讲解这个简单的项目都包含了什么内容，这些内容有哪些作用。1．应用初始化所有Flask程序在创建时都必须先创建一个应用实例，也就是进行应用初始化。对应的程序代码如下。fromflaskimportFlask#应用的初始化app=Flask(__name__)应用实例创建之后，才可以对路由及视图函数进行绑定。此处的“__name__”用于获取当前代码文件的文件名。一个简单Web程序2.运行应用

程序最后的代码用于启动服务器，运行应用实例。对应代码如下。#启动服务器if__name__=='__main__':app.run(debug=True)此处的“__name__=='__main__'”用于判断当前文件是否直接被运行。如果需要开启调试模式，可以在app.run()方法中添加debug参数。一个简单Web程序3．路由与视图在用户使用浏览器访问网页的过程中，浏览器首先会发送一个请求到服务器，服务器接收到请求之后，会将请求转交给Flask进行处理。Flask会对用户所访问的URL进行解析，然后找到相应的响应内容，将其返回到浏览器。路由用于使Flask知道URL对应的内容在哪里。回到运行应用之前的代码，可以看到有一个函数被装饰器app.route所装饰，这个装饰器用于定义路由，确定URL与Python函数之间的映射。对应代码如下。@app.route('/')defhello_world():return'HelloWorld!'被路由装饰器所装饰的函数便是视图函数，用于返回用户请求URL相应的响应内容。此处返回的响应内容可以是简单的字符串，也可以是复杂的HTML页面。一个简单Web程序我们平时访问的Url链接会有很多地方时可变的，大家可以动手实现书上拿Github用户url为例的路由绑定效果，更好的体会一下Flask路由的神奇。tips：Flask的路由不止可以返回字符串，还可以返回重定向，html页面渲染，返回文件，返回json等这些内容，大家感兴趣可以去尝试一下。请求与响应04请求和响应浏览器向服务器发送了“请求”，服务器处理后给浏览器返回了“响应”。这样一个简单的流程，其实就是HTTP的核心。HTTP是一个简单的“请求—响应”协议，其性质为无状态协议，对事务处理没有记忆能力。客户端浏览器向服务器发出的一次请求，就是request请求。Q：浏览器提交的请求中包含了什么？A：包含URL，还包含其他数据，例如用户使用的系统与浏览器版本、语言、浏览器所支持的编码、格式等。课堂练习Requestrequest属性的用法就是request.你要展示的属性名称，常用的属性如下表所示参数数据类型解释full_pathstrURL中的访问路径，包含数据remote_addrstr浏览器的IP地址urlstr请求的完整URLbase_urlstr请求的URL，不含数据url_rootstr请求的根URL，不含路径user_agentstr浏览器及操作系统信息argsdict请求中提交表单的GET参数formdict请求中提交表单的POST参数filesdict请求提交所上传的文件cookiesdict浏览器Cookie数据remote_addrstr浏览器的IP地址状态响应状态响应是指在每一次HTTP交互中，返回响应包中包含的状态码，是服务器发送给浏览器的内容里面包含的其中一个内容。Q：常见的状态响应码有哪些？A：在访问用户页面时，找不到特定的用户页，返回404状态码；又或者在访问应用服务时，后端服务出错，返回500状态码。这些都是常见的状态响应。即使正常访问网页，没有产生错误，也会返回200状态码。课堂练习状态响应常见的状态响应码如下表所示状态码信息解释200OK一切正常301MovedPermanently重定向400BadRequest客户端请求错误403Forbidden无权限访问404NotFound找不到页面405MethodNotAllowd客户端使用了不支持的提交方法500InternalServerError服务器端代码出错502BadGateway代理与服务器之间访问出错状态响应在访问网页过程中，每一次请求的响应状态码都可以在浏览器的开发者工具（在Chrome浏览器中可以按“F12”键打开）中观测到，如下图所示。CookieHTTP每一次的交互都是独立的，无法存储状态数据。为了解决这个问题，Cookie出现了Cookie需要浏览器的支持，如果浏览器不支持Cookie存储，那么便无法记录状态数据。而且，Cookie的存储容量有限，不同的浏览器有不同的存储大小，但一般不会超过4KB。因此，Cookie只能存储少量数据，如用户的一些偏好设置、临时信息等。Q：Cookie存储的数据会丢失吗？A：会丢失，有多种可能1、过期时间，因为cookie可以设置过期时间，超过就自动删除。2、浏览器设置了不保存cookie。3、清除了浏览痕迹课堂练习SessionSession与Cookie的作用相似，都用于存储状态数据。不同的是，Session只能在服务器端进行管理，用户在本地无法对其进行修改，因而安全性较高。Session一般用于存储用户登录状态等对安全性要求较高的信息。小结05课堂小结1、本章主要讲解了Flask开发环境的搭建，简单的应用实例，以及请求与响应的基本操作。2、环境搭建主要是注意安装Flask的版本，以及python环境，避免版本不同，无法按照书上的教材来学习。3、讲述了请求与响应的一些基本内容，简述了Http的一些概念，以及常见的请求，请求状态码，存储数据的cookie和session。课后作业今日作业阅读拓展资料课后习题1,2,3谢谢聆听Flask课程——第二章Web前端基础了解HTML、CSS、JavaScript的作用掌握构建HTML表单的方法掌握Bootstrap网格系统的使用方法学习目标Bootstrap前端框架Web前端概述Html基础小结Web前端概述Scenarioimport泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西01Web前端概述Web前端是什么？Web前端指的是构成网页用户界面的各种可见部分，即用户在浏览器中直接与之交互的内容。前端开发涉及到使用HTML、CSS和JavaScript等技术来创建和呈现网页的外观、布局和交互效果。HTMLCSSJavaScriptHTML是一种标记语言，用于创建网页的结构和内容。通过使用各种标签（例如<p>、<h1>、<img>等），开发者可以定义标题、段落、图像、链接等各种元素。HTML提供了文档的语义结构，让浏览器和搜索引擎能够正确地解释和显示内容。CSS用于定义网页的样式、布局和外观。通过选择器和属性，开发者可以控制元素的颜色、字体、间距、边框等样式。CSS的分离性允许开发者将样式与内容分开，从而使样式的修改和维护更加灵活。JavaScript是一种脚本语言，用于为网页添加交互性和动态效果。开发者可以使用JavaScript处理用户输入、更改页面内容、创建动画、请求服务器数据等。JavaScript使得网页可以根据用户行为做出响应，从而实现更丰富的用户体验。概念解释Html基础02基本语法“<xxx></xxx>”为“标签”语句。“<xxxattr1='test'attr2='test'></xxx>”标签语句中的“attr1”项目与“attr2”项目为其中的“属性”。“<xxx>test</xxx>”标签语句中的“test”是标签对所包含的“内容”。后面从以下几个方面去讲述Html语法1、网页标题2、文本、图像、链接3、表格4、表单5、CSS6、JavaScript基本语法1、网页标题每打开一个网页，浏览器的标题栏文字都会发生变化，而定义这一项内容的标签便是<title>标签。<title>标签用于设置网页的标题。具体代码和效果图如下所示。基本语法2.1、文本每打开一个页面，就有文字映入眼帘，这些文字通常是用文本标签来显示出来的。常用HTML文本标签标签有许多，如下表所示。标签描述示例用法<p>定义段落<p>这是一个段落。</p><a>定义链接，用于跳转到其他页面<ahref="">示例链接</a><ul>定义无序列表<ul><li>条目1</li><li>条目2</li></ul><ol>定义有序列表<ol><li>第一步</li><li>第二步</li></ol><li>列表项，用于包裹每个条目<ul><li>苹果</li><li>橙子</li></ul><br>换行标签这是第一行<br>这是第二行<hr>水平分割线<p>段落内容</p><hr><p>分割线后的内容</p><span>行内元素容器，用于设置样式或添加脚本<p>这是一个<spanstyle="color:blue;">蓝色</span>文本。</p>基本语法代码和展示的效果如下图所示。<!--文本演示--><h1>这是一级标题文本</h1><h2>这是二级标题文本</h2><h3>这是三级标题文本</h3><h4>这是四级标题文本</h4><h5>这是五级标题文本</h5><p>这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。</p><!--<br/>为换行标签--><p>这是一个段落。这是一个段落。这是一个段落。<br/>这是一个段落。这是一个段落。这是一个段落。<br/>这是一个段落。</p>基本语法2.2、图像我们在浏览网页的时候也会发现有许多图片，以及视频等，常用的图像标签及其属性如下表所示。标签描述示例用法<img>嵌入图像<imgsrc="image.jpg"alt="描述性文本">src图像文件的URL<imgsrc="image.jpg"...>alt图像的替代文本，图像无法加载或无法显示时显示<img...alt="替代文本">width和height图像的显示宽度和高度（像素为单位）<img...width="300"height="200"><video>嵌入视频<videocontrols><sourcesrc="video.mp4"type="video/mp4">...</video>controls显示视频播放器控制条<videocontrols>...</video><source>指定不同格式的视频源文件<sourcesrc="video.mp4"type="video/mp4">基本语法图片和视频的用法有使用网络链接和本地静态链接两种用法，这里用本地的方式来给大家演示。首先先创建“static”目录，用于存放静态资源（如图像、视频等），如下图所示。基本语法然后随意取一幅图像（常见的JPG、PNG格式文件）放入“static”目录，如下图所示。向<body>标签对内添加以下代码。<!--图像演示--><!--alt为文字描述，在图像加载失败时显示--><imgalt="这是一张图像"src="static/img.png">基本语法效果如下图所示。基本语法2.3、链接链接在互联网世界中非常重要，它们构建了网页和网站之间的关系，使用户能够轻松地浏览和访问不同的内容。链接使得整个互联网成为一个相互关联的信息网络，从而实现了信息的快速传递和共享。无论是在网页上还是在应用程序中，链接都是连接不同资源的基本方式之一。链接标签（<a>）与图像标签（<img>）类似，都需要添加属性以指向相应的资源，而链接标签使用“href”属性来定义跳转的链接。基本语法演示代码如下，效果图如右图所示。<!--链接演示--><ahref="">百度</a><br/><ahref=""target="_blank">百度（新窗口打开）</a><br/><ahref="/"><!--图像链接--><imgalt="github"src="static/img.png"></a>基本语法3、表格表格通常用于数据展示页，如后台用户信息展示，相对前面的链接来说更为复杂。表格由多个标签组成，最简单的表格包含<table>（表格标签）、<tr>（表格行标签）、<th>（表格标题列标签）、<td>（表格列标签）基本语法演示代码如下所示。效果图如右图所示。<!--表格演示--><table><tr><th>id</th><th>用户名</th><th>邮箱</th><th>操作</th></tr><tr><td>1</td><td>John</td><td>john@</td><td><ahref="#">编辑</a><ahref="#">删除</a></td></tr></table>基本语法4、表单表单（Form）是在计算机编程和互联网领域中，用于收集和提交用户输入数据的一种交互式元素。通过表单，用户可以向网站或应用程序提供各种类型的信息，如文本、数字、选择、日期等，然后将这些数据发送给服务器进行处理或存储。一个典型的表单通常由以下几个主要组成部分构成：输入字段（InputFields）：输入字段用于接收用户输入的数据。这些字段可以包括文本框、密码框、单选按钮、复选框、下拉菜单、日期选择器等。标签（Labels）：标签用于描述每个输入字段的用途或要求。它们帮助用户理解应该在每个字段中输入什么类型的信息。按钮（Buttons）：表单通常包含提交按钮，用户点击该按钮以将填写好的数据提交给服务器。还可能包含重置按钮，用于清除表单中的所有数据。动作（Action）：表单需要指定一个处理数据的目标，即数据提交到服务器的位置。这通常通过设置表单的action属性来实现。方法（Method）：表单提交数据的方式，通常是使用HTTP协议的POST或GET方法。这由表单的method属性来指定。基本语法下面是一个简单的HTML表单代码。<formaction="submit.js"method="post"><labelfor="username">用户名：</label><inputtype="text"id="username"name="username"required><br><labelfor="password">密码：</label><inputtype="password"id="password"name="password"required><br><inputtype="submit"value="提交"></form>在这个示例中，用户可以输入用户名和密码，然后点击"提交"按钮，表单将数据发送到服务器上的"submit.js"文件进行处理。交流探究在HTML表单中，method属性有两个常用的值：GET和POST。这两种方法有什么区别？在设计表单时，如何选择合适的方法？基本语法5、CSS是一门基于规则的语言——你能定义用于你的网页中特定元素样式的一组规则。比如“我希望页面中的主标题是红色的大字”下面这段代码使用非常简单的CSS规则实现了之前提到的效果：h1{color:red;font-size:5em;}语法由一个选择器（selector）起头。它选择了我们将要用来添加样式的HTML元素。在这个例子中我们为一级标题（主标题<h1>(en-US)）添加样式。接着输入一对大括号{}。在大括号内部定义一个或多个形式为属性（property）—值（value）对的声明。每个声明都指定了我们所选择元素的一个属性，之后跟一个我们想赋给这个属性的值。冒号之前是属性，冒号之后是值。不同的CSS属性对应不同的合法值。在这个例子中，我们指定了color属性，它可以接受许多颜色值；还有font-size属性，它可以接收许多sizeunit值。基本语法CSS通常有3种使用方式。（1）在标签中添加“style”属性，编写CSS语句。<pstyle="color:blue;font-size:16px;">这是一个蓝色的段落。</p>在这个例子中，<p>标签的style属性内嵌了CSS样式，用于设置文本颜色为蓝色并设置字体大小为16像素基本语法（2）在网页头部使用<style>标签定义样式。<!DOCTYPEhtml><html><head><style>p{color:green;font-size:18px;}</style></head><body><p>这是一个绿色的段落。</p></body></html>在这个例子中，<style>标签被放置在网页的头部，里面定义了一组样式规则，将所有<p>标签的文本颜色设置为绿色，字体大小设置为18像素。基本语法（3）在网页头部使用<link>标签，从其他位置引入CSS样式文件。<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="styles.css"></head><body><p>这是一个从外部CSS文件应用的段落样式。</p></body></html>在这个例子中，通过<link>标签将一个名为"styles.css"的外部CSS样式文件引入到网页中。在"styles.css"文件中，可以定义各种样式规则，例如：/*styles.css*/p{color:purple;font-size:20px;}基本语法6、JavaScriptHTML控件的应用实现了对网页控件的描述；CSS的应用实现了网页控件的布局、上色等；而JavaScript则可以实现网页控件在浏览器端与用户的交互。HTML表单在没有JavaScript相关代码的情况下，只能与服务器进行交互；在有了JavaScript相关代码后，很多用户操作都可以不经过服务器，直接根据事先设计好的前端逻辑，由浏览器实现与用户的交互。JavaScript通常用于对用户输入进行本地校验，对不符合规则的输入进行提示；JavaScript还可用于实现控件之间的交互、播放控件动画、加载表单数据、异步加载页面等，其功能十分强大。基本语法JavaScript也有三种使用方式，和CSS大同小异在这个例子中，点击按钮时会触发onclick属性中嵌入的JavaScript代码，弹出一个警示框显示"Hello,World!"。(1)内联方式：在HTML元素的属性中直接嵌入JavaScript代码。<!DOCTYPEhtml><html><head><title>内联方式</title></head><body><buttononclick="alert('Hello,World!')">点击我</button></body></html>基本语法在这个例子中，使用<script>标签内嵌了一个JavaScript函数showMessage()，并在按钮的onclick属性中调用这个函数。(2)内部脚本：在HTML文件内使用<script>标签嵌入JavaScript代码。<!DOCTYPEhtml><html><head><title>内部脚本</title></head><body><script>functionshowMessage(){alert('Hello,World!');}</script><buttononclick="showMessage()">点击我</button></body></html>基本语法在这个例子中，JavaScript代码被保存在名为"script.js"的外部文件中，通过<script>标签引入到HTML文件中(3)外部脚本：将JavaScript代码保存在外部的.js文件中，然后使用<script>标签引入外部脚本。<!--index.html--><!DOCTYPEhtml><html><head><title>外部脚本</title><scriptsrc="script.js"></script></head><body><buttononclick="showMessage()">点击我</button></body></html>//script.jsfunctionshowMessage(){alert('Hello,World!');}Bootstrap前端框架03框架介绍Bootstrap是一个流行的开源前端框架，用于快速构建响应式、现代化的网页和Web应用程序。由Twitter开发并开源，它提供了一系列预定义的HTML、CSS和JavaScript组件，帮助开发者快速搭建具有一致外观和交互的界面。Bootstrap的目标是使网页开发变得更加简单、快速和一致。为什么使用BootstrapBootstrap框架的特性：1、移动设备优先：自Bootstrap3起，框架包含了贯穿整个库的移动设备优先的样式2、浏览器支持：Firefox，Google等主流浏览器都支持Bootstrap3、容易上手：只需要具备HTML和CSS的基础知识即可4、响应式设计：Boostrap的响应式CSS能使网页能够适应不同的设备和屏幕尺寸，从而提供更好的用户体验。5、包含功能强大的内置组件，易于定制。6、Bootstrap引入了12栏栅格结构的布局理念，使设计质量高、风格统一的网页变得十分容易。如何使用BootstrapBoostrap提供了几种快速开发的方式用于生产环境的Bootstrap：编译并压缩后的CSS、JavaScript和字体文件。不包含文档和源码文件。Bootstrap源码：Less、JavaScript和字体文件的源码，并且带有文档。需要Less编译器和一些设置工作。Sass：这是Bootstrap从Less到Sass的源码移植项目，用于快速地在Rails、Compass或只针对Sass的项目中引入。推荐参考网址如下：Bootstrap中文网：/Bootstrap官网：/下载Bootstrap我们教材使用的版本是3.3.7，我们可以去官网去直接下载/2016/07/25/bootstrap-3-3-7-released/#:~:text=Download%20the%20latest%20release%E2%80%94source%20code%2C%20compiled%20assets%2C%20and,options.%20Also%2C%20remember%20we%E2%80%99re%20available%20on%20npm%2C%20too.并将其放入“static”目录，然后引入Bootstrap所依赖的静态资源，代码如下所示。在<head>标签对中添加以下内容。<linkrel="stylesheet"href="static/bootstrap.min.css">在<body>标签对尾部添加以下内容。<scriptsrc="static/jquery.min.js"></script><scriptsrc="static/bootstrap.min.js"></script>此时，Bootstrap就可以正常使用了。Bootstrap包含的内容1、预编译版如果下了Bootstrap的已编译版本，解压ZIP文件，会看到下图的文件内容。这是Bootstrap的最基本形式：预编译文件，可在几乎任何Web项目中快速使用。我们提供编译的CSS和JS，以及编译和缩小的CSS和JS。CSS源映射可用于某些浏览器的开发人员工具。包括来自Glyphicon的字体，以及可选的Bootstrap主题。bootstrap.*bootstrap.min.*bootstrap.*.mapBootstrap包含的内容2、源代码版Bootstrap源代码下载包括预编译的CSS，JavaScript和字体资产，以及源代码Less，JavaScript和文档。如下图所示简单模板右图是一个简单的Bootstrap模板，有以下几点要注意。语句<metaname="viewport"content="width=device-width,initial-scale=1">可以实现对不同手机屏幕分辨率的支持包含了Bootstrap.min.css文件，这个文件用于让一个常规的Html页面变成为使用了Bootstrap框架的页面如果要用bootstrap这种js插件，bootstrap3版本还是依赖jquery的支持，所以在引入js文件的时候一定要先把jquery的依赖放在bootstrap的前面，但是在4和5版本，bootstrap才开始不依赖jquery，大家可以自行去搜索。栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下Bootstrap栅格系统的工作原理：“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。栅格系统通过下表可以详细查看Bootstrap的栅格系统是如何在多种屏幕设备上工作的栅格系统/css/在网址里面的内容有实际的情况给大家来测试，内容如下图所示。大家可以多去测试一下，对bootstrap有更好的了解Bootstrap表单我们前面有用表单，但是很简陋，Boostrap也有内置表单，下面是个简单的例子，效果如下Bootstrap表单代码如下<form><divclass="form-group"><labelfor="exampleInputEmail1">Emailaddress</label><inputtype="email"class="form-control"id="exampleInputEmail1"placeholder="Email"></div><divclass="form-group"><labelfor="exampleInputPassword1">Password</label><inputtype="password"class="form-control"id="exampleInputPassword1"placeholder="Password"></div><divclass="form-group"><labelfor="exampleInputFile">Fileinput</label><inputtype="file"id="exampleInputFile"><pclass="help-block">Exampleblock-levelhelptexthere.</p></div><divclass="checkbox"><label><inputtype="checkbox">Checkmeout</label></div><buttontype="submit"class="btnbtn-default">Submit</button></form>单独的表单控件会被自动赋予一些全局样式。所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为width:100%;。将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列课后小结04小结1、本章主要讲解了HTML、CSS、JavaScript的作用及其基本用法，以及Bootstrap前端框架的基本使用。Bootstrap的相关资料可以去之前给的网址去浏览了解。2、Bootstrap4、5的语法可能会和3有所不同，大家下载Bootstrap的时候不要下载错版本了。课后作业今日作业课后习题2.5请在课余时间查找关于bootstrap、css、html、JavaScript的基础资料。谢谢聆听Flask课程——第三章模板了解静态网页与动态网页的区别掌握Jinja2模板引擎的使用方法掌握Flask-Bootstrap的使用方法学习目标Flask-Bootstrap模板简介Jinja2模板引擎小结模板简介01概念解释什么是模板？模板是一种通用的布局或结构，用于创建多个具有相似风格和功能的内容。在计算机编程和设计领域，模板是一个预定义的框架，其中包含了一些固定的元素、样式、格式或占位符，以便在特定场景中填充内容。使用模板可以帮助保持一致性、提高效率，并降低开发的重复性。简单来说的话，模板的作用是内容注入、页面继承与包含。Jinja2模板引擎02概念解释jinja2模板引擎是什么？Jinja2是一个流行的Python模板引擎，用于在Python应用程序中生成动态内容。模板引擎是一种将数据和模板结合，生成最终输出的工具。Jinja2允许开发者将动态数据嵌入到静态模板中，以生成HTML、XML、JSON等格式的输出。安装依赖我们在第一章的时候，已经把Jinja2模板一同下载了下来，如果有不清楚的话，可以打开cmd(命令提示符)，输入代码：pipinstalljinja2==2.11.3在使用模板时，所有静态资源应放置在“static”资源目录下，而模板页面应放置在“templates”模板目录下。我们要遵循一个思路，每当写一个模板页面，都要写他对应的视图函数，不然写了的页面就没法被浏览到。Jinja2模板引擎我们来举一个简单的例子，首先在“templates”模板目录下创建一个模板页面文件，如下图所示。Jinja2模板引擎然后在视图函数里面的代码如下所示。fromflaskimportFlask,render_template@app.route('/value')defvalue(username=None):returnrender_template('value.html')render_template用于渲染模板文件然后下面就是渲染名为'value.html'的模板文件，并将渲染后的内容返回给用户的浏览器。效果如下图所示。基本语法以下是3种基本语法，在接下来的代码中将会经常出现。（1）“{%...%}”为“控制”语句，常用于编写结构控制，定义模板、变量等。（2）“{{...}}”为“表达式”语句，常用于输出变量，调用宏指令、对象函数等。（3）“{#...#}”为“注释”语句，用于添加代码注解。基本语法（1）“{{...}}”为“表达式”语句，常用于输出变量，调用宏指令、对象函数等。代码例子如下<!DOCTYPEhtml><html><head><title>测试</title></head><body><h1>Hello,{{user}}</h1><p>Yourageis{{age}}</p></body></html>在这个示例中，使用表达式语句输出了user和age变量的值。基本语法（2）“{%...%}”为“控制”语句，常用于编写结构控制，定义模板、变量等。代码例子如下<!DOCTYPEhtml><html><head><title>测试</title></head><body>{%ifuser%}<h1>Hello,{{user}}!</h1>{%else%}<h1>Welcome,Guest!</h1>{%endif%}</body></html>在这个示例中，根据user变量的值，使用控制语句实现了一个简单的条件语句。基本语法（3）“{#...#}”为“注释”语句，用于添加代码注解。代码例子如下<!DOCTYPEhtml><html><head><title>测试</title></head><body><h1>Hello,{{user}}</h1>{#这是一个提示。下面会显示你的年龄#}<p>Yourageis${{age}}</p></body></html>在这个示例中，使用注释语句添加了一个代码注解，不会在最终输出中显示语法使用注释的使用方法和其他语言的注释用法一样，这里就略过注释用法，举例控制和表达式的使用方法。表达式的用法，拿注入变量举例，首先得从视图函数注入变量，再将需要显示到页面的变量在模板文件中使用“表达式”语句输出变量。视图函数代码如下@app.route('/value')@app.route('/value/<string:username>')defvalue(username=None):returnrender_template('value.html',username=username)表达式语句输入代码如下<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>注入变量</title></head><body>{#在"表达式"语句中，可使用"or"为变量添加默认值#}<h1>{{usernameor'游客'}}</h1><h2>欢迎使用！！！</h2></body></html>语法使用效果如下图所示无username的示例图有username的示例图语法使用控制用法，简单来说就像其他语言的if判断，举个文章列表的简单例子，也是先写视图函数，再写模板内容，视图函数代码如下。@app.route('/control')@app.route('/control/<int:num>')defcontrol(num=0):#此处使用list模拟文章列表articles=[]foriinrange(1,num+1):articles.append({'title':'文章%d标题'%i,'content':('文章%d的内容'%i)*i,})returnrender_template('control.html',num=num,articles=articles)语法使用模板(control.html)的代码如下，可以看到这些语句与Python的控制语句相似，同时又类似于HTML标签，控制语句需要使用如“{%endxxx%}”的格式，对前面的语句进行闭合。<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>控制结构</title></head><body><h1>文章列表</h1>{%ifnum<=0%}<h2>文章数量为0，没有内容可展示。</h2>{%else%}{%forarticleinarticles%}<h2>{{article.title}}</h2><p>{{article.content}}</p>{%endfor%}{%endif%}</body></html>语法使用效果图如下图所示。根据路径后面的参数，来改变效果模板的包含与继承前文提到，模板可以用于解决公共内容的冗余问题。例如，将公共部分的内容分离到一个单独的文件，再将模板加载到需要使用的页面中。如果按这种模式进行开发，在修改公共部分内容时，仅需要修改公共部分内容所处的文件，即可修改所有使用公共部分内容的页面，大大缩短修改各个页面的时间。模板的包含与继承模板的包含：模板的包含允许您将一个模板嵌入到另一个模板中，从而实现模块化和代码重用。这对于在多个页面中使用相同的组件或块非常有用。假设我们有一个简单的header.html模板，表示网站的页头部分，代码如下。<!DOCTYPEhtml><html><head><title>{{title}}</title></head><body><header><h1>testTitle</h1></header></body>模板的包含与继承demo.html的代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body>{%include'header.html'%}<p>Welcometoourwebsite!</p></body></html>{%include'header.html'%}这句代码就是代表着我们可以在不同的页面中引用这个页头部分。模板的包含与继承效果如下图所示。这便是模板的包含。模板的包含与继承模板的继承：模板的继承允许我们创建一个基础模板（称为父模板），定义其中的共同结构和占位符，然后创建子模板来填充实际内容。假设我们有一个简单的base.html模板，表示父模板，代码如下。<!DOCTYPEhtml><html><head><title>{%blocktitle%}DefaultTitle{%endblock%}</title></head><body><header><h1>{%blockheader%}DefaultHeader{%endblock%}</h1></header><main>{%blockcontent%}{%endblock%}</main></body></html>模板的包含与继承然后创建一个子模版来填充具体内容，同时覆盖掉父模板的内容，代码如下{%extends'base.html'%}{%blocktitle%}PageTitle{%endblock%}{%blockheader%}WelcometoMySite{%endblock%}{%blockcontent%}<p>Thisisthemaincontentofthepage.</p><p>Additionalcontentgoeshere.</p>{%endblock%}{%extends'base.html'%}这个就是用来继承我们的父模板在子模版使用，通过这种方式，我们可以将页面的结构和内容分开，使代码更加模块化和易于维护。父模板定义了整体结构，而子模板填充了特定内容。模板的包含与继承效果如下图所示。宏指令我们前面碰到的基本都是需要多次修改的静态内容，总不能想改动东西就天天去修改源码，那么如果我们想动态实现添加，删除，那该怎么办呢，我们就迎来一个新的概念，宏指令。比方说，我们要做一个常见的任务，比如创建一个HTML按钮，但稍后可能会用到不止一次。在这种情况下，我们可以使用Jinja2的宏来实现这一点。拿文章的增加和删除举例。我们按照视图函数，然后再写页面的思路来写，视图函数的代码如下。@app.route('/macro')@app.route('/macro/<int:num>')defmacro(num=0):#此处使用list模拟文章列表articles=[]foriinrange(1,num+1):articles.append({'title':'文章%d标题'%i,'content':('文章%d的内容'%i)*i,})returnrender_template('macro.html',num=num,num_prev=num-1,num_next=num+1,articles=articles)宏指令宏指令(macro_define.html)文件代码如下。{%macroarticle_item(title,content)%}<h2>{{title}}</h2><p>{{content}}</p>{%endmacro%}{%macroarticle_list(articles,article_num)%}{%ifarticle_num<=0%}<h2>文章数量为0，没有内容可展示。</h2>{%else%}{%forarticleinarticles%}{{article_item(article.title,article.content)}}{%endfor%}{%endif%}{%endmacro%}宏指令使用宏代码(macro.html)网页文件代码如下。{#宏指令可以定义在单独的文件，然后被其他文件所引入#}{%import'macro_define.html'asmacro%}{%blocktitle%}宏指令{%endblock%}{%blockinner_content%}{#宏指令的使用方法类似于函数#}{{macro.article_list(articles,num)}}{%ifnum>0%}<ahref="{{url_for('macro',num=num_prev)}}"class="btnbtn-primary">-1</a>{%endif%}<ahref="{{url_for('macro',num=num_next)}}"class="btnbtn-primary">+1</a>{%endblock%}宏指令效果如下图所示。可以看到，写好了宏，就只需要在网页去点击就能进行增加和删除内容，只需调用宏，而不必重复编写网页代码。注册全局对象在Jinja2模板引擎中，有的时候可以通过函数调用来获取数据，但是在继承的模板里面，如果需要调用某个固定的函数，通常需要在每一个使用被继承模板的视图函数中注入相应的函数（变量），但这显然不是推荐的操作方法。这时，需要注册全局对象。用到的函数是:app.add_template_global(需要注册的函数名，’别名’)。例子代码如下图所示。视图代码如下：#注册全局对象的类型不限，可以是任何类型（函数亦可）defrange_list(x):#该函数生成了数量为x的intlist（从0开始）returnlist(range(x))#将函数注册到全局对象中app.add_template_global(range_list,'global_test')@app.route('/global')defglobal_():returnrender_template('global.html')注册全局对象模板文件代码如下：{%blocktitle%}注册全局对象{%endblock%}{%blockinner_content%}{#此处将数字列表输出到页面中#}{{global_test(10)}}{%endblock%}效果如下图所示。变量过滤器变量过滤器是Jinja2中一种用于在模板中对变量进行修改或格式化的功能。您可以使用过滤器对变量进行操作，使其适应您的需求，如格式化日期、将文本转换为大写、截取字符串等。这个用到的函数：app.add_template_filterer(‘过滤器名称’)，视图函数代码如下：importtimedefconvert_time(t):returntime.strftime('%Y-%m-%d%H:%M:%S',time.localtime(t))#注册模板变量过滤器app.add_template_filter(convert_time)@app.route('/demo')defglobal_():returnrender_template('demo.html')变量过滤器页面代码(demo.html)如下：{#自定义变量过滤器，时间可通过time.time()获取#}<p>{{1572497288.095447|convert_time}}</p>效果如下图所示：Flask-Bootstrap03概念解释Flask-Bootstrap是什么？前面的内容中提到了Bootstrap前端框架，同时也通过手动引用、构建模板的方式，使用了Bootstrap框架。而在快速开发场景中，这种从零开始配置的方式并不适用。Flask-Bootstrap提供了一系列的基本模板，包含对资源的引用、一些快捷宏指令等。Flask-Bootstrap安装Flask-Bootstrap的方式和之前一样，打开命令提示符输入以下代码pipinstallflask-bootstrap==3.3.7安装成功如下图所示使用方法首先需要引入Flask-Bootstrap包中的Bootstrap类，然后在应用初始化之后，对Bootstrap实例进行初始化。代码如下fromflaskimportFlask,render_templatefromflask_bootstrapimportBootstrapapp=Flask(__name__)#flask_bootstrap初始化代码bootstrap=Bootstrap()bootstrap.init_app(app)#使用本地资源，禁用cdnbootstrap_cdns=app.extensions['bootstrap']['cdns']bootstrap_cdns['bootstrap']=bootstrap_cdns['local']bootstrap_cdns['jquery']=bootstrap_cdns['local']使用方法视图函数代码如下@app.route('/bootstrap')defbootstrap_flask():returnrender_template('bootstrap_flask.html')使用方法由于我们的模板文件代码继承了bootstrap的模板，为方便使用（定制），我们在Python安装目录/site-packages/flask_bootstrap/templates”中找到需要用的模板文件复制到当前项目。如下图所示。使用方法模板文件(bootstrap_flask.html)代码如下{%extends'bootstrap/base.html'%}{%blocktitle%}FlaskBootstrap{%endblock%}{%blocknavbar%}{%include'include_nav.html'%}{%endblock%}{%blockcontent%}<divclass="container"><p>flask_bootstrap提供了一些基本的模板，可以省去从零编写模板页的过程。</p><p>flask_bootstrap同时还提供了flask_wtf表单生成的宏指令（后续讲解）。</p></div>{%endblock%}使用方法效果就如下图所示。使用方法Flask-Bootstrap提供了常用的基础模板，在开发过程中使用这些模板，可节省编写基础模板的时间。Flask-Bootstrap提供的基准模板（base.html）定义了一些常用区块，通常情况下，只要继承基准模板，并重写区块，便可以满足大部分的需求。基准模板中定义的一些常用区块，如下表所示。区块名称解释title网页标题styles样式表标签区块navbar导航栏区块content网页主体区块scripts网页主体尾部脚本区块课后小结04小结1、Jinja2模板引擎提供了很简洁、方便的模板语法，使模板编写、维护变得简单。使用模板进行开发，将所有公共部分分离，可减少大部分重复性的工作。2、Flask-Boostrap简化了将Bootstrap整合到Flask应用中的过程，提供了一致的界面和响应式设计，同时还保留了定制性和灵活性，使我们能够轻松构建Web界面。课后作业今日作业课后习题3.5创建一个Flask应用。使用模板继承，创建一个基础模板（父模板）和一个或多个子模板。父模板包含网页的通用结构，子模板填充特定内容。在父模板中创建一个宏指令，用于显示页面的页头。在子模板中通过模板继承和宏指令，创建一个具有不同内容的网页。谢谢聆听Flask课程——第四章如何与用户进行交互了解消息反馈的基本操作掌握Flask-WTF表单模块的使用方法掌握Flask-CKEditor模块的使用方法学习目标消息反馈表单Flask-WTFFlask-CKEditor小结表单01概念解释网页的交互是什么？网页的交互是指用户通过与网页上的元素（如按钮、表单、链接等）进行互动，以触发和响应网页的动态行为或功能。这种互动性是现代网页应用程序的关键组成部分，它使用户能够与网页进行实时通信、提交表单、加载新内容、执行操作等。表单在网页中，如果需要与用户进行交互，则需要为交互页面设计一种特定的消息类型（表单），用于接收用户输入的信息。将用户输入的信息传递到服务器中进行处理，如需要返回消息给用户，则需要将消息内容显示到网页内容中。一次完整的交互，不止是有前端的页面显示，还要有后端的程序参与进来。数据的交互会有GET请求和POST请求。这两种请求方法在Web开发中广泛使用，用于在客户端（浏览器）和服务器之间传递数据。GET请求用途：GET请求用于从服务器获取数据。它通常用于请求获取页面、图像、文档等静态资源，或者从服务器获取特定数据。数据传递：数据通过URL查询字符串传递，附加在URL后面，以问号（?）分隔。例如：/page?param1=value1¶m2=value2安全性：GET请求在URL中明文传递数据，因此不适合传递敏感信息，因为信息可以在浏览器历史记录、服务器日志等地方可见。缓存：GET请求可以被浏览器缓存，因此可以加快页面加载速度。幂等性：多次发送相同的GET请求不会对服务器产生副作用，即多次请求不会改变服务器状态。POST请求用途：POST请求用于向服务器提交数据，通常用于提交表单、发送用户输入数据等。数据传递：数据通过HTTP请求的消息体传递，不会显示在URL中。因此，POST请求适合传递敏感信息。安全性：POST请求对数据进行加密，相对更安全，适合传递敏感信息。缓存：POST请求不会被浏览器缓存。幂等性：一般情况下，多次发送相同的POST请求可能会对服务器产生副作用，即多次请求可能会改变服务器状态。但在某些情况下，可以通过设计来使POST请求具有幂等性。基本交互举一个从表单获取信息的例子，用于用于接收GET、POST消息并显示，视图函数代码如下。@app.route('/form',methods=['GET','POST'])defform():#args用于获取GET方式提交的数据msg_get=request.args.get('msg_get')#form用于获取POST方式提交的数据msg_post=request.form.get('msg_post')returnrender_template('form.html',msg_get=msg_get,msg_post=msg_post)视图函数处理了/from的路由请求，让它同时支持GET和POST请求方法，然后用两种获取指定参数的值方法，将从GET和POST请求中获取的数据作为参数传递给模板进行渲染。基本交互form.html的内容按照书上4.1.1的去写就好，最后的效果如下图所示。GET表单提交测试示例图POST表单提交测试示例图文件上传表单除了可以提交消息以外，还可以上传文件。在Flask中上传文件只需要定义两个视图函数即可：一个用于上传文件，另一个用于获取上传的文件。首先定义获取上传文件的视图函数，代码如下：importos#定义上传文件所存放的位置，此处定义为项目目录下的"uploads"目录basedir=os.path.abspath(os.path.dirname(__file__))app.config['UPLOADED_PATH']=os.path.join(basedir,'uploads')os.makedirs(app.config['UPLOADED_PATH'],exist_ok=True)#用于获取上传的文件@app.route('/files/<filename>')defuploaded_files(filename):path=app.config['UPLOADED_PATH']returnsend_from_directory(path,filename)文件上传定义上传文件的视图函数。代码如下：#用于上传文件@app.route('/upload',methods=['GET','POST'])defupload():ifrequest.method=='POST':f=request.files.get('upload')f.save(os.path.join(app.config['UPLOADED_PATH'],f.filename))#将上传目录下的文件展示到页面中files=os.listdir(app.config['UPLOADED_PATH'])returnrender_template('upload.html',files=files)文件上传以下是相应模板页面（upload.html）的内容{%extends'bootstrap/base.html'%}{%blocktitle%}文件上传{%endblock%}{%blockcontent%}<divclass="container"><formrole="form"method="post"enctype