問題背景
初學者想用 HTML5 做帶登入的查詢系統，使用者帳密存 SQL，查詢資料也存 SQL，不清楚如何驗證登入、如何連接資料庫。
核心概念：B/S 架構
HTML5 只能跑在瀏覽器（前端），無法直接連接資料庫。 必須透過**伺服器端程式（後端）** 代理資料庫操作。
完整流程
- 前端（HTML/JS）：收集帳密，用 `fetch`/`axios` 發送 POST 請求到後端 API（如 `/api/login`）。
- 後端（Java/PHP/Python/Node.js 等）：
> 接收請求，解析參數。
> 連接資料庫（JDBC/PDO/SQLAlchemy 等），查詢 `users` 表驗證帳密。
> 驗證成功生成 Token（JWT/Session），返回給前端。
- 後續查詢：前端攜帶 Token 請求資料 API，後端驗證 Token 後查詢業務表，返回 JSON。
技術選型建議
| 層級 | 推薦技術 | 備註 |
|---|
| 前端 | Vue / React / 原生 JS | HTML5 只是標記語言，需框架管理狀態 |
| 後端 | Spring Boot / Node.js Express / PHP Laravel | 成熟生態，資料庫整合方便 |
| 資料庫 | MySQL / PostgreSQL | 關聯式資料庫適合結構化查詢 |
| 認證 | JWT (Stateless) / Session + Cookie | 初學者建議 Session 較直觀 |
安全提醒
- **絕不在前端直連資料庫**（會暴露連線字串、SQL 注入風險）。
- 密碼**必須加鹽雜湊存儲**（BCrypt/Argon2），不可明文或單純 MD5。
- 使用參數化查詢/ORM 防 SQL 注入。
- HTTPS 傳輸，Token 設定過期與刷新機制。
學習路徑建議
- 先學會一門後端語言（Java/Python/JS）的基礎語法與 Web 框架。
- 掌握 JDBC/資料庫連接池操作。
- 實作簡單的「註冊→登入→查詢」閉環。
- 再引入前端框架美化介面。
