WorkBuddy AI 编程入门
第 11 章

给主页加后端:数据真正存起来

留言存在本地只在你的电脑上能看到。这一章教你怎么加后端——把数据存到服务器上,所有访客共享。

先搞清楚:前端 vs 后端

你最熟悉的网页(HTML/CSS/JS)运行在浏览器里,这叫前端。前端只管"显示"和"简单交互"。

后端运行在服务器上,负责"存储数据""处理逻辑""权限控制"这些重活。

前后端分离架构
🖥️
前端(浏览器)

HTML / CSS / JS
用户看到和操作的

⚙️
后端(服务器)

Node.js / Python
处理数据、存储留言

🗄️
数据库

SQLite / MySQL
留言永久存储

localStorage 的局限

之前留言存在 localStorage 里。它有三个问题:

加上后端之后:所有访客共享留言 + 永久保存 + 换设备也还在

让 WorkBuddy 帮你生成后端

后端比前端稍微复杂——你需要安装一个运行环境。但 WorkBuddy 可以帮你搞定一切。

第一步:让 WorkBuddy 给你完整方案

我有一个个人主页,上面有留言板功能。现在留言存在浏览器的 localStorage 里,只能自己看到。我想加一个后端:

需求:
1. 留言存到服务器上的数据库
2. 所有访客都能看到所有留言
3. 刷新/换电脑后数据还在

请给我一个最简方案:
- 后端用 Python Flask(轻量、适合新手)
- 数据库用 SQLite(单文件、无需安装)
- 全部代码控制在两个文件以内
- 请同时告诉我怎么安装 Python 和运行这个后端(我是 Mac/Windows 零基础)

第二步:WorkBuddy 会给你什么

WorkBuddy 会给你两样东西:

  1. 后端代码(一个 .py 文件,用 Flask 写的 API 服务器)
  2. 前端改动(把留言板从 localStorage 改成调用后端 API)
📌 这次需要装点东西

前几章我们用的都是纯 HTML 文件,双击就运行。后端需要 Python 环境——去 python.org 下载安装即可。

不用担心,让 WorkBuddy 一步步教你:"我不懂 Python,请先教我怎么在 Mac 上安装 Python,然后教我怎么运行你给的代码。"

留言数据流

👤
用户
提交留言
🌐
前端
发送 HTTP 请求
POST /api/messages
⚙️
后端
接收数据
存入 SQLite
🗄️
数据库
留言永久保存
所有用户共享

本章小结

要点说明
前端浏览器里运行的网页(HTML/CSS/JS),负责显示
后端服务器上运行的程序(Python/Node),负责存储
localStorage 局限单机、独享、容量小
推荐方案Python Flask + SQLite,WorkBuddy 帮你写全部代码