第65篇：用 AI 搭一个全栈小项目（实战）——把三样零件，拧成一句"这是我做的"

会做轮子，会做发动机，就是不会装车。

前面三篇攒了三个零件：第62篇网页、第63篇接口、第64篇数据库。

今天干一件事：把它们串起来——串完你输待办、点保存、关掉重启明天再开它还在，发给同事他也能加。这就叫全栈。

听着唬人，其实就是从你点的按钮一路通到硬盘上的数据，中间不断线，一行代码都不用手写。

一、先把”要做什么”钉死：一句话

新手做项目最大的死法不是不会写代码，是做着做着不知道自己在做什么。第一步永远不是开编辑器，是用一句话说清要什么。

我们今天做：一个团队待办墙：任何人打开网页都能看到待办列表，能加一条、勾完成、能删除。数据存在服务器上，所有人看到同一份。

这句话里藏着四个词：看到（读）、加一条（增）、勾完成（改）、删除（删）。增删改查，四件事——99% 的软件在干这活。微信是（发消息=增）、淘宝是（下单=增）。你今天做的，结构和它们同类，只是简单太多。

写这句话有个诀窍：先想”用户能在我这页面上干哪几件事”，再倒推要什么——含糊的”做个好用的待办”AI 接不住，清楚的”能看、能加、能勾、能删”它一眼就懂要给哪四个接口。

fullstack-map

二、开工前：先把地基打对，文件夹怎么分

这步没人教，却是新手翻车重灾区——很多人一个文件夹堆一堆 index.html，自己都找不到能跑的。

为什么非得分开？后端是”发动机”，前端是”车厢”，不该焊在一起：换样式只动 public/、换库只动 db.js，免得手滑删了后端。

开局第一件事：让 AI 给你排座位。 直接问：”我要做前后端分离小项目（前端 HTML/CSS/JS，后端 Node.js+Express，数据库 SQLite），请给最简单清晰的项目文件夹结构，树状图，每个文件旁用中文注释干什么。不引任何构建工具和框架。”

它会给你：

my-todo/
├── server/          ← 后端住这儿
│   ├── server.js    ← 后端主程序
│   ├── db.js        ← 跟数据库打交道的代码
│   └── todo.db      ← 数据库文件（数据都在里）
├── public/          ← 前端住这儿
│   ├── index.html   ← 页面骨架
│   ├── style.css    ← 页面长相
│   └── app.js       ← 页面上的动作
└── package.json     ← 项目"身份证"，记录用了哪些工具

三个关键点： 1）server/ 与 public/ 分开； 2）public/ 名不能乱改，后端有句代码专门盯着它发页面； 3）todo.db 是全部身家，备份只复制这一个文件。

一句话铁律：先建文件夹，再写代码。

folder-structure

三、核心方法：别让 AI 一次做完，先出”四张清单”

这是今天最值钱的一段。 新手最大的错，是上来就说”帮我做个待办网站”。AI 吐三百行，你复制进去跑不起来，改到第五版俩都忘了要干嘛。

正确做法：先让 AI 拆四张清单，确认一遍再做。

清单	回答什么问题	例子
① 数据清单	我要存什么	待办：编号、内容、是否完成、创建时间
② 接口清单	前后端怎么对话	查全部、加一条、改状态、删一条
③ 页面清单	用户看到什么	输入框、添加按钮、列表
④ 步骤清单	按什么顺序做	先数据库 → 再接口 → 再页面 → 最后联调

光看表头虚，把待办墙填进去（让 AI 出时照这颗粒度）：

① 数据清单：todos 表（id主键 / title内容 / done0或1 / created_at时间）。
② 接口清单：查 GET /api/todos、加 POST /api/todos(传 title)、改 PUT /api/todos/:id(传 done)、删 DELETE /api/todos/:id。
③ 页面清单：输入框+添加钮、列表(每条带复选框和删除键)、勾选变灰。
④ 步骤清单：建库 → 写接口 → 写页面 → 联调。

举个”现在改”的例子：AI 若写”删 DELETE /api/todos“不带 id，你一眼该拦住——不传 id 怎知删哪条？

拆清单提示词（完整版见文末）： “我要做团队待办墙【需求一句话】。先不要写任何代码，分四部分给实施清单：1 数据清单（几张表、字段、类型、用途）；2 接口清单（几个接口、方式、地址、传什么、返回什么）；3 页面清单（元素、用户操作）；4 步骤清单（顺序、几步）。用表格，中文。” 哪儿不对现在就说，改张表比改三百行便宜太多。

four-lists

四、第一步：把后端和数据库一次性打通

清单确认，开始动手。顺序关键：从里往外做（后端不依赖前端，前端却依赖它）。

跟 AI 说（完整模板见文末）：”按清单完成第一部分：后端+数据库。Node.js+Express+SQLite（better-sqlite3）。给三个完整文件：package.json、server/db.js（建表+所有数据库操作）、server/server.js（四个接口，并把 public 作为静态页面提供出去）。告诉我终端要执行哪几条命令，关键行加中文注释。”

注意几句”魔法词”：

“完整文件，不要片段”
“把 public 作为静态页面提供出去”（绕开跨域）
“需要执行哪几条命令”（新手常卡这步）

拿到代码按它说的走，通常三条：

npm init -y
npm install express better-sqlite3
node server/server.js

看到 服务已启动 http://localhost:3000，第一步成了。先别做前端，浏览器直接访问 http://localhost:3000/api/todos，看到 [] 就说明后端和数据库都通了。

顺手记一下：这个 [] 是空数组，意思是”数据库连上了、接口也通了，只是还没数据”。若看到红字或打不开，回终端看最后几行报错即可；装依赖前先 node -v 确认有 Node。

backend-selfcheck

五、第二步：让前端去”喊”后端

现在做外面这层。把第62篇写死的数据，换成”从后端拿”。

跟 AI 说（完整模板见文末）：给 public/ 下三个文件，要求如下：

标题”团队待办墙”；
输入框 + 添加按钮 + 列表；
每条待办带复选框（勾选变灰）+ 删除按钮；
用 fetch 调后端；
打开页面自动加载；
操作后自动刷新；
简洁响应式、纯原生。

第3条隐藏考点：接口地址写相对路径 /api/todos，别写 http://localhost:3000/api/todos。 写死 localhost，传到服务器别人电脑的 localhost 是他自己，一访问就报错；相对路径搬到哪都能跑。这一条能省一整晚。

把流程翻译成人话，其实就五步：

你点”添加”；
前端 POST 给后端；
后端写库；
返回新待办；
前端画进列表。

数据从指尖一路走到硬盘，你没写一行逻辑。代码放进 public/，重启后端，浏览器开 http://localhost:3000，输入”买菜”点添加。刷新还在，关掉再开还在——这一刻，你做出了真东西。

六、联调三查：没通先查这三样

十有八九第一次不通，九成是下面三件事之一，按顺序查即可。

查一：F12 红字最准。 点 Console（红字即病历本）看 Network：200 正常、404 地址错、500 后端炸了、CORS 跨域、failed 没启动。红字整段原样贴给 AI，别转述。
查二：跨域（CORS）——新手第一杀手。 报错含 CORS policy，是网页从 5500 开却找 3000 被拦。解法：A 让后端托管 public（别用 Live Server）；B 加 cors 中间件。
查三：端口被占。 启动见 EADDRINUSE，3000 门牌有人住，让 AI 改 3001，或关掉占着 3000 的程序。换个门牌比赶人快。

three-checks

七、最后一步：发给别人看

现在项目只能在你电脑跑（localhost 是本机），同事打不开，得放到一直开着的电脑——服务器。

新手三条路：

路一·同一 WiFi 共享：ipconfig 查 IPv4 如 192.168.1.23，同事同 WiFi 开 http://192.168.1.23:3000 即用，关机/换网就断。
路二·免费云平台：Render、Railway 传项目，给启动命令 node server/server.js，得 xxx.onrender.com 公网地址（免费版会休眠）。
路三·买云服务器：阿里云/腾讯云轻量服务器几十元一月常驻，最稳。

八、四条铁律，抄在本子上

铁律一：从里往外做，一层通了再做下一层——数据库→接口→页面→联调，像先铺水管再装龙头。
铁律二：每完成一层，立刻验证。 后端写完先访问接口看有没有返回，别等三层写完才第一次跑——那时出错不知错在哪层。
铁律三：报错原文贴给 AI，一次只改一处——别只说”不好使”，把红字整段复制，改也别说重写整个文件，说清”只改 X，其他不变”。
铁律四：别一次性要太多，一次一个功能。 先让它能”加和看”，跑通了再加”勾完成”“删除”。功能越多，炸的时候越不知道谁惹的祸。

提示词模板盒子（可直接复制）

模板 1｜拆四张清单（开工第一句）

我要做一个【项目一句话描述，如：团队待办墙，任何人打开网页都能看待办列表，能新增、勾选完成、删除，数据存在服务器上，所有人看到同一份】。
先不要写任何代码，请分四部分给我实施清单：
1. 数据清单：几张表，每张表字段，每个字段类型、用途
2. 接口清单：几个接口，请求方式、地址、传什么、返回什么
3. 页面清单：页面元素，用户能做哪些操作
4. 步骤清单：从零到跑通的顺序，每步大概做什么
全部用表格，中文。我是编程新手，假设我什么都不懂。

模板 2｜生成后端 + 数据库（一次打通）

按上面的清单，完成第一部分：后端 + 数据库。
技术要求：Node.js + Express + SQLite（better-sqlite3）。
请给我以下文件的【完整内容，不要片段】：
1. package.json
2. server/db.js —— 建表和所有数据库读写
3. server/server.js —— 所有接口，并把 public 作为静态资源目录提供出去（避免跨域）
另外单独列出：终端要依次执行哪几条命令安装依赖和启动。
关键行加中文注释。确保代码可直接复制运行。

模板 3｜生成前端并对接 + 部署

现在完成第二部分：前端。
请给 public/index.html、public/style.css、public/app.js 三个完整文件。
页面要求：
1. 标题「____」，下面输入框+「添加」按钮+列表
2. 每条左边复选框（勾选后文字加删除线变灰），右边「删除」按钮
3. 所有数据用 fetch 调后端，接口地址【必须用相对路径】如 /api/todos，不要写 http://localhost:3000
4. 页面加载自动获取一次列表；增删改成功后自动刷新
5. 简洁现代，浅色卡片式，手机能看；纯原生，不用框架
代码完整可直接运行，关键行加中文注释。

（部署时另问）我有 Node.js+Express+SQLite 小项目，想免费部署到公网让别人访问。请推荐2个对新手最友好的免费平台，并给最简单那个从注册到部署的分步说明。

速查：全栈项目五步顺序

顺序	做什么	做完怎么验证
1	拆四张清单	自己读一遍觉得没漏
2	建文件夹结构	目录树和 AI 给的一致
3	后端 + 数据库	浏览器访问接口看到 `[]`
4	前端页面	访问 3000 端口页面正常
5	联调 + 部署	增删改都生效，刷新数据还在

下篇预告

恭喜，你有一个能发出去的作品了。 从61篇一个函数到今天能多人访问的小项目，五篇一行代码没手写。

接下来换个方向——日常工作更常见的是“处理一堆东西”：重命名、挑报错、打码、合并表格。第66篇：《用 AI 生成正则/脚本小工具》 讲清正则你根本不用学，描述三要素 AI 直接给答案。

VF的部落格