Vibe Coding一人即团队系列31：基于Claude Code实现登录注册与数据库联动

纲要

• 项目技术选型与架构设计
  • 前端框架选型策略
  • 后端实现方案对比
• 项目结构规划
  • frontend 与 backend 目录设计
• 数据库设计
  • MySQL 9.x 用户表结构
• 后端 API 实现
  • 注册接口
  • 登录接口
  • Token 验证中间件
  • 用户信息获取接口
• 前后端 API 对接
  • 登录状态管理
  • 路由守卫实现
• 用户信息页面增强
  • 昵称与注册时间显示
• 密码安全机制
  • bcrypt 哈希加密
• 版本控制与协作
  • Git 提交与 GitHub 同步

项目技术选型与架构设计

在构建一个完整的 Web 应用时，技术选型是首要决策。对于后端服务的实现，存在两条主流路径：使用前端框架（如 React、Vue）配合 Node.js 运行时构建后端逻辑，或使用传统后端语言（如 Java、Python、.NET）及其生态框架。

对于缺乏后端开发经验的开发者，采用前端技术栈统一前后端是较为高效的策略。JavaScript 与 TypeScript 生态下的 Node.js 运行时，配合 Express 或 Next.js 等框架，能够快速搭建具备完整能力的 API 服务。这种方式降低了上下文切换成本，使开发者能够复用前端开发经验。

若开发者具备 Java 等后端语言基础，亦可选择 Spring Boot 等成熟框架。但无论选择何种技术栈，其核心逻辑与 API 设计范式是通用的，本教程以 React + Node.js 组合为例进行演示。

项目结构规划

在现有项目根目录下，需要创建独立的 backend 目录以存放服务端代码，与已有的 frontend 目录形成清晰的前后端分离结构。

├── frontend               # 前端应用代码
│   ├── src
│   ├── public
│   └── package.json
├── backend                # 后端 API 服务代码
│   ├── src
│   │   ├── routes         # 路由定义
│   │   ├── controllers    # 业务逻辑控制器
│   │   ├── models         # 数据模型
│   │   ├── middleware     # 中间件（如 JWT 验证）
│   │   └── config         # 配置文件
│   ├── package.json
│   └── .env               # 环境变量配置
└── database               # 数据库相关脚本
    └── schema.sql

数据库设计

数据库使用 MySQL 9.x（版本号 9.7.0 或兼容版本均可），通过 Docker 容器化部署。用户表 users 设计包含以下核心字段：

• id：主键，自增整数
• username：用户名，唯一索引
• nickname：用户昵称
• password_hash：密码哈希值（使用 bcrypt 加密）
• created_at：注册时间戳
• updated_at：信息更新时间戳

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    nickname VARCHAR(50),
    password_hash VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

后端 API 实现

框架选型与初始化

在 backend 目录下，通过自然语言描述向 AI 工具（如 Claude Code）提出需求：实现登录注册功能，使用 JavaScript 开发，并请求 AI 推荐合适的前端框架。AI 将提供多种选项，包括原生 JavaScript、Vue 和 React。鉴于 React 具备丰富的组件生态与跨平台能力，本方案选用 React 作为前端框架，其对应的后端服务基于 Node.js + Express 实现。

AI 工具将自动执行以下操作：

1. 生成 package.json 并安装依赖（执行 npm install）
2. 创建环境配置文件，设置服务端口为 3000（示例中实际运行端口为 3001）
3. 生成 API 路由、控制器、模型及中间件代码
4. 使用 cURL 进行自测，验证注册与登录功能

API 接口清单

后端服务启动后，提供以下四个核心接口：

接口路径	方法	功能描述	认证要求
/api/auth/register	POST	用户注册	无
/api/auth/login	POST	用户登录，返回 JWT Token	无
/api/auth/verify	GET	验证 Token 有效性	需要
/api/users/me	GET	获取当前登录用户信息	需要

注册与登录逻辑

注册接口接收 username、nickname、password 字段，使用 bcrypt 对密码进行哈希处理后存入数据库。登录接口验证用户名与密码匹配性，校验通过后生成 JWT（JSON Web Token）返回给客户端，后续请求需在 Authorization 头中携带该 Token。

密码安全机制

密码安全是用户系统的生命线。AI 生成的代码默认采用 bcrypt 进行密码哈希加密，而非明文存储。bcrypt 内置盐值（salt）与工作因子（work factor），能够有效抵御彩虹表攻击和暴力破解。

const bcrypt = require('bcrypt');
const saltRounds = 10;

// 注册时加密密码
const hashedPassword = await bcrypt.hash(password, saltRounds);

// 登录时验证密码
const isMatch = await bcrypt.compare(password, user.password_hash);

前后端 API 对接

集成步骤

初始状态下，AI 仅生成了后端代码，前端尚未与 API 联动。需通过新的自然语言指令，明确告知 AI 前端代码位于 frontend 目录，要求其完成登录注册接口的对接实现。

AI 将执行以下操作：

1. 在前端代码中引入 API 调用模块（如 axios 或 fetch）
2. 实现登录请求逻辑，成功后存储 Token 至 localStorage 或 sessionStorage
3. 实现注册请求逻辑，成功后自动跳转至登录页或首页
4. 配置请求拦截器，在每次请求中自动添加 Token
5. 实现响应拦截器，处理 Token 过期或无效的全局跳转

登录状态守卫

AI 还实现了路由守卫功能，检测未登录用户对受保护页面的直接访问。当用户未携带有效 Token 试图访问首页或其他需要认证的页面时，系统会自动重定向至登录页，有效防止越权访问。

用户信息页面增强

在设置页面（settings）中，需要显示当前用户的昵称与注册时间。这些数据从 /api/users/me 接口获取，该接口从 Token 中解析用户 ID 并查询数据库返回完整信息。

页面刷新后，通过调用该接口动态渲染用户信息，确保显示内容与数据库实际数据一致。

功能验证流程

1. 启动后端服务，确认服务运行在指定端口
2. 打开前端应用，进入注册页面，填写用户名、昵称、密码
3. 点击注册，提示成功并自动跳转至登录页
4. 使用注册的账号密码登录，验证登录成功
5. 退出登录后，尝试直接访问受保护的首页地址，验证被拦截重定向至登录页
6. 登录后访问设置页面，验证昵称与注册时间的正确显示

课后扩展任务

当前注册功能未对密码复杂度做出限制，存在安全隐患。作为扩展任务，可增加以下密码策略：

• 密码长度不少于 8 位
• 必须包含至少一个大写字母
• 必须包含至少一个小写字母
• 必须包含至少一个数字
• 必须包含至少一个特殊字符（如 !@#$%^&*）

前端可通过表单验证实时提示用户，后端则需在注册逻辑中增加校验层，双重保障数据有效性。

版本控制与协作

每个功能完成迭代后，应及时提交版本至 Git 并同步到 GitHub 远程仓库。提交信息应清晰描述本次变更内容，例如："实现后端服务登录注册功能，使用 JWT 进行身份认证，对接前端 API，增加登录状态检查守卫"。

定期提交有助于：

• 追踪项目演进历史
• 支持功能回滚与问题定位
• 生成基于提交记录的自动化周报

API 速览

注册接口

• 所属库 ：Express

• 方法签名 ：POST /api/auth/register

• 请求体 ：

  {
    "username": "string",
    "nickname": "string",
    "password": "string"
  }

• 成功响应 ：

  {
    "code": 0,
    "message": "注册成功"
  }

• 失败响应 ：

  {
    "code": 1,
    "message": "用户名已存在"
  }

登录接口

• 所属库 ：Express

• 方法签名 ：POST /api/auth/login

• 请求体 ：

  {
    "username": "string",
    "password": "string"
  }

• 成功响应 ：

  {
    "code": 0,
    "message": "登录成功",
    "data": {
      "token": "jwt_token_string"
    }
  }

获取用户信息接口

• 所属库 ：Express

• 方法签名 ：GET /api/users/me

• 请求头 ：Authorization: Bearer <token>

• 成功响应 ：

  {
    "code": 0,
    "data": {
      "id": 1,
      "username": "abc",
      "nickname": "分级影院",
      "created_at": "2026-08-15T02:30:00.000Z"
    }
  }

Token 验证中间件

• 所属库 ：Express + jsonwebtoken
• 功能 ：从请求头提取并验证 JWT，解析用户 ID 并挂载到 req.userId，若验证失败则返回 401 状态码

Demo 示例

运行说明

1. 克隆项目仓库至本地
2. 启动 MySQL 9.x 服务，执行 schema.sql 创建数据库及用户表
3. 在 backend 目录下创建 .env 文件，配置数据库连接信息与 JWT_SECRET
4. 分别进入 frontend 和 backend 目录，执行 npm install 安装依赖
5. 在 backend 目录执行 npm start 启动后端服务
6. 在 frontend 目录执行 npm start 启动前端开发服务器
7. 访问前端地址（通常为 http://localhost:3000）进行操作

代码说明

后端服务入口（backend/src/index.js）：

const express = require('express');
const cors = require('cors');
const authRoutes = require('./routes/auth');
const userRoutes = require('./routes/user');

const app = express();
app.use(cors());
app.use(express.json());

app.use('/api/auth', authRoutes);
app.use('/api/users', userRoutes);

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

JWT 验证中间件（backend/src/middleware/auth.js）：

const jwt = require('jsonwebtoken');

module.exports = (req, res, next) => {
    const authHeader = req.headers.authorization;
    if (!authHeader) {
        return res.status(401).json({ code: 1, message: '未提供 Token' });
    }
    const token = authHeader.split(' ')[1];
    try {
        const decoded = jwt.verify(token, process.env.JWT_SECRET);
        req.userId = decoded.userId;
        next();
    } catch (err) {
        return res.status(401).json({ code: 1, message: 'Token 无效或已过期' });
    }
};

技术点总结

• React + Node.js + Express 全栈 JavaScript 技术栈
• MySQL 9.x 数据库设计与 bcrypt 密码加密
• JWT 身份认证机制及中间件保护路由
• 前后端分离架构下的 API 对接与状态管理
• 路由守卫实现未登录访问拦截

参考文档

官方文档

• React 官方文档
• Node.js 官方文档
• Express 官方文档
• MySQL 官方文档
• JWT (JSON Web Tokens) 官方文档
• bcrypt 官方文档

参考链接

• Claude Code 使用指南
• GitHub 版本控制基础
• 前后端分离 API 设计最佳实践

总结

本文完整演示了从零开始构建 Web 应用登录注册模块的全流程，涵盖技术选型、项目结构规划、数据库设计、后端 API 开发、前后端对接、安全机制实现及版本控制等关键环节。

核心的技术要点包括：使用 React + Node.js + Express 构建全栈 JavaScript 应用；基于 MySQL 9.x 设计用户数据模型；利用 bcrypt 保障密码存储安全；通过 JWT 实现无状态身份认证；借助 AI 编程工具快速生成可运行的完整代码，并实现前后端的高效协作与集成。