掌握全流程优先，理解优先

(只按蓝色部分操作即可最快解锁最简流程，如果有空还是建议通篇浏览一下）

新手从 0 到 1 开发一个完整可上线的全栈网站

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

写在开头

开源项目地址：

https://github.com/cptzzt/cptodo

安卓安装包下载地址：

https://github.com/cptzzt/cptodo/releases/tag/v1.0/app-release.zip

点击底部Assets的app-release.zip下载并解压

其中的feature/capacitor-android分支为最新最全分支（feature/docker分支实际上是最新，但是写这篇文章的时候还没有，是docker容器化部署分支），多端适配并含有安卓文件夹，其他分支不可用，详情阅读README.md文件

可供访问域名：https://cptodo.top（可复制至浏览器或直接点击底部阅读原文访问）

网站图片：

这篇文章可能和其他技术文章不太一样。它的目标不是展示"我有多厉害"，而是告诉你：在 2026 年的今天，任何一个有想法、会打字的人，都可以借助 AI 编程工具，从零做出一个完整的全栈网站。你不必会写后端，不必懂数据库，甚至连"什么是服务器"都可以边做边学。当然，在此过程中，你仍然可能遇到不懂的名字或概念，此时AI不仅可以是你的工具，还可以是你的老师，保持求知欲，可以学会任何事情，并且比以往任何一个时候都要更快、更全。

我是怎么做到的？——「我只负责提需求和测试验收，所有代码都是 AI 写的。」

这不是夸张，是我完完整整走完一个全栈项目的真实模式。而这篇指南，就是这份模式的完整复现。你甚至可以先把这篇文章完整复制给AI，它会更懂你想做什么

前置说明：阅读导航

这篇文章有两套内容：

一、蓝色字体（带 ▶ 标记）——这是"最小必要流程"。如果你想快速做出一个网站，只看蓝色步骤就行，跟着操作就能跑通。蓝色步骤很少，因为大部分工作 AI 帮你做了。

二、黑色字体——这是原理讲解和扩展知识。你在按蓝色步骤操作的过程中遇到疑问，再回来看黑色部分。不看也不影响你把网站跑起来。

▶ 先建好一个空项目文件夹、并用 VS Code 打开（如果没有安装VS Code要先按下面操作安装一下，用它打开文件夹）；之后先跳到第五章 Git 版本控制，执行一次 git init 初始化仓库，再继续后面步骤。

VS Code——写代码的地方

安装 VS Code

🖱️ 打开https://code.visualstudio.com ，下载安装。

🖱️ 安装后在扩展市场搜索安装：Chinese (Simplified) 中文语言包。

🖱️ 然后通过命令行或插件形式打开你AI Coding工具，根据它的建议安装其他插件

⚠️ 如果你习惯其他编辑器（WebStorm、Sublime 等），完全可以用你习惯的。这些工具本质上都是文本编辑器。

▶ 如果你只想赶紧做一个自己的网站出来，从头到尾只看蓝色文字即可，其余内容可以跳过或以后再读。整个蓝色流程不超过15 步。每一章在执行步骤之前可以大致浏览一下或者根据其中的步骤先问清楚明白，理解了再动手，体验会好很多

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

另外，有必要说明一下这个项目的定位：

这是一个学习项目，所以选择了"买服务器、买域名、手动部署"的硬核路线，而不是用 Vercel、Supabase 等一键托管平台。目的就是打通全流程的底层原理。如果你只想快速上线一个东西，用 Vercel + Supabase 可能十分钟就搞定了，但你会错过理解"服务器是什么""域名解析是什么""反向代理是什么"的机会。

域名（如cptodo.top）的作用是将一串易记的文字指向服务器 IP，让人不用记一串数字也能访问你的网站。不买域名也可以直接用 IP 访问，但缺点是不能配置 HTTPS（HTTPS 证书一般需要域名），而且显得不专业。在中国大陆使用域名需要 ICP 备案，项目域名备案已经成功，域名为https://ptodo.top

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第一章、全栈项目是什么——先花 10 分钟搞懂

开始之前，先把"全栈"这个词拆明白。它并没有听上去那么吓人。

我用一个餐厅比喻来理解——

前端 = 菜单和餐桌。用户看得到、点得了的地方。你做了啥操作，前端把它变成请求发送出去。

后端 = 厨房。收到请求后去冰箱拿食材、加工处理，然后端上来（返回结果）。

数据库 = 冰箱。所有数据（用户名、密码、任务内容）都存在这里。

服务器 = 餐厅地址。网站必须放在一台 24 小时开机的电脑上，别人才能随时访问。

以"用户注册→登录→添加任务"为例，数据是这样流动的：

① 前端注册页输入用户名密码 → ② 发送到后端注册接口 → ③ 后端加密密码后存到数据库 → ④ 返回注册成功 → ⑤ 用户去登录页 → ⑥ 后端验证密码 → ⑦ 生成令牌（Token）返回 → ⑧ 前端存下Token，跳转主页 → ⑨ 用户添加任务 → ⑩ 后端把任务存到数据库 → ⑪ 前端刷新列表显示新任务

全流程就这些。每一环的代码，AI 都可以帮你写完。

▶ 第一步：让 AI 给你讲解一遍全栈架构

🤖 给 AI 的指令（直接复制发送）：
我要做一个全栈 Todo 网站，带登录注册功能。技术栈是前端React+Vite、后端 Node.js+Express、数据库 MySQL。请用通俗的语言给我讲解这个项目的整体架构：前端、后端、数据库、服务器各自的作用是什么？它们之间如何通信？用简单的文字流程说明用户从登录到添加 Todo 的完整数据传递路径。

▶ AI 回复后，追问直到你完全理解：

• "如果我没有后端，前端能直接操作数据库吗？为什么？"

• "服务器的作用是什么？没有服务器，别人能访问我的网站吗？"

💡 这一步不写代码不装软件，只是理解概念。花 10 分钟搞懂架构，后面会顺畅很多。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第二章、装好工具（全程图形界面）

你要装 4 个东西，而且都有安装向导，全程点"下一步"就行。装完就能开始让 AI 写代码了。

2.1 Node.js——运行后端代码的环境

JavaScript 代码在浏览器之外运行需要 Node.js。没有它，后端就跑不起来。

▶ 第二步：安装 Node.js

🖱️ 打开https://nodejs.org ，点击左侧 LTS 按钮下载。双击安装包，一路点 Next，完成。

🖱️ 验证：打开终端（Win+R →输入 cmd → 回车），输入 node -v，显示版本号说明安装成功。

2.2 数据库（MySQL / MariaDB）—— 用来存数据

你的所有用户数据、任务数据都存在这里。本项目本地使用 MySQL，远程服务器使用 MariaDB（完全兼容，后文会解释原因）。

▶ 第三步：安装 MySQL（本地开发用）

🖱️ 打开 https://dev.mysql.com/downloads/installer/，下载 MySQL Installer。

🖱️安装过程中务必选择 Server only，只安装数据库服务核心程序即可，不用装多余自带可视化工具，减少后台占用、避免软件冲突，安装时会提示设置 root 密码——请记住这个密码，后面每次连接数据库都要用。

🖱️ 安装完成后验证：终端输入 mysql -u root -p，输入密码后出现 mysql> 提示符说明安装成功。输入 exit 退出。

提示：如果 Windows 终端提示「不是内部或外部命令」，不用慌，让 AI帮你配置 MySQL 环境变量即可

说明：我们只装纯净的数据库服务，不使用 MySQL 自带的管理工具，下文第四步会统一安装专业通用数据库可视化工具 DBeaver 来图形化管理所有数据库，操作更简单、界面更清爽，后续连服务器 MariaDB 也能无缝兼容。

远程服务器为什么用 MariaDB？

远程服务器也可以安装 MySQL，需要先添加 Oracle 官方源再 apt install mysql-server。但本项目的远程服务器（Debian 系统）使用的是 MariaDB，原因如下：

• Debian 官方软件源直接包含 MariaDB，apt install mariadb-server 一条命令即可安装，不需要额外添加第三方源

• MariaDB 是 MySQL 的社区分支，协议完全兼容，命令行工具也是 mysql，默认端口也是 3306

• Node.js 的 mysql2 驱动连接 MySQL 和 MariaDB 无任何区别，后端代码不需要改动一行

• 对于本项目这类轻量应用，两者功能表现完全一致

简单说：MariaDB = 免费开源 + Debian 原生支持 + 和 MySQL 100% 兼容，所以在 Debian 服务器上选 MariaDB 是最省事的选择。

其他 Linux 服务器的情况

几乎所有主流 Linux 发行版的官方源都只包含 MariaDB，不包含 MySQL。要用 MySQL 都需要手动添加 Oracle 的软件源。

操作系统	默认软件源
Debian	MariaDB
Ubuntu	MariaDB
CentOS 7+	MariaDB
Amazon Linux	MariaDB
Fedora	MariaDB

如果在这些系统上想用 MySQL，步骤都一样：添加 Oracle 官方源 → apt/yum install mysql-server。项目代码一行不用改。

MySQL 与 MariaDB 对比

对比项	MySQL	MariaDB
维护方	Oracle 公司	开源社区
协议 / 端口	MySQL 协议 / 3306	MySQL 协议 / 3306（完全兼容）
命令行工具	mysql	也是 mysql
安装（Debian）	需添加第三方源	apt install 直接装
授权	社区版免费，企业版付费	完全免费开源
更新节奏	稳定成熟	社区贡献更活跃，新特性更快

结论：两者对于本项目没有功能差异，代码层面零区别。本地用 MySQL 是因为 Windows 下 MySQL Installer 安装方便，服务器用 MariaDB 是因为 Debian 下一条命令就能装好。

2.3 DBeaver——数据库的图形化管理工具

DBeaver 相当于"数据库的 Navicat"，让你不需要敲 SQL 命令就能管理数据库。有了它你几乎不需要在终端操作数据库了。

▶ 第四步：安装 DBeaver

🖱️ 打开 https://dbeaver.io/download ，下载 Windows 版本，安装。

🖱️打开 DBeaver，点击左上角「新建连接」 图标 → 选择 MySQL（本地安装的是 MySQL，服务器用 MariaDB，后续部署时再选 MariaDB），首次连接会提示下载 MySQL 驱动，点击 ' 下载 ' 完成后再填写配置

🖱️ 填写：主机 localhost、端口 3306、用户名 root、密码（你刚才设的）、数据库留空。点击"测试连接"，成功后点完成。

🖱️ 连接成功后左侧出现你的数据库连接。右键 → "新建数据库" → 名称填 todo_app（也可自定义） → 确定。

【扩展】不用 DBeaver 的话，纯终端操作是：mysql -u root -p → CREATE DATABASE todo_app ... → EXIT; 但有了 DBeaver，你全程不需要敲这些。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第三章、让 AI 帮你写出整个项目

工具装好了，现在做真正重要的一件事——告诉 AI 你想做什么，让它全权负责代码。这一章是整篇文章最短、也最重要的章节。

▶ 第五步：给 AI 发送以下指令，让它创建整个项目

🤖 给 AI 的指令（直接复制发送，技术栈并非固定死，只是本项目实际示例）：
请帮我创建一个完整的全栈 Todo 网站，包含以下功能：
1. 用户注册和登录（密码加密存储，使用 JWT 做身份验证）
2. 登录后可以添加、查看、修改、删除 Todo 任务
3. 任务有标题、完成状态、截止日期

技术栈要求：
- 前端：React + Vite
- 后端：Node.js + Express
- 数据库：MySQL（使用 mysql2 连接）

请帮我完成以下内容：
A. 创建后端项目，包含所有必要的 API 接口
B. 创建前端 React 项目，包含登录页、注册页、Todo 主页
C. 在项目根目录创建 database/ 文件夹，包含建表 SQL 文件
D. 后端连接数据库的配置放在 .env 文件中

项目目录结构这样安排：
my-todo/
├── backend/        # 后端代码
├── frontend/       # 前端代码
└── database/       # SQL 文件

请逐步完成，每完成一部分告诉我。

▶ AI 开始生成代码后，会自动创建文件夹、安装依赖包、生成代码——全程不需要你干预。

💡 AI 在运行 npm install 时可能需要你的确认（有的工具会弹权限提示），允许即可。不用关心它装了什么包——AI 知道需要什么。

3.1 配置数据库连接

▶ 第六步：配置 .env 文件

AI 生成代码后，会在 backend/ 目录下创建一个 .env 文件。用 VS Code 打开它，把里面的 DB_PASSWORD 改成你自己的数据库密码（安装 MySQL 时设置的那个）。

.env 文件大概长这样：

DB_HOST=localhost

DB_USER=root

DB_PASSWORD=你的密码

DB_NAME=todo_app

……

3.2 创建数据库表

▶ 第七步：在 DBeaver 中执行 SQL 建表

🖱️ 打开 DBeaver，左侧展开 todo_app 数据库。

🖱️ 点击菜单"SQL 编辑器" → "新建 SQL 编辑器"（或右键 todo_app → SQL 编辑器）。

🖱️ 把 AI 生成的 database/ 目录下的 .sql 文件内容复制进去。

🖱️ 点击工具栏的"运行"按钮（▶ 图标）执行整个脚本。注意：DBeaver 默认会选中光标所在的单条语句执行，如果要执行全部语句，选中所有文本再点运行。也可直接点击"执行SQL脚本"按钮，此按钮无需选中整段文本

🖱️ 执行后左侧刷新（必须刷新才能看到），应该能看到 users 和 tasks 等表名出现。

⚠️ 如果 AI 生成了多个 .sql 文件，需要按文件名顺序依次执行。先执行全部文件，再刷新确认表都创建成功。

【扩展】你也可以在DBeaver 中右键 → "新建表" 来图形化建表，不需要写 SQL。但用 SQL 文件的好处是可以在不同环境重复执行，这就是"数据库迁移"的概念。

3.3 启动项目

▶ 第八步：启动后端

🖱️ 在 VS Code 中打开终端（菜单 → 终端 → 新建终端）。

cd my-todo/backend

node app.js  （或npm start，AI会告诉你具体命令）

🖱️ 看到 "Server running on port 3000" 表示启动成功。让它保持运行，不要关闭。

▶ 第九步：新开一个终端，启动前端

cd my-todo/frontend

npm run dev

🖱️ 看到 Local: http://localhost:5173 说明启动成功。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第四章、验收——看到你的网站

▶ 第十步：打开浏览器测试

🖱️ 访问http://localhost:5173（或终端提示的地址），应该看到登录页面。

🖱️ ① 注册一个账号（输入用户名和密码）

🖱️ ② 用刚注册的账号登录

🖱️ ③ 添加一条任务，修改完成状态，删除

🖱️ ④ 退出登录，确认页面跳回登录页

如果以上操作全部成功，恭喜——你的全栈网站已经在本地完整跑通了。

如果遇到报错（如连接失败、页面空白），把报错信息完整复制给 AI，告诉 AI "这里报错了，帮我排查"。AI 会分析原因并给出修复方案。

💡 常见报错原因：① 数据库密码没改对（检查 .env）②数据库表还没创建（检查 DBeaver 中表是否存在）③ 后端还没启动（检查终端窗口是否在运行）。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第五章、Git 版本控制——给项目上"后悔药"

Git 是做什么的？简单说：它给你的项目拍"快照"。每次你觉得"当前代码能正常跑"的时候，就可以拍一张快照（commit）。之后不管你怎么改代码、改出什么问题，都可以回到任何一张快照的状态。这就是版本控制。

在这个全栈项目中，Git 主要做了三件事：

• 记录每个功能的完整代码状态，方便回溯——改坏了可以回滚

• 创建不同的分支来开发不同版本——比如 main 分支是原生 JS 版，feature/react-migration 分支是 React 版，互不干扰

• 通过 git diff 清晰地看到每次改了哪些文件、改了什么内容——提交前看一眼，避免手滑

你不需要理解 Git 的全部原理，只需要记住 4 个最常用的操作，就能覆盖 90% 的使用场景。

5.1 初始化仓库（只需一次）

▶ 在你开始写代码之前，或者项目进行到一半时，都可以初始化 Git。在项目根目录执行一次：

git init

这会在项目根目录生成一个 .git 文件夹，Git 的所有版本信息都存在这里。初始化后你的项目就进入 Git 管理了。

5.2 提交代码（每完成一个功能做一次）

提交（commit） = 拍一张当前代码的"快照"。以后不管怎么改，都可以回到这个状态。

▶ 当你写完一个功能并测试通过后（比如注册写完了），执行：

git add .

git commit -m "完成用户注册功能"

git add . 表示"把当前所有改动加入暂存区"，告诉 Git"我要记录这些文件"。git commit 是"拍快照"并写下备注，说明这个版本做了什么。

备注要写清楚这次改了什么，比如"添加用户注册接口""修复日期选择偏移"——方便以后翻看。

5.3 创建分支（尝试新功能又不影响主线）

分支（branch）是 Git 最强大的功能之一。你可以在一个分支上稳定运行，切到另一个分支去大胆改造。改坏了删除分支就行，不影响主线。

▶ 假设初始做了原生JS版本，如果你想尝试迁移 React，同时又保留原生版本：

git checkout -b feature/react-migration

这条命令创建并切换到一个新分支。你的 main 分支保持不动，在新分支上随便改。如果改到一半发现行不通，切回 main 就行：

git checkout main

回到 main 分支后，一切还是原来的样子。这就是"分支"的力量。

5.4 查看改动（提交前的安全检查）

提交之前看一眼改了哪些东西，是好习惯——可以避免不小心把 .env（含数据库密码）等敏感文件提交上去。

▶ 提交前看一看改了啥：

git status   # 查看哪些文件被修改了

git diff     # 查看具体的修改内容，每一行加了什么、删了什么

如果发现不小心改了不该改的文件，可以在 .gitignore 中把文件路径加进去，Git 就会自动忽略它。AI 知道怎么写 .gitignore。

5.5 同步到远程仓库（GitHub或其他平台）

本地只有一份代码，万一硬盘坏了就全丢了。推到 GitHub 相当于多一份"云端备份"，还能让别人看到你的代码。

▶ 把代码同步到 GitHub：

🤖 给 AI 的指令（直接复制发送）：
我的项目已经用 Git 管理了，现在想同步到 GitHub。请指导我：1）在 GitHub 上创建仓库 2）把本地代码推送到远程 3）后续如何推送更新。

💡 Git 是那种"用起来很简单、理解起来很深"的工具。作为初学者，只需要记住一条黄金法则：功能跑通了就 git add . && git commit -m "xxx"。这能帮你省下无数后悔的时间。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第六章、部署上线——让你的网站被全世界访问

现在你的网站只在你自己的电脑上跑。要让别人也访问，需要把代码放到一台 24 小时开机的云服务器上。这是传统全栈开发中最"劝退"的一步，但 AI 也会一步步指导你。

如果你的目标只是"在本地跑通看看"，其实前面第四章就已经完成了。但如果你想体验"外网可访问"的成就感，就继续。

6.1 购买云服务器

▶ 第十一步：购买一台云服务器

🖱️ 访问腾讯云（cloud.tencent.com）或阿里云，注册账号。

🖱️ 找到"云服务器"产品，选择配置（花点时间了解一下，选择自己想要的，后面仅示例）：2核2G、Linux（Debian 或Ubuntu）、按量计费。

🖱️ 购买后记下服务器的公网 IP 地址。

💡 各大云厂商都有新用户优惠，可以与AI讨论一下用途并对比一下各厂商的产品，我自己用的是腾讯云的轻量应用服务器，新用户1折 79元一年，4G 4核。如果还在犹豫，先本地跑通为主，服务器后面再买。

6.2 让 AI 指导你完整部署

▶ 第十二步：把服务器的信息告诉 AI，让它指导你

🤖 给 AI 的指令（直接复制发送）：
我已经购买了一台云服务器，信息如下：
- IP 地址：xxx.xxx.xxx.xxx（换成你的）
- 系统：Debian/Ubuntu
- 用户名：root

我的本地项目在 my-todo/ 目录下，已经完整跑通。

请帮我部署到这台服务器上。我需要你：
1. 指导我在服务器上安装 Node.js、MariaDB、Nginx
2. 从本地把代码上传到服务器
3. 配置 Nginx 反向代理，让前端页面可访问，API 请求能转发到后端
4. 安装 PM2 让后端在后台持续运行

一步一步告诉我怎么做，每步说明"在哪里执行"（本地终端还是服务器终端）。

6.3 部署关键步骤概览

AI 会一步步引导你完成以下操作。你只需要在服务器终端或本地终端中执行 AI 给的命令即可。

▶ ① SSH 连接服务器

🖱️ 在本地终端输入 ssh root@你的服务器IP，输入密码连接。

▶ ② 在服务器上安装运行环境

🖱️ AI 会给你命令，在服务器终端中逐条执行：安装 Node.js、MariaDB、Nginx、PM2。

▶ ③ 在服务器上创建数据库

🖱️ 用 DBeaver 连接服务器数据库（选择菜单栏数据库选项，新建数据库连接，选择MariaDB，把 localhost 改成服务器 IP），图形化创建数据库。连接服务器数据库前，需在服务器终端执行命令，设置 MariaDB 允许远程连接（AI 会给出具体命令），否则 DBeaver 无法远程连接

▶ ④ 上传代码到服务器

🖱️ 在本地终端执行 scp 命令，把整个项目上传到服务器。

▶ ⑤ 配置 Nginx 和启动后端

🖱️ AI 会给出 Nginx 配置代码和 PM2 启动命令。执行后在浏览器访问 http://你的服务器IP。

▶ ⑥ 开放防火墙端口

🖱️ 登录腾讯云/阿里云（或其他厂商）控制台 → 安全组（或防火墙） → 添加入站规则：HTTP(80) 端口，来源 0.0.0.0/0。这一步很容易忘！

⚠️ 如果你能 SSH 连上服务器但浏览器打不开网站，99% 是安全组没配好。

💡 部署过程中如果遇到问题，直接把报错信息复制给 AI，它会帮你分析定位。这就是"有 AI"和"没AI"做部署的最大区别。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

【扩展】我在这基础上还做了什么

走到上一步，你已经有了一个可以用的全栈网站了——能注册、能登录、能添加任务、能被别人访问。下面的内容全部是"锦上添花"，不需要跟着做，只是分享我后续迭代的功能以供参考。

项目和标签功能

基础版只有一个任务列表。我加了项目和标签两个分类维度：项目像文件夹，一个任务属于一个项目；标签可以跨项目，一个任务可以有多个标签。需要新增 projects、tags、关联表，后端加新的 API，前端加新的界面。流程和之前一样——把需求告诉 AI，它帮我实现。

指令参考：「在现有Todo 中增加项目和标签功能。项目是文件夹式归类，一个任务属于一个项目；标签是跨项目的灵活标记。」

回收站（软删除）

删除不直接清数据库，而是标记"已删除时间"。用户可以进回收站恢复。恢复时自动检查父项目状态——如果父项目也在回收站，一并恢复。

重复任务

支持每天/每周周期的重复任务，周期结束时自动重建。还支持"每周运动 3 次"这种频次模式——不需要固定在哪几天，本周完成 3 次就算达标。

邮箱登录注册

增加邮箱注册：输入邮箱 →收到验证码 → 填写验证码 → 设置密码 → 注册成功。登录时支持用户名或邮箱。需要新增 verification_codes 表，后端集成 SMTP 邮件服务，前端改注册/登录页面。

从原生 JS 迁移到 React

基础版是 HTML + CSS + 原生 JS。后续迁移到了 React + Vite。迁移过程中 AI 还顺手修复了原生版存在的几个 bug（日期选择偏移、角标统计不准等）。迁移原因：React 的组件化让代码结构更清晰，界面更容易美化。

打包安卓 APK

用 Capacitor 把网页打包成 Android 安装包。手机上安装后就像用原生 App 一样。核心步骤：安装 Capacitor → npx cap add android → npx cap sync → Android Studio 打开（若无需安装） → Build APK。配置 server.url 指向服务器地址后，改代码只需部署服务器，APK 自动加载最新版，不用重新打包。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第七章、AI Coding 的核心心法——来自实战总结

7.1 需求精细度决定 AI 输出质量

"帮我做个 Todo 网站"——太宽泛，AI 给的东西没法用。"请帮我写一个用户注册接口，接收用户名和密码，密码用 bcrypt 加密后存库，用户名重复返回错误提示"——需求越具体，AI 输出越准确。但初期不知道要具体到什么程度？很简单：先给粗略需求，看输出，然后针对不满意的部分继续细化。迭代式沟通。

7.2 测试是最好的学习

AI 写完代码，不需要从头读到尾。直接跑起来测试——功能正常说明代码没问题。功能异常，把现象描述给 AI，它会定位和修复。但你需要在测试中理解：这个功能输入是什么、输出是什么、数据存到了哪里。这比逐行读代码高效得多。

7.3 文档是你的第二大脑

AI 会"失忆"。今天写的代码、做的决策、踩的坑，新对话里它就不记得了。所以我把需求记录、版本追踪、数据库结构、部署流程都写在项目文档里。每次新开对话先让 AI 读文档——这能维持上下文连续性。

7.4 踩的坑是最大的财富

scp 路径问题（目标目录不存在时文件会散落）、Nginx 权限问题（/root目录 nginx 读不到）、时区问题（UTC 和本地时间差一天）、CORS 跨域问题——每个坑我都记下来，AI下次遇到就能避开。人积累经验，AI 下次调用经验。

7.5 分阶段、可验证

每次只做一个小功能。做完一个测试一个，通过再继续下一个。不要一次让 AI 写十个功能——出问题了排查很痛苦。每个功能完成后都有明确的"完成标志"：接口能返回正确数据、页面能正确渲染。

7.6 Git 习惯要养成

每完成一个功能就 git add . && git commit -m "xxx"。这不只是备份——commit 历史就是你项目的"开发日记"，哪天想复盘某个改动是怎么来的，翻 commit 记录比翻聊天记录靠谱一百倍。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

第八章、结语：AI 时代，动手比什么都重要

写这篇文章时，距离我第一天用AI 编程工具新建此项目刚好 15 天。15天里，我从一个"会前端但不懂后端"的人，变成了一个跑通了完整全栈项目的人。所有代码由 AI 生成，我负责提出需求、测试验收、记录经验。

这篇文章中的所有蓝色步骤，加起来就是"让一个全栈网站从零到上线的最小必要路径"——它很短，因为大部分工作 AI 帮你做了。你不需要懂数据库原理也能建表，不需要懂 HTTP 协议也能写接口，不需要懂 Linux 也能部署。

但你仍然需要知道数据是怎么流动的、报错信息怎么看、需求怎么拆解——这些能力不是"技术"而是"思维"。而思维能力的培养，不是看书看会的，是动手做会的。

所以，如果你看到这里，还缺的就是一个开始。

打开 AI 编程工具，告诉它"我想做一个全栈 Todo 网站"。一步步跟着做，遇到不懂的就问它，遇到报错就贴给它，遇到想加的功能就告诉它。15天后，也许2天后，你也会有自己的网站上线。

「全栈」不应该是程序员的专利。

AI 时代，有想法的人都可以亲手把自己的想法变成产品。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

本文配套学习项目：CPTodo（全栈 Todo 管理工具）

技术栈：React + Vite / Node.js + Express / MariaDB / 腾讯云 Debian / Capacitor APK

开发模式：100% AI 生成代码，人工提需求 + 测试验收