Flask 项目实战 1: 功能介绍
- Flask 项目实战 1：功能介绍；
- Flask 项目实战 2：后端实现；
- Flask 项目实战 3：前端实现。
本小节首先介绍了待做清单的功能，然后讲解了程序的总体结构。
1. 功能简介
本节使用 Flask 开发一个功能完整的 Web 应用程序 —— 待做清单，该 Web 应用程序记录待做事项。程序提供了用户注册的功能，用户登录后，录入的待做事项被记录在服务端，如果换一台机器，使用浏览器登录后，仍然能够看到已经录入的待做事项。
下面的视频演示了待做清单的功能：
2. 涉及的知识点
本节开发的待做清单程序，在保持程序简短时，尽可能融入了更多的知识点，包括：
- 模板
- WTF 表单和表单验证
- 蓝图
- ORM 访问数据库
- 会话 Session
3. 运行程序
3.1 源程序下载
3.2 源文件目录
程序由多个源文件构成，如下所示：
| 源文件 | 描述 |
|---|---|
| db.sql | 创建数据库的 sql 脚本文件 |
| app.py | Flask 应用程序实例以及配置 |
| main.py | Flask 应用程序的入口 |
| db.py | 提供访问数据库的功能函数 |
| users.py | 实现蓝图 users，提供登录、注册的功能 |
| todos.py | 实现蓝图 todos，提供增加、修改、删除待做事项 todo 的功能 |
| templates/index.html | 首页的页面模板 |
| templates/login.html | 登录的页面模板 |
| templates/register.html | 注册的页面模板 |
| static/style.css | 样式文件 |
| static/script.js | 调用后端服务的接口 |
3.3 安装相关的库
为了使用 Flask 框架、数据库 ORM、表单验证等模块，使用 pip3 依次安装：
pip3 install flask
pip3 install pyMysqL
pip3 install sqlAlchemy
pip3 install flask-sqlalchemy
pip3 install wtforms
pip3 install flask-wtf
3.4 设置数据库
3.5 运行程序
main.py 是程序的入口，执行如下命令启动程序：
$ python3 main.py
4. 程序的结构
程序的核心结构如上图所示，程序由前端与后端构成。
前端的核心操作如下：
- 在 login.html 中，通过 POST 方法向页面 /users/login 提交表单请求完成登录；
- 在 register.html 中，通过 POST 方法向页面 /users/register 提交表单请求完成登录；
- 访问页面 /users/logout 退出系统；
- 在 script.js 中，函数 addTodo () 通过 Ajax 向页面 /todos/add 请求增加待做事项；
- 在 script.js 中，函数 updatetodo () 通过 Ajax 向页面 /todos/update 请求更新待做事项；
- 在 script.js 中，函数 deletetodo () 通过 Ajax 向页面 /todos/delete 请求删除待做事项。
后端的核心操作如下：
- Flask 程序使用了 2 个蓝图：users 和 todos；
- 蓝图 users 定义了页面 /users/login 、/users/register、/users/logout，登录和注册的页面处理函数是 login 和 register，最终调用 db.js 中的数据库访问函数 login 和 register，实现登录和注册的功能；
- 蓝图 todos 定义了页面 /todos/add、/todos/update、/todos/delete，它们的页面处理函数是 addTodo、updatetodo、deletetodo，最终调用 db.js 中的数据库访问函数 addTodo、updatetodo、deletetodo，实现增加、更新、删除待做事项的功能。
5. 小结
本小节介绍了待做清单的功能和程序结构，使用思维导图描述如下：
