# bokedemo

**Repository Path**: testing-category/boke

## Basic Information

- **Project Name**: bokedemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-09
- **Last Updated**: 2025-08-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 登录注册系统演示项目

这是一个基于Spring Boot 3.x + MyBatis + HTML5的完整登录注册系统演示项目。

## 🚀 技术栈

### 后端
- **Spring Boot 3.2.4** - 主框架
- **MyBatis 3.0.5** - 持久层框架
- **MySQL** - 数据库
- **Spring Security Crypto** - 密码加密
- **Spring Boot Validation** - 参数验证
- **Lombok** - 代码简化

### 前端
- **HTML5** - 页面结构
- **CSS3** - 样式设计（渐变、动画、响应式）
- **JavaScript (ES6+)** - 交互逻辑
- **Fetch API** - HTTP请求

## 📁 项目结构

```
src/
├── main/
│   ├── java/com/example/demo/
│   │   ├── DemoApplication.java          # 启动类
│   │   ├── common/
│   │   │   └── Result.java               # 统一响应格式
│   │   ├── config/
│   │   │   └── PasswordConfig.java       # 密码加密配置
│   │   ├── controller/
│   │   │   └── UserController.java       # 用户控制器
│   │   ├── dto/
│   │   │   ├── UserLoginDto.java         # 登录DTO
│   │   │   └── UserRegisterDto.java      # 注册DTO
│   │   ├── entity/
│   │   │   └── User.java                 # 用户实体类
│   │   ├── exception/
│   │   │   ├── BusinessException.java    # 业务异常
│   │   │   └── GlobalExceptionHandler.java # 全局异常处理
│   │   ├── mapper/
│   │   │   └── UserMapper.java           # MyBatis Mapper接口
│   │   └── service/
│   │       ├── UserService.java          # 用户服务接口
│   │       └── impl/
│   │           └── UserServiceImpl.java  # 用户服务实现
│   └── resources/
│       ├── mapper/
│       │   └── UserMapper.xml            # MyBatis XML映射
│       ├── sql/
│       │   └── init.sql                  # 数据库初始化脚本
│       ├── static/                       # 静态资源
│       │   ├── index.html                # 主页
│       │   ├── login.html                # 登录页
│       │   ├── register.html             # 注册页
│       │   └── profile.html              # 个人资料页
│       └── application.yml               # 配置文件
```

## 🛠 环境要求

- **JDK 17** 或更高版本
- **Maven 3.6+**
- **MySQL 5.7+** 或 **MySQL 8.0+**

## 🚀 快速开始

### 1. 克隆项目
```bash
git clone <your-repo-url>
cd demo
```

### 2. 数据库设置
1. 创建MySQL数据库：
```sql
CREATE DATABASE demo_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 执行初始化脚本：
```bash
mysql -u root -p demo_db < src/main/resources/sql/init.sql
```

### 3. 修改配置
编辑 `src/main/resources/application.yml`，修改数据库连接信息：
```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/demo_db?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
    username: your_username
    password: your_password
```

### 4. 运行项目
```bash
# 方式1：使用Maven
./mvnw spring-boot:run

# 方式2：使用IDE
# 直接运行 DemoApplication.java 的 main 方法
```

### 5. 访问应用
项目启动成功后，在浏览器中访问：
- **登录页面**: http://localhost:8080/login.html
- **注册页面**: http://localhost:8080/register.html
- **主页**: http://localhost:8080/index.html

## 🔑 测试账号

系统预置了两个测试账号：
- **用户名**: `admin` **密码**: `123456`
- **用户名**: `test` **密码**: `123456`

## 📱 功能特性

### 🔐 认证功能
- ✅ 用户注册（用户名、密码、邮箱、手机号）
- ✅ 用户登录（用户名/密码验证）
- ✅ 实时字段唯一性检查
- ✅ 密码强度检测
- ✅ BCrypt密码加密存储

### 🎨 界面特性
- ✅ 现代化渐变设计
- ✅ 响应式布局（支持移动端）
- ✅ 加载动画和交互效果
- ✅ 表单验证提示
- ✅ 统一的错误处理

### 🛡️ 安全特性
- ✅ 密码BCrypt加密
- ✅ 参数验证
- ✅ 统一异常处理
- ✅ CORS跨域支持
- ✅ XSS防护（输入转义）

## 🔧 API接口

### 用户相关接口

#### 1. 用户注册
```http
POST /api/user/register
Content-Type: application/json

{
    "username": "testuser",
    "password": "123456",
    "confirmPassword": "123456",
    "email": "test@example.com",
    "phone": "13800138000"
}
```

#### 2. 用户登录
```http
POST /api/user/login
Content-Type: application/json

{
    "username": "testuser",
    "password": "123456"
}
```

#### 3. 检查用户名是否存在
```http
GET /api/user/check-username?username=testuser
```

#### 4. 检查邮箱是否存在
```http
GET /api/user/check-email?email=test@example.com
```

#### 5. 检查手机号是否存在
```http
GET /api/user/check-phone?phone=13800138000
```

#### 6. 获取用户信息
```http
GET /api/user/{id}
```

### 响应格式
所有API都遵循统一的响应格式：
```json
{
    "code": 0,           // 0: 成功, 非0: 失败
    "message": "操作成功",
    "data": {}           // 响应数据
}
```

## 📊 数据库设计

### 用户表 (user)
| 字段名 | 类型 | 说明 | 约束 |
|--------|------|------|------|
| id | BIGINT | 主键 | PRIMARY KEY, AUTO_INCREMENT |
| username | VARCHAR(50) | 用户名 | NOT NULL, UNIQUE |
| password | VARCHAR(255) | 密码（加密） | NOT NULL |
| email | VARCHAR(100) | 邮箱 | NOT NULL |
| phone | VARCHAR(20) | 手机号 | NULL |
| status | TINYINT | 状态（0禁用，1启用） | DEFAULT 1 |
| create_time | DATETIME | 创建时间 | DEFAULT CURRENT_TIMESTAMP |
| update_time | DATETIME | 更新时间 | ON UPDATE CURRENT_TIMESTAMP |

## 🔄 开发规范

项目严格遵循以下开发规范：

### 命名规范
- 类名使用PascalCase（如`UserService`）
- 方法和变量名使用camelCase（如`getUserById`）
- 常量使用UPPER_SNAKE_CASE（如`MAX_RETRY_COUNT`）

### 代码结构
- 严格遵循Controller-Service-Repository分层
- 使用DTO进行数据传输
- 统一的异常处理和响应格式

### 安全规范
- 所有用户输入都进行验证
- 密码使用BCrypt加密存储
- 统一的错误处理，避免信息泄露

## 🐛 常见问题

### 1. 数据库连接失败
- 检查MySQL服务是否启动
- 确认数据库用户名密码正确
- 确认数据库已创建

### 2. 页面无法访问静态资源
- 确认项目已正确启动
- 检查端口8080是否被占用
- 尝试清除浏览器缓存

### 3. 跨域问题
- Controller已添加`@CrossOrigin(origins = "*")`注解
- 如需更细粒度的跨域控制，可配置CORS规则

## 🔮 后续扩展

可以基于此项目继续开发：

- 🔑 JWT Token认证
- 👤 用户权限管理
- 📧 邮箱验证功能
- 📱 短信验证码
- 🌗 主题切换功能
- 🔄 找回密码功能
- 📊 用户行为统计
- 🎯 个人资料管理

## 📄 许可证

此项目仅用于学习和演示目的。

---

如有疑问，请查看代码注释或提交Issue。