2.6 网络应用软件开发第一课时（教学课件）信息技术浙教版2019必修2

第二章 Chapter 2 信息系统的支撑技术 1 1 2 3 2.1 计算机硬件 4 2.4 传感与控制 2.2 计算机软件 2.3 移动终端 5 6 2.6 网络应用软件开发 2.5 网络系统 目录 问题提出 计算机已经联网了，想看个央视新闻，怎么操作？ 问题提出 有区别吗？ 客户端 浏览器 网络应用软件架构 无需安装专门的应用程序，用户工作界面通过浏览器来实现 需要安装客户端软件，服务器提供数据管理，数据共享，系统维护和并发控制等 客户端/服务器（C/S）架构 浏览器/服务器（B/S）架构 网络应用软件架构 客户端/服务器（C/S）架构 网络应用软件架构 客户端：完成用户的具体业务，如：人机交互，数据的输入与输出等； 服务器端：结合数据库服务器，提供数据管理、数据共享、数据及系统维护和并发控制等。 C/S架构特点：如果用户要使用的话，必需下载一个客户端，安装后才可以使用。比如，QQ，网络游戏等。（胖客户/瘦服务器） 客户端/服务器（C/S）架构 网络应用软件架构 浏览器/服务器（B/S）架构 网络应用软件架构 浏览器/服务器（B/S）架构 浏览器（Browser）：代替客户端完成前端的所有操作，用户工作页面在浏览器上完成 服务器端：处理所有相关操作 B/S架构的特点：只要有浏览器就能使用，对客户端要求较低，对服务器端要求较高，比如：网页游戏。（瘦客户/胖服务器） 网络应用软件架构 架构 客户端程序 系统的通讯开销 应用程序的升级和维护 服务器负荷 C/S架构 B/S架构 专用的应用程序 小 复杂、难度大 客户端服务器端同时升级 低 浏览器 大 简单、难度小 只升级服务器端 高 课堂练习 下列关于网络应用程序实现架构的描述恰当的是（ ） A.C/S架构的实现只需提供专用的服务器端软件，不需要客户端软件 B.B/S架构的实现需要提供专用的服务器端软件及专用的客户端软件 C.C/S架构的实现中数据管理、数据共享等任务主要由客户端来处理 D.B/S架构的实现中对服务器的负荷相对较重，对服务器性能要求高 D 课堂练习 以下关于C/S架构与B/S架构的描述，正确的是（ ） A.C/S架构为浏览器与服务器模式 B.B/S架构为客户端与服务器模式 C.C/S架构的可维护性比B/S高 D.B/S架构的可维护性比C/S高 D 网络应用软件规划设计 以聊天机器人为例 应用目的 应用总体架构 应用功能组成 界面设计及代码实现 网络应用软件规划设计 应用目的 首先，是对网络应用进行详细的分析,比如： 该应用开发过程中所要解决的问题是什么？ 软件运行时的输入数据有哪些？ 经应用处理后得到什么样的结果，最终应该输出什么内容？ “网络聊天机器人”应用目的： 解决的问题：实现人机对话 输入数据：人向机器人说出的话语 输出数据：机器人对话语的合理回应 网络应用软件规划设计 应用的总体架构 在分析的基础上确定应用的架构模式， 根据架构模式选择合适的开发工具及现有的应用框架 “网络聊天机器人”应用总体架构 只用于实现简单的人机对话，服务器的要求不高。同时考虑便于维护和发布 采用：B/S架构 开发工具及框架选取：Python、Flask Web框架及SQLite数据库 网络应用软件规划设计 应用的功能组成 明确应用各个功能模块 网络应用软件规划设计 界面设计及代码实现 最后，用统一、规范的图表和书面语言表达出来，根据各个功能模块的作用设计出相应的人机交互界面，并在此基础上完成代码编制。 网络应用软件规划设计 规划设计步骤 具体内容 一、应用的目的   二、应用的总体架构 （基本架构、开发工具与语言）   三、应用的功能组成   四、界面简单设计与 代码实现   通过输入、输出完成基本人机交互。 选用B/S架构，选取Python、Flask Web、SQLLite数据库。 登录与注销模块、聊天与表单、用户管理与记录管理。 课堂练习 小张在制作“学生信息管理系统”时，经过了下列设计步骤： ①划分应用的功能模块②确定应用的目的③应用的代码实现④确定应用的总体架构⑤设计应用的界面⑥应用的调试纠错 上述步骤执行的先后顺序正确是（ ） A.②①⑥⑤③④ B.②①⑤③⑥④ C.①⑥②③④⑤ D.②④①⑤③⑥ D 编写网络应用程序 Python中常用的Web应用程序框架由Flask、Django及Tronado. 其中Flask Web框架非常精简，属于小型框架，允许开发者任意挑选符合需求的扩展。 编写网络应用程序 导入框架、创建实例 导入flask模块 创建一个Flask类的对象，即创建一个应用实例。运用Flask框架建立一个叫app的对象，这个对象具备flask的基本功能，还可以在此基础上自己添加功能 __name__为内置变量，值为本py文件的文件名。该参数寻找工程目录（让Flask知道去哪找文件） 编写网络应用程序 路由和视图函数 使用route()装饰器告诉Flask什么样的URL能触发我们的函数 函数返回我们想要显示在用户浏览器中的信息 编写网络应用程序 路由和视图函数 使用route()装饰器告诉Flask什么样的URL能触发我们的函数 函数返回我们想要显示在用户浏览器中的信息 编写网络应用程序 html HTML：描述文档结构和表现形式的一种语言，超文本标记语言，描述网页的语言。 几乎每一种html语言的语法都以<>开头，以</>结束 编写网络应用程序 构造动态URL 给URL添加变量，把特殊字段记为<变量名>，这个变量名会传到函数中。 编写网络应用程序 启动web应用 if __name__==’__main__’ 确保服务器只会在该脚本被python直接执行的时候才会运行，而不会是作为模块导入的时候， 用run()函数让应用运行在本地服务器上.Flask中自带web服务器，启动后进入轮询（轮流询问，轮流审查）状态，等待用户访问 编写网络应用程序 app是flask的实例，功能就是接受来自web服务器的请求。浏览器将请求给web服务器，web服务器将请求给app app收到请求，通过路由找到对应的视图函数，然后将请求处理，得到一个响应response 然后app将响应返回给web服务器，web服务器返回给浏览器，浏览器展示给用户观看，流程完毕。 编写网络应用程序 以上例子只实现了单一文本的输出。 机器人对话能力的实现：AIML模块，人工智能标记语言（Artificial Intelligence Markup Language）。 网页上的输入与输出：在网页中使用提交表单。导入flask_wtf的FlaskForm模块。 为了精简代码，导入Flask的render_template模块。 编写网络应用程序 路由和视图函数 编写网络应用程序 路由和视图函数 视图函数可以绑定多个 URL URL 中可以添加变量部分，标记＜变量名＞，则标记部分可以作为参数传递给视图函数 对应的访问方式？ 编写网络应用程序 路由和视图函数 http://127.0.0.1:5000/register http://127.0.0.1:5000/login http://127.0.0.1:5000/xiaoming http://127.0.0.1:5000/ 编写网络应用程序 get/post传递参数 @app.route()中可以传入一个关键字参数 methods 来指定用户使用GET/POST方法，默认情况下，只能使用 GET 请求 编写网络应用程序 get/post传递参数 方式 说明 特点 GET 将参数按照“变量名=值”的形式，添加到 URL 后面，并使用“?”连接，变量之间使用“&”连 接 只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型有限 POST 将数据放在表单中的form数据体中，按照变量与值对应的方式，传递到 指定的 URL 可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img) 编写网络应用程序 request模块获取参数 属性 描述 举例 form 操作表单中提交的数据，可以使用 form 属性 id = request.form.get("id") args 操作 URL(如?key=value) 中提交的的参数可以使用 args 属性 id = request.args.get("id") method 获得当前请求方法，比如 POST、GET a = request.method 编写网络应用程序 get传递参数 http://127.0.0.1:5000/?xm=zz http://127.0.0.1:5000/?xm=zz&xb=nan 编写网络应用程序 post传递参数 post 方式参数不显示在地址栏 编写网络应用程序 post传递参数 render_template（）函数，该函数从模版文件夹templates中呈现给定的模板的内容。‘ index.html‘文件被存放于 templates文件夹下，里面包含表单。表单action属性规定当提交表单时，向何处发送表单数据 编写网络应用程序 编写网络应用程序 表单 编写网络应用程序 html HTML的全称为超文本标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一。flask 使用了 jinja2 这个模板引擎使render_template 不仅能渲染静态的 html 文件，也能传递参数给 html render_template（）参数中以 key=value 形式传入变量 html 中使用{{key}}来显示传入的变量。 编写网络应用程序 表单类别 表单元素 网页呈现示例 功能 StringField 输入文本框 SubmitField 提交按钮 PasswordField 密码框 BooleanField 复选框，True，Flase HiddenField 隐藏文本字段 聆 听 谢 谢 42 $$