Web Applications

欢迎来到网页应用程序（Web Applications）的世界！

在本章中，我们将从电脑如何互相沟通（网络）的研究，转向我们如何构建人们在这些网络上真正使用的工具：网页应用程序。无论是你浏览社交媒体动态，还是为项目上传文件，你都在使用网页应用程序。阅读完这些笔记后，你将明白如何使用 HTML、CSS、Python (Flask) 和 SQL 亲手建立一个基础版本。如果这看起来有很多东西要学，别担心——我们会一步一步来！

1. 网页应用程序与原生应用程序：有什么分别？

在开始构建任何东西之前，我们需要知道什么是网页应用程序，以及它与你在手机或电脑上安装的应用程序有何不同。

网页应用程序 (Web Applications)

这些程序是在网页浏览器（如 Chrome、Safari 或 Firefox）内运行的。你不需要“安装”它们；只需要浏览网址即可。

• 优点： 它们可在任何有浏览器的设备上运行（跨平台），而且你不需要手动下载更新。
• 缺点： 它们通常需要连接网络才能运作，速度可能比原生应用程序稍慢。

原生应用程序 (Native Applications)

这些是专门为特定操作系统构建的（例如 Windows 的 ".exe" 文件，或从 Apple App Store 下载的应用程序）。

• 优点： 它们可以在离线状态下运行，并能完全存取设备的硬件（如相机或专用传感器）。
• 缺点： 开发人员必须为不同设备编写不同版本（一个给 Android，另一个给 iOS）。

快速回顾： 把网页应用程序想像成自助餐餐厅（你到那里去拿你需要的东西），而原生应用程序就像在家煮食（你必须先在自己的厨房安装工具和准备材料）。

2. 提升用户体验：可用性原则

你有没有试过使用某个网站时，因为找不到“提交”按钮而感到沮丧？这就是可用性（Usability）问题。当我们设计网页应用程序时，我们遵循五个关键原则来确保用户满意：

1. 系统状态的可见性 (Visibility of System Status)： 应用程序应时刻让用户知道发生了什么事。
例子： 加载条或显示“文件上传成功！”的信息。

2. 一致性 (Consistency)： 在整个应用程序中使用相同的颜色、字体和按钮样式，以免让用户感到困惑。

3. 预示性 (Affordance)： 对象看起来应该像它运作的方式。
例子： 按钮应该看起来“可以点击”（例如加上阴影或 3D 效果），链接则应与纯文字看起来不同。

4. 限制 (Constraints)： 通过限制用户的选择来防止他们犯错。
例子： 在用户填写所有必要栏位之前，将“提交”按钮设为灰色（禁用状态）。

5. 反馈 (Feedback)： 对于用户采取的每一个动作，系统都应给予回应。如果我点击一个按钮，它应该变色或显示一个“成功”的弹出窗口。

记忆法： 记住 "V-C-A-C-F" — Very Cool Apps Create Fun！

3. 全貌：客户端-服务器架构

网页应用程序是两方之间的团队合作：

客户端 (The Client / "前端")： 这是用户所看到的部分。我们使用 HTML 来构建结构，并使用 CSS 进行美化。

服务器 (The Server / "后端")： 这是应用程序的“大脑”。我们使用 Python（特别是一个称为 Flask 的框架）来处理数据，并使用 SQL 将信息储存在数据库中。

比喻： 想像一家餐厅。客户端是餐厅的用餐区和菜单（看起来很美观）。服务器是厨房（负责工作）。数据库是储藏室（储存食材/数据的地方）。

4. 构建客户端：HTML 表单

为了从用户那里获取数据，我们使用 <form> 标签。有两个关键属性你必须知道：

• action： 数据应发送到的 URL/路由。
• method： 发送要储存的数据时，通常使用 "POST"。

接收用户输入

我们使用 <input> 标签。name 属性是最重要的部分，因为它就像 Python 用来寻找数据的变量名称。

文字输入例子： <input type="text" name="username">

图片输入例子： <input type="file" name="profile_pic">

常见错误提醒： 如果你希望用户上传文件或图片，你的 <form> 标签必须包含 enctype="multipart/form-data"。如果你忘记了，服务器只会收到文件名，而不会收到真正的文件！

5. 运作大脑：Python 与 Flask

Flask 是我们在 Python 中运行的“小型网页服务器”。它使用路由 (routes) 来决定当用户访问特定 URL 时该做什么。

服务器如何处理输入：

1. 文字输入： 使用 request.form['variable_name'] 从表单获取文字。

2. 文件/图片上传： 使用 request.files['variable_name'] 获取上传的文件。

3. 安全性： 在储存上传的文件之前，务必使用 secure_filename()，以防止黑客将文件命名为危险的名称，如 "virus.exe"。

储存方式：SQL (sqlite3)

Python 在你关闭后不会“记住”东西。为了永久保存数据，我们将其发送到 SQL 数据库。标准流程是：

连接数据库 → 建立 Cursor（游标） → 执行 SQL 指令（如 INSERT 或 SELECT） → 提交 (Commit) 变更 → 关闭连接。

6. 显示结果：输出数据

一旦服务器处理了数据，就需要将其显示给用户。我们使用 render_template() 将 Python 数据传送到 HTML 页面。

格式化输出

• 文字： 直接将变量传递给 HTML 模板即可。
• 表格： 在 HTML 中使用循环 (for loop)（使用 Jinja2 语法），为数据库结果中的每一行建立 <tr> 和 <td> 标签。
• 图片： 使用 <img src="..."> 标签，指向你储存用户上传文件的文件夹。

快速回顾框：
- HTML： “骨架”（结构）
- CSS： “皮肤”（外观）
- Python/Flask： “大脑”（逻辑）
- SQL： “记忆”（储存）

7. 测试你的应用程序

你如何知道它是否有效？你在本地服务器 (local server) 上进行测试。当你运行 Flask 脚本时，它通常会在一个特殊的地址托管该应用程序：127.0.0.1:5000。

127.0.0.1 是一个“回环 (loopback)”地址，意思是“这台电脑”。5000 是端口号 (port number)。

测试时要检查什么：

1. 网页加载时有没有错误？
2. 如果我留空某个栏位，应用程序能否妥善处理（数据验证）？
3. 在我点击提交后，数据是否真的出现在数据库中？

考试重点总结：

• 了解网页应用程序在浏览器中运行，而原生应用程序安装在操作系统上。
• 背诵可用性原则（可见性、一致性、预示性、限制、反馈）。
• 知道 request.form 用于文字，request.files 用于文件上传。
• 记得在 HTML 的文件上传表单中使用 enctype="multipart/form-data"。
• 准备好解释数据流向：从用户的浏览器出发，经由 Flask 服务器进入 SQL 数据库，再返回用户端的过程。

如果代码部分起初看起来很棘手，别担心！专注于数据的“流向”——它从哪里开始，在哪里被处理，以及最终去了哪里。你一定能做到的！