docs: 删除所有MD文档文件
- 删除20个MD文档文件，清理项目文档 - 包括配置文档、测试文档、设置说明等 - 简化项目结构，减少冗余文档
This commit is contained in:
AIGC Developer
@@ -1,168 +0,0 @@
|
||||
# Bug修复总结报告
|
||||
|
||||
## 🎯 修复概述
|
||||
|
||||
本次修复解决了AIGC项目中的6个主要问题，提升了项目的安全性、稳定性和用户体验。
|
||||
|
||||
## ✅ 已修复的问题
|
||||
|
||||
### 1. 前端路由守卫被禁用 ⚠️ → ✅
|
||||
**问题**: 路由守卫被注释掉，用户可以直接访问需要认证的页面
|
||||
**修复**:
|
||||
- 恢复了完整的路由守卫逻辑
|
||||
- 添加了认证检查和权限验证
|
||||
- 实现了自动重定向和页面标题设置
|
||||
|
||||
**文件**: `demo/frontend/src/router/index.js`
|
||||
|
||||
### 2. CORS配置冲突 ⚠️ → ✅
|
||||
**问题**: 两个CORS配置可能冲突，导致跨域请求失败
|
||||
**修复**:
|
||||
- 统一了CORS配置，只保留SecurityConfig中的配置
|
||||
- 删除了重复的CorsConfig.java文件
|
||||
- 限制了允许的源为前端开发服务器
|
||||
|
||||
**文件**:
|
||||
- `demo/src/main/java/com/example/demo/config/SecurityConfig.java`
|
||||
- 删除了 `demo/src/main/java/com/example/demo/config/CorsConfig.java`
|
||||
|
||||
### 3. API路径不一致 ⚠️ → ✅
|
||||
**问题**: 前端和后端API路径不匹配
|
||||
**修复**:
|
||||
- 统一了API路径格式
|
||||
- 修复了用户名和邮箱检查接口的路径
|
||||
- 确保前后端路径一致性
|
||||
|
||||
**文件**:
|
||||
- `demo/frontend/src/api/auth.js`
|
||||
- `demo/src/main/java/com/example/demo/controller/AuthApiController.java`
|
||||
|
||||
### 4. App.vue过于简单 ⚠️ → ✅
|
||||
**问题**: 主应用组件只是一个测试页面
|
||||
**修复**:
|
||||
- 实现了完整的应用布局
|
||||
- 添加了导航栏和页脚组件
|
||||
- 实现了响应式设计和全局样式
|
||||
- 根据路由动态显示/隐藏组件
|
||||
|
||||
**文件**: `demo/frontend/src/App.vue`
|
||||
|
||||
### 5. 支付配置缺失 ⚠️ → ✅
|
||||
**问题**: 支付配置使用占位符，无法正常工作
|
||||
**修复**:
|
||||
- 提供了完整的支付配置示例
|
||||
- 创建了详细的支付配置说明文档
|
||||
- 区分了开发环境和生产环境配置
|
||||
|
||||
**文件**:
|
||||
- `demo/src/main/resources/application-dev.properties`
|
||||
- `demo/PAYMENT_SETUP.md`
|
||||
|
||||
### 6. 敏感配置硬编码 ⚠️ → ✅
|
||||
**问题**: 数据库密码等敏感信息硬编码在配置文件中
|
||||
**修复**:
|
||||
- 实现了环境变量化配置
|
||||
- 创建了环境变量示例文件
|
||||
- 提供了启动和停止脚本
|
||||
- 区分了开发和生产环境配置
|
||||
|
||||
**文件**:
|
||||
- `demo/src/main/resources/application-dev.properties`
|
||||
- `demo/src/main/resources/application-prod.properties`
|
||||
- `demo/env.example`
|
||||
- `demo/start.sh`
|
||||
- `demo/stop.sh`
|
||||
|
||||
## 🚀 新增功能
|
||||
|
||||
### 1. 环境变量支持
|
||||
- 支持通过.env文件配置环境变量
|
||||
- 提供了env.example示例文件
|
||||
- 实现了配置的默认值机制
|
||||
|
||||
### 2. 启动脚本
|
||||
- 创建了智能启动脚本(start.sh)
|
||||
- 创建了停止脚本(stop.sh)
|
||||
- 支持环境检查和自动配置
|
||||
|
||||
### 3. 支付配置文档
|
||||
- 详细的支付接入说明
|
||||
- 开发和生产环境配置指南
|
||||
- 常见问题解答
|
||||
|
||||
## 📊 修复效果
|
||||
|
||||
### 安全性提升
|
||||
- ✅ 恢复了路由保护机制
|
||||
- ✅ 统一了CORS配置，避免安全漏洞
|
||||
- ✅ 环境变量化敏感配置
|
||||
|
||||
### 稳定性提升
|
||||
- ✅ 修复了API路径不一致问题
|
||||
- ✅ 完善了应用布局和组件结构
|
||||
- ✅ 提供了完整的配置说明
|
||||
|
||||
### 用户体验提升
|
||||
- ✅ 实现了完整的应用布局
|
||||
- ✅ 添加了响应式设计
|
||||
- ✅ 提供了便捷的启动脚本
|
||||
|
||||
## 🔧 使用说明
|
||||
|
||||
### 启动应用
|
||||
```bash
|
||||
# 使用启动脚本（推荐）
|
||||
./start.sh
|
||||
|
||||
# 或手动启动
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
### 环境配置
|
||||
```bash
|
||||
# 复制环境变量示例文件
|
||||
cp env.example .env
|
||||
|
||||
# 编辑环境变量
|
||||
nano .env
|
||||
```
|
||||
|
||||
### 支付配置
|
||||
参考 `PAYMENT_SETUP.md` 文档进行支付功能配置。
|
||||
|
||||
## ⚠️ 注意事项
|
||||
|
||||
### 1. 环境变量
|
||||
- 生产环境必须使用环境变量
|
||||
- 确保.env文件不被提交到版本控制
|
||||
- 定期更换JWT密钥
|
||||
|
||||
### 2. 支付配置
|
||||
- 开发环境使用沙箱配置
|
||||
- 生产环境必须使用HTTPS
|
||||
- 确保回调URL正确配置
|
||||
|
||||
### 3. 数据库
|
||||
- 生产环境使用强密码
|
||||
- 定期备份数据库
|
||||
- 监控数据库连接
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
本次修复解决了项目中的主要问题，提升了：
|
||||
- **安全性**: 路由保护、CORS配置、环境变量
|
||||
- **稳定性**: API路径统一、配置完善
|
||||
- **用户体验**: 完整布局、响应式设计
|
||||
- **可维护性**: 环境变量、启动脚本、详细文档
|
||||
|
||||
项目现在可以安全地部署到生产环境使用。
|
||||
|
||||
## 📝 后续建议
|
||||
|
||||
1. **密码加密**: 考虑在生产环境实现真正的密码加密
|
||||
2. **监控日志**: 添加应用监控和日志分析
|
||||
3. **单元测试**: 增加单元测试覆盖率
|
||||
4. **API文档**: 使用Swagger生成API文档
|
||||
5. **CI/CD**: 实现自动化部署流程
|
||||
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
# 数据仪表盘功能说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
数据仪表盘是一个系统数据概览页面，提供以下关键指标和图表：
|
||||
|
||||
### 核心指标
|
||||
- **用户总数**: 系统中注册用户的总数量
|
||||
- **付费用户数**: 有成功支付记录的用户数量
|
||||
- **今日收入**: 当天成功支付的金额总和
|
||||
- **转化率**: 付费用户数占总用户数的百分比
|
||||
|
||||
### 图表展示
|
||||
- **日活用户趋势**: 最近30天的日活跃用户数量变化
|
||||
- **收入趋势**: 最近30天的收入变化情况
|
||||
- **订单状态分布**: 不同订单状态的分布饼图
|
||||
- **支付方式分布**: 不同支付方式的使用情况
|
||||
|
||||
### 数据列表
|
||||
- **最近订单**: 显示最新的10个订单信息
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 后端实现
|
||||
- `DashboardService`: 提供数据统计和计算服务
|
||||
- `DashboardApiController`: 提供RESTful API接口
|
||||
- 支持的数据源：用户、订单、支付记录
|
||||
|
||||
### 前端实现
|
||||
- `Dashboard.vue`: 主要仪表盘组件
|
||||
- `dashboard.js`: API调用封装
|
||||
- 使用ECharts进行图表渲染
|
||||
- 响应式设计，支持移动端访问
|
||||
|
||||
## 访问权限
|
||||
|
||||
- 需要管理员权限才能访问
|
||||
- 路径：`/admin/dashboard`
|
||||
- API路径：`/api/dashboard/**`
|
||||
|
||||
## 安装和运行
|
||||
|
||||
### 后端
|
||||
1. 确保Spring Boot应用正常运行
|
||||
2. 运行数据库迁移脚本（为users表添加created_at字段）：
|
||||
```sql
|
||||
-- 运行 migration_add_created_at.sql
|
||||
```
|
||||
3. 数据库中有用户、订单、支付数据
|
||||
|
||||
### 前端
|
||||
1. 安装依赖：
|
||||
```bash
|
||||
cd demo/frontend
|
||||
npm install
|
||||
```
|
||||
|
||||
2. 启动前端服务：
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. 使用管理员账户登录后访问仪表盘
|
||||
|
||||
**注意**: ECharts图表库通过CDN动态加载，无需额外安装npm包
|
||||
|
||||
### 数据库迁移
|
||||
如果users表没有created_at字段，需要运行迁移脚本：
|
||||
```sql
|
||||
ALTER TABLE users ADD COLUMN created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP;
|
||||
UPDATE users SET created_at = CURRENT_TIMESTAMP WHERE created_at IS NULL;
|
||||
```
|
||||
|
||||
## API接口
|
||||
|
||||
### 获取所有数据
|
||||
```
|
||||
GET /api/dashboard/all
|
||||
```
|
||||
|
||||
### 单独获取各项数据
|
||||
- `GET /api/dashboard/overview` - 概览数据
|
||||
- `GET /api/dashboard/daily-active-users` - 日活数据
|
||||
- `GET /api/dashboard/revenue-trend` - 收入趋势
|
||||
- `GET /api/dashboard/order-status-distribution` - 订单状态分布
|
||||
- `GET /api/dashboard/payment-method-distribution` - 支付方式分布
|
||||
- `GET /api/dashboard/recent-orders` - 最近订单
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. 所有API都需要管理员权限
|
||||
2. 数据统计基于现有数据库记录
|
||||
3. 图表数据为最近30天的趋势
|
||||
4. 需要确保数据库中有足够的测试数据
|
||||
5. 建议在生产环境中添加数据缓存机制
|
||||
|
||||
## 扩展功能
|
||||
|
||||
可以考虑添加的功能：
|
||||
- 数据导出功能
|
||||
- 自定义时间范围查询
|
||||
- 实时数据更新
|
||||
- 更多图表类型
|
||||
- 数据对比分析
|
||||
@@ -1,187 +0,0 @@
|
||||
# 域名配置完整指南
|
||||
|
||||
## 🎯 目标
|
||||
|
||||
将AIGC Demo项目配置为使用自定义域名，实现更真实的开发环境。
|
||||
|
||||
## 📋 配置步骤
|
||||
|
||||
### 1. 修改hosts文件
|
||||
|
||||
#### 方法A：自动配置（推荐）
|
||||
```powershell
|
||||
# 以管理员身份运行PowerShell
|
||||
.\update-hosts.ps1
|
||||
```
|
||||
|
||||
#### 方法B：手动配置
|
||||
1. 以管理员身份打开记事本
|
||||
2. 打开 `C:\Windows\System32\drivers\etc\hosts`
|
||||
3. 在文件末尾添加：
|
||||
```
|
||||
# AIGC Demo 测试域名映射
|
||||
127.0.0.1 test.yourdomain.com
|
||||
127.0.0.1 api.yourdomain.com
|
||||
127.0.0.1 local.yourdomain.com
|
||||
```
|
||||
|
||||
### 2. 验证配置
|
||||
```powershell
|
||||
# 测试域名解析
|
||||
.\test-domains.ps1
|
||||
```
|
||||
|
||||
### 3. 启动服务
|
||||
|
||||
#### 方法A：使用脚本启动（推荐）
|
||||
```powershell
|
||||
# 启动所有服务
|
||||
.\start-with-domains.ps1
|
||||
```
|
||||
|
||||
#### 方法B：手动启动
|
||||
```bash
|
||||
# 终端1：启动后端
|
||||
mvn spring-boot:run
|
||||
|
||||
# 终端2：启动前端
|
||||
cd frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## 🌐 域名配置详情
|
||||
|
||||
### 前端配置
|
||||
- **域名**: `test.yourdomain.com`
|
||||
- **端口**: `5173`
|
||||
- **访问地址**: http://test.yourdomain.com:5173
|
||||
|
||||
### 后端配置
|
||||
- **域名**: `api.yourdomain.com`
|
||||
- **端口**: `8080`
|
||||
- **访问地址**: http://api.yourdomain.com:8080
|
||||
|
||||
### API配置
|
||||
- **API地址**: http://api.yourdomain.com:8080/api
|
||||
- **代理配置**: 前端自动代理API请求
|
||||
|
||||
## 📁 修改的文件
|
||||
|
||||
### 前端文件
|
||||
- `frontend/src/api/request.js` - API基础URL
|
||||
- `frontend/vite.config.js` - 开发服务器配置
|
||||
|
||||
### 后端文件
|
||||
- `src/main/resources/application.properties` - 服务器绑定地址
|
||||
|
||||
### 新增文件
|
||||
- `update-hosts.ps1` - 自动配置hosts文件
|
||||
- `start-with-domains.ps1` - 使用域名启动服务
|
||||
- `start-with-domains.bat` - Windows批处理启动脚本
|
||||
- `test-domains.ps1` - 域名配置测试脚本
|
||||
- `HOSTS_SETUP.md` - 详细配置说明
|
||||
|
||||
## 🔧 配置说明
|
||||
|
||||
### 前端配置变更
|
||||
```javascript
|
||||
// 原配置
|
||||
baseURL: 'http://localhost:8080/api'
|
||||
|
||||
// 新配置
|
||||
baseURL: 'http://api.yourdomain.com:8080/api'
|
||||
```
|
||||
|
||||
### 后端配置变更
|
||||
```properties
|
||||
# 新增配置
|
||||
server.address=api.yourdomain.com
|
||||
server.port=8080
|
||||
```
|
||||
|
||||
### 前端开发服务器配置
|
||||
```javascript
|
||||
// 原配置
|
||||
server: {
|
||||
port: 3000,
|
||||
host: '0.0.0.0',
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 新配置
|
||||
server: {
|
||||
port: 5173,
|
||||
host: 'test.yourdomain.com',
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://api.yourdomain.com:8080',
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🚀 启动流程
|
||||
|
||||
### 1. 配置hosts文件
|
||||
```powershell
|
||||
# 以管理员身份运行
|
||||
.\update-hosts.ps1
|
||||
```
|
||||
|
||||
### 2. 测试配置
|
||||
```powershell
|
||||
.\test-domains.ps1
|
||||
```
|
||||
|
||||
### 3. 启动服务
|
||||
```powershell
|
||||
.\start-with-domains.ps1
|
||||
```
|
||||
|
||||
### 4. 访问应用
|
||||
- 前端: http://test.yourdomain.com:5173
|
||||
- 后端: http://api.yourdomain.com:8080
|
||||
|
||||
## 🔍 故障排除
|
||||
|
||||
### 域名解析失败
|
||||
```powershell
|
||||
# 清除DNS缓存
|
||||
ipconfig /flushdns
|
||||
|
||||
# 重启浏览器
|
||||
```
|
||||
|
||||
### 端口被占用
|
||||
```powershell
|
||||
# 查看端口占用
|
||||
netstat -ano | findstr :8080
|
||||
netstat -ano | findstr :5173
|
||||
|
||||
# 结束进程
|
||||
taskkill /PID <进程ID> /F
|
||||
```
|
||||
|
||||
### 服务无法启动
|
||||
1. 检查Java环境：`java -version`
|
||||
2. 检查Node.js环境：`node -v`
|
||||
3. 检查Maven环境：`mvn -version`
|
||||
|
||||
## 📝 注意事项
|
||||
|
||||
1. **管理员权限**：修改hosts文件需要管理员权限
|
||||
2. **防火墙设置**：确保端口8080和5173未被防火墙阻止
|
||||
3. **浏览器缓存**：首次使用新域名时建议清除浏览器缓存
|
||||
4. **开发环境**：此配置仅用于开发环境，生产环境需要真实域名
|
||||
|
||||
## 🎉 完成后的效果
|
||||
|
||||
- ✅ 前端使用 `test.yourdomain.com:5173` 访问
|
||||
- ✅ 后端使用 `api.yourdomain.com:8080` 访问
|
||||
- ✅ API请求自动代理到后端
|
||||
- ✅ 支持跨域请求
|
||||
- ✅ 模拟真实域名环境
|
||||
@@ -1,216 +0,0 @@
|
||||
# 📧 邮箱验证码登录功能测试指南
|
||||
|
||||
## 🎯 功能概述
|
||||
|
||||
已实现完整的邮箱验证码登录功能，包括：
|
||||
- ✅ 前端登录界面（支持手机/邮箱切换）
|
||||
- ✅ 后端API接口（验证码发送/验证/登录）
|
||||
- ✅ 本地模拟测试（无需真实邮件服务）
|
||||
- ✅ 开发环境友好（验证码在控制台显示）
|
||||
|
||||
## 🚀 快速测试
|
||||
|
||||
### 方法1：使用测试页面（推荐）
|
||||
|
||||
1. **打开测试页面**：
|
||||
```
|
||||
浏览器打开：demo/test-email-login.html
|
||||
```
|
||||
|
||||
2. **测试步骤**：
|
||||
- 点击"发送验证码"按钮
|
||||
- 查看控制台输出的模拟邮件内容
|
||||
- 使用验证码 `123456` 进行登录测试
|
||||
|
||||
### 方法2：使用前端应用
|
||||
|
||||
1. **启动前端服务**：
|
||||
```bash
|
||||
cd demo/frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
2. **访问登录页面**：
|
||||
```
|
||||
http://test.yourdomain.com:5173/login
|
||||
```
|
||||
|
||||
3. **测试邮箱登录**：
|
||||
- 点击"邮箱登录"标签
|
||||
- 输入邮箱地址（如：test@example.com）
|
||||
- 点击"获取验证码"
|
||||
- 查看控制台输出的验证码
|
||||
- 输入验证码进行登录
|
||||
|
||||
## 🔧 开发环境测试
|
||||
|
||||
### 模拟邮件发送功能
|
||||
|
||||
```javascript
|
||||
// 邮件发送函数
|
||||
async function sendVerificationEmail(email, code) {
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
// 开发环境：在控制台显示邮件内容
|
||||
console.log(`📨 模拟发送邮件到: ${email}`);
|
||||
console.log(`📝 邮件内容: 您的验证码是 ${code}，有效期5分钟`);
|
||||
console.log(`📮 发信地址: dev-noreply@local.yourdomain.com`);
|
||||
return true;
|
||||
} else {
|
||||
// 生产环境：调用腾讯云SES
|
||||
// ... 腾讯云API调用
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 控制台输出示例
|
||||
|
||||
```
|
||||
📨 模拟发送邮件到: test@example.com
|
||||
📝 邮件内容: 您的验证码是 123456，有效期5分钟
|
||||
📮 发信地址: dev-noreply@local.yourdomain.com
|
||||
```
|
||||
|
||||
## 📋 API接口测试
|
||||
|
||||
### 1. 发送验证码
|
||||
|
||||
```bash
|
||||
curl -X POST http://api.yourdomain.com:8080/api/verification/email/send \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com"}'
|
||||
```
|
||||
|
||||
**响应**：
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "验证码发送成功"
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 验证码登录
|
||||
|
||||
```bash
|
||||
curl -X POST http://api.yourdomain.com:8080/api/auth/login/email \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com", "code": "123456"}'
|
||||
```
|
||||
|
||||
**响应**：
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "登录成功",
|
||||
"data": {
|
||||
"user": {
|
||||
"id": 1,
|
||||
"username": "test",
|
||||
"email": "test@example.com",
|
||||
"role": "ROLE_USER"
|
||||
},
|
||||
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 🎨 前端界面功能
|
||||
|
||||
### 登录方式切换
|
||||
- **手机登录**：传统的手机号验证码登录
|
||||
- **邮箱登录**：新的邮箱验证码登录
|
||||
|
||||
### 邮箱登录流程
|
||||
1. 选择"邮箱登录"标签
|
||||
2. 输入邮箱地址
|
||||
3. 点击"获取验证码"
|
||||
4. 查看控制台获取验证码
|
||||
5. 输入验证码并登录
|
||||
|
||||
### 界面特性
|
||||
- ✅ 响应式设计
|
||||
- ✅ 表单验证
|
||||
- ✅ 倒计时功能
|
||||
- ✅ 错误提示
|
||||
- ✅ 开发模式友好
|
||||
|
||||
## 🔍 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
#### 1. 验证码发送失败
|
||||
- **检查**：后端服务是否启动
|
||||
- **解决**：启动后端服务或使用开发模式
|
||||
|
||||
#### 2. 登录失败
|
||||
- **检查**：验证码是否正确
|
||||
- **解决**：使用控制台显示的验证码
|
||||
|
||||
#### 3. 网络错误
|
||||
- **检查**：API地址是否正确
|
||||
- **解决**：确认域名配置或使用localhost
|
||||
|
||||
### 开发模式特性
|
||||
|
||||
1. **模拟邮件发送**：
|
||||
- 验证码在控制台显示
|
||||
- 无需真实邮件服务
|
||||
- 适合开发和测试
|
||||
|
||||
2. **模拟登录成功**：
|
||||
- 网络错误时自动降级
|
||||
- 开发环境友好
|
||||
- 不影响功能测试
|
||||
|
||||
## 📝 测试用例
|
||||
|
||||
### 测试用例1：正常流程
|
||||
1. 输入邮箱：`test@example.com`
|
||||
2. 点击"获取验证码"
|
||||
3. 查看控制台验证码：`123456`
|
||||
4. 输入验证码登录
|
||||
5. 预期：登录成功
|
||||
|
||||
### 测试用例2：错误处理
|
||||
1. 输入无效邮箱：`invalid-email`
|
||||
2. 点击"获取验证码"
|
||||
3. 预期：显示"请输入正确的邮箱地址"
|
||||
|
||||
### 测试用例3：验证码错误
|
||||
1. 输入正确邮箱
|
||||
2. 获取验证码
|
||||
3. 输入错误验证码：`000000`
|
||||
4. 预期：显示"验证码错误或已过期"
|
||||
|
||||
## 🚀 生产环境部署
|
||||
|
||||
### 配置腾讯云SES
|
||||
1. 修改 `application-tencent.properties`
|
||||
2. 设置 `spring.profiles.active=tencent`
|
||||
3. 配置真实的API密钥和发件人信息
|
||||
|
||||
### 环境变量配置
|
||||
```bash
|
||||
export TENCENT_SECRET_ID=your-secret-id
|
||||
export TENCENT_SECRET_KEY=your-secret-key
|
||||
export SES_FROM_EMAIL=noreply@yourdomain.com
|
||||
```
|
||||
|
||||
## 📊 功能状态
|
||||
|
||||
- ✅ 前端界面：完成
|
||||
- ✅ 后端API：完成
|
||||
- ✅ 本地测试：完成
|
||||
- ✅ 开发模式：完成
|
||||
- ⏳ 腾讯云集成：可选
|
||||
- ⏳ 生产部署：待配置
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
邮箱验证码登录功能已完全实现，支持：
|
||||
- 完整的用户界面
|
||||
- 后端API接口
|
||||
- 本地模拟测试
|
||||
- 开发环境友好
|
||||
- 生产环境就绪
|
||||
|
||||
现在可以开始测试邮箱验证码登录功能了！
|
||||
@@ -1,100 +0,0 @@
|
||||
# 邮箱验证码登录 - 简化版本
|
||||
|
||||
## 功能说明
|
||||
|
||||
已实现基于邮箱验证码的登录功能，**无需Redis**，使用内存存储验证码。
|
||||
|
||||
## 技术实现
|
||||
|
||||
### 存储方式
|
||||
- **验证码存储**：使用 `ConcurrentHashMap` 内存存储
|
||||
- **频率限制**：使用 `ConcurrentHashMap` 存储发送时间
|
||||
- **自动过期**：使用 `ScheduledExecutorService` 定时清理过期验证码
|
||||
|
||||
### 安全机制
|
||||
- ✅ 验证码6位数字
|
||||
- ✅ 5分钟有效期
|
||||
- ✅ 60秒发送频率限制
|
||||
- ✅ 一次性使用（验证后删除）
|
||||
- ✅ 线程安全存储
|
||||
|
||||
## 测试方法
|
||||
|
||||
### 1. 启动应用
|
||||
```bash
|
||||
cd demo
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
### 2. 测试API
|
||||
|
||||
#### 发送验证码
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/api/verification/email/send \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com"}'
|
||||
```
|
||||
|
||||
**响应**：
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "验证码发送成功"
|
||||
}
|
||||
```
|
||||
|
||||
**注意**：验证码会在应用日志中输出，格式如：
|
||||
```
|
||||
模拟发送邮件验证码到: test@example.com, 验证码: 123456
|
||||
```
|
||||
|
||||
#### 验证码登录
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/api/auth/login/email \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com", "code": "123456"}'
|
||||
```
|
||||
|
||||
**成功响应**：
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "登录成功",
|
||||
"data": {
|
||||
"user": {
|
||||
"id": 1,
|
||||
"username": "test",
|
||||
"email": "test@example.com",
|
||||
"role": "ROLE_USER",
|
||||
"points": 100
|
||||
},
|
||||
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 优势
|
||||
|
||||
1. **无需外部依赖**：不需要安装Redis
|
||||
2. **简单部署**：直接运行Spring Boot应用即可
|
||||
3. **开发友好**：验证码在日志中可见，便于测试
|
||||
4. **性能良好**：内存存储速度快
|
||||
5. **线程安全**：使用ConcurrentHashMap保证并发安全
|
||||
|
||||
## 限制
|
||||
|
||||
1. **单机部署**：验证码存储在内存中，多实例部署时无法共享
|
||||
2. **重启丢失**：应用重启后验证码会丢失
|
||||
3. **内存占用**：大量验证码会占用内存（通常不是问题）
|
||||
|
||||
## 生产环境建议
|
||||
|
||||
如果需要生产环境部署，建议：
|
||||
|
||||
1. **使用Redis**：多实例部署时共享验证码
|
||||
2. **配置真实邮件服务**：集成腾讯云SES或其他邮件服务
|
||||
3. **添加监控**：监控验证码发送频率和成功率
|
||||
|
||||
## 下一步
|
||||
|
||||
现在可以开始修改前端登录页面，实现邮箱验证码登录界面。
|
||||
@@ -1,192 +0,0 @@
|
||||
# 邮箱验证码登录功能总结
|
||||
|
||||
## 功能概述
|
||||
|
||||
已实现基于邮箱验证码的登录功能，用户可以通过邮箱接收验证码进行登录，无需记住密码。
|
||||
|
||||
## 后端实现
|
||||
|
||||
### 1. 核心组件
|
||||
|
||||
#### VerificationCodeService
|
||||
- **功能**：验证码生成、发送、验证
|
||||
- **位置**：`src/main/java/com/example/demo/service/VerificationCodeService.java`
|
||||
- **主要方法**：
|
||||
- `generateVerificationCode()`: 生成6位数字验证码
|
||||
- `sendEmailVerificationCode(String email)`: 发送邮件验证码
|
||||
- `verifyEmailCode(String email, String code)`: 验证邮箱验证码
|
||||
|
||||
#### VerificationCodeController
|
||||
- **功能**：验证码相关API接口
|
||||
- **位置**：`src/main/java/com/example/demo/controller/VerificationCodeController.java`
|
||||
- **API接口**：
|
||||
- `POST /api/verification/email/send`: 发送邮件验证码
|
||||
- `POST /api/verification/email/verify`: 验证邮件验证码
|
||||
|
||||
#### AuthApiController (扩展)
|
||||
- **功能**：认证相关API，新增邮箱验证码登录
|
||||
- **位置**：`src/main/java/com/example/demo/controller/AuthApiController.java`
|
||||
- **新增接口**：
|
||||
- `POST /api/auth/login/email`: 邮箱验证码登录
|
||||
|
||||
### 2. 数据存储
|
||||
|
||||
#### Redis配置
|
||||
- **用途**：存储验证码和发送频率限制
|
||||
- **配置类**：`src/main/java/com/example/demo/config/RedisConfig.java`
|
||||
- **存储结构**：
|
||||
- `email_code:{email}`: 存储验证码，5分钟过期
|
||||
- `email_rate_limit:{email}`: 发送频率限制，60秒过期
|
||||
|
||||
#### 数据库扩展
|
||||
- **UserRepository**: 新增 `findByPhone()` 和 `existsByPhone()` 方法
|
||||
- **UserService**: 新增 `findByPhone()` 方法
|
||||
|
||||
### 3. 安全机制
|
||||
|
||||
#### 验证码安全
|
||||
- **长度**：6位数字
|
||||
- **有效期**：5分钟
|
||||
- **发送频率限制**：同一邮箱60秒内只能发送一次
|
||||
- **一次性使用**：验证成功后立即删除
|
||||
|
||||
#### 用户验证
|
||||
- **邮箱格式验证**：前端和后端双重验证
|
||||
- **用户存在性检查**：登录时验证用户是否存在
|
||||
- **JWT Token生成**：验证成功后生成访问令牌
|
||||
|
||||
## API接口文档
|
||||
|
||||
### 1. 发送邮件验证码
|
||||
|
||||
**请求**
|
||||
```http
|
||||
POST /api/verification/email/send
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"email": "user@example.com"
|
||||
}
|
||||
```
|
||||
|
||||
**响应**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "验证码发送成功"
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 验证邮件验证码
|
||||
|
||||
**请求**
|
||||
```http
|
||||
POST /api/verification/email/verify
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"email": "user@example.com",
|
||||
"code": "123456"
|
||||
}
|
||||
```
|
||||
|
||||
**响应**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "验证码验证成功"
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 邮箱验证码登录
|
||||
|
||||
**请求**
|
||||
```http
|
||||
POST /api/auth/login/email
|
||||
Content-Type: application/json
|
||||
|
||||
{
|
||||
"email": "user@example.com",
|
||||
"code": "123456"
|
||||
}
|
||||
```
|
||||
|
||||
**响应**
|
||||
```json
|
||||
{
|
||||
"success": true,
|
||||
"message": "登录成功",
|
||||
"data": {
|
||||
"user": {
|
||||
"id": 1,
|
||||
"username": "user",
|
||||
"email": "user@example.com",
|
||||
"role": "ROLE_USER",
|
||||
"points": 100
|
||||
},
|
||||
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 配置说明
|
||||
|
||||
### 1. 腾讯云配置 (可选)
|
||||
- **配置文件**：`src/main/resources/application-tencent.properties`
|
||||
- **用途**：集成腾讯云邮件推送服务
|
||||
- **当前状态**：暂时使用模拟发送，实际部署时需要配置
|
||||
|
||||
### 2. Redis配置
|
||||
- **默认配置**：localhost:6379
|
||||
- **用途**：验证码存储和频率限制
|
||||
- **生产环境**：建议配置密码和持久化
|
||||
|
||||
## 测试方法
|
||||
|
||||
### 1. 启动服务
|
||||
```bash
|
||||
# 启动Redis
|
||||
redis-server
|
||||
|
||||
# 启动应用
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
### 2. 测试流程
|
||||
```bash
|
||||
# 1. 发送验证码
|
||||
curl -X POST http://localhost:8080/api/verification/email/send \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com"}'
|
||||
|
||||
# 2. 查看日志获取验证码（当前为模拟发送）
|
||||
# 3. 使用验证码登录
|
||||
curl -X POST http://localhost:8080/api/auth/login/email \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com", "code": "123456"}'
|
||||
```
|
||||
|
||||
## 待完成功能
|
||||
|
||||
### 1. 腾讯云集成
|
||||
- [ ] 配置腾讯云SES服务
|
||||
- [ ] 实现真实的邮件发送
|
||||
- [ ] 配置邮件模板
|
||||
|
||||
### 2. 前端集成
|
||||
- [ ] 修改登录页面支持邮箱验证码
|
||||
- [ ] 添加验证码输入框
|
||||
- [ ] 实现倒计时功能
|
||||
- [ ] 添加错误处理
|
||||
|
||||
### 3. 安全增强
|
||||
- [ ] 添加图形验证码
|
||||
- [ ] 实现IP限制
|
||||
- [ ] 添加设备指纹识别
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **开发环境**：当前使用模拟邮件发送，验证码会在日志中输出
|
||||
2. **生产环境**：需要配置真实的邮件服务
|
||||
3. **安全考虑**：验证码有效期和发送频率限制已实现
|
||||
4. **扩展性**：可以轻松添加短信验证码等其他验证方式
|
||||
@@ -1,196 +0,0 @@
|
||||
# 前端页面功能总结
|
||||
|
||||
## 🎨 设计理念
|
||||
|
||||
本项目采用现代化的前端设计理念，提供统一、美观、响应式的用户界面。
|
||||
|
||||
### 设计特点
|
||||
- **现代化UI**: 使用Bootstrap 5 + Font Awesome图标
|
||||
- **响应式设计**: 支持桌面、平板、手机等多种设备
|
||||
- **统一风格**: 所有页面采用一致的设计语言
|
||||
- **用户体验**: 注重交互细节和用户反馈
|
||||
|
||||
## 📱 页面结构
|
||||
|
||||
### 1. 基础布局模板 (`layout.html`)
|
||||
- **导航栏**: 响应式导航，支持用户登录状态显示
|
||||
- **面包屑**: 清晰的页面导航路径
|
||||
- **页脚**: 统一的页脚信息
|
||||
- **全局样式**: 统一的CSS变量和样式定义
|
||||
|
||||
### 2. 首页 (`home.html`)
|
||||
- **欢迎区域**: 大标题和功能介绍
|
||||
- **快速操作**: 主要功能入口卡片
|
||||
- **系统统计**: 管理员可见的数据统计
|
||||
- **最近活动**: 用户活动记录展示
|
||||
|
||||
### 3. 认证页面
|
||||
|
||||
#### 登录页面 (`login.html`)
|
||||
- **渐变背景**: 美观的渐变背景设计
|
||||
- **毛玻璃效果**: 现代化的卡片设计
|
||||
- **表单验证**: 实时表单验证和错误提示
|
||||
- **加载状态**: 提交时的加载动画
|
||||
- **演示账户**: 内置演示账户信息
|
||||
|
||||
#### 注册页面 (`register.html`)
|
||||
- **密码强度**: 实时密码强度检测
|
||||
- **唯一性检查**: 用户名和邮箱唯一性验证
|
||||
- **表单验证**: 完整的前端验证
|
||||
- **自动保存**: 表单草稿自动保存功能
|
||||
|
||||
### 4. 用户管理页面
|
||||
|
||||
#### 用户列表 (`users/list.html`)
|
||||
- **搜索功能**: 实时搜索用户
|
||||
- **角色标识**: 不同角色的颜色标识
|
||||
- **操作按钮**: 编辑、查看、删除操作
|
||||
- **用户详情**: 模态框显示用户详情
|
||||
- **分页支持**: 分页导航组件
|
||||
|
||||
#### 用户表单 (`users/form.html`)
|
||||
- **密码显示**: 密码显示/隐藏切换
|
||||
- **密码强度**: 新用户密码强度检测
|
||||
- **表单验证**: 完整的前端验证
|
||||
- **草稿保存**: 自动保存表单草稿
|
||||
- **用户信息**: 编辑模式显示用户信息
|
||||
|
||||
### 5. 支付页面 (已优化)
|
||||
- **支付方式选择**: 支付宝和PayPal卡片选择
|
||||
- **支付记录**: 美观的支付记录列表
|
||||
- **支付详情**: 详细的支付信息展示
|
||||
- **支付结果**: 支付成功/失败页面
|
||||
|
||||
## 🎯 功能特性
|
||||
|
||||
### 交互功能
|
||||
- **实时搜索**: 用户列表实时搜索
|
||||
- **表单验证**: 前端表单验证
|
||||
- **加载状态**: 按钮加载动画
|
||||
- **自动保存**: 表单草稿自动保存
|
||||
- **密码强度**: 密码强度实时检测
|
||||
- **唯一性检查**: 用户名邮箱唯一性验证
|
||||
|
||||
### 响应式设计
|
||||
- **移动优先**: 移动设备优先设计
|
||||
- **断点适配**: 支持多种屏幕尺寸
|
||||
- **触摸友好**: 适合触摸操作的按钮大小
|
||||
- **导航折叠**: 移动端导航自动折叠
|
||||
|
||||
### 用户体验
|
||||
- **视觉反馈**: 悬停、点击等视觉反馈
|
||||
- **错误提示**: 清晰的错误信息显示
|
||||
- **成功提示**: 操作成功的确认信息
|
||||
- **自动隐藏**: 提示信息自动隐藏
|
||||
|
||||
## 🛠️ 技术栈
|
||||
|
||||
### 前端技术
|
||||
- **HTML5**: 语义化标签
|
||||
- **CSS3**: 现代CSS特性
|
||||
- **Bootstrap 5**: UI框架
|
||||
- **Font Awesome**: 图标库
|
||||
- **JavaScript**: 原生JavaScript
|
||||
- **Thymeleaf**: 模板引擎
|
||||
|
||||
### 设计工具
|
||||
- **CSS变量**: 统一的颜色和尺寸定义
|
||||
- **Flexbox/Grid**: 现代布局技术
|
||||
- **CSS动画**: 平滑的过渡效果
|
||||
- **渐变背景**: 美观的背景设计
|
||||
|
||||
## 📋 页面功能清单
|
||||
|
||||
### ✅ 已完成功能
|
||||
- [x] 统一布局模板
|
||||
- [x] 响应式导航栏
|
||||
- [x] 首页仪表板
|
||||
- [x] 登录页面优化
|
||||
- [x] 注册页面优化
|
||||
- [x] 用户管理列表
|
||||
- [x] 用户表单页面
|
||||
- [x] 支付功能页面
|
||||
- [x] 搜索功能
|
||||
- [x] 表单验证
|
||||
- [x] 加载状态
|
||||
- [x] 错误处理
|
||||
- [x] 移动端适配
|
||||
|
||||
### 🔄 可扩展功能
|
||||
- [ ] 主题切换
|
||||
- [ ] 多语言支持
|
||||
- [ ] 数据可视化图表
|
||||
- [ ] 文件上传组件
|
||||
- [ ] 富文本编辑器
|
||||
- [ ] 拖拽排序
|
||||
- [ ] 无限滚动
|
||||
- [ ] 离线支持
|
||||
|
||||
## 🎨 设计规范
|
||||
|
||||
### 颜色方案
|
||||
- **主色调**: #0d6efd (Bootstrap Primary)
|
||||
- **成功色**: #198754 (Bootstrap Success)
|
||||
- **警告色**: #ffc107 (Bootstrap Warning)
|
||||
- **危险色**: #dc3545 (Bootstrap Danger)
|
||||
- **信息色**: #0dcaf0 (Bootstrap Info)
|
||||
|
||||
### 字体规范
|
||||
- **主字体**: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
|
||||
- **标题**: 600字重
|
||||
- **正文**: 400字重
|
||||
- **小字**: 0.875rem
|
||||
|
||||
### 间距规范
|
||||
- **卡片内边距**: 1.5rem
|
||||
- **表单间距**: 1rem
|
||||
- **按钮间距**: 0.5rem
|
||||
- **页面边距**: 2rem
|
||||
|
||||
## 🚀 性能优化
|
||||
|
||||
### 加载优化
|
||||
- **CDN资源**: 使用CDN加载Bootstrap和Font Awesome
|
||||
- **图片优化**: 使用图标字体替代图片
|
||||
- **CSS优化**: 内联关键CSS
|
||||
- **JS优化**: 按需加载JavaScript
|
||||
|
||||
### 用户体验优化
|
||||
- **骨架屏**: 加载时的占位内容
|
||||
- **预加载**: 关键资源预加载
|
||||
- **缓存策略**: 静态资源缓存
|
||||
- **压缩优化**: CSS和JS压缩
|
||||
|
||||
## 📱 移动端适配
|
||||
|
||||
### 响应式断点
|
||||
- **手机**: < 768px
|
||||
- **平板**: 768px - 1024px
|
||||
- **桌面**: > 1024px
|
||||
|
||||
### 移动端优化
|
||||
- **触摸友好**: 按钮最小44px点击区域
|
||||
- **导航优化**: 移动端折叠导航
|
||||
- **表单优化**: 移动端表单适配
|
||||
- **字体缩放**: 防止字体过小
|
||||
|
||||
## 🔧 维护指南
|
||||
|
||||
### 代码规范
|
||||
- **HTML**: 语义化标签，合理嵌套
|
||||
- **CSS**: BEM命名规范，模块化样式
|
||||
- **JavaScript**: ES6+语法，函数式编程
|
||||
- **注释**: 详细的代码注释
|
||||
|
||||
### 更新维护
|
||||
- **版本控制**: Git版本管理
|
||||
- **代码审查**: 代码质量检查
|
||||
- **测试**: 跨浏览器测试
|
||||
- **文档**: 详细的开发文档
|
||||
|
||||
---
|
||||
|
||||
**总结**: 本项目的前端页面已经完成了全面的现代化改造，提供了统一、美观、响应式的用户界面，具备良好的用户体验和可维护性。
|
||||
|
||||
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
# Hosts文件配置指南
|
||||
|
||||
## 手动配置步骤
|
||||
|
||||
### 1. 以管理员身份打开记事本
|
||||
1. 按 `Win + R` 打开运行对话框
|
||||
2. 输入 `notepad` 并按 `Ctrl + Shift + Enter`（以管理员身份运行）
|
||||
3. 点击"是"确认
|
||||
|
||||
### 2. 打开hosts文件
|
||||
1. 在记事本中，点击"文件" -> "打开"
|
||||
2. 导航到 `C:\Windows\System32\drivers\etc\`
|
||||
3. 将文件类型改为"所有文件"
|
||||
4. 选择 `hosts` 文件并打开
|
||||
|
||||
### 3. 添加域名映射
|
||||
在hosts文件末尾添加以下内容：
|
||||
|
||||
```
|
||||
# AIGC Demo 测试域名映射
|
||||
127.0.0.1 test.yourdomain.com
|
||||
127.0.0.1 api.yourdomain.com
|
||||
127.0.0.1 local.yourdomain.com
|
||||
```
|
||||
|
||||
### 4. 保存文件
|
||||
1. 按 `Ctrl + S` 保存
|
||||
2. 关闭记事本
|
||||
|
||||
## 自动配置（推荐）
|
||||
|
||||
### 使用PowerShell脚本
|
||||
1. 右键点击 `update-hosts.ps1`
|
||||
2. 选择"使用PowerShell运行"
|
||||
3. 如果提示执行策略，运行：
|
||||
```powershell
|
||||
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
|
||||
```
|
||||
|
||||
## 验证配置
|
||||
|
||||
### 测试域名解析
|
||||
```cmd
|
||||
ping test.yourdomain.com
|
||||
ping api.yourdomain.com
|
||||
```
|
||||
|
||||
应该显示 `127.0.0.1` 的响应。
|
||||
|
||||
## 配置完成后
|
||||
|
||||
### 前端配置
|
||||
修改前端代码中的API地址：
|
||||
```javascript
|
||||
// 在 src/api/request.js 中
|
||||
const API_BASE_URL = 'http://api.yourdomain.com:8080/api';
|
||||
```
|
||||
|
||||
### 后端配置
|
||||
修改后端服务绑定地址：
|
||||
```java
|
||||
// 在 application.properties 中
|
||||
server.address=api.yourdomain.com
|
||||
server.port=8080
|
||||
```
|
||||
|
||||
## 域名说明
|
||||
|
||||
- `test.yourdomain.com` - 前端测试域名
|
||||
- `api.yourdomain.com` - 后端API域名
|
||||
- `local.yourdomain.com` - 本地开发域名
|
||||
|
||||
## 故障排除
|
||||
|
||||
### 如果域名不生效
|
||||
1. 清除DNS缓存：
|
||||
```cmd
|
||||
ipconfig /flushdns
|
||||
```
|
||||
|
||||
2. 重启浏览器
|
||||
|
||||
3. 检查hosts文件格式：
|
||||
- 确保没有多余的空格
|
||||
- 确保使用Tab或空格分隔IP和域名
|
||||
- 确保没有#注释掉映射
|
||||
|
||||
### 如果无法保存hosts文件
|
||||
1. 确保以管理员身份运行记事本
|
||||
2. 检查文件是否被其他程序占用
|
||||
3. 尝试复制到桌面修改后再覆盖原文件
|
||||
@@ -1,93 +0,0 @@
|
||||
# 内网穿透配置完成
|
||||
|
||||
## ✅ **已完成的配置修改**
|
||||
|
||||
### 🎨 **前端配置 (vite.config.js)**
|
||||
```javascript
|
||||
server: {
|
||||
port: 5173,
|
||||
host: '0.0.0.0', // 允许外部访问
|
||||
allowedHosts: true, // 允许所有主机访问
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080',
|
||||
changeOrigin: true,
|
||||
secure: false,
|
||||
// ... 其他配置
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 🔧 **后端配置 (SecurityConfig.java)**
|
||||
```java
|
||||
// 允许前端开发服务器和ngrok域名
|
||||
configuration.setAllowedOrigins(Arrays.asList(
|
||||
"http://localhost:3000",
|
||||
"http://127.0.0.1:3000",
|
||||
"http://localhost:5173",
|
||||
"http://127.0.0.1:5173",
|
||||
"https://*.ngrok.io",
|
||||
"https://*.ngrok-free.app"
|
||||
));
|
||||
configuration.setAllowedOriginPatterns(Arrays.asList(
|
||||
"https://*.ngrok.io",
|
||||
"https://*.ngrok-free.app"
|
||||
));
|
||||
```
|
||||
|
||||
## 🚀 **使用步骤**
|
||||
|
||||
### 1️⃣ **启动ngrok**
|
||||
```bash
|
||||
# 穿透前端端口
|
||||
ngrok http 5173
|
||||
|
||||
# 穿透后端端口
|
||||
ngrok http 8080
|
||||
```
|
||||
|
||||
### 2️⃣ **获取ngrok地址**
|
||||
ngrok会显示类似：
|
||||
```
|
||||
Forwarding https://abc123.ngrok.io -> http://localhost:5173
|
||||
Forwarding https://def456.ngrok.io -> http://localhost:8080
|
||||
```
|
||||
|
||||
### 3️⃣ **修改前端API配置**
|
||||
需要将前端代码中的API地址改为ngrok地址：
|
||||
|
||||
**修改 `demo/frontend/src/api/request.js`**：
|
||||
```javascript
|
||||
baseURL: 'https://你的后端ngrok地址.ngrok.io/api'
|
||||
```
|
||||
|
||||
**修改 `demo/frontend/src/views/Login.vue`**：
|
||||
- 第151行：`'https://你的后端ngrok地址.ngrok.io/api/verification/email/send'`
|
||||
- 第223行：`'https://你的后端ngrok地址.ngrok.io/api/auth/login/email'`
|
||||
|
||||
### 4️⃣ **测试访问**
|
||||
- 前端：`https://abc123.ngrok.io`
|
||||
- 后端API：`https://def456.ngrok.io/api`
|
||||
|
||||
## 🔒 **安全说明**
|
||||
|
||||
- `allowedHosts: true` 允许所有主机访问（仅开发环境）
|
||||
- CORS配置支持ngrok域名模式匹配
|
||||
- 生产环境建议限制具体的域名
|
||||
|
||||
## 📝 **注意事项**
|
||||
|
||||
1. **ngrok免费版限制**：
|
||||
- 每次重启ngrok，域名会变化
|
||||
- 需要重新配置前端API地址
|
||||
|
||||
2. **HTTPS证书**：
|
||||
- ngrok提供HTTPS，但证书可能不被信任
|
||||
- 浏览器可能显示安全警告
|
||||
|
||||
3. **网络延迟**：
|
||||
- 通过ngrok访问会有额外延迟
|
||||
- 建议在本地测试完成后再使用ngrok
|
||||
|
||||
现在您可以安全地使用ngrok进行内网穿透测试了！
|
||||
@@ -1,323 +0,0 @@
|
||||
# 订单管理系统功能总结
|
||||
|
||||
## 🎯 功能概述
|
||||
|
||||
订单管理系统是一个完整的电商订单处理解决方案，支持订单创建、状态管理、支付集成、发货跟踪等全流程功能。
|
||||
|
||||
## 📋 核心功能
|
||||
|
||||
### 1. 订单实体设计
|
||||
|
||||
#### Order（订单主表）
|
||||
- **订单号**: 唯一标识，自动生成
|
||||
- **订单金额**: 支持多种货币
|
||||
- **订单状态**: 9种状态流转
|
||||
- **订单类型**: 5种订单类型
|
||||
- **联系信息**: 邮箱、电话
|
||||
- **地址信息**: 收货地址、账单地址
|
||||
- **时间戳**: 创建、更新、支付、发货、送达、取消时间
|
||||
|
||||
#### OrderItem（订单项）
|
||||
- **商品信息**: 名称、描述、SKU
|
||||
- **价格信息**: 单价、数量、小计
|
||||
- **商品图片**: 支持图片展示
|
||||
|
||||
#### OrderStatus（订单状态）
|
||||
- `PENDING` - 待支付
|
||||
- `CONFIRMED` - 已确认
|
||||
- `PAID` - 已支付
|
||||
- `PROCESSING` - 处理中
|
||||
- `SHIPPED` - 已发货
|
||||
- `DELIVERED` - 已送达
|
||||
- `COMPLETED` - 已完成
|
||||
- `CANCELLED` - 已取消
|
||||
- `REFUNDED` - 已退款
|
||||
|
||||
#### OrderType（订单类型）
|
||||
- `PRODUCT` - 商品订单
|
||||
- `SERVICE` - 服务订单
|
||||
- `SUBSCRIPTION` - 订阅订单
|
||||
- `DIGITAL` - 数字商品
|
||||
- `PHYSICAL` - 实体商品
|
||||
|
||||
### 2. 数据访问层
|
||||
|
||||
#### OrderRepository
|
||||
- **基础查询**: 按ID、订单号、用户ID查询
|
||||
- **状态查询**: 按订单状态筛选
|
||||
- **时间查询**: 按创建时间范围查询
|
||||
- **统计查询**: 订单数量、金额统计
|
||||
- **特殊查询**: 过期订单、最近订单
|
||||
|
||||
#### OrderItemRepository
|
||||
- **关联查询**: 按订单ID查询订单项
|
||||
- **商品查询**: 按SKU、商品名称查询
|
||||
- **统计查询**: 商品销售数量、金额统计
|
||||
|
||||
### 3. 业务服务层
|
||||
|
||||
#### OrderService
|
||||
- **订单创建**: 自动计算金额、生成订单号
|
||||
- **状态管理**: 订单状态流转控制
|
||||
- **业务规则**: 支付、取消、发货、完成条件检查
|
||||
- **自动处理**: 过期订单自动取消
|
||||
- **数据统计**: 订单数量、金额统计
|
||||
|
||||
#### 核心业务方法
|
||||
- `createOrder()` - 创建订单
|
||||
- `updateOrderStatus()` - 更新订单状态
|
||||
- `cancelOrder()` - 取消订单
|
||||
- `confirmPayment()` - 确认支付
|
||||
- `shipOrder()` - 订单发货
|
||||
- `completeOrder()` - 完成订单
|
||||
- `autoCancelExpiredOrders()` - 自动取消过期订单
|
||||
|
||||
### 4. 控制器层
|
||||
|
||||
#### OrderController
|
||||
- **用户订单**: 订单列表、详情、创建
|
||||
- **支付集成**: 订单支付创建
|
||||
- **状态管理**: 订单状态更新
|
||||
- **管理员功能**: 订单管理、状态操作
|
||||
|
||||
#### 主要端点
|
||||
- `GET /orders` - 用户订单列表
|
||||
- `GET /orders/{id}` - 订单详情
|
||||
- `GET /orders/create` - 创建订单表单
|
||||
- `POST /orders/create` - 提交订单
|
||||
- `POST /orders/{id}/pay` - 创建订单支付
|
||||
- `POST /orders/{id}/cancel` - 取消订单
|
||||
- `POST /orders/{id}/ship` - 订单发货
|
||||
- `POST /orders/{id}/complete` - 完成订单
|
||||
- `GET /orders/admin` - 管理员订单管理
|
||||
|
||||
### 5. 前端界面
|
||||
|
||||
#### 订单列表页面 (`orders/list.html`)
|
||||
- **现代化设计**: Bootstrap 5 + Font Awesome
|
||||
- **状态筛选**: 按订单状态筛选
|
||||
- **搜索功能**: 订单号实时搜索
|
||||
- **支付操作**: 支付宝、PayPal支付选择
|
||||
- **状态标识**: 不同状态的颜色标识
|
||||
- **分页支持**: 完整的分页导航
|
||||
|
||||
#### 订单详情页面 (`orders/detail.html`)
|
||||
- **完整信息**: 订单基本信息、商品列表、地址信息
|
||||
- **状态展示**: 订单状态、时间戳展示
|
||||
- **操作按钮**: 支付、取消、发货、完成操作
|
||||
- **支付记录**: 关联支付记录展示
|
||||
- **管理员功能**: 状态更新、发货管理
|
||||
|
||||
#### 订单创建页面 (`orders/form.html`)
|
||||
- **动态表单**: 可添加/删除订单项
|
||||
- **实时计算**: 自动计算订单总金额
|
||||
- **表单验证**: 前端验证和提示
|
||||
- **草稿保存**: 自动保存表单草稿
|
||||
- **帮助信息**: 订单类型说明和注意事项
|
||||
|
||||
#### 管理员页面 (`orders/admin.html`)
|
||||
- **统计面板**: 订单数量、状态统计
|
||||
- **批量操作**: 状态筛选、搜索
|
||||
- **管理功能**: 发货、完成、取消操作
|
||||
- **状态更新**: 手动更新订单状态
|
||||
|
||||
### 6. 支付系统集成
|
||||
|
||||
#### Payment-Order关联
|
||||
- **双向关联**: Payment ↔ Order
|
||||
- **状态同步**: 支付成功自动更新订单状态
|
||||
- **数据一致性**: 事务保证数据一致性
|
||||
|
||||
#### 支付流程
|
||||
1. 用户选择支付方式
|
||||
2. 创建Payment记录
|
||||
3. 跳转到支付页面
|
||||
4. 支付成功后更新Payment状态
|
||||
5. 自动更新Order状态为PAID
|
||||
|
||||
### 7. 数据库设计
|
||||
|
||||
#### orders表
|
||||
```sql
|
||||
CREATE TABLE orders (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
order_number VARCHAR(50) NOT NULL UNIQUE,
|
||||
total_amount DECIMAL(10,2) NOT NULL,
|
||||
currency VARCHAR(3) NOT NULL DEFAULT 'CNY',
|
||||
status VARCHAR(20) NOT NULL DEFAULT 'PENDING',
|
||||
order_type VARCHAR(20) NOT NULL DEFAULT 'PRODUCT',
|
||||
description VARCHAR(500),
|
||||
notes TEXT,
|
||||
shipping_address TEXT,
|
||||
billing_address TEXT,
|
||||
contact_phone VARCHAR(20),
|
||||
contact_email VARCHAR(100),
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
paid_at TIMESTAMP NULL,
|
||||
shipped_at TIMESTAMP NULL,
|
||||
delivered_at TIMESTAMP NULL,
|
||||
cancelled_at TIMESTAMP NULL,
|
||||
user_id BIGINT NOT NULL,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||
);
|
||||
```
|
||||
|
||||
#### order_items表
|
||||
```sql
|
||||
CREATE TABLE order_items (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
product_name VARCHAR(100) NOT NULL,
|
||||
product_description VARCHAR(500),
|
||||
product_sku VARCHAR(200),
|
||||
unit_price DECIMAL(10,2) NOT NULL,
|
||||
quantity INT NOT NULL,
|
||||
subtotal DECIMAL(10,2) NOT NULL,
|
||||
product_image VARCHAR(100),
|
||||
order_id BIGINT NOT NULL,
|
||||
FOREIGN KEY (order_id) REFERENCES orders(id) ON DELETE CASCADE
|
||||
);
|
||||
```
|
||||
|
||||
#### payments表更新
|
||||
```sql
|
||||
ALTER TABLE payments ADD COLUMN order_id_ref BIGINT NULL;
|
||||
ALTER TABLE payments ADD FOREIGN KEY (order_id_ref) REFERENCES orders(id);
|
||||
```
|
||||
|
||||
## 🔄 业务流程
|
||||
|
||||
### 订单创建流程
|
||||
1. 用户填写订单信息
|
||||
2. 添加订单商品
|
||||
3. 系统计算订单总金额
|
||||
4. 生成唯一订单号
|
||||
5. 保存订单和订单项
|
||||
6. 订单状态设为PENDING
|
||||
|
||||
### 订单支付流程
|
||||
1. 用户选择支付方式
|
||||
2. 创建Payment记录
|
||||
3. 跳转到支付页面
|
||||
4. 用户完成支付
|
||||
5. 支付回调更新Payment状态
|
||||
6. 自动更新Order状态为PAID
|
||||
|
||||
### 订单发货流程
|
||||
1. 管理员确认订单
|
||||
2. 准备商品发货
|
||||
3. 更新订单状态为SHIPPED
|
||||
4. 记录发货时间
|
||||
5. 可添加物流单号
|
||||
|
||||
### 订单完成流程
|
||||
1. 用户确认收货
|
||||
2. 管理员更新状态为COMPLETED
|
||||
3. 记录完成时间
|
||||
4. 订单流程结束
|
||||
|
||||
## 🎨 界面特色
|
||||
|
||||
### 设计理念
|
||||
- **现代化UI**: Bootstrap 5 + Font Awesome
|
||||
- **响应式设计**: 支持桌面、平板、手机
|
||||
- **用户友好**: 直观的操作流程
|
||||
- **状态可视化**: 颜色编码的状态标识
|
||||
|
||||
### 交互功能
|
||||
- **实时搜索**: 订单号搜索
|
||||
- **状态筛选**: 按状态筛选订单
|
||||
- **动态表单**: 可添加/删除订单项
|
||||
- **自动计算**: 实时计算订单金额
|
||||
- **草稿保存**: 自动保存表单草稿
|
||||
- **模态框操作**: 确认对话框
|
||||
|
||||
### 管理员功能
|
||||
- **统计面板**: 订单数据统计
|
||||
- **批量操作**: 批量状态更新
|
||||
- **权限控制**: 管理员专用功能
|
||||
- **状态管理**: 完整的订单状态管理
|
||||
|
||||
## 🔧 技术特性
|
||||
|
||||
### 后端技术
|
||||
- **Spring Boot 3.5.6**: 现代化框架
|
||||
- **Spring Data JPA**: 数据访问层
|
||||
- **Spring Security**: 安全控制
|
||||
- **MySQL**: 关系型数据库
|
||||
- **事务管理**: 数据一致性保证
|
||||
|
||||
### 前端技术
|
||||
- **Thymeleaf**: 服务端模板
|
||||
- **Bootstrap 5**: UI框架
|
||||
- **Font Awesome**: 图标库
|
||||
- **JavaScript**: 交互功能
|
||||
- **CSS3**: 现代化样式
|
||||
|
||||
### 设计模式
|
||||
- **MVC架构**: 分层设计
|
||||
- **Repository模式**: 数据访问抽象
|
||||
- **Service层**: 业务逻辑封装
|
||||
- **DTO模式**: 数据传输对象
|
||||
|
||||
## 📊 功能统计
|
||||
|
||||
### 已完成功能
|
||||
- ✅ 订单实体设计
|
||||
- ✅ 订单状态管理
|
||||
- ✅ 订单项管理
|
||||
- ✅ 数据访问层
|
||||
- ✅ 业务服务层
|
||||
- ✅ 控制器层
|
||||
- ✅ 前端界面
|
||||
- ✅ 支付集成
|
||||
- ✅ 数据库设计
|
||||
- ✅ 权限控制
|
||||
|
||||
### 可扩展功能
|
||||
- [ ] 订单导出功能
|
||||
- [ ] 订单模板功能
|
||||
- [ ] 批量操作功能
|
||||
- [ ] 订单分析报表
|
||||
- [ ] 库存管理集成
|
||||
- [ ] 物流跟踪集成
|
||||
- [ ] 订单评价系统
|
||||
- [ ] 优惠券系统
|
||||
|
||||
## 🚀 部署说明
|
||||
|
||||
### 环境要求
|
||||
- JDK 21+
|
||||
- MySQL 8.0+
|
||||
- Maven 3.6+
|
||||
|
||||
### 配置步骤
|
||||
1. 配置数据库连接
|
||||
2. 运行数据库脚本
|
||||
3. 配置支付参数
|
||||
4. 启动应用
|
||||
5. 访问订单管理页面
|
||||
|
||||
### 访问地址
|
||||
- 用户订单列表: `/orders`
|
||||
- 订单详情: `/orders/{id}`
|
||||
- 创建订单: `/orders/create`
|
||||
- 管理员管理: `/orders/admin`
|
||||
|
||||
---
|
||||
|
||||
**总结**: 订单管理系统提供了完整的订单处理解决方案，从订单创建到支付完成，从发货管理到订单完成，涵盖了电商订单的全生命周期管理。系统采用现代化的技术栈，提供友好的用户界面，支持多种支付方式，具备完善的权限控制和数据安全保障。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
# 支付接入功能配置说明
|
||||
|
||||
## 功能概述
|
||||
|
||||
本项目已成功集成支付宝和PayPal两种支付方式，提供完整的支付解决方案。
|
||||
|
||||
## 支付方式
|
||||
|
||||
### 1. 支付宝 (Alipay)
|
||||
- **适用场景**: 中国大陆用户
|
||||
- **支持货币**: 人民币 (CNY)
|
||||
- **支付流程**: 网页支付
|
||||
- **回调机制**: 异步通知 + 同步返回
|
||||
|
||||
### 2. PayPal
|
||||
- **适用场景**: 国际用户
|
||||
- **支持货币**: 美元 (USD)、欧元 (EUR) 等
|
||||
- **支付流程**: PayPal账户支付
|
||||
- **回调机制**: Webhook通知 + 同步返回
|
||||
|
||||
## 配置参数
|
||||
|
||||
### 开发环境配置 (application-dev.properties)
|
||||
|
||||
```properties
|
||||
# 支付宝配置 (开发环境)
|
||||
alipay.app-id=your_app_id
|
||||
alipay.private-key=your_private_key
|
||||
alipay.public-key=your_public_key
|
||||
alipay.gateway-url=https://openapi.alipaydev.com/gateway.do
|
||||
alipay.charset=UTF-8
|
||||
alipay.sign-type=RSA2
|
||||
alipay.notify-url=http://localhost:8080/payment/alipay/notify
|
||||
alipay.return-url=http://localhost:8080/payment/alipay/return
|
||||
|
||||
# PayPal配置 (开发环境)
|
||||
paypal.client-id=your_paypal_client_id
|
||||
paypal.client-secret=your_paypal_client_secret
|
||||
paypal.mode=sandbox
|
||||
paypal.return-url=http://localhost:8080/payment/paypal/return
|
||||
paypal.cancel-url=http://localhost:8080/payment/paypal/cancel
|
||||
```
|
||||
|
||||
### 生产环境配置 (application-prod.properties)
|
||||
|
||||
```properties
|
||||
# 支付宝配置 (生产环境)
|
||||
alipay.app-id=${ALIPAY_APP_ID}
|
||||
alipay.private-key=${ALIPAY_PRIVATE_KEY}
|
||||
alipay.public-key=${ALIPAY_PUBLIC_KEY}
|
||||
alipay.gateway-url=https://openapi.alipay.com/gateway.do
|
||||
alipay.charset=UTF-8
|
||||
alipay.sign-type=RSA2
|
||||
alipay.notify-url=${ALIPAY_NOTIFY_URL}
|
||||
alipay.return-url=${ALIPAY_RETURN_URL}
|
||||
|
||||
# PayPal配置 (生产环境)
|
||||
paypal.client-id=${PAYPAL_CLIENT_ID}
|
||||
paypal.client-secret=${PAYPAL_CLIENT_SECRET}
|
||||
paypal.mode=live
|
||||
paypal.return-url=${PAYPAL_RETURN_URL}
|
||||
paypal.cancel-url=${PAYPAL_CANCEL_URL}
|
||||
```
|
||||
|
||||
## 数据库表结构
|
||||
|
||||
### payments 表
|
||||
```sql
|
||||
CREATE TABLE payments (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
order_id VARCHAR(50) NOT NULL UNIQUE,
|
||||
amount DECIMAL(10,2) NOT NULL,
|
||||
currency VARCHAR(3) NOT NULL DEFAULT 'CNY',
|
||||
payment_method VARCHAR(20) NOT NULL,
|
||||
status VARCHAR(20) NOT NULL DEFAULT 'PENDING',
|
||||
description VARCHAR(500),
|
||||
external_transaction_id VARCHAR(100),
|
||||
callback_url VARCHAR(1000),
|
||||
return_url VARCHAR(1000),
|
||||
created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
|
||||
paid_at TIMESTAMP NULL,
|
||||
user_id BIGINT,
|
||||
FOREIGN KEY (user_id) REFERENCES users(id)
|
||||
);
|
||||
```
|
||||
|
||||
## API 端点
|
||||
|
||||
### 支付相关端点
|
||||
- `GET /payment/create` - 显示支付表单
|
||||
- `POST /payment/create` - 创建支付订单
|
||||
- `GET /payment/history` - 支付记录列表
|
||||
- `GET /payment/detail/{id}` - 支付详情
|
||||
|
||||
### 支付宝回调端点
|
||||
- `POST /payment/alipay/notify` - 异步通知
|
||||
- `GET /payment/alipay/return` - 同步返回
|
||||
|
||||
### PayPal回调端点
|
||||
- `GET /payment/paypal/return` - 支付返回
|
||||
- `GET /payment/paypal/cancel` - 支付取消
|
||||
- `POST /payment/paypal/webhook` - Webhook通知
|
||||
|
||||
## 支付状态
|
||||
|
||||
- `PENDING` - 待支付
|
||||
- `PROCESSING` - 处理中
|
||||
- `SUCCESS` - 支付成功
|
||||
- `FAILED` - 支付失败
|
||||
- `CANCELLED` - 已取消
|
||||
- `REFUNDED` - 已退款
|
||||
|
||||
## 使用说明
|
||||
|
||||
### 1. 配置支付参数
|
||||
在 `application-dev.properties` 中配置您的支付参数：
|
||||
- 支付宝：需要申请支付宝开放平台应用
|
||||
- PayPal：需要申请PayPal开发者账户
|
||||
|
||||
### 2. 启动应用
|
||||
```bash
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
### 3. 访问支付功能
|
||||
- 登录后访问 `/payment/create` 创建支付
|
||||
- 访问 `/payment/history` 查看支付记录
|
||||
|
||||
## 安全注意事项
|
||||
|
||||
1. **密钥管理**: 生产环境使用环境变量存储敏感信息
|
||||
2. **签名验证**: 所有回调都进行签名验证
|
||||
3. **HTTPS**: 生产环境必须使用HTTPS
|
||||
4. **权限控制**: 用户只能查看自己的支付记录
|
||||
|
||||
## 测试建议
|
||||
|
||||
1. **支付宝测试**: 使用支付宝沙箱环境进行测试
|
||||
2. **PayPal测试**: 使用PayPal沙箱模式进行测试
|
||||
3. **回调测试**: 使用ngrok等工具测试本地回调
|
||||
|
||||
## 扩展功能
|
||||
|
||||
可以进一步扩展的功能：
|
||||
- 退款功能
|
||||
- 支付统计
|
||||
- 支付报表
|
||||
- 批量支付
|
||||
- 分期付款
|
||||
|
||||
@@ -1,139 +0,0 @@
|
||||
# 支付配置说明
|
||||
|
||||
## 支付宝配置
|
||||
|
||||
### 1. 申请支付宝开放平台应用
|
||||
1. 访问 [支付宝开放平台](https://open.alipay.com/)
|
||||
2. 注册开发者账号
|
||||
3. 创建应用，选择"网页&移动应用"
|
||||
4. 获取应用信息：
|
||||
- APPID
|
||||
- 应用私钥
|
||||
- 支付宝公钥
|
||||
|
||||
### 2. 配置沙箱环境
|
||||
1. 在开放平台控制台启用沙箱环境
|
||||
2. 获取沙箱应用信息
|
||||
3. 下载沙箱版支付宝APP进行测试
|
||||
|
||||
### 3. 更新配置文件
|
||||
在 `application-dev.properties` 中更新以下配置：
|
||||
|
||||
```properties
|
||||
# 支付宝沙箱配置
|
||||
alipay.app-id=你的沙箱APPID
|
||||
alipay.private-key=你的应用私钥
|
||||
alipay.public-key=支付宝公钥
|
||||
alipay.gateway-url=https://openapi.alipaydev.com/gateway.do
|
||||
alipay.notify-url=http://你的域名:8080/api/payments/alipay/notify
|
||||
alipay.return-url=http://你的域名:8080/api/payments/alipay/return
|
||||
```
|
||||
|
||||
## PayPal配置
|
||||
|
||||
### 1. 申请PayPal开发者账号
|
||||
1. 访问 [PayPal开发者中心](https://developer.paypal.com/)
|
||||
2. 注册开发者账号
|
||||
3. 创建应用，选择"Sandbox"环境
|
||||
4. 获取应用信息：
|
||||
- Client ID
|
||||
- Client Secret
|
||||
|
||||
### 2. 更新配置文件
|
||||
在 `application-dev.properties` 中更新以下配置：
|
||||
|
||||
```properties
|
||||
# PayPal沙箱配置
|
||||
paypal.client-id=你的沙箱Client ID
|
||||
paypal.client-secret=你的沙箱Client Secret
|
||||
paypal.mode=sandbox
|
||||
paypal.return-url=http://你的域名:8080/api/payments/paypal/return
|
||||
paypal.cancel-url=http://你的域名:8080/api/payments/paypal/cancel
|
||||
```
|
||||
|
||||
## 生产环境配置
|
||||
|
||||
### 1. 环境变量配置
|
||||
生产环境建议使用环境变量：
|
||||
|
||||
```bash
|
||||
# 支付宝生产环境
|
||||
export ALIPAY_APP_ID=你的生产APPID
|
||||
export ALIPAY_PRIVATE_KEY=你的生产私钥
|
||||
export ALIPAY_PUBLIC_KEY=支付宝生产公钥
|
||||
export ALIPAY_NOTIFY_URL=https://你的域名/api/payments/alipay/notify
|
||||
export ALIPAY_RETURN_URL=https://你的域名/api/payments/alipay/return
|
||||
|
||||
# PayPal生产环境
|
||||
export PAYPAL_CLIENT_ID=你的生产Client ID
|
||||
export PAYPAL_CLIENT_SECRET=你的生产Client Secret
|
||||
export PAYPAL_RETURN_URL=https://你的域名/api/payments/paypal/return
|
||||
export PAYPAL_CANCEL_URL=https://你的域名/api/payments/paypal/cancel
|
||||
```
|
||||
|
||||
### 2. 更新生产环境配置
|
||||
在 `application-prod.properties` 中：
|
||||
|
||||
```properties
|
||||
# 支付宝生产环境
|
||||
alipay.app-id=${ALIPAY_APP_ID}
|
||||
alipay.private-key=${ALIPAY_PRIVATE_KEY}
|
||||
alipay.public-key=${ALIPAY_PUBLIC_KEY}
|
||||
alipay.gateway-url=https://openapi.alipay.com/gateway.do
|
||||
alipay.notify-url=${ALIPAY_NOTIFY_URL}
|
||||
alipay.return-url=${ALIPAY_RETURN_URL}
|
||||
|
||||
# PayPal生产环境
|
||||
paypal.client-id=${PAYPAL_CLIENT_ID}
|
||||
paypal.client-secret=${PAYPAL_CLIENT_SECRET}
|
||||
paypal.mode=live
|
||||
paypal.return-url=${PAYPAL_RETURN_URL}
|
||||
paypal.cancel-url=${PAYPAL_CANCEL_URL}
|
||||
```
|
||||
|
||||
## 测试支付功能
|
||||
|
||||
### 1. 启动应用
|
||||
```bash
|
||||
# 启动后端服务
|
||||
mvn spring-boot:run
|
||||
|
||||
# 启动前端服务
|
||||
cd frontend
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 2. 测试流程
|
||||
1. 访问 http://localhost:3000
|
||||
2. 登录测试账号
|
||||
3. 创建订单
|
||||
4. 选择支付方式
|
||||
5. 完成支付测试
|
||||
|
||||
### 3. 测试账号
|
||||
- **支付宝沙箱**: 使用沙箱版支付宝APP扫码支付
|
||||
- **PayPal沙箱**: 使用沙箱测试账号进行支付
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **HTTPS要求**: 生产环境必须使用HTTPS
|
||||
2. **域名配置**: 确保回调URL使用正确的域名
|
||||
3. **签名验证**: 确保私钥和公钥配置正确
|
||||
4. **日志监控**: 监控支付回调日志
|
||||
5. **异常处理**: 实现完善的异常处理机制
|
||||
|
||||
## 常见问题
|
||||
|
||||
### Q: 支付宝回调失败
|
||||
A: 检查notify-url是否正确，确保服务器可以接收POST请求
|
||||
|
||||
### Q: PayPal支付页面无法打开
|
||||
A: 检查Client ID和Secret是否正确，确保使用沙箱模式
|
||||
|
||||
### Q: 签名验证失败
|
||||
A: 检查私钥格式，确保没有多余的空格和换行符
|
||||
|
||||
### Q: 跨域问题
|
||||
A: 确保CORS配置正确，允许支付平台的域名
|
||||
|
||||
|
||||
@@ -28,3 +28,5 @@ public class PasswordChecker {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,138 +0,0 @@
|
||||
# 腾讯云SES Webhook配置指南
|
||||
|
||||
## 📧 **SES Webhook接口说明**
|
||||
|
||||
系统已创建了完整的SES webhook接口来接收腾讯云SES服务的推送数据。
|
||||
|
||||
### 🔗 **Webhook接口列表**
|
||||
|
||||
| 接口路径 | 功能描述 | 触发时机 |
|
||||
|---------|---------|---------|
|
||||
| `POST /api/email/send-status` | 邮件发送状态回调 | 邮件发送成功/失败时 |
|
||||
| `POST /api/email/delivery-status` | 邮件投递状态回调 | 邮件投递到收件人邮箱时 |
|
||||
| `POST /api/email/bounce` | 邮件退信回调 | 邮件无法投递时 |
|
||||
| `POST /api/email/complaint` | 邮件投诉回调 | 收件人投诉为垃圾邮件时 |
|
||||
| `POST /api/email/open` | 邮件打开事件回调 | 收件人打开邮件时 |
|
||||
| `POST /api/email/click` | 邮件点击事件回调 | 收件人点击邮件链接时 |
|
||||
| `POST /api/email/configuration-set` | 配置集事件回调 | 配置集状态变化时 |
|
||||
|
||||
### 🌐 **ngrok配置示例**
|
||||
|
||||
#### 1. 启动ngrok穿透后端端口8080
|
||||
```bash
|
||||
ngrok http 8080
|
||||
```
|
||||
|
||||
#### 2. 获取ngrok公网地址
|
||||
ngrok会显示类似：
|
||||
```
|
||||
Forwarding https://abc123.ngrok.io -> http://localhost:8080
|
||||
```
|
||||
|
||||
#### 3. 在腾讯云SES控制台配置Webhook
|
||||
- 登录腾讯云SES控制台
|
||||
- 进入"配置集"管理
|
||||
- 添加事件发布目标
|
||||
- 配置webhook URL：
|
||||
```
|
||||
https://abc123.ngrok.io/api/email/send-status
|
||||
https://abc123.ngrok.io/api/email/delivery-status
|
||||
https://abc123.ngrok.io/api/email/bounce
|
||||
https://abc123.ngrok.io/api/email/complaint
|
||||
https://abc123.ngrok.io/api/email/open
|
||||
https://abc123.ngrok.io/api/email/click
|
||||
https://abc123.ngrok.io/api/email/configuration-set
|
||||
```
|
||||
|
||||
### 📊 **接收的数据格式**
|
||||
|
||||
#### 邮件发送状态回调
|
||||
```json
|
||||
{
|
||||
"MessageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"Status": "Send",
|
||||
"Email": "user@example.com",
|
||||
"Timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
#### 邮件退信回调
|
||||
```json
|
||||
{
|
||||
"MessageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"Email": "user@example.com",
|
||||
"BounceType": "Permanent",
|
||||
"BounceSubType": "General",
|
||||
"Timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
#### 邮件投诉回调
|
||||
```json
|
||||
{
|
||||
"MessageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"Email": "user@example.com",
|
||||
"ComplaintType": "abuse",
|
||||
"Timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
### 🔧 **系统处理逻辑**
|
||||
|
||||
#### 发送状态处理
|
||||
- **Send**: 记录发送成功
|
||||
- **Reject**: 记录发送被拒绝
|
||||
- **Bounce**: 记录退信情况
|
||||
|
||||
#### 退信处理
|
||||
- **硬退信**: 考虑从邮件列表移除
|
||||
- **软退信**: 稍后重试发送
|
||||
|
||||
#### 投诉处理
|
||||
- 记录投诉信息
|
||||
- 检查邮件内容合规性
|
||||
- 考虑移除问题邮箱
|
||||
|
||||
### 📝 **日志记录**
|
||||
|
||||
所有webhook事件都会记录到系统日志中，包括：
|
||||
- 事件类型
|
||||
- 邮件地址
|
||||
- 时间戳
|
||||
- 相关参数
|
||||
|
||||
### 🛡️ **安全配置**
|
||||
|
||||
- 所有webhook接口已配置为允许匿名访问
|
||||
- 建议在生产环境中添加签名验证
|
||||
- 可以添加IP白名单限制
|
||||
|
||||
### 🚀 **测试方法**
|
||||
|
||||
#### 1. 使用curl测试
|
||||
```bash
|
||||
curl -X POST https://your-ngrok-url.ngrok.io/api/email/send-status \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"MessageId": "test-123",
|
||||
"Status": "Send",
|
||||
"Email": "test@example.com",
|
||||
"Timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}'
|
||||
```
|
||||
|
||||
#### 2. 查看日志
|
||||
检查应用日志，确认webhook事件被正确处理：
|
||||
```
|
||||
INFO - 收到邮件发送状态回调: {MessageId=test-123, Status=Send, Email=test@example.com}
|
||||
INFO - 邮件发送状态 - MessageId: test-123, Status: Send, Email: test@example.com
|
||||
```
|
||||
|
||||
### 📋 **后续扩展**
|
||||
|
||||
可以根据业务需求扩展webhook处理逻辑：
|
||||
1. 添加数据库存储
|
||||
2. 实现邮件发送统计
|
||||
3. 添加用户行为分析
|
||||
4. 实现自动重试机制
|
||||
5. 添加邮件模板优化建议
|
||||
@@ -1,119 +0,0 @@
|
||||
# 腾讯云邮箱验证码登录配置指南
|
||||
|
||||
## 1. 腾讯云服务开通
|
||||
|
||||
### 1.1 开通邮件推送服务（SES）
|
||||
1. 登录腾讯云控制台
|
||||
2. 进入"邮件推送"服务
|
||||
3. 开通邮件推送服务
|
||||
4. 配置发件人邮箱
|
||||
5. 申请邮件模板
|
||||
|
||||
### 1.2 获取API密钥
|
||||
1. 进入"访问管理" -> "API密钥管理"
|
||||
2. 创建密钥，获取SecretId和SecretKey
|
||||
|
||||
## 2. 配置参数
|
||||
|
||||
### 2.1 修改配置文件
|
||||
编辑 `src/main/resources/application-tencent.properties`：
|
||||
|
||||
```properties
|
||||
# 腾讯云配置
|
||||
tencent.cloud.secret-id=你的SecretId
|
||||
tencent.cloud.secret-key=你的SecretKey
|
||||
|
||||
# 邮件推送服务配置
|
||||
tencent.cloud.ses.region=ap-beijing
|
||||
tencent.cloud.ses.from-email=你的发件人邮箱
|
||||
tencent.cloud.ses.from-name=你的应用名称
|
||||
tencent.cloud.ses.template-id=你的邮件模板ID
|
||||
```
|
||||
|
||||
### 2.2 邮件模板示例
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>验证码</title>
|
||||
</head>
|
||||
<body>
|
||||
<h2>验证码</h2>
|
||||
<p>您的验证码是：<strong>{{code}}</strong></p>
|
||||
<p>请在5分钟内输入，如非本人操作，请忽略此邮件。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## 3. Redis配置
|
||||
|
||||
### 3.1 安装Redis
|
||||
- Windows: 下载Redis for Windows
|
||||
- Linux: `sudo apt-get install redis-server`
|
||||
- macOS: `brew install redis`
|
||||
|
||||
### 3.2 启动Redis
|
||||
```bash
|
||||
redis-server
|
||||
```
|
||||
|
||||
### 3.3 配置Redis连接
|
||||
修改 `application-tencent.properties` 中的Redis配置：
|
||||
```properties
|
||||
spring.data.redis.host=localhost
|
||||
spring.data.redis.port=6379
|
||||
spring.data.redis.password=
|
||||
spring.data.redis.database=0
|
||||
```
|
||||
|
||||
## 4. 测试验证码功能
|
||||
|
||||
### 4.1 发送邮件验证码
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/api/verification/email/send \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com"}'
|
||||
```
|
||||
|
||||
### 4.2 验证码登录
|
||||
```bash
|
||||
# 邮箱验证码登录
|
||||
curl -X POST http://localhost:8080/api/auth/login/email \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "test@example.com", "code": "123456"}'
|
||||
```
|
||||
|
||||
## 5. 安全注意事项
|
||||
|
||||
1. **API密钥安全**：不要将SecretId和SecretKey提交到代码仓库
|
||||
2. **验证码有效期**：验证码5分钟过期
|
||||
3. **发送频率限制**：同一邮箱60秒内只能发送一次
|
||||
4. **验证码长度**：6位数字验证码
|
||||
5. **Redis安全**：生产环境建议设置Redis密码
|
||||
|
||||
## 6. 故障排除
|
||||
|
||||
### 6.1 常见错误
|
||||
- `TencentCloudSDKException`: 检查API密钥和配置
|
||||
- `Redis连接失败`: 检查Redis服务是否启动
|
||||
- `验证码发送失败`: 检查腾讯云服务配置
|
||||
|
||||
### 6.2 日志查看
|
||||
查看应用日志中的验证码相关日志：
|
||||
```bash
|
||||
tail -f logs/application.log | grep "验证码"
|
||||
```
|
||||
|
||||
## 7. 生产环境部署
|
||||
|
||||
### 7.1 环境变量配置
|
||||
```bash
|
||||
export TENCENT_SECRET_ID=你的SecretId
|
||||
export TENCENT_SECRET_KEY=你的SecretKey
|
||||
export REDIS_HOST=你的Redis主机
|
||||
export REDIS_PORT=你的Redis端口
|
||||
```
|
||||
|
||||
### 7.2 配置文件
|
||||
使用环境变量覆盖配置文件中的敏感信息。
|
||||
@@ -1,191 +0,0 @@
|
||||
# 腾讯云邮件推送服务（SES）配置指南
|
||||
|
||||
## 🎯 配置目标
|
||||
|
||||
配置腾讯云SES服务，实现真实的邮件验证码发送功能。
|
||||
|
||||
## 📋 详细配置步骤
|
||||
|
||||
### 1. 开通腾讯云SES服务
|
||||
|
||||
#### 1.1 登录腾讯云控制台
|
||||
- 访问：https://console.cloud.tencent.com/
|
||||
- 使用您的腾讯云账号登录
|
||||
|
||||
#### 1.2 开通邮件推送服务
|
||||
1. 在控制台搜索"邮件推送"或"SES"
|
||||
2. 进入邮件推送控制台
|
||||
3. 点击"立即开通"
|
||||
4. 完成实名认证（如需要）
|
||||
|
||||
### 2. 获取API密钥
|
||||
|
||||
#### 2.1 创建API密钥
|
||||
1. 控制台 → 访问管理 → API密钥管理
|
||||
2. 点击"新建密钥"
|
||||
3. 记录以下信息：
|
||||
- **SecretId**：如 `AKIDxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`
|
||||
- **SecretKey**：如 `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`
|
||||
|
||||
### 3. 配置发件人邮箱
|
||||
|
||||
#### 3.1 添加发件人
|
||||
1. 邮件推送控制台 → 发件人管理
|
||||
2. 点击"添加发件人"
|
||||
3. 填写信息：
|
||||
- **发件人邮箱**：如 `noreply@yourdomain.com`
|
||||
- **发件人名称**：如 `AIGC Demo`
|
||||
4. 点击"确定"
|
||||
|
||||
#### 3.2 验证发件人
|
||||
1. 系统会向您的邮箱发送验证邮件
|
||||
2. 点击邮件中的验证链接
|
||||
3. 验证成功后，发件人状态变为"已验证"
|
||||
|
||||
### 4. 修改配置文件
|
||||
|
||||
编辑 `src/main/resources/application-tencent.properties`：
|
||||
|
||||
```properties
|
||||
# 腾讯云配置
|
||||
tencent.cloud.secret-id=AKIDxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
tencent.cloud.secret-key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
|
||||
|
||||
# 邮件推送服务配置
|
||||
tencent.cloud.ses.region=ap-beijing
|
||||
tencent.cloud.ses.from-email=noreply@yourdomain.com
|
||||
tencent.cloud.ses.from-name=AIGC Demo
|
||||
tencent.cloud.ses.template-id=your-email-template-id
|
||||
```
|
||||
|
||||
### 5. 配置邮件模板（可选）
|
||||
|
||||
#### 5.1 创建邮件模板
|
||||
1. 邮件推送控制台 → 邮件模板
|
||||
2. 点击"创建模板"
|
||||
3. 选择"验证码模板"
|
||||
4. 填写模板内容：
|
||||
|
||||
**模板名称**：验证码邮件
|
||||
**模板内容**：
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>验证码</title>
|
||||
</head>
|
||||
<body style="font-family: Arial, sans-serif; line-height: 1.6; color: #333;">
|
||||
<div style="max-width: 600px; margin: 0 auto; padding: 20px;">
|
||||
<h2 style="color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px;">
|
||||
验证码
|
||||
</h2>
|
||||
<p>您好！</p>
|
||||
<p>您的验证码是：<strong style="color: #e74c3c; font-size: 24px;">{{code}}</strong></p>
|
||||
<p>请在5分钟内输入，如非本人操作，请忽略此邮件。</p>
|
||||
<hr style="border: none; border-top: 1px solid #eee; margin: 20px 0;">
|
||||
<p style="color: #7f8c8d; font-size: 12px;">
|
||||
此邮件由系统自动发送，请勿回复。
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
#### 5.2 获取模板ID
|
||||
- 模板创建成功后，记录模板ID
|
||||
- 更新配置文件中的 `tencent.cloud.ses.template-id`
|
||||
|
||||
### 6. 启用腾讯云配置
|
||||
|
||||
#### 6.1 修改主配置文件
|
||||
编辑 `src/main/resources/application.properties`：
|
||||
|
||||
```properties
|
||||
# 启用腾讯云配置
|
||||
spring.profiles.active=tencent
|
||||
```
|
||||
|
||||
#### 6.2 修改验证码服务
|
||||
取消注释 `VerificationCodeService.java` 中的腾讯云相关代码：
|
||||
|
||||
```java
|
||||
@Autowired
|
||||
private TencentCloudConfig tencentCloudConfig;
|
||||
```
|
||||
|
||||
### 7. 测试配置
|
||||
|
||||
#### 7.1 启动应用
|
||||
```bash
|
||||
mvn spring-boot:run
|
||||
```
|
||||
|
||||
#### 7.2 测试发送验证码
|
||||
```bash
|
||||
curl -X POST http://api.yourdomain.com:8080/api/verification/email/send \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"email": "your-test-email@example.com"}'
|
||||
```
|
||||
|
||||
#### 7.3 检查邮件
|
||||
- 查看您的邮箱是否收到验证码邮件
|
||||
- 检查应用日志中的发送状态
|
||||
|
||||
## 🔧 配置参数说明
|
||||
|
||||
| 参数 | 说明 | 示例值 |
|
||||
|------|------|--------|
|
||||
| `secret-id` | 腾讯云API密钥ID | `AKIDxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` |
|
||||
| `secret-key` | 腾讯云API密钥 | `xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx` |
|
||||
| `ses.region` | 服务地域 | `ap-beijing` |
|
||||
| `ses.from-email` | 发件人邮箱 | `noreply@yourdomain.com` |
|
||||
| `ses.from-name` | 发件人名称 | `AIGC Demo` |
|
||||
| `ses.template-id` | 邮件模板ID | `123456` |
|
||||
|
||||
## 🚨 注意事项
|
||||
|
||||
### 安全提醒
|
||||
1. **保护API密钥**：不要将SecretId和SecretKey提交到代码仓库
|
||||
2. **使用环境变量**：生产环境建议使用环境变量存储敏感信息
|
||||
3. **限制权限**：为API密钥设置最小权限
|
||||
|
||||
### 费用说明
|
||||
1. **免费额度**：腾讯云SES通常有免费额度
|
||||
2. **计费方式**：按发送量计费
|
||||
3. **成本控制**：设置发送频率限制
|
||||
|
||||
### 限制说明
|
||||
1. **发送频率**：同一邮箱60秒内只能发送一次
|
||||
2. **验证码有效期**：5分钟
|
||||
3. **每日限额**：根据您的套餐设置
|
||||
|
||||
## 🔍 故障排除
|
||||
|
||||
### 常见问题
|
||||
|
||||
#### 1. 邮件发送失败
|
||||
- 检查API密钥是否正确
|
||||
- 检查发件人是否已验证
|
||||
- 检查网络连接
|
||||
|
||||
#### 2. 验证码收不到
|
||||
- 检查垃圾邮件文件夹
|
||||
- 检查邮箱地址是否正确
|
||||
- 检查发送频率限制
|
||||
|
||||
#### 3. 配置不生效
|
||||
- 检查配置文件路径
|
||||
- 检查profile配置
|
||||
- 重启应用
|
||||
|
||||
### 日志查看
|
||||
```bash
|
||||
# 查看应用日志
|
||||
tail -f logs/application.log | grep "验证码"
|
||||
```
|
||||
|
||||
## 📞 技术支持
|
||||
|
||||
- 腾讯云SES文档：https://cloud.tencent.com/document/product/1288
|
||||
- 腾讯云技术支持：https://cloud.tencent.com/about/connect
|
||||
@@ -1,247 +0,0 @@
|
||||
# 腾讯云SES邮件验证回调路径设计
|
||||
|
||||
## 📧 **回调接口设计**
|
||||
|
||||
### 🔗 **回调地址**
|
||||
```
|
||||
POST /api/tencent/ses/webhook
|
||||
```
|
||||
|
||||
### 🌐 **完整URL示例**
|
||||
```
|
||||
https://your-domain.com/api/tencent/ses/webhook
|
||||
```
|
||||
|
||||
## 🔧 **腾讯云控制台配置**
|
||||
|
||||
### 1️⃣ **配置步骤**
|
||||
1. 登录腾讯云邮件推送控制台
|
||||
2. 导航至"邮件配置" > "回调配置" > "回调地址配置"
|
||||
3. 选择回调级别：
|
||||
- **账户级回调**：对该账户下所有发信地址生效
|
||||
- **发信地址级回调**：仅对指定发信地址生效（优先级更高）
|
||||
4. 输入回调地址：`https://your-domain.com/api/tencent/ses/webhook`
|
||||
5. 保存配置
|
||||
|
||||
### 2️⃣ **端口要求**
|
||||
- 仅支持端口：**8080**, **8081**, **8082**
|
||||
- 必须使用HTTPS协议
|
||||
- 确保回调地址可公网访问
|
||||
|
||||
## 📊 **支持的事件类型**
|
||||
|
||||
| 事件类型 | 描述 | 触发时机 |
|
||||
|---------|------|---------|
|
||||
| `delivery` | 递送成功 | 邮件成功送达收件人邮箱 |
|
||||
| `reject` | 腾讯云拒信 | 由于腾讯云策略原因被拒绝发送 |
|
||||
| `bounce` | ESP退信 | 邮件被收件人邮箱服务提供商退回 |
|
||||
| `open` | 用户打开邮件 | 收件人打开了邮件 |
|
||||
| `click` | 点击链接 | 收件人点击了邮件中的链接 |
|
||||
| `unsubscribe` | 退订 | 收件人选择退订邮件 |
|
||||
|
||||
## 📝 **回调数据格式**
|
||||
|
||||
### 基础数据结构
|
||||
```json
|
||||
{
|
||||
"eventType": "delivery",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
### 递送成功事件
|
||||
```json
|
||||
{
|
||||
"eventType": "delivery",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
### 拒信事件
|
||||
```json
|
||||
{
|
||||
"eventType": "reject",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"reason": "Content policy violation",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
### 退信事件
|
||||
```json
|
||||
{
|
||||
"eventType": "bounce",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"bounceType": "Permanent",
|
||||
"bounceSubType": "General",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}
|
||||
```
|
||||
|
||||
### 打开事件
|
||||
```json
|
||||
{
|
||||
"eventType": "open",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z",
|
||||
"userAgent": "Mozilla/5.0...",
|
||||
"ipAddress": "192.168.1.1"
|
||||
}
|
||||
```
|
||||
|
||||
### 点击事件
|
||||
```json
|
||||
{
|
||||
"eventType": "click",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z",
|
||||
"link": "https://example.com/click",
|
||||
"userAgent": "Mozilla/5.0...",
|
||||
"ipAddress": "192.168.1.1"
|
||||
}
|
||||
```
|
||||
|
||||
### 退订事件
|
||||
```json
|
||||
{
|
||||
"eventType": "unsubscribe",
|
||||
"messageId": "0000014a-f4d4-4f4f-8f4f-4f4f4f4f4f4f-000000",
|
||||
"email": "user@example.com",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z",
|
||||
"unsubscribeType": "one-click"
|
||||
}
|
||||
```
|
||||
|
||||
## 🔒 **安全验证**
|
||||
|
||||
### 请求头验证
|
||||
```http
|
||||
X-Tencent-Token: your-token
|
||||
X-Tencent-Timestamp: 1640995200
|
||||
X-Tencent-Signature: calculated-signature
|
||||
```
|
||||
|
||||
### 签名验证流程
|
||||
1. 获取请求头中的Token、时间戳、签名
|
||||
2. 验证时间戳（防止重放攻击）
|
||||
3. 使用预共享密钥计算签名
|
||||
4. 对比签名是否一致
|
||||
|
||||
## 🚀 **ngrok测试配置**
|
||||
|
||||
### 1️⃣ **启动ngrok**
|
||||
```bash
|
||||
# 穿透后端端口8080
|
||||
ngrok http 8080
|
||||
```
|
||||
|
||||
### 2️⃣ **获取公网地址**
|
||||
```
|
||||
Forwarding https://abc123.ngrok.io -> http://localhost:8080
|
||||
```
|
||||
|
||||
### 3️⃣ **配置回调地址**
|
||||
```
|
||||
https://abc123.ngrok.io/api/tencent/ses/webhook
|
||||
```
|
||||
|
||||
### 4️⃣ **测试回调**
|
||||
```bash
|
||||
curl -X POST https://abc123.ngrok.io/api/tencent/ses/webhook \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "X-Tencent-Token: test-token" \
|
||||
-H "X-Tencent-Timestamp: 1640995200" \
|
||||
-H "X-Tencent-Signature: test-signature" \
|
||||
-d '{
|
||||
"eventType": "delivery",
|
||||
"messageId": "test-123",
|
||||
"email": "test@example.com",
|
||||
"timestamp": "2024-01-01T12:00:00.000Z"
|
||||
}'
|
||||
```
|
||||
|
||||
## 📋 **业务处理逻辑**
|
||||
|
||||
### 递送成功处理
|
||||
- 更新邮件状态为"已送达"
|
||||
- 记录递送统计
|
||||
- 更新用户活跃度
|
||||
- 触发后续营销流程
|
||||
|
||||
### 拒信处理
|
||||
- 记录拒信原因
|
||||
- 检查邮件内容合规性
|
||||
- 更新发送策略
|
||||
- 通知管理员
|
||||
|
||||
### 退信处理
|
||||
- 区分硬退信和软退信
|
||||
- 硬退信：从邮件列表移除
|
||||
- 软退信：标记重试
|
||||
- 更新邮箱有效性状态
|
||||
|
||||
### 打开/点击处理
|
||||
- 记录用户行为统计
|
||||
- 分析用户兴趣
|
||||
- 更新用户画像
|
||||
- 触发个性化推荐
|
||||
|
||||
### 退订处理
|
||||
- 立即停止发送邮件
|
||||
- 更新用户订阅状态
|
||||
- 记录退订原因
|
||||
- 发送退订确认
|
||||
|
||||
## ⚠️ **注意事项**
|
||||
|
||||
1. **重试机制**：腾讯云SES会重试失败的回调，最多3次
|
||||
2. **响应要求**：必须返回HTTP 200状态码
|
||||
3. **处理时间**：建议在5秒内完成处理
|
||||
4. **幂等性**：确保重复回调不会产生副作用
|
||||
5. **日志记录**：详细记录所有回调事件
|
||||
6. **监控告警**：设置回调失败告警机制
|
||||
|
||||
## 🔧 **扩展功能**
|
||||
|
||||
### 数据库设计
|
||||
```sql
|
||||
-- 邮件事件表
|
||||
CREATE TABLE email_events (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
message_id VARCHAR(255) NOT NULL,
|
||||
email VARCHAR(255) NOT NULL,
|
||||
event_type VARCHAR(50) NOT NULL,
|
||||
event_data JSON,
|
||||
timestamp DATETIME NOT NULL,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP
|
||||
);
|
||||
|
||||
-- 邮件统计表
|
||||
CREATE TABLE email_statistics (
|
||||
id BIGINT PRIMARY KEY AUTO_INCREMENT,
|
||||
email VARCHAR(255) NOT NULL,
|
||||
total_sent INT DEFAULT 0,
|
||||
total_delivered INT DEFAULT 0,
|
||||
total_opened INT DEFAULT 0,
|
||||
total_clicked INT DEFAULT 0,
|
||||
total_bounced INT DEFAULT 0,
|
||||
last_activity DATETIME,
|
||||
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
|
||||
);
|
||||
```
|
||||
|
||||
### 监控指标
|
||||
- 回调成功率
|
||||
- 事件处理延迟
|
||||
- 各事件类型分布
|
||||
- 错误率统计
|
||||
|
||||
现在您有了一个完整的腾讯云SES邮件验证回调路径设计！
|
||||
@@ -1,83 +0,0 @@
|
||||
# 测试账号说明
|
||||
|
||||
## 可用的测试账号
|
||||
|
||||
### 1. 普通用户账号
|
||||
- **用户名**: `demo`
|
||||
- **密码**: `demo`
|
||||
- **角色**: 普通用户 (ROLE_USER)
|
||||
- **积分**: 100
|
||||
- **邮箱**: demo@example.com
|
||||
|
||||
### 2. 管理员账号
|
||||
- **用户名**: `admin`
|
||||
- **密码**: `admin123`
|
||||
- **角色**: 管理员 (ROLE_ADMIN)
|
||||
- **积分**: 200
|
||||
- **邮箱**: admin@example.com
|
||||
|
||||
### 3. 测试用户1
|
||||
- **用户名**: `testuser`
|
||||
- **密码**: `test123`
|
||||
- **角色**: 普通用户 (ROLE_USER)
|
||||
- **积分**: 75
|
||||
- **邮箱**: testuser@example.com
|
||||
|
||||
### 4. 个人主页测试用户
|
||||
- **用户名**: `mingzi_FBx7foZYDS7inLQb`
|
||||
- **密码**: `123456`
|
||||
- **角色**: 普通用户 (ROLE_USER)
|
||||
- **积分**: 25
|
||||
- **邮箱**: mingzi@example.com
|
||||
|
||||
### 5. 手机号测试用户
|
||||
- **用户名**: `15538239326`
|
||||
- **密码**: `0627`
|
||||
- **角色**: 普通用户 (ROLE_USER)
|
||||
- **积分**: 50
|
||||
- **邮箱**: 15538239326@example.com
|
||||
|
||||
## 登录方式
|
||||
|
||||
### 方式1: 传统用户名密码登录
|
||||
1. 访问 `/login` 页面
|
||||
2. 输入用户名和密码
|
||||
3. 点击"登录"按钮
|
||||
|
||||
### 方式2: 手机号验证码登录（模拟）
|
||||
1. 访问 `/login` 页面
|
||||
2. 输入手机号（任意11位数字）
|
||||
3. 点击"获取验证码"
|
||||
4. 输入验证码（任意6位数字）
|
||||
5. 点击"登陆/注册"
|
||||
|
||||
## 功能测试
|
||||
|
||||
### 普通用户功能
|
||||
- ✅ 登录/登出
|
||||
- ✅ 查看个人主页
|
||||
- ✅ 查看订单管理
|
||||
- ✅ 查看支付记录
|
||||
- ✅ 访问欢迎页面
|
||||
|
||||
### 管理员功能
|
||||
- ✅ 所有普通用户功能
|
||||
- ✅ 后台管理
|
||||
- ✅ 用户管理
|
||||
- ✅ 数据仪表盘
|
||||
|
||||
## 数据库重置
|
||||
|
||||
如果需要重置数据库和测试数据：
|
||||
|
||||
1. 停止应用
|
||||
2. 删除 `demo/data/demo.mv.db` 文件
|
||||
3. 重新启动应用
|
||||
4. 数据库会自动重新创建并插入测试数据
|
||||
|
||||
## 注意事项
|
||||
|
||||
- 所有密码都是明文存储（仅用于测试）
|
||||
- 积分会在每次登录时显示
|
||||
- JWT Token 会在浏览器关闭时自动清除
|
||||
- 支持跨域请求，前端和后端可以分离部署
|
||||
@@ -1,287 +0,0 @@
|
||||
# Vue.js 前端项目迁移完成总结
|
||||
|
||||
## 🎯 项目概述
|
||||
|
||||
成功将原有的 Thymeleaf 模板前端迁移到现代化的 Vue.js 3 框架，实现了前后端分离架构，提供了更好的开发体验和用户体验。
|
||||
|
||||
## ✅ 完成的工作
|
||||
|
||||
### 1. **项目结构搭建**
|
||||
- ✅ 创建了完整的 Vue.js 3 项目结构
|
||||
- ✅ 配置了 Vite 构建工具
|
||||
- ✅ 集成了 Element Plus UI 组件库
|
||||
- ✅ 设置了开发环境和代理配置
|
||||
|
||||
### 2. **核心框架集成**
|
||||
- ✅ **Vue.js 3** - 使用 Composition API 和 `<script setup>` 语法
|
||||
- ✅ **Element Plus** - 现代化 UI 组件库
|
||||
- ✅ **Vue Router** - 单页面应用路由管理
|
||||
- ✅ **Pinia** - 轻量级状态管理
|
||||
- ✅ **Axios** - HTTP 客户端和 API 封装
|
||||
|
||||
### 3. **组件和页面开发**
|
||||
- ✅ **导航组件** (`NavBar.vue`) - 响应式导航栏，支持用户菜单
|
||||
- ✅ **页脚组件** (`Footer.vue`) - 统一的页脚设计
|
||||
- ✅ **首页** (`Home.vue`) - 欢迎页面，功能展示，统计数据
|
||||
- ✅ **登录页** (`Login.vue`) - 现代化登录界面，演示账号
|
||||
- ✅ **注册页** (`Register.vue`) - 实时验证，密码强度检测
|
||||
- ✅ **订单列表** (`Orders.vue`) - 完整的订单管理界面
|
||||
|
||||
### 4. **状态管理**
|
||||
- ✅ **用户状态** (`stores/user.js`) - 登录、注册、权限管理
|
||||
- ✅ **订单状态** (`stores/orders.js`) - 订单数据管理和操作
|
||||
- ✅ **响应式数据** - 使用 Vue 3 的响应式系统
|
||||
- ✅ **持久化存储** - Token 和用户信息本地存储
|
||||
|
||||
### 5. **API 接口封装**
|
||||
- ✅ **请求拦截器** - 自动添加认证头，统一错误处理
|
||||
- ✅ **响应拦截器** - 统一响应格式，错误提示
|
||||
- ✅ **认证接口** (`api/auth.js`) - 登录、注册、用户信息
|
||||
- ✅ **订单接口** (`api/orders.js`) - 订单 CRUD 操作
|
||||
- ✅ **支付接口** (`api/payments.js`) - 支付相关功能
|
||||
|
||||
### 6. **路由和权限控制**
|
||||
- ✅ **路由配置** - 完整的页面路由定义
|
||||
- ✅ **路由守卫** - 认证检查和权限控制
|
||||
- ✅ **动态标题** - 页面标题自动设置
|
||||
- ✅ **权限控制** - 基于角色的访问控制
|
||||
|
||||
### 7. **后端 API 适配**
|
||||
- ✅ **RESTful API** - 创建了标准的 REST API 接口
|
||||
- ✅ **认证控制器** (`AuthApiController.java`) - 登录、注册、用户验证
|
||||
- ✅ **订单控制器** (`OrderApiController.java`) - 订单管理 API
|
||||
- ✅ **统一响应格式** - 标准化的 API 响应结构
|
||||
|
||||
## 🎨 界面特色
|
||||
|
||||
### 现代化设计
|
||||
- **Element Plus** 组件库，提供丰富的 UI 组件
|
||||
- **响应式布局**，支持桌面、平板、手机
|
||||
- **统一的设计语言**，保持视觉一致性
|
||||
- **图标支持**，Element Plus Icons 图标库
|
||||
|
||||
### 用户体验优化
|
||||
- **实时表单验证**，即时反馈用户输入
|
||||
- **密码强度检测**，提升安全性
|
||||
- **用户名/邮箱唯一性检查**，避免重复注册
|
||||
- **加载状态**，提升用户等待体验
|
||||
- **错误提示**，友好的错误信息展示
|
||||
|
||||
### 交互功能
|
||||
- **动态表单**，可添加/删除订单项
|
||||
- **实时搜索**，订单号搜索功能
|
||||
- **状态筛选**，按订单状态筛选
|
||||
- **分页导航**，大数据量分页显示
|
||||
- **模态框操作**，确认对话框
|
||||
|
||||
## 🔧 技术特性
|
||||
|
||||
### 前端技术栈
|
||||
- **Vue.js 3.3.4** - 最新版本的 Vue 框架
|
||||
- **Element Plus 2.3.8** - 企业级 UI 组件库
|
||||
- **Vue Router 4.2.4** - 官方路由管理器
|
||||
- **Pinia 2.1.6** - 现代状态管理库
|
||||
- **Axios 1.5.0** - Promise 基础的 HTTP 库
|
||||
- **Vite 4.4.9** - 快速的构建工具
|
||||
|
||||
### 开发工具
|
||||
- **Vite** - 快速的开发服务器和构建工具
|
||||
- **ESLint** - 代码质量检查
|
||||
- **Prettier** - 代码格式化
|
||||
- **Sass** - CSS 预处理器
|
||||
|
||||
### 架构设计
|
||||
- **组件化开发** - 可复用的 Vue 组件
|
||||
- **模块化设计** - 清晰的文件组织结构
|
||||
- **状态管理** - 集中式的状态管理
|
||||
- **API 封装** - 统一的接口调用方式
|
||||
|
||||
## 📱 功能模块
|
||||
|
||||
### 1. 用户认证模块
|
||||
- **登录功能** - 用户名/密码登录
|
||||
- **注册功能** - 新用户注册
|
||||
- **权限控制** - 基于角色的访问控制
|
||||
- **状态管理** - 用户登录状态管理
|
||||
|
||||
### 2. 订单管理模块
|
||||
- **订单列表** - 分页、筛选、搜索
|
||||
- **订单详情** - 完整信息展示
|
||||
- **订单创建** - 动态表单创建
|
||||
- **状态管理** - 订单状态流转
|
||||
|
||||
### 3. 支付集成模块
|
||||
- **支付方式** - 支付宝、PayPal
|
||||
- **支付状态** - 实时状态跟踪
|
||||
- **支付记录** - 支付历史查询
|
||||
|
||||
### 4. 管理功能模块
|
||||
- **用户管理** - 用户列表和操作
|
||||
- **订单管理** - 管理员订单管理
|
||||
- **权限管理** - 角色权限控制
|
||||
|
||||
## 🔄 数据流
|
||||
|
||||
### 状态管理流程
|
||||
```
|
||||
用户操作 → Vue组件 → Pinia Store → API调用 → 后端服务 → 数据库
|
||||
↓
|
||||
状态更新 → 组件重新渲染 → 界面更新
|
||||
```
|
||||
|
||||
### API 调用流程
|
||||
```
|
||||
组件 → API方法 → Axios请求 → 请求拦截器 → 后端API → 响应拦截器 → 组件
|
||||
```
|
||||
|
||||
## 🚀 部署配置
|
||||
|
||||
### 开发环境
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
# 访问 http://localhost:3000
|
||||
```
|
||||
|
||||
### 生产环境
|
||||
```bash
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
|
||||
# 预览构建结果
|
||||
npm run preview
|
||||
```
|
||||
|
||||
### 代理配置
|
||||
```javascript
|
||||
// vite.config.js
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8080', // 后端服务
|
||||
changeOrigin: true
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 📊 项目统计
|
||||
|
||||
### 文件结构
|
||||
- **组件文件**: 6个 Vue 组件
|
||||
- **页面文件**: 5个页面组件
|
||||
- **API 文件**: 4个 API 模块
|
||||
- **状态管理**: 2个 Store 模块
|
||||
- **配置文件**: 3个配置文件
|
||||
|
||||
### 代码量统计
|
||||
- **Vue 组件**: ~2000 行代码
|
||||
- **JavaScript**: ~1500 行代码
|
||||
- **CSS 样式**: ~800 行代码
|
||||
- **配置文件**: ~200 行代码
|
||||
|
||||
## 🔒 安全特性
|
||||
|
||||
### 前端安全
|
||||
- **XSS 防护** - Element Plus 组件自动转义
|
||||
- **CSRF 防护** - Axios 请求头配置
|
||||
- **路由守卫** - 页面访问权限控制
|
||||
- **输入验证** - 前端表单验证
|
||||
|
||||
### 认证安全
|
||||
- **Token 管理** - 安全的 Token 存储
|
||||
- **权限控制** - 基于角色的访问控制
|
||||
- **会话管理** - 自动登出机制
|
||||
|
||||
## 🎯 优势对比
|
||||
|
||||
### 相比 Thymeleaf 的优势
|
||||
|
||||
| 特性 | Thymeleaf | Vue.js |
|
||||
|------|-----------|--------|
|
||||
| **开发体验** | 服务端渲染 | 现代化前端开发 |
|
||||
| **用户体验** | 页面刷新 | 单页面应用 |
|
||||
| **组件复用** | 模板片段 | 完整组件系统 |
|
||||
| **状态管理** | 服务端状态 | 客户端状态管理 |
|
||||
| **开发工具** | 有限 | 丰富的开发工具 |
|
||||
| **性能** | 服务端渲染 | 客户端渲染优化 |
|
||||
|
||||
### 技术优势
|
||||
- **现代化框架** - Vue.js 3 最新特性
|
||||
- **组件化开发** - 高度可复用的组件
|
||||
- **响应式设计** - 移动端友好
|
||||
- **开发效率** - 热重载，快速开发
|
||||
- **维护性** - 清晰的代码结构
|
||||
|
||||
## 🔮 未来扩展
|
||||
|
||||
### 可扩展功能
|
||||
- [ ] **TypeScript 支持** - 类型安全
|
||||
- [ ] **单元测试** - Jest + Vue Test Utils
|
||||
- [ ] **E2E 测试** - Cypress 或 Playwright
|
||||
- [ ] **PWA 支持** - 渐进式 Web 应用
|
||||
- [ ] **国际化** - Vue I18n 多语言支持
|
||||
- [ ] **主题定制** - 动态主题切换
|
||||
- [ ] **图表组件** - ECharts 数据可视化
|
||||
- [ ] **富文本编辑** - 编辑器组件
|
||||
|
||||
### 性能优化
|
||||
- [ ] **代码分割** - 路由级别的代码分割
|
||||
- [ ] **懒加载** - 组件和图片懒加载
|
||||
- [ ] **缓存策略** - HTTP 缓存和本地缓存
|
||||
- [ ] **CDN 部署** - 静态资源 CDN 加速
|
||||
|
||||
## 📝 使用说明
|
||||
|
||||
### 快速开始
|
||||
1. **安装 Node.js** (版本 16+)
|
||||
2. **进入前端目录**: `cd frontend`
|
||||
3. **安装依赖**: `npm install`
|
||||
4. **启动开发服务器**: `npm run dev`
|
||||
5. **访问应用**: http://localhost:3000
|
||||
|
||||
### 开发指南
|
||||
1. **组件开发** - 使用 Composition API
|
||||
2. **状态管理** - 使用 Pinia Store
|
||||
3. **API 调用** - 使用封装的 API 方法
|
||||
4. **样式编写** - 使用 Scoped CSS
|
||||
5. **路由配置** - 在 router/index.js 中添加路由
|
||||
|
||||
### 部署指南
|
||||
1. **构建项目**: `npm run build`
|
||||
2. **部署静态文件** - 将 dist 目录部署到 Web 服务器
|
||||
3. **配置代理** - 将 /api 请求代理到后端服务
|
||||
4. **HTTPS 配置** - 生产环境使用 HTTPS
|
||||
|
||||
---
|
||||
|
||||
## 🎉 总结
|
||||
|
||||
Vue.js 前端项目迁移已经完成，实现了：
|
||||
|
||||
✅ **现代化前端架构** - Vue.js 3 + Element Plus
|
||||
✅ **完整的用户界面** - 登录、注册、订单管理
|
||||
✅ **响应式设计** - 支持多设备访问
|
||||
✅ **状态管理** - Pinia 集中式状态管理
|
||||
✅ **API 集成** - 完整的后端 API 对接
|
||||
✅ **权限控制** - 基于角色的访问控制
|
||||
✅ **开发工具** - Vite 快速开发和构建
|
||||
|
||||
现在您拥有了一个现代化的前后端分离应用，具备良好的开发体验和用户体验！
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -428,3 +428,5 @@ MIT License
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -24,3 +24,5 @@ console.log('App.vue 加载成功')
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -87,3 +87,5 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -784,3 +784,5 @@ const startGenerate = () => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -735,3 +735,5 @@ const startGenerate = () => {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -30,3 +30,5 @@ public class PlainTextPasswordEncoder implements PasswordEncoder {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -566,3 +566,5 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -482,3 +482,5 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -521,3 +521,5 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,35 +0,0 @@
|
||||
# 测试个人主页路由
|
||||
|
||||
echo "=== 个人主页路由测试 ==="
|
||||
echo ""
|
||||
|
||||
echo "1. 检查路由配置..."
|
||||
echo " - /profile 路由已配置"
|
||||
echo " - 需要认证: requiresAuth: true"
|
||||
echo " - 组件: Profile.vue"
|
||||
echo ""
|
||||
|
||||
echo "2. 检查App.vue布局..."
|
||||
echo " - 个人主页使用特殊布局: profile-layout"
|
||||
echo " - 不显示全局导航栏和底部"
|
||||
echo ""
|
||||
|
||||
echo "3. 检查登录重定向..."
|
||||
echo " - 登录成功后重定向到: /profile"
|
||||
echo " - 已登录用户访问登录页重定向到: /profile"
|
||||
echo ""
|
||||
|
||||
echo "4. 测试步骤:"
|
||||
echo " a) 访问 http://localhost:5173/login"
|
||||
echo " b) 使用测试账号登录 (如: demo/demo)"
|
||||
echo " c) 应该自动跳转到个人主页"
|
||||
echo " d) 或者直接访问 http://localhost:5173/profile"
|
||||
echo ""
|
||||
|
||||
echo "5. 如果仍然无法访问，请检查:"
|
||||
echo " - 用户是否已登录"
|
||||
echo " - 浏览器控制台是否有错误"
|
||||
echo " - 后端服务器是否运行"
|
||||
echo ""
|
||||
|
||||
echo "=== 测试完成 ==="
|
||||
Reference in New Issue
Block a user