第 11 章
给主页加后端:数据真正存起来
留言存在本地只在你的电脑上能看到。这一章教你怎么加后端——把数据存到服务器上,所有访客共享。
先搞清楚:前端 vs 后端
你最熟悉的网页(HTML/CSS/JS)运行在浏览器里,这叫前端。前端只管"显示"和"简单交互"。
后端运行在服务器上,负责"存储数据""处理逻辑""权限控制"这些重活。
前后端分离架构
🖥️
前端(浏览器)
HTML / CSS / JS
用户看到和操作的
↔
⚙️
后端(服务器)
Node.js / Python
处理数据、存储留言
↔
🗄️
数据库
SQLite / MySQL
留言永久存储
localStorage 的局限
之前留言存在 localStorage 里。它有三个问题:
- 换电脑就没了——数据在那台电脑的浏览器里
- 别人看不到——你的留言只有你能看到
- 容量有限——只能存几 MB
加上后端之后:所有访客共享留言 + 永久保存 + 换设备也还在。
让 WorkBuddy 帮你生成后端
后端比前端稍微复杂——你需要安装一个运行环境。但 WorkBuddy 可以帮你搞定一切。
第一步:让 WorkBuddy 给你完整方案
我有一个个人主页,上面有留言板功能。现在留言存在浏览器的 localStorage 里,只能自己看到。我想加一个后端:
需求:
1. 留言存到服务器上的数据库
2. 所有访客都能看到所有留言
3. 刷新/换电脑后数据还在
请给我一个最简方案:
- 后端用 Python Flask(轻量、适合新手)
- 数据库用 SQLite(单文件、无需安装)
- 全部代码控制在两个文件以内
- 请同时告诉我怎么安装 Python 和运行这个后端(我是 Mac/Windows 零基础)
第二步:WorkBuddy 会给你什么
WorkBuddy 会给你两样东西:
- 后端代码(一个 .py 文件,用 Flask 写的 API 服务器)
- 前端改动(把留言板从 localStorage 改成调用后端 API)
📌 这次需要装点东西
前几章我们用的都是纯 HTML 文件,双击就运行。后端需要 Python 环境——去 python.org 下载安装即可。
不用担心,让 WorkBuddy 一步步教你:"我不懂 Python,请先教我怎么在 Mac 上安装 Python,然后教我怎么运行你给的代码。"
留言数据流
👤
用户
提交留言
→
🌐
前端
发送 HTTP 请求
POST /api/messages
POST /api/messages
→
⚙️
后端
接收数据
存入 SQLite
存入 SQLite
→
🗄️
数据库
留言永久保存
所有用户共享
所有用户共享
本章小结
| 要点 | 说明 |
|---|---|
| 前端 | 浏览器里运行的网页(HTML/CSS/JS),负责显示 |
| 后端 | 服务器上运行的程序(Python/Node),负责存储 |
| localStorage 局限 | 单机、独享、容量小 |
| 推荐方案 | Python Flask + SQLite,WorkBuddy 帮你写全部代码 |