feat(admin): 添加用户管理相关文件

添加用户管理视图、API和状态管理文件
This commit is contained in:
张翔
2026-03-28 14:37:29 +08:00
commit 08ea5fbe98
1643 changed files with 255646 additions and 0 deletions
@@ -0,0 +1,465 @@
# 前端双应用架构部署配置文档
## 概述
本文档描述了前端项目(Uniapp和Admin)在API双应用架构下的部署配置。后端已分离为两个独立应用:
- **client-app**: 端口8081,路由前缀 `/client/**`
- **admin-app**: 端口8082,路由前缀 `/admin/**`
## 架构说明
### 网关路由
```
┌─────────────────┐
│ API Gateway │
│ (Nginx) │
└────────┬────────┘
┌────────┴────────┐
│ │
┌────────▼────┐ ┌─────▼────────┐
│ client-app │ │ admin-app │
│ (Port 8081)│ │ (Port 8082) │
└─────────────┘ └──────────────┘
│ │
┌────────▼────┐ ┌─────▼────────┐
│ Uniapp │ │ Admin │
│ (Client) │ │ (Backend) │
└─────────────┘ └──────────────┘
```
### API端点分配
| 应用 | 端口 | 路由前缀 | 用途 |
|------|--------|-----------|------|
| client-app | 8081 | `/client/**` | 客户端API(黄历、算命等) |
| admin-app | 8082 | `/admin/**` | 管理后台API(用户、角色、菜单等) |
## 环境配置
### Uniapp环境配置
#### 开发环境 (.env.development)
```bash
# API基础URL - 直接指向客户端应用(端口8081)
baseURL: 'http://127.0.0.1:8081'
enableMock: false
```
#### 测试环境 (.env.test)
```bash
# API基础URL - 测试环境网关地址
baseURL: 'https://test.api.ziweidoushu.com'
enableMock: false
```
#### 生产环境 (.env.prod)
```bash
# API基础URL - 生产环境网关地址
baseURL: 'https://api.ziweidoushu.com'
enableMock: false
```
#### 本地环境 (.env.local)
```bash
# API基础URL - 本地客户端应用(端口8081)
baseURL: 'http://127.0.0.1:8081'
enableMock: false
```
### Admin环境配置
#### 开发环境 (.env.development)
```bash
NODE_ENV=development
VITE_APP_ENV=development
VITE_API_BASE_URL=http://127.0.0.1:8082
VITE_MOCK_ENABLED=false
```
#### 本地开发环境 (.env.development-local)
```bash
NODE_ENV=development
VITE_APP_ENV=development-local
VITE_API_BASE_URL=http://127.0.0.1:8082
VITE_MOCK_ENABLED=false
```
#### 测试环境 (.env.test)
```bash
NODE_ENV=test
VITE_APP_ENV=test
VITE_API_BASE_URL=https://test.api.ziweidoushu.com
VITE_MOCK_ENABLED=false
```
#### 生产环境 (.env.production)
```bash
NODE_ENV=production
VITE_APP_ENV=production
VITE_API_BASE_URL=https://api.ziweidoushu.com
VITE_MOCK_ENABLED=false
```
## API路径前缀规范
### Uniapp API路径
所有Uniapp的API调用必须使用 `/client/` 前缀:
```typescript
// 正确示例
httpClient.post('/client/calendar/convert', request)
httpClient.post('/client/lunar-calendar/convert', request)
httpClient.post('/client/fortune/daily', request)
httpClient.post('/client/ziwei/analyze', request)
// 错误示例
httpClient.post('/calendar/convert', request) // 缺少 /client/ 前缀
```
### Admin API路径
所有Admin的API调用必须使用 `/admin/` 前缀:
```typescript
// 正确示例
httpClient.post('/admin/auth/login', credentials)
httpClient.get('/admin/user/list')
httpClient.get('/admin/role/list')
httpClient.get('/admin/menu/list')
// 错误示例
httpClient.post('/auth/login', credentials) // 缺少 /admin/ 前缀
```
## 部署流程
### 1. 后端部署
#### 启动client-app
```bash
cd everything-is-suitable-api
# 启动客户端应用(端口8081
./gradlew :client-app:bootRun
```
#### 启动admin-app
```bash
cd everything-is-suitable-api
# 启动管理应用(端口8082
./gradlew :admin-app:bootRun
```
#### Docker部署
```bash
# 启动client-app
docker run -d -p 8081:8081 --name client-app client-app:latest
# 启动admin-app
docker run -d -p 8082:8082 --name admin-app admin-app:latest
```
### 2. 前端部署
#### Uniapp部署
**开发环境启动**
```bash
cd everything-is-suitable-uniapp
npm run dev:h5
```
**生产环境构建**
```bash
cd everything-is-suitable-uniapp
npm run build:h5
# 构建产物在 dist/build/h5 目录
```
**小程序构建**
```bash
# 微信小程序
npm run build:mp-weixin
# H5
npm run build:h5
```
#### Admin部署
**开发环境启动**
```bash
cd everything-is-suitable-admin
npm run dev
```
**生产环境构建**
```bash
cd everything-is-suitable-admin
npm run build
# 构建产物在 dist 目录
```
**Docker部署**
```bash
# 构建镜像
docker build -t admin-frontend:latest .
# 运行容器
docker run -d -p 5174:80 --name admin-frontend admin-frontend:latest
```
### 3. Nginx网关配置
```nginx
# API网关配置
upstream client_app {
server 127.0.0.1:8081;
}
upstream admin_app {
server 127.0.0.1:8082;
}
server {
listen 80;
server_name api.ziweidoushu.com;
# 客户端API路由
location /client/ {
proxy_pass http://client_app;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# 管理后台API路由
location /admin/ {
proxy_pass http://admin_app;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
```
## 集成测试
### 运行集成测试脚本
在部署后,运行集成测试脚本验证前后端连接:
```bash
# 确保后端服务已启动
cd everything-is-suitable-api
./gradlew :client-app:bootRun &
./gradlew :admin-app:bootRun &
# 运行集成测试
node scripts/integration-test.js
```
### 测试结果
集成测试脚本会检查以下端点:
**Uniapp端点**
- `GET /client/health`
- `POST /client/calendar/convert`
- `POST /client/lunar-calendar/convert`
- `POST /client/fortune/daily`
- `POST /client/ziwei/analyze`
**Admin端点**
- `GET /admin/health`
- `POST /admin/auth/login`
- `GET /admin/user/list`
- `GET /admin/role/list`
- `GET /admin/menu/list`
## 健康检查
### client-app健康检查
```bash
curl http://127.0.0.1:8081/client/health
```
预期响应:
```json
{
"status": "UP",
"application": "client-app"
}
```
### admin-app健康检查
```bash
curl http://127.0.0.1:8082/admin/health
```
预期响应:
```json
{
"status": "UP",
"application": "admin-app"
}
```
## 故障排查
### 常见问题
#### 1. Uniapp无法连接到API
**症状**: Uniapp前端显示网络错误
**检查项**:
1. 确认client-app是否在8081端口运行
2. 检查API路径是否包含 `/client/` 前缀
3. 验证环境配置中的baseURL是否正确
**解决方案**:
```bash
# 检查端口占用
lsof -i :8081
# 重启client-app
./gradlew :client-app:bootRun
```
#### 2. Admin无法连接到API
**症状**: Admin登录失败或API调用错误
**检查项**:
1. 确认admin-app是否在8082端口运行
2. 检查API路径是否包含 `/admin/` 前缀
3. 验证环境变量 `VITE_API_BASE_URL` 是否正确
**解决方案**:
```bash
# 检查端口占用
lsof -i :8082
# 重启admin-app
./gradlew :admin-app:bootRun
```
#### 3. CORS错误
**症状**: 浏览器控制台显示CORS错误
**解决方案**:
在后端应用中配置CORS允许前端域名:
```java
@CrossOrigin(origins = {
"http://localhost:5173", // Uniapp开发服务器
"http://localhost:5174", // Admin开发服务器
"https://*.ziweidoushu.com" // 生产域名
})
```
#### 4. 网关路由错误
**症状**: 请求被路由到错误的应用
**解决方案**:
检查Nginx配置中的location路径是否正确:
```nginx
# 确保路径以斜杠结尾
location /client/ {
proxy_pass http://client_app;
}
location /admin/ {
proxy_pass http://admin_app;
}
```
## 监控和日志
### 应用监控
使用Prometheus和Grafana监控应用状态:
```bash
# 启动监控服务
docker-compose -f docker-compose.monitoring.yml up -d
```
访问Grafana: http://localhost:3000
### 日志查看
```bash
# 查看client-app日志
docker logs -f client-app
# 查看admin-app日志
docker logs -f admin-app
```
## 回滚方案
如果部署后出现问题,可以快速回滚:
### 回滚前端配置
```bash
# Uniapp
cd everything-is-suitable-uniapp
git revert <commit-hash>
# Admin
cd everything-is-suitable-admin
git revert <commit-hash>
```
### 回滚后端配置
```bash
# 回滚到之前的版本
cd everything-is-suitable-api
git checkout <previous-tag>
./gradlew :client-app:bootRun
./gradlew :admin-app:bootRun
```
## 安全注意事项
1. **HTTPS配置**: 生产环境必须使用HTTPS
2. **API密钥管理**: 不要在前端代码中硬编码敏感信息
3. **CORS配置**: 严格限制允许的域名
4. **认证授权**: 所有Admin API必须经过认证
5. **日志脱敏**: 确保日志中不包含敏感信息
## 性能优化
1. **CDN加速**: 静态资源使用CDN分发
2. **Gzip压缩**: 启用Nginx的Gzip压缩
3. **缓存策略**: 合理设置HTTP缓存头
4. **负载均衡**: 多实例部署时使用负载均衡
## 附录
### 端口分配
| 服务 | 端口 | 用途 |
|------|------|------|
| client-app | 8081 | 客户端API |
| admin-app | 8082 | 管理后台API |
| Uniapp H5 | 8080 | Uniapp开发服务器 |
| Admin | 5174 | Admin开发服务器 |
| Nginx | 80/443 | API网关 |
### 相关文档
- [API架构调整文档](../everything-is-suitable-api/docs/plans/2025-02-24-dual-app-architecture-refactor.md)
- [前端双应用架构适配计划](./2026-02-25-frontend-dual-app-architecture-adaptation.md)
- [集成测试脚本](../scripts/integration-test.js)