# 开发阶段一：基础架构与用户管理

## 1. 目标

*   搭建项目基础运行环境。
*   初始化数据库及核心用户表。
*   实现用户实体、数据访问、业务逻辑和基础 API。
*   实现安全的密码存储和用户登录认证机制 (基于 Session)。
*   构建移动端 App 的基础框架和登录/注册页面。
*   实现基于角色的基础页面导航。

## 2. 后端开发详解

1.  **环境配置确认**:
    *   确保本地开发环境已安装并配置好 JDK 1.8, Maven, MySQL (5.7+), Redis。
    *   确认 Maven `settings.xml` 配置正确（如果使用私服）。
    *   在 IDE (如 IntelliJ IDEA) 中正确导入项目，确保依赖下载无误。
2.  **数据库初始化**:
    *   连接 MySQL 数据库。
    *   创建数据库，例如 `mqtt_charging_system` (字符集推荐 `utf8mb4`)。
    *   **创建 `user` 表**: 执行 `development_plan.md` 中定义的 `user` 表 DDL 语句。
        ```sql
        CREATE TABLE `user` (
          `id` BIGINT AUTO_INCREMENT PRIMARY KEY COMMENT '主键ID',
          `username` VARCHAR(255) NOT NULL UNIQUE COMMENT '用户名',
          `password` VARCHAR(255) NOT NULL COMMENT '密码 (加密存储)',
          `role` VARCHAR(50) NOT NULL DEFAULT 'user' COMMENT '角色 (user/admin)',
          `balance` DECIMAL(10, 2) NOT NULL DEFAULT 0.00 COMMENT '账户余额',
          `create_time` DATETIME DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',
          `update_time` DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '更新时间',
          `is_deleted` TINYINT(1) DEFAULT 0 COMMENT '逻辑删除标志 (0:未删, 1:已删)'
        ) COMMENT='用户表';
        ```
    *   **配置数据源**: 检查并确认 `application.yml` 中的 `spring.datasource` 配置正确连接到创建的数据库。
3.  **用户模块实现**:
    *   **Entity**: 创建 `src/main/java/com/yupi/project/model/entity/User.java`。使用 Lombok (`@Data`) 简化代码，使用 MyBatis-Plus 注解 (`@TableName`, `@TableId`, `@TableField`) 映射数据库字段，特别是驼峰与下划线。
    *   **Mapper**: 创建 `src/main/java/com/yupi/project/mapper/UserMapper.java` 接口，继承 `BaseMapper<User>`。确保 `MyApplication.java` 中的 `@MapperScan` 包含此路径。
    *   **Service**:
        *   创建 `src/main/java/com/yupi/project/service/UserService.java` 接口，继承 `IService<User>`，并定义业务方法，如 `userLogin(String username, String password)`, `userRegister(String username, String password, String checkPassword)`, `getCurrentUser(HttpServletRequest request)` 等。
        *   创建 `src/main/java/com/yupi/project/service/impl/UserServiceImpl.java` 实现类，注入 `UserMapper`。
        *   在注册逻辑中，添加参数校验（用户名、密码长度，两次密码是否一致），检查用户名是否已存在。
        *   在登录逻辑中，查询用户，校验密码。
    *   **密码加密**:
        *   创建 `src/main/java/com/yupi/project/config/SecurityConfig.java` (或类似名称)。
        *   在该配置类中声明一个 `PasswordEncoder` Bean:
          ```java
          @Bean
          public PasswordEncoder passwordEncoder() {
              return new BCryptPasswordEncoder();
          }
          ```
        *   在 `UserServiceImpl` 中注入 `PasswordEncoder`，在注册时对密码进行加密 (`passwordEncoder.encode(rawPassword)`)，在登录时进行比对 (`passwordEncoder.matches(rawPassword, encodedPassword)`)。
    *   **Controller**:
        *   创建 `src/main/java/com/yupi/project/controller/UserController.java`。
        *   注入 `UserService`。
        *   实现 `POST /api/user/login` 接口，调用 `UserService.userLogin`，登录成功后将用户信息存入 Session (Spring Session 会自动处理)。定义清晰的请求体 DTO (`UserLoginRequest`) 和响应体 (`BaseResponse<User>`)。
        *   实现 `POST /api/user/register` 接口 (可选，或仅限管理员创建)，调用 `UserService.userRegister`。定义请求体 DTO (`UserRegisterRequest`)。
        *   实现 `GET /api/user/current` 接口，用于前端获取当前登录用户的信息（从 Session 中获取）。
        *   实现 `POST /api/user/logout` 接口，用于用户登出（使 Session 失效）。
    *   **常量与异常**: 在 `constant` 包定义用户会话 Key。在 `exception` 包定义业务异常（如 `BusinessException`），并在 Service 层适当抛出（如用户名已存在、密码错误），由 `GlobalExceptionHandler` 统一处理。
4.  **认证与授权 (Session)**:
    *   确认 `pom.xml` 中包含 `spring-session-data-redis` 和 `spring-boot-starter-data-redis` 依赖。
    *   确认 `application.yml` 中 Redis 配置正确。
    *   Spring Boot 会自动配置 Spring Session 使用 Redis。登录成功后，将用户信息（脱敏后，如移除密码）存入 `HttpSession`。
    *   `session.setAttribute(UserConstant.USER_LOGIN_STATE, safeUser);`
    *   在需要登录才能访问的接口方法中，从 `HttpServletRequest` 获取 `HttpSession`，再获取用户信息。可以封装一个获取当前用户的方法在 `UserService` 中。
    *   **基础角色检查**: 在需要区分管理员和普通用户的接口方法内部（或 Service 方法内部），获取当前登录用户的 `role` 字段进行判断。
      ```java
      User currentUser = userService.getCurrentUser(request);
      if (!"admin".equals(currentUser.getRole())) {
          throw new BusinessException(ErrorCode.NO_AUTH_ERROR);
      }
      // ... admin logic ...
      ```
      （更高级的权限控制可以使用 Spring Security 或 AOP，本阶段可先用简单方式）。

## 3. 前端 (手机版网页) 开发详解

*   **技术选型**: **Next.js (基于 React)**。使用 Tailwind CSS 进行样式设计，确保响应式布局，优先适配移动端浏览器。
*   **目标**: 实现 Web App 基础框架、登录页、注册页（如果需要）、用户主页（区分角色）。
*   **UI 风格**: (与之前一致，但实现方式变为HTML/CSS)
    *   **主色调**: 科技蓝 (#0A7AFF 或类似) 与白色 (#FFFFFF)。
    *   **辅助色**: 浅灰 (#F0F0F0)、深灰 (#808080)。
    *   **字体**: 无衬线字体，如系统默认字体，或引入网络字体如 Inter, Noto Sans SC。
    *   **图标**: 简洁、线条化的科技风格图标 (可使用 SVG图标库如 Heroicons, Feather Icons, 或 Iconfont CSS)。
    *   **布局**: 简洁、留白充足，控件圆角化。使用Flexbox和Grid进行响应式布局。
    *   **动效**: 轻微、平滑的CSS过渡和动画，增强科技感。
    *   **整体**: 保持所有页面风格统一。

*   **项目结构 (Next.js App Router)**:
    *   `charging_web_app/src/app/`：页面路由和布局。
        *   `layout.tsx`: 全局根布局 (包含 `AuthProvider`)。
        *   `login/page.tsx`: 登录页面。
        *   `register/page.tsx`: 注册页面。
        *   `(authenticated)/dashboard/page.tsx`: 普通用户主页 (示例路径，使用路由组进行权限控制)。
        *   `(authenticated)/admin/dashboard/page.tsx`: 管理员主页 (示例路径)。
    *   `charging_web_app/src/components/`: 可复用UI组件。
    *   `charging_web_app/src/contexts/`: React Context (如 `AuthContext.tsx`)。
    *   `charging_web_app/src/services/`: API服务 (如 `api.ts`)。
    *   `charging_web_app/src/hooks/`: 自定义React Hooks。
    *   `charging_web_app/src/lib/` (或 `utils`): 工具函数。
    *   `charging_web_app/public/`: 静态资源。
    *   `tailwind.config.ts`, `postcss.config.js`: Tailwind CSS 配置。

*   **页面设计与流程 (Web)**:
    1.  **登录页 (`src/app/login/page.tsx`)**:
        *   **UI**: 蓝色顶部Banner或背景元素，白色内容区域。App Logo (可选)、用户名输入框 (`<input type="text">`)、密码输入框 (`<input type="password">`)、"登录"按钮 (`<button>`)（蓝色填充）、"注册"链接 (`<Link href="/register">`)。输入框和按钮使用Tailwind CSS进行样式化，具有圆角和科技感边框。
        *   **交互**: 输入校验（非空）。点击登录按钮，显示加载指示器（如旋转SVG图标或文字提示）。
        *   **API 调用**: 调用后端 `POST /api/user/login` (通过 `AuthContext` 中的 `login` 方法)。
        *   **响应处理**:
            *   成功：`AuthContext` 更新用户状态。页面导航由 `AuthContext` 或页面逻辑处理 (例如，使用 `useRouter().push('/dashboard')`)。会话主要由后端的HttpOnly Cookie管理。
            *   失败：隐藏加载指示器，显示错误提示（如页面内红色文本）。
    2.  **注册页 (`src/app/register/page.tsx`)**: (如果开放注册)
        *   **UI**: 与登录页风格一致。包含用户名、密码、确认密码输入框，"注册"按钮。
        *   **交互**: 输入校验（非空、密码一致性、格式要求等）。点击注册按钮。
        *   **API 调用**: 调用后端 `POST /api/user/register` (通过 `AuthContext` 中的 `register` 方法)。
        *   **响应处理**: 成功后可提示注册成功并跳转到登录页；失败则提示错误。
    3.  **用户主页 (根据角色不同，示例路径 `src/app/(authenticated)/dashboard/page.tsx` 或 `src/app/(authenticated)/admin/dashboard/page.tsx`)**:
        *   **UI**:
            *   **普通用户**: 响应式导航栏（移动端可以是汉堡菜单或底部Tab模拟）。页面内容可包含欢迎信息、账户余额等。整体蓝白风格，卡片式布局。
            *   **管理员**: 响应式导航栏（侧边栏或顶部菜单）。列表和数据展示为主，使用表格或卡片。
        *   **功能**: 根据角色展示不同功能入口。
        *   **API 调用**: 进入时 `AuthContext` 会尝试通过 `checkAuth` 获取最新用户信息。
    4.  **导航与权限控制**:
        *   使用Next.js App Router进行页面路由。
        *   在根布局 `src/app/layout.tsx` 中包裹 `AuthProvider`。
        *   可以使用路由组 `(authenticated)` 结合中间件 ( `middleware.ts` ) 或在布局/页面组件中通过 `useAuth()` 检查认证状态和用户角色，实现页面级权限控制和未登录重定向。

*   **状态管理**: 主要使用 `AuthContext` 管理用户登录状态和用户信息。对于其他全局状态，可按需引入 Zustand 或 Valtio 等轻量级状态管理库。
*   **网络请求**: 已封装 `src/services/api.ts` (Axios实例)，处理 API Base URL、请求头（如 `withCredentials` 以支持Session Cookie）、加载状态、错误处理。
*   **Next.js代理**: 为了避免CORS问题和隐藏后端API实际地址，可以在 `next.config.mjs` 中配置rewrites代理，将前端的 `/api/*` 请求转发到后端Spring Boot服务的地址 (例如 `http://localhost:7529/api/*`)。

## 4. 本阶段交付物

*   可运行的后端 Spring Boot 项目。
*   包含 `user` 表的数据库。
*   实现用户注册（可选）、登录、获取当前用户信息、登出功能的后端 API。
*   密码加密存储。
*   基于 Redis 的 Session 认证机制。
*   **基础的Next.js手机版网页前端框架 (`charging_web_app`)。**
*   **实现登录、注册（可选）页面及功能的手机版网页。**
*   **根据用户角色导航到不同主页框架的手机版网页 (基础实现)。**
*   简要的接口测试报告（如 Postman 截图，或浏览器开发者工具网络请求截图）。

## 5. 注意事项

*   密码绝不能明文存储或传输。
*   API 响应中避免返回用户密码等敏感信息。
*   做好基础的参数校验。
*   前后端接口地址、请求/响应格式需约定一致。
*   **确保Next.js项目正确配置了对后端API的代理，或在生产环境中通过Nginx等进行反向代理。**
*   **Tailwind CSS的正确配置和使用，以实现响应式和移动优先的UI。** 