Claude Code实战：十分钟搭建前后端分离网页应用

从静态页到前后端分离：一次完整的实战升级

在AI编程工具日益成熟的今天，Claude Code 正在成为许多开发者从零构建 Web 应用的利器。本文基于 B站 UP 主小印的实操教程，完整梳理了如何借助 Claude Code 将一个静态的「AI 工具导航页」升级为拥有登录、设置功能的前后端分离网页应用。

整个过程的核心目标，是完成一个 MVP（最小可行产品）——即最小落地可执行的项目。它不追求真实上线的账号系统，也不对接手机号、支付、三方登录或线上数据库，而是让登录、设置这些接口链路完整跑通，帮助初学者理解现代网页的基本架构。

为什么要做前后端分离

静态网页在展示内容上没有问题，但数据、账户状态和用户设置全部堆积在前端，随着功能增多，维护会变得非常困难。前后端分离的本质，就是让职责更清晰：

• 前端：负责界面展示与交互，保留导航页样式
• 后端：统一管理工具数据、演示登录和设置持久化
• 通信方式：前端通过 API 拿到数据，不直接触碰后端的数据文件

这也是当下绝大多数网页应用采用的标准架构。项目会被拆分为前端和后端两个独立目录，各司其职。

API（Application Programming Interface，应用程序接口） 是前后端通信的核心机制。前端不直接读取后端的数据文件，而是向后端发送 HTTP 请求（如 GET 获取数据、POST 提交数据），后端处理后返回 JSON 格式的响应。这种方式的好处是双方只需约定接口格式，内部实现可以完全独立变更。本项目中后端使用 Express（Node.js 的轻量级 Web 框架）来创建这些 API 端点，前端使用 Vite 作为开发服务器和构建工具。开发代理（Dev Proxy） 则是 Vite 的一项配置，它让前端在开发阶段可以将 /api/* 路径的请求转发给后端服务，从而绕过浏览器的同源策略限制（即跨域问题）——浏览器出于安全原因，默认禁止网页向不同端口或域名发请求，代理让两个服务在开发者视角上看起来像「同一个来源」。

用Claude Code生成登录功能

在实战环节，首先聚焦登录功能。关键提示词的要点很明确：只做演示账号的登录，成功后保存接口返回的临时 token，退出时清理 token；同时要求已有的分类、热榜、详情页和官网跳转都保持不变，并预设一个 demo 演示账号和密码。

操作流程也很直接：按 Win 打开 PowerShell，进入项目目录后输入 claude 启动，再执行 /resume 命令恢复最近的对话，把提示词粘贴进去即可。Claude Code 会先给出修改计划——包括改动思路、登录流程、需要修改的文件清单，以及明确列出「不动的内容」。这种「先规划、后执行」的模式，正是 Claude Code 值得称道的地方，它让开发者在确认无误后再放行执行，大大降低了误改风险。

执行完成后，页面右上角出现了「登录」入口。但此时点击登录会发现服务未启动——因为后端还没制作。这恰好印证了前后端分离的特点：前端界面已就绪，但真正的验证需要等后端上线。

制作设置页实现数据持久化

设置页无需复杂，只做两个能直观看到结果的选项即可：

• 默认打开哪个分类
• 工具卡片的紧凑/舒展显示

验证标准也很朴素——保存后刷新页面，设置依然有效，就说明设置页真正打通了持久化。

把设置页的提示词交给 Claude Code 后，它同样生成了完整改动：新建了两个后端文件，初步搭建起前后端分离的雏形，涵盖登录页、设置页、保存设置、刷新持久化、URL 关闭弹窗以及退出登录等功能。

这里有一个重要的实战经验：先把功能都加完，最后再让 Claude 统一做前后端拆分。这样才能得到一个结构清晰、完整的前后端分离架构，而不是边写边拆导致结构混乱。

数据持久化（Data Persistence） 指的是数据在程序关闭或页面刷新后依然能够保存和恢复的能力。与之对应的是「内存状态」——存在 JavaScript 变量里的数据，页面一刷新就消失。在这个 MVP 项目中，持久化通过后端将设置写入本地文件（如 JSON 文件）来实现，而非真实的数据库。相比之下，Token（令牌） 是登录验证的核心载体：用户登录成功后，后端生成一个随机字符串（token）返回给前端，前端将其保存在 localStorage（浏览器本地存储）中；此后每次请求都带上这个 token，后端验证其合法性后才响应数据。退出登录时前端删除 token，服务器端也使该 token 失效，整个会话就此结束。这套流程是现代 Web 应用鉴权的最简模型。

前后端拆分与npm依赖管理

完成功能后，用一段专门的提示词让 Claude Code 进行前后端拆分：前端通过工具调用 API 读取数据，后端负责将数据写入，并使用一个统一的开发代理转发 API 请求，这样前端就无需处理跨域问题。

这里需要特别澄清一个初学者容易混淆的概念——npm 的两种用途：

• 早期安装 Claude 时用的 npm，是把命令装进电脑（全局安装）
• 现在项目里的 npm install，是读取当前目录的 package 包，把 vite、express 等依赖下载到项目里
• npm run 则是执行 package 里定义的脚本

真正启动服务器的是 vite 和 express，而 npm 只负责下载包和执行脚本。 这个区分对理解 Node.js 生态非常关键，也是很多零基础学习者的盲区。

理解 Node.js 生态的包管理机制有助于消除初学者的困惑。package.json 是项目的「配置清单」，记录了项目名称、脚本命令以及所有依赖包的名称和版本号。执行 npm install 时，npm 读取这份清单，从网络上下载对应的包并存入项目本地的 node_modules 文件夹。这意味着 node_modules 通常不需要上传到代码仓库，别人拿到你的项目后只需再跑一次 npm install 即可还原完整环境。npm run dev 则是执行 package.json 中 scripts 字段定义的 dev 命令，通常对应 vite（前端）或 node server.js（后端）等具体指令。全局安装（npm install -g）与项目级安装（npm install）的根本区别在于：前者将命令写入系统路径、可在任意目录使用，后者仅对当前项目生效。

双端启动与功能验证

项目完成后进入验证阶段，这里涉及一个重要的启动顺序问题——必须先启动后端，再启动前端。原因很简单：前端需要依赖后端提供的数据，所以后端要先就位。

启动后端服务

新开一个 PowerShell 窗口，进入后端目录（cd 目录/backend），执行 npm install 下载依赖，再运行 npm run dev 启动后端服务。注意这个窗口不能关闭，因为它承载着正在运行的服务。

启动前端服务

再新开一个终端窗口，进入前端目录，同样执行 npm install 和 npm run dev。启动完成后会返回一个前端地址。

将前端地址复制到浏览器打开，就能看到完整的网页。测试环节中，输入 demo 邮箱和密码后登录成功，右上角头像显示为 demo；点击头像可进入设置和退出登录。在设置中把默认分类改为「图像生成」、卡片显示改为「紧凑」并保存，刷新页面后设置依然生效——这标志着前后端的数据链路完全打通。退出登录后头像消失，功能也验证无误。

Claude Code搭建前后端分离应用的核心经验

通过这套教程，一个原本只能静态展示的导航页，被改造成了拥有前端界面、本地 API、账户入口和设置功能的完整网页应用，具备标准的前后端分离架构，并能在终端双端启动、验证成功。

对初学者而言，这个过程的价值不仅在于最终产物，更在于它系统性地演示了几个关键认知：

1. AI编程的正确姿势——先让 Claude 规划再执行，功能完成后再统一拆分架构
2. 前后端分离的核心逻辑——职责分离、通过 API 通信、开发代理解决跨域
3. 工具链的底层理解——npm、vite、express 各自的角色分工
4. 服务启动的依赖关系——后端先行、前端跟上、终端不可关闭

在AI辅助编程的浪潮下，像 Claude Code 这样的工具正在极大降低 Web 开发的门槛。即便是零基础用户，也能通过合理的提示词和对基本概念的理解，在短时间内构建出一个可落地的 MVP 项目。这正是 AI 编程时代赋予每个人的新能力。