Python Web开发案例教程：使用Flask、Tornado、Django 慕课版 (南淑萍 王莉丽 王秀友 主编 凌启东 林金珠 副主编) (z-library.sk, 1lib.sk, z-lib.sk)

人邮学院“程序设计”慕课 W eb 开 发 案 例 教 程 慕 课 版 封面设计：董志桢 如何使用 慕课课程 1 2 3 4 5 6 7 购买本书 书中附赠激活码 阅读教材 通过阅读纸质教材 帮助读者巩固慕课所学知识 输入激活码 激活本课程 获得学习慕课权限 789 作业测试 学完一章内容后 通过精心设计的在线测试题 查看知识掌握程度 学习在线视频课程 可随时观看 登录人邮学院网站 www.rymooc.com 使用手机号码完成注册 社区交流 有问题上课程讨论区提问 大牛导师辅导答疑 并且同学之间也可交流学习心得 强大的平台支撑 本课程依托人民邮电出版社自主开发的在线教育慕 课平台——人邮学院（www.rymooc.com），该 平台具有完备的在线“教、学、测”功能。 权威的内容制作 体系科学 精准而系统的课程体系，聚焦前端开发工程师必学必 会的知识技能。 名师出品 由程序设计类图书销售上百万册的明日科技倾力打造， 十年磨一剑。 Python 向教师免费提供 PPT等教学相关资料 Web开发案例教程 立 体 化 服 务， 从 入 门 到 精 通 Python 课程简介 慕 课 版 —— 使用 Flask、Tornado、Django — — 使 用F la s k 、 T o rn a d o D ja n g o 案例式教学，6大经典案例涵盖所有主要知识点，理论和实践完美结合 体系完整的 80学时慕课教学视频同步讲解 107个教学视频，随时随地扫一扫二维码，让学习更加高效便捷 附赠免费教学资源，包括案例源代码、精品教学 PPT、自测题库 南淑萍 王莉丽 王秀友 ◎ 主编 凌启东 林金珠 ◎ 副主编 明日科技 ◎ 策划 FM52085(人邮慕课新)Python Web开发案例教程（慕课版）——使用Flask、Tornado、Django.indd 1-3 20/6/2 上午11:01

立 体 化 服 务， 从 入 门 到 精 通 慕 课 版 人 民 邮 电 出 版 社 北 京 Web开发案例教程 Python ——使用Flask、Tornado、Django 南淑萍 王莉丽 王秀友 ◎ 主编 凌启东 林金珠 ◎ 副主编 明日科技 ◎ 策划 FM52085(人邮慕课新)Python Web开发案例教程（慕课版）——使用Flask、Tornado、Django.indd 7 20/6/2 上午11:01

内 容 提 要 本书作为 Python Web 开发的案例教程，不仅介绍了进行 Python Web 开发涉及的前端常用知识， 以及 3 个流行的 Web 开发框架，而且介绍了 Web 开发中的 6 个流行项目。全书分 8 章，内容包括 Web 开发基础、Python 常用 Web 框架、基于 Flask 的在线学习笔记、基于 Flask 的甜橙音乐网、基 于 Flask 的 51 商城、基于 Flask 的 e 起去旅行、基于 Tornado 的 BBS 问答社区和基于 Django 的智慧 校园考试系统。全书以案例引导，每个案例都提供了相关的技术准备知识讲解，有助于学生在理解 知识的基础上，更好地运用知识，达到学以致用的目的。 本书是慕课版教材，各章都配备了以二维码为载体的微课，并且在人邮学院（www.rymooc.com） 平台上提供了配套慕课。此外，本书还提供所有实例、案例项目的源代码，制作精良的电子课件 PPT， 自测题库等内容。其中，源代码全部经过精心测试，能够在谷歌浏览器下运行。 本书可作为应用型本科计算机类专业、软件工程专业和高职软件及相关专业的教材，同时也适 合 Python Web 开发爱好者和初、中级的 Python Web 开发人员参考使用。 ♦ 主 编 南淑萍 王莉丽 王秀友 副 主 编 凌启东 林金珠 责任编辑 李 召 责任印制 王 郁 陈 犇 ♦ 人民邮电出版社出版发行 北京市丰台区成寿寺路 11 号 邮编 100164 电子邮件 315@ptpress.com.cn 网址 https://www.ptpress.com.cn 涿州市京南印刷厂印刷 ♦ 开本：787×1092 1/16 印张：16.5 2020 年 6 月第 1 版 字数：455 千字 2020 年 6 月河北第 1 次印刷 定价：59.80 元 读者服务热线：(010)81055256 印装质量热线：(010)81055316 反盗版热线：(010)81055315 广告经营许可证：京东市监广登字 20170147 号

为了让读者能够快速且牢固地掌握 Python Web 开发技术，人民邮电出版社充分发挥在线教育方面 的技术优势、内容优势、人才优势，为读者提供一种“纸质图书+在线课程”相配套，全方位学习 Python Web 开发的解决方案。读者可根据个人需求，利用图书和“人邮学院”平台上的在线课程进行系统化、 移动化的学习，以便快速全面地掌握 Python Web 开发技术。 一、如何学习慕课版课程 本课程依托人民邮电出版社自主开发的在线教育慕课平台—人邮学院（www.rymooc.com），该平 台为学习者提供优质、海量的课程，课程结构严谨，用户可以根据自身的学习程度，自主安排学习进度， 并且平台具有完备的在线“学习、笔记、讨论、测验”功能。人邮学院为每一位学习者，提供完善的一 站式学习服务（见图 1）。 图 1 人邮学院首页 为了使读者更好地完成慕课的学习，现将本课程的使用方法介绍如下。 1．用户购买本书后，找到粘贴在书封底上的刮刮卡，刮开，获得激活码（见图 2）。 2．登录人邮学院网站（www.rymooc.com），或扫描封面上的二维码，使用手机号码完成网站注册 （见图 3）。 图 2 激活码 图 3 注册人邮学院网站 Foreword 前 言

Android 移动开发 （慕课版） 2 3．注册完成后，返回网站首页，单击页面右上角的“学习卡”选项（见图 4），进入“学习卡”页面 （见图 5），输入激活码，即可获得该慕课课程的学习权限。 图 4 单击“学习卡”选项 图 5 在“学习卡”页面输入激活码 4．获得该课程的学习权限后，读者可随时随地使用计算机、平板电脑、手机学习本课程的任意章节， 根据自身情况自主安排学习进度（见图 6）。 5．在学习慕课课程的同时，阅读本书中相关章节的内容，巩固所学知识。本书既可与慕课课程配合 使用，也可单独使用，书中主要章节均放置了二维码，用户扫描二维码即可在手机上观看相应章节的视 频讲解。 6．学完一章内容后，可通过精心设计的在线测试题，查看知识掌握程度（见图 7）。 图 6 课时列表 图 7 在线测试题 7．如果对所学内容有疑问，还可到讨论区提问，除了有大牛导师答疑解惑以外，同学之间也可互相 交流学习心得（见图 8）。 8．书中配套的 PPT、源代码等教学资源，用户可在该课程的首页找到相应的下载链接（见图 9）。

第 1章 Web 应用开发简介 3 图 8 讨论区 图 9 配套资源 关于人邮学院平台使用的任何疑问，可登录人邮学院咨询在线客服，或致电：010-81055236。 二、本书特点 自 2003 年以来，Python 一直在十大编程语言学习排行榜中名列前茅。Alpha Go 战胜李世石后， Python 的排名突飞猛进。由于 Python 具备简单、灵活、健壮、易用、兼容、快速和通用的特点，所以 Python 已经成为 Web 开发阵营中的重要组成部分。越来越多的公司使用 Python 进行 Web 开发，如国 外的 YouTube 和 Reddit 以及国内的豆瓣和知乎等。 在当前的教育体系下，实例教学是计算机语言教学最有效的方法之一。本书将 Python Web 知识和 实例有机结合起来：一方面，跟踪 Python Web 的发展，适应市场需求，精心选择内容，突出重点、强 调实用，使知识讲解全面、系统；另一方面，将知识融入案例，每个案例都有相关的知识讲解，部分知 识点还有用法示例，既有利于学生学习知识，又有利于教师指导学生实践。 本书作为教材使用时，知识讲解建议 20～25 学时，案例讲解建议 40～45 学时。各章主要内容和学 时建议分配如下，教师可以根据实际教学情况调整。 章 主 要 内 容 课堂学时 实验学时 第 1 章 Web 开发基础，知识点包括 Web 简介、Web 应用程序的工作原 理和 Web 前端开发基础 1～2 第 2 章 Python 常用 Web 框架，知识点包括 Web 框架简介和 Python 中 常用的 Web 框架 1～2 Flask 框架的使用，知识点包括安装虚拟环境、安装 Flask、创建 Flask 程序和 Flask 框架的基础知识 2～3 1～2 Django 框架的使用，知识点包括安装 Django Web 框架、创建 Django 项目和 Django 框架的基础知识 2 2～4 Tornado 框架的使用，知识点包括安装 Tornado 框架、创建 Tornado 项目和 Tornado 框架的基础知识 2 2～4 第 3 章 基于 Flask 的在线学习笔记项目，知识点包括 Bootstrap 前端框 架、PyMySQL 操作数据库、WTForms 验证表单、CKEditor 富 文本编辑器等 2～3 4 第 4 章 基于 Flask 的甜橙音乐网项目，知识点包括 jPlayer 播放音乐、 Flask 蓝图、Ajax 异步技术等 2～3 4 第 5 章 基于 Flask 的 51 商城项目，知识点包括 Flask-SQLAlchemy 联 合查询、Flask-Migrate 数据迁移、JavaScript 增减商品数量等 2 5 第 6 章 基于 Flask 的 e 起去旅行项目，知识点包括 Flask-Script 实现命 令行解析器、CKEditor 编辑器上传图片等 2 6

Android 移动开发 （慕课版） 4 续表 章 主 要 内 容 课堂学时 实验学时 第 7 章 基于 Tornado 的 BBS 问答社区项目，知识点包括 Redis 数据库、 回复消息长轮询等 2 8 第 8 章 基于 Django 的智慧校园考试系统项目，知识点包括文件上传、读 取 Excel 数据存入数据库等 2 8 由于编者水平有限，书中难免存在不足之处，敬请广大读者批评指正。 编者 2020 年 3 月

第 1 章 Web 开发基础 1 1.1 Web 概述 2 1.1.1 什么是 Web 2 1.1.2 Web 应用程序的工作原理 2 1.1.3 Web 的发展历程 2 1.2 Web 前端开发基础 4 1.2.1 HTML 4 1.2.2 CSS 10 1.2.3 JavaScript 12 小结 14 上机指导 15 习题 17 第 2 章 Python 常用 Web 框架 18 2.1 Python 常用 Web 框架概述 19 2.1.1 什么是 Web 框架 19 2.1.2 Python 中常用的 Web 框架 19 2.2 Flask 框架的使用 19 2.2.1 安装虚拟环境 20 2.2.2 安装 Flask 21 2.2.3 编写第一个 Flask 程序 23 2.2.4 开启调试模式 24 2.2.5 路由 24 2.2.6 模板 27 2.3 Django 框架的使用 31 2.3.1 安装 Django Web 框架 31 2.3.2 创建一个 Django 项目 31 2.3.3 创建一个 App 34 2.3.4 数据模型 35 2.3.5 管理后台 41 2.3.6 路由 42 2.3.7 表单 44 2.3.8 视图 45 2.3.9 Django 模板 47 2.4 Tornado 框架的使用 48 2.4.1 安装 Tornado 48 2.4.2 编写第一个 Tornado 程序 49 2.4.3 路由 50 2.4.4 HTTP 方法 51 2.4.5 模板 52 小结 53 习题 53 第 3 章 案例 1：基于 Flask 的 在线学习笔记 54 3.1 需求分析 55 3.2 系统设计 55 3.2.1 系统功能结构 55 3.2.2 系统业务流程 55 3.2.3 系统预览 56 3.3 系统开发必备 57 3.3.1 开发工具准备 57 3.3.2 文件夹组织结构 57 3.3.3 项目使用说明 58 3.4 技术准备 58 3.4.1 PyMySQL 模块 58 3.4.2 WTForms 模块 59 3.5 数据库设计 61 3.5.1 数据库概要说明 61 3.5.2 创建数据表 61 3.5.3 数据库操作类 62 3.6 用户模块设计 64 3.6.1 实现用户注册功能 64 3.6.2 实现用户登录功能 66 3.6.3 实现退出登录功能 70 3.6.4 实现用户权限管理功能 70 Contents 目 录

Java Web 程序设计 （慕课版） 112 3.7 笔记模块设计 72 3.7.1 实现笔记列表功能 72 3.7.2 实现添加笔记功能 73 3.7.3 实现编辑笔记功能 75 3.7.4 实现删除笔记功能 75 小结 76 习题 76 第 4 章 案例 2：基于 Flask 的 甜橙音乐网 77 4.1 需求分析 78 4.2 系统设计 78 4.2.1 系统功能结构 78 4.2.2 系统业务流程 78 4.2.3 系统预览 79 4.3 系统开发必备 80 4.3.1 系统开发环境 80 4.3.2 文件夹组织结构 80 4.4 技术准备 81 4.4.1 jPlayer 插件 81 4.4.2 Flask 蓝图 82 4.5 数据库设计 84 4.5.1 数据库概要说明 84 4.5.2 数据表模型 84 4.6 网站首页模块的设计 85 4.6.1 首页模块概述 85 4.6.2 实现热门歌手列表功能 85 4.6.3 实现热门歌曲功能 87 4.6.4 实现音乐播放功能 89 4.7 排行榜模块的设计 90 4.7.1 排行榜模块概述 90 4.7.2 实现歌曲排行榜功能 91 4.7.3 实现播放歌曲功能 93 4.8 曲风模块的设计 94 4.8.1 曲风模块概述 94 4.8.2 实现曲风模块数据的获取 95 4.8.3 实现曲风模块页面的渲染 95 4.8.4 实现曲风列表的分页功能 97 4.9 发现音乐模块的设计 98 4.9.1 发现音乐模块概述 98 4.9.2 实现发现音乐的搜索功能 99 4.9.3 实现发现音乐模块页面的渲染 99 4.10 歌手模块的设计 101 4.10.1 歌手模块概述 101 4.10.2 实现歌手列表功能 101 4.10.3 实现歌手详情功能 102 4.11 我的音乐模块的设计 103 4.11.1 我的音乐模块概述 103 4.11.2 实现收藏歌曲的功能 104 4.11.3 实现我的音乐功能 106 小结 108 习题 108 第 5 章 案例 3：基于 Flask 的 51 商城 109 5.1 需求分析 110 5.2 系统设计 110 5.2.1 系统功能结构 110 5.2.2 系统业务流程 111 5.2.3 系统预览 111 5.3 系统开发必备 114 5.3.1 系统开发环境 114 5.3.2 文件夹组织结构 114 5.4 技术准备 115 5.4.1 Flask-SQLAlchemy 扩展 115 5.4.2 Flask-Migrate 扩展 117 5.5 数据库设计 119 5.5.1 数据库概要说明 119 5.5.2 创建数据表 120 5.5.3 数据表关系 123 5.6 会员注册模块设计 123 5.6.1 会员注册模块概述 123 5.6.2 会员注册页面 124 5.6.3 验证并保存注册信息 129 5.7 会员登录模块设计 130 5.7.1 会员登录模块概述 130 5.7.2 创建会员登录页面 131 5.7.3 保存会员登录状态 133 5.7.4 会员退出功能 134 5.8 首页模块设计 134

第 1 章 Web 应用开发简介 113 5.8.1 首页模块概述 134 5.8.2 实现显示最新上架商品功能 134 5.8.3 实现显示打折商品功能 137 5.8.4 实现显示热门商品功能 139 5.9 购物车模块设计 140 5.9.1 购物车模块概述 140 5.9.2 实现显示商品详细信息功能 141 5.9.3 实现添加购物车功能 142 5.9.4 实现查看购物车功能 144 5.9.5 实现保存订单功能 144 5.9.6 实现查看订单功能 145 小结 146 习题 146 第 6 章 案例 4：基于 Flask 的 e 起去旅行 147 6.1 需求分析 148 6.2 系统设计 148 6.2.1 系统功能结构 148 6.2.2 系统业务流程 149 6.2.3 系统预览 149 6.3 系统开发必备 153 6.3.1 系统开发环境 153 6.3.2 文件夹组织结构 153 6.4 技术准备 154 6.4.1 Flask-Script 扩展 154 6.4.2 定义并运行命令 154 6.4.3 默认命令 157 6.5 数据库设计 159 6.5.1 数据库概要说明 159 6.5.2 创建数据表 159 6.5.3 数据表关系 160 6.6 前台用户模块设计 161 6.6.1 实现会员注册功能 161 6.6.2 实现会员登录功能 167 6.6.3 实现会员退出功能 168 6.7 前台首页模块设计 169 6.7.1 实现推荐景区功能 170 6.7.2 实现推荐地区功能 171 6.7.3 实现搜索景区功能 173 6.8 景区模块设计 175 6.8.1 实现查看景区功能 175 6.8.2 实现查看游记功能 178 6.8.3 实现收藏景区功能 179 6.8.4 实现查看收藏景区功能 179 6.9 后台模块设计 180 6.9.1 实现管理员登录功能 180 6.9.2 实现景区管理功能 181 6.9.3 实现地区管理功能 188 6.9.4 实现游记管理功能 188 6.9.5 实现会员管理功能 189 6.9.6 实现日志管理功能 189 小结 190 习题 190 第 7 章 案例 5：基于 Tornado 的 BBS 问答社区 191 7.1 需求分析 192 7.2 系统设计 192 7.2.1 系统功能结构 192 7.2.2 系统业务流程 192 7.2.3 系统预览 192 7.3 系统开发必备 195 7.3.1 系统开发环境 195 7.3.2 文件夹组织结构 195 7.4 技术准备 196 7.4.1 Redis 数据库 196 7.4.2 短轮询和长轮询 197 7.5 数据库设计 198 7.5.1 数据库概要说明 198 7.5.2 数据表关系 198 7.6 用户系统设计 199 7.6.1 实现用户注册功能 199 7.6.2 实现登录功能 203 7.6.3 实现用户注销功能 204 7.7 问题模块设计 205 7.7.1 实现问题列表功能 205 7.7.2 实现问题详情功能 206 7.7.3 实现创建问题功能 208 7.8 答案长轮询设计 210

Java Web 程序设计 （慕课版） 114 小结 212 习题 212 第 8 章 案例 6：基于 Django 的 智慧校园考试系统 213 8.1 需求分析 214 8.2 系统设计 214 8.2.1 系统功能结构 214 8.2.2 系统业务流程 214 8.2.3 系统预览 214 8.3 系统开发必备 216 8.3.1 系统开发环境 216 8.3.2 文件夹组织结构 216 8.4 技术准备 217 8.4.1 文件上传 217 8.4.2 使用 xlrd 读取 Excel 218 8.5 数据库设计 219 8.5.1 数据库概要说明 219 8.5.2 数据表模型 221 8.6 用户登录模块设计 223 8.6.1 用户登录模块概述 223 8.6.2 使用 Django 默认授权机制 实现普通登录 223 8.6.3 实现机构注册功能 231 8.7 核心答题功能的设计 236 8.7.1 答题首页设计 236 8.7.2 考试详情页面 239 8.7.3 实现答题功能 242 8.7.4 提交答案 246 8.7.5 批量录入题库 248 小结 254 习题 254

第1章 Web开发基础 ■ 从 1990 年圣诞节伯纳斯-李制作的 第一个网页浏览器 World Wide Web 到现在，在短短的几十年间，Web 技 术突飞猛进，已经并且正在深刻地改变 着我们的生活。本章将介绍什么是 Web、Web 的工作原理以及发展历史 等内容。此外，由于 Web 开发通常分 为 Web 前端和 Web 后端，本书虽然 重点介绍 Python 语言作为 Web 开发 的后端语言，但是读者还需要对 Web 前端知识有一定的了解。所以，本章又 着重介绍了 Web 前端开发的基础知 识，包括 HTML、CSS 和 JavaScript。 本章要点 ■ 了解什么是Web ■ 掌握Web应用程序的工作原理 ■ 了解Web的发展历程 ■ 创建HTML文件 ■ 掌握HTML表单元素 ■ 掌握HTML嵌入CSS的3种方式 ■ 掌握JavaScript的基本使用 PA R T01

Python Web 开发案例教程（慕课版） —使用 Flask、Tornado、Django 2 1.1 Web 概述 1.1.1 什么是 Web Web（World Wide Web），亦作 WWW，中文译为万维网。万维网是一个通过互 联网访问的，由许多互相链接的超文本组成的系统。英国科学家蒂姆·伯纳斯-李于 1989 年发明了万维网。 1990 年他在瑞士 CERN（欧洲核子研究组织）的工作期间编写了第一个网页浏览器。网页浏览器于 1991 年在 CERN 向外界发表，1991 年 1 月开始发展到其他研究机构，1991 年 8 月在互联网上向公众开放。 万维网是信息时代发展的核心，也是数十亿人在互联网上进行交互的主要工具。网页主要是文本文件格式 化和超文本标记语言（Hyper Text Markup Language，HTML）。除了格式化文字之外，网页还可能包含图 片、影片、声音和软件组件，这些组件会在用户的网页浏览器中呈现为多媒体内容的连贯页面。 互联网和万维网这两个词通常没有多少区别。但是，两者并不相同。互联网是一个全球互相连接的计 算机网络系统。相比之下，万维网是透过超链接和统一资源标志符连接的全球收集的文件和其他资源。 万维网资源通常使用 HTTP 访问，这是许多互联网通信协议的其中之一。 1.1.2 Web 应用程序的工作原理 要进入万维网上的一个网页，或者其他网络资源时，通常需在浏览器中键入你想访问 网页的统一资源定位符（Uniform Resource Locator，URL），或者通过超链接方式链接 到那个网页或网络资源。随后，URL 的服务器名部分被名为域名系统的分布于全球的 Internet（因特网）的数据库解析，并根据解析结果决定进入哪一个 IP 地址（IP Address）。 接下来的步骤就是根据所要访问网页的 IP 地址向服务器发送一个 HTTP 请求。通 常情况下，HTML 文本、图片和构成该网页的一切其他文件很快会被逐一发送给用户。 网络浏览器接下来的工作是把 HTML、CSS（层叠样式表）和其他接收到的文件所描述的内容，加上图像、 链接和其他必需的资源，显示给用户。这些就构成了所看到的“网页”。 大多数的网页自身包含超链接，指向其他相关网页，可能还包含其他网络资源。像这样通过超链接，把有 用的相关资源组织在一起的集合，就形成了一个所谓的信息的“网”。这个网在 Internet 上被方便的使用，就 构成了最早在 20 世纪 90 年代初，蒂姆·伯纳斯-李所说的万维网。 1.1.3 Web 的发展历程 1．静态页面：HTML 1991 年 8 月 6 日，伯纳斯-李在 alt.hypertext 新闻组贴出了一份关于 World Wide Web 的简单摘要，标志了 Web 页面在 Internet 上的首次登场。其后，随着浏览器的普 及和 W3C 的推动，Web 上可以访问的资源逐渐丰富起来。这个时候，Web 的主要功能 就是浏览器向服务器请求静态 HTML 信息。Web 静态页面的工作原理如图 1-1 所示。 2．动态内容的出现：CGI 最初在浏览器中主要展现的是静态的文本或图像信息，不过人们已经不仅仅满足于访问放在 Web 服务器 上的静态文件，1993 年通用网关接口（Common Gateway Interface，CGI）出现了，Web 上的动态信息服务 开始蓬勃兴起。 什么是 Web Web 应用程序的 工作原理 Web 的发展历程

第 1 章 Web 开发基础 3 图 1-1 Web 静态页面工作原理 CGI 定义了 Web 服务器与外部应用程序之间的通信接口标准，因此 Web 服务器可以通过 CGI 执行外部程 序，让外部程序根据 Web 请求内容生成动态的内容。CGI 是一段程序，运行在服务器上，可以用任何支持标 准输入输出和环境变量的语言编写，如 Shell 脚本、C/C++语言等，只要符合接口标准即可。 Web 服务器将请求发送给 CGI 应用程序，再将 CGI 应用程序动态生成的 HTML 页面发送回客户端。CGI 在 Web 服务器和应用之间充当了交互作用，这样才能够处理用户数据，生成并返回最终的动态 HTML 页面。 CGI 的工作方式如图 1-2 所示。 图 1-2 CGI 的工作方式 3．Web 编程脚本语言：PHP/ASP/JSP 尽管 Web 上提供动态功能了，比如实现网站的登录和注册、表单的处理，等等，CGI 对每个请求都会启 动一个进程来处理，因此性能上的扩展性不高。另外，想象一下用Perl和C语言程序去输出一大堆复杂的HTML 字符串，可读性和维护性是个大问题。为了处理更复杂的应用，一种方法是把 HTML 返回中固定的部分存起 来（称之为模板），把动态的部分标记出来，Web 请求处理时，程序先把部分动态的内容嵌入模板中执行，最 终再返回完整的 HTML。 于是 1994 年，PHP 诞生了。PHP 可以把程序（动态内容）嵌入 HTML（模板）中执行，这不仅能更好 地组织 Web 应用的内容，而且执行效率比 CGI 还高。之后 1996 年出现的 ASP 和 1998 年出现的 JSP 本质上 也都可以看成是一种支持某种脚本语言编程（分别是 VB 和 Java）的模板引擎。1996 年 W3C 发布了 CSS1.0 规范。CSS 允许开发者用外联的样式表来取代难以维护的内嵌样式，而不需要逐个修改 HTML 元素，这让 HTML 页面更加容易创建和维护。此时，有了这些脚本语言，搭配上后端的数据库技术，Web 开发技术突飞 猛进。Web 已经从一个静态资源分享媒介真正变为了一个分布式的计算平台了。 Web 脚本语言工作原理如图 1-3 所示。 图 1-3 Web 脚本语言工作原理

Python Web 开发案例教程（慕课版） —使用 Flask、Tornado、Django 4 4．Web 框架的出现：MVC、ORM 虽然脚本语言大大提高了应用开发效率，但是试想一个复杂的大型 Web 应用，访问各种功能的 URL 地址 纷繁复杂，涉及的 Web 页面多种多样，同时还管理着大量的后台数据，因此需要在架构层面上解决维护性和 扩展性等问题。这时，MVC（Model View Controller，模型—视图—控制器）的概念被引入 Web 开发中。 MVC 早在 1978 年就作为 Smalltalk 的一种设计模式被提出来了，应用到 Web 应用上，模型（Model）用 于封装与业务逻辑相关的数据和数据处理方法，视图（View）是数据的 HTML 展现，控制器（Controller） 负责响应请求，协调 Model 和 View。Model、View 和 Controller 的分开，是一种典型的关注点分离的思想，不 仅使得代码复用性和组织性更好，还使得 Web 应用的配置性和灵活性更好。常见的 MVC 模式如图 1-4 所示。 图 1-4 MVC 模式示意图 此外，数据访问也逐渐通过面向对象的方式来替代直接的 SQL 访问，出现了对象关系映射（Object Relation Mapping，ORM）的概念。更多的全栈框架开始出现，比如 2003 年出现的 Java 开发框架 Spring， 同时更多的动态语言也被加入 Web 编程语言的阵营中，2004 年出现的 Ruby 开发框架 Rails、2005 出现的 Python 开发框架 Django，都提供了全栈开发框架，或者自身提供 Web 开发的各种组件，或者可以方便地 集成各种组件。 Web 框架的应用如图 1-5 所示。 图 1-5 Web 框架的应用 1.2 Web 前端开发基础 Web 开发通常分为前端（Front-End）和后端（Back-End）。“前端”是与用户直接交互的部分，包括 Web 页面的结构、Web 的外观视觉表现以及 Web 层面的交互实现。“后端”更多的是与数据库进行交互以处 理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。 后端的编程语言包括 Python、Java、PHP、ASP.NET 等，而前端的编程语言主要包括 HTML、CSS 和 JavaScript。 1.2.1 HTML 超文本标记语言（Hyper Text Markup Language，HTML）用来描述网页的一种 HTML

第 1 章 Web 开发基础 5 语言，它不是一种编程语言，而是一种标记语言。标记语言是一套标签，这种标签通常被称为 HTML 标签， 它们是由尖括号包围的关键词，比如 <html>。HTML 标签通常是成对出现的，比如 <h1> 和 </h1>。标签 对中的第一个标签是开始标签，第二个标签是结束标签。Web 浏览器的作用是读取 HTML 文档，并以网页 的形式显示它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容，如图 1-6 所示。 图 1-6 显示页面内容 在图 1-6 中，左侧是 HTML 代码，右侧是显示的页面内容。在 HTML 代码中，第一行的<!DOCTYPE html> 表示使用的是 HTML5（最新 HTML 版本），其余的标签基本都是成对出现的，并且在右侧的页面中只显示标 签里的内容，不显示标签。 1．创建 HTML 页面 下面将介绍如何使用 Pycharm 开发工具创建第一个 HTML 页面。 【例 1-1】 使用 PyCharm 创建一个 index.html 文件。使用<h1>标签和<p>标签展示明日学院的基 本信息。（实例位置：资源包\Code\Chapter1\1-1） 具体实现步骤如下。 （1）打开 Pycharm，创建 1-1 文件夹。选中该文件，单击鼠标右键，选择“NEW”→“HTML File”， 弹出 New HTML File 对话框，在对话框的 Name 栏中输入文件名称“index”，最后单击“OK”按钮。 （2）创建完成后，Pycharm 默认生成了基本的 HTML5 代码结构。在<body>和</body>标签内编写 HTML 代码，具体代码如下。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>明日学院简介</title> </head> <body> <h1> 明日学院 </h1> <p> 明日学院，是吉林省明日科技有限公司倾力打造的在线实用技能学习平台，该平台于2016年正式上线， 主要为学习者提供海量、优质的课程，课程结构严谨，用户可以根据自身的学习程度，自主安排学习进 度。我们的宗旨是，为编程学习者提供一站式服务，培养用户的编程思维。 </p> </body> </html> （3）使用谷歌浏览器打开 index.html 文件，运行结果如图 1-7 所示。

Python Web 开发案例教程（慕课版） —使用 Flask、Tornado、Django 6 图 1-7 页面运行效果 2．HTML 表单简介 为了实现浏览器和服务器的互动，可以使用 HTML 表单搜集不同类型的用户输入，将输入的内容从客户 端的浏览器传送到服务器端，经过服务器上的 PHP 程序进行处理后，再将用户所需的信息传递回客户端的浏 览器，从而获得用户信息，使 PHP 与 Web 实现交互。HTML 表单形式很多，比如用户注册、登录、个人中 心设置等页面。 在 HTML 中，使用<form>元素可创建一个表单。表单结构如下。 <form name="form_name" method="method" action="url" enctype="value" target="target_win"> …… //省略插入的表单元素 </form> <form>标签的属性如表 1-1 所示。 表 1-1 <form>标签的属性 <form>标签的属性 说明 name 表单的名称 method 设置表单的提交方式，GET 或者 POST 方式 action 指向处理该表单页面的 URL（相对位置或者绝对位置） enctype 设置表单内容的编码方式 target 设置返回信息的显示方式，target 的属性值包括“_blank”“_parent”“_self”“_top” GET 方法是将表单内容附加在 URL 地址后面发送；POST 方式是将表单中的信息作为一个数据块 发送到服务器的处理程序中，在浏览器的地址栏不显示提交的信息。method 属性默认方法为 GET。 3．HTML 表单元素 表单（form）由表单元素组成。常用的表单元素有以下几种标签：输入域标签<input>、选择域标签<select> 和<option>、文字域标签<textarea>等。 （1）输入域标签<input> 输入域标签<input>是表单中最常用的标签之一。常用的文本框、按钮、单选按钮、复选框等构成了一个 完整的表单。 语法格式如下。 <form> <input name="file_name" type="type_name"> </form> 参数 name 是指输入域的名称，参数 type 是指输入域的类型。<input type="">标签提供了 10 种类型的

第 1 章 Web 开发基础 7 输入区域，用户选择的类型由 type 属性决定。type 属性值及举例如表 1-2 所示。 表 1-2 type 属性值及举例 值 举例 说明 运行结果 text <input name="user" type="text" value= "纯净水" size="12" maxlength="1000"> name 为文本框的名称， value 是文本框的默认值， size 指文本框的宽度（以字 符为单位），maxlength 指文 本框的最大输入字符数 添加一个文本框： password <input name="pwd" type="password" value= "666666" size="12" maxlength= "20"> 密码域，用户在该文本框中 输入的字符将被替换显示为 *，以起到保密作用 添加一个密码域： file <input name="file" type="file"enctype= "multipart/form-data"size="16" maxlength= "200"> 文件域，当上传文件时，可 用来打开一个模式窗口以选 择文件。然后将文件通过表 单上传到服务器，如上传 Word 文件等。必须注意的 是，上传文件时需要指明表 单的属性enctype="multipart /form-data"才可以实现上 传功能 添加一个文件域： image <input name="imageField" type="image" src="images/banner.gif" width="120" height= "24" border="0"> 图像域是指可以用在提交按 钮位置上的图片，该图片具 有按钮的功能 添加一个图像域： radio <input name="sex" type="radio" value= "1" checked>男 <input name="sex" type="radio" value= "0">女 单选按钮，用于设置一组选 择项，用户只能选择一项。 checked 属性用来设置该单 选按钮默认被选中 添加一组单选按钮 （例如，您的性别 为：） checkbox <input name="checkbox" type="checkbox" value="1" checked> 封面 <input name="checkbox" type="checkbox" value="1" checked> 正文内容 <input name="checkbox" type="checkbox" value="0">价 格 复选框，允许用户选择多个 选择项。checked 属性用来 设置该复选框默认被选中。 例如，收集个人信息时，要 求在个人爱好的选项中选择 多项等 添加一组复选框， （如影响您购买本 书的因素：） submit <input type="submit"name="Submit" value= "提交"> 将表单的内容提交到服务器端 添加一个提交按钮：

Python Web 开发案例教程（慕课版） —使用 Flask、Tornado、Django 8 续表 值 举例 说明 运行结果 reset <input type="reset" name="Submit" value= "重置"> 清除与重置表单内容，用于 清除表单中所有文本框的内 容，并使选择菜单项恢复到 初始值 添加一个重置按钮： button <input type="button" name="Submit" value= "按钮"> 按钮可以激发提交表单的动 作，可以在用户需要修改表 单时，将表单恢复到初始的 状态，还可以依照程序的需 要发挥其他作用。普通按钮 一般是配合JavaScript 脚本 进行表单处理的 添 加 一 个 普 通 按 钮： hidden <input type="hidden" name="bookid"> 隐藏域，用于在表单中以隐 含方式提交变量值。隐藏域 在页面中对于用户是不可见 的，添加隐藏域的目的在于 通过隐藏的方式收集或者发 送信息。浏览者单击“发送” 按钮发送表单时，隐藏域的 信息也被一起发送到 action 指定的处理页 添加一个隐藏域： （2）选择域标签<select>和<option> 通过选择域标签<select>和<option>可以建立一个列表或者菜单。菜单的使用是为了节省空间，正常状态 下只能看到一个选项，单击右侧的下三角按钮打开菜单后才能看到全部的选项。列表可以显示一定数量的选项， 如果超出了这个数量，就会自动出现滚动条，浏览者可以拖动滚动条来查看各选项。 语法格式如下。 <select name="name" size="value" multiple> <option value="value" selected>选项1</option> <option value="value">选项2</option> <option value="value">选项3</option> …… </select> 参数 name 表示选择域的名称；size 表示列表的行数；value 表示菜单选项值；multiple 表示以菜单方式 显示数据，省略则以列表方式显示数据。 选择域标签<select>和<option>的显示方式及举例如表 1-3 所示。 表 1-3 中给出了静态菜单项的添加方法，在 Web 程序开发过程中，也可以通过循环语句动态添加菜 单项。

第 1 章 Web 开发基础 9 表 1-3 选择域标签<select>和<option>的显示方式及举例 显示方式 举 例 说 明 运行结果 列表方式 <select name="spec" id="spec"> <option value="0" selected>网 络编程</option> <option value="1">办公自动化 </option> <option value="2"> 网 页 设 计 </option> <option value="3"> 网 页 美 工 </option> </select> 下拉列表框，通过选择域标签 <select>和<option>建立一个 列表，列表可以显示一定数量的 选项，如果超出了这个数量，就 会自动出现滚动条，浏览者可以 拖动滚动条来查看各选项。 selected 属性用来设置该菜单 默认被选中 请选择所学专业： 菜单方式 <select name="spec" id="spec" multiple > <option value="0" selected>网 络编程</option> <option value="1">办公自动化 </option> <option value="2"> 网 页 设 计 </option> <option value="3"> 网 页 美 工 </option> </select> multiple 属 性 用 于 下 拉 列 表 <select>标签中，设置该属性， 用户可以使用 Shift 键和 Ctrl 键 进行多选 请选择所学专业： （3）文字域标签<textarea> 文字域标签<textarea>用来制作多行的文字域，可以在其中输入更多的文本。 语法格式如下。 <textarea name="name" rows=value cols=value value="value" warp="value"> ……文本内容 </textarea> 参数 name 表示文字域的名称；rows 表示文字域的行数；cols 表示文字域的列数（这里的 rows 和 cols 以字符为单位）；value 表示文字域的默认值，warp 用于设定显示和送出时的换行方式，值为 off 表示不自动 换行，值为 hard 表示自动硬回车换行，换行标签一同被发送到服务器，输出时也会换行，值为 soft 表示自动 软回车换行，换行标签不会被发送到服务器，输出时仍然为一列。 例如，使用文字域实现发表建议的多行文本框可以使用下面的代码。 <textarea name="remark" cols="20" rows= "4" id="remark"> 请输入您的建议! </textarea> 运行上面的代码将显示图 1-8 所示的结果。 图 1-8 文字域显示效果