diff --git a/docs/前后端架构说明.md b/docs/前后端架构说明.md index 026fc28..0b5a14f 100644 --- a/docs/前后端架构说明.md +++ b/docs/前后端架构说明.md @@ -27,15 +27,25 @@ BladeX 完整架构 "The frontend is a separate Vue.js project (not in this repository)" ``` -**当前您手上只有后端项目** `martial-master`,前端管理系统是独立的项目。 +**当前您手上的项目包含**: +- 后端项目:`martial-master`(主业务 API) +- 前端项目:`martial-web`(Vue 3 管理系统,独立仓库) + +两个项目均已部署到生产环境,并配置了自动化 CI/CD 部署流程。 --- -## 二、前端管理系统 - Saber +## 二、前端管理系统 -### 2.1 Saber 是什么? +### 2.1 当前项目前端:martial-web -**Saber** 是 BladeX 官方的 Vue 3 管理后台系统,提供可视化的管理界面。 +**martial-web** 是本项目配套的 Vue 3 管理系统,基于 Element Plus 和 Avue 构建。 + +**项目信息**: +- 仓库位置:`/remote_dev/martial/martial-web`(独立仓库) +- 技术栈:Vue 3 + Vite + Element Plus + Avue +- 生产地址:https://martial.johnsion.club +- 开发端口:5173 **主要功能**: - 🏠 **仪表盘**:数据统计、图表展示 @@ -45,54 +55,61 @@ BladeX 完整架构 - 📋 **系统管理**:字典管理、参数配置、日志查看 - 🗂️ **资源管理**:文件上传、OSS 配置 - ⚙️ **开发工具**:代码生成器、数据源管理 -- 🥋 **业务功能**:武术比赛管理(根据菜单配置) +- 🥋 **业务功能**:武术比赛管理(核心业务) -### 2.2 Saber 技术栈 +### 2.2 技术栈 ``` -前端框架:Vue 3 +前端框架:Vue 3.4 (Composition API) UI 组件:Element Plus -状态管理:Pinia +表单/表格:Avue +状态管理:Vuex 4 路由:Vue Router 4 -构建工具:Vite +构建工具:Vite 5 HTTP 库:Axios +样式:Sass/SCSS ``` -### 2.3 Saber 项目地址 +### 2.3 访问地址 -**官方仓库**(需要授权访问): +**开发环境**: +- 本地开发:http://localhost:5173 +- API 代理:通过 Vite proxy 转发到后端 + +**生产环境**: +- 前端地址:https://martial.johnsion.club +- API 代理:通过 Nginx 转发到后端 + +### 2.4 BladeX 官方前端 Saber(可选) + +BladeX 框架还提供商业版本的官方前端 **Saber**(需要购买授权): + +**官方仓库**: ``` Gitee: https://gitee.com/smallc/Saber GitHub: https://github.com/chillzhuang/Saber ``` -**注意**:BladeX 是商业框架,完整源码需要购买授权。 - -### 2.4 Saber 运行端口 - -根据配置文件中的线索: -```yaml -# application-dev.yml -blade: - token: - domain: http://127.0.0.1:1888 # 前端地址 -``` - -**默认端口**:`1888`(开发环境) +**与 martial-web 的关系**: +- martial-web:本项目自主开发的管理系统 +- Saber:BladeX 官方提供的商业版管理系统 +- 两者都可以对接 martial-master 后端,功能类似 --- ## 三、前后端交互流程 +### 3.1 开发环境架构 + ``` ┌─────────────────────────────────────────────────────────────┐ │ 用户浏览器 │ └──────────────┬──────────────────────────────────────────────┘ │ - │ http://localhost:1888 + │ http://localhost:5173 ▼ ┌──────────────────────────────────────────────────────────────┐ -│ Saber 前端 (Vue 3) │ +│ martial-web 前端 (Vue 3 + Vite) │ │ - 登录页面 │ │ - 仪表盘 │ │ - 用户管理 │ @@ -100,10 +117,10 @@ blade: │ - 武术比赛管理(调用后端 API) │ └──────────────┬───────────────────────────────────────────────┘ │ - │ HTTP 请求(JSON) - │ POST /blade-auth/token - │ GET /blade-system/user/list - │ GET /api/martial/competition/list + │ Vite Dev Proxy + │ /api → http://localhost:8123/api + │ /blade-auth → http://localhost:8123/blade-auth + │ /blade-system → http://localhost:8123/blade-system ▼ ┌──────────────────────────────────────────────────────────────┐ │ martial-master 后端 (Spring Boot) │ @@ -114,28 +131,183 @@ blade: │ ├── /blade-desk/** → 仪表盘 │ │ ├── /blade-resource/** → 资源管理 │ │ ├── /blade-develop/** → 开发工具 │ -│ └── /api/martial/** → 武术比赛(您的业务) │ +│ └── /api/martial/** → 武术比赛(核心业务) │ └──────────────┬───────────────────────────────────────────────┘ │ ▼ ┌──────────────┐ - │ MySQL │ - │ Redis │ + │ MySQL 33066 │ + │ Redis 63379 │ └──────────────┘ ``` +### 3.2 生产环境架构 + +``` +┌─────────────────────────────────────────────────────────────┐ +│ 互联网用户 │ +└──────────────┬──────────────────────────────────────────────┘ + │ + │ HTTPS (Cloudflare CDN) + ▼ +┌──────────────────────────────────────────────────────────────┐ +│ Caddy 反向代理(80/443,自动 HTTPS) │ +│ - martial.johnsion.club → localhost:5173 │ +│ - martial-api.johnsion.club → localhost:8123 │ +│ - martial-doc.johnsion.club → localhost:8123/doc.html │ +│ - martial-ci.johnsion.club → localhost:8080 │ +└────────┬─────────────────────────────┬───────────────────────┘ + │ │ + │ 前端请求 │ API 请求 + ▼ ▼ +┌──────────────────────┐ ┌───────────────────────────────┐ +│ martial-frontend │ │ martial-backend │ +│ (Nginx 容器) │ │ (Spring Boot) │ +│ 端口: 5173:80 │ │ 端口: 8123 │ +│ │ │ │ +│ 静态文件服务 │ │ ├── /blade-auth/** │ +│ ├── index.html │ │ ├── /blade-system/** │ +│ ├── assets/ │ │ ├── /blade-desk/** │ +│ └── ... │ │ ├── /blade-resource/** │ +│ │ │ ├── /blade-develop/** │ +│ Nginx 反向代理 │ │ └── /api/martial/** │ +│ └── /blade-auth/** │──────┘ │ +│ /blade-system/**│ ┌───────────────────────────────┘ +│ /api/** │──────┘ +│ → 172.21.0.1:8123 │ +└──────────────────────┘ │ + │ │ + └────────────┬──────────────────────┘ + │ + │ Docker Network: martial_martial-network + ▼ + ┌──────────────┐ + │ martial-mysql│ (端口: 3306) + │ martial-redis│ (端口: 6379) + └──────────────┘ +``` + +### 3.3 请求流程示例 + +**用户登录流程**: +``` +1. 用户访问 https://martial.johnsion.club + ↓ +2. Caddy 转发到 frontend 容器 (localhost:5173) + ↓ +3. Nginx 返回 Vue 应用 (index.html) + ↓ +4. 前端 JS 发起登录请求: POST /blade-auth/oauth/token + ↓ +5. Nginx 代理到后端: http://172.21.0.1:8123/blade-auth/oauth/token + ↓ +6. Spring Boot 认证模块处理登录 + ↓ +7. 返回 Token 给前端 + ↓ +8. 前端存储 Token,后续请求携带 Blade-Auth header +``` + +**业务数据请求流程**: +``` +1. 前端请求比赛列表: GET /api/martial/competition/list + ↓ +2. Nginx 代理: http://172.21.0.1:8123/api/martial/competition/list + ↓ +3. Spring Boot martial 模块查询数据库 + ↓ +4. 返回 JSON 数据 + ↓ +5. 前端展示数据 +``` + --- -## 四、当前项目的使用方式 +## 四、项目访问方式 -### 方式一:仅使用 API(当前可用)✅ +### 方式一:生产环境在线访问 ✅ **适合场景**: -- 前端单独开发 -- 移动端开发 -- API 集成测试 +- 直接使用已部署的完整系统 +- 演示和测试 +- 前端开发(对接生产 API) + +**访问地址**: +``` +前端系统:https://martial.johnsion.club +后端 API:https://martial-api.johnsion.club +API 文档:https://martial-doc.johnsion.club +CI/CD 平台:https://martial-ci.johnsion.club +``` + +**默认账号**: +``` +用户名:admin +密码:admin +租户ID:000000 +``` + +**优点**: +- ✅ 开箱即用,无需本地部署 +- ✅ HTTPS 安全访问 +- ✅ 完整的前后端功能 +- ✅ 生产级别的性能 + +--- + +### 方式二:本地开发环境 ✅ + +**适合场景**: +- 后端功能开发 +- API 调试和测试 +- 前端本地开发 + +**启动后端**: +```bash +cd /remote_dev/martial/martial-master +mvn spring-boot:run + +访问地址: +- API Server: http://localhost:8123 +- Swagger 文档: http://localhost:8123/doc.html +- Druid 监控: http://localhost:8123/druid +``` + +**启动前端**: +```bash +cd /remote_dev/martial/martial-web +npm run dev + +访问地址: +- 前端系统: http://localhost:5173 +``` + +**优点**: +- ✅ 可以调试代码 +- ✅ 快速开发迭代 +- ✅ 修改即时生效 + +--- + +### 方式三:仅使用 API 文档测试 + +**适合场景**: +- 后端 API 测试 +- 接口调试 +- 了解 API 规范 **访问方式**: + +**生产环境**: +``` +Knife4j API 文档:https://martial-doc.johnsion.club + +直接调用 API: +POST https://martial-api.johnsion.club/blade-auth/oauth/token +GET https://martial-api.johnsion.club/api/martial/competition/list +``` + +**本地环境**: ``` Knife4j API 文档:http://localhost:8123/doc.html @@ -147,90 +319,32 @@ GET http://localhost:8123/api/martial/competition/list **优点**: - ✅ 无需前端,可以直接测试 API - ✅ 适合后端开发和调试 +- ✅ Swagger UI 提供可视化测试界面 **缺点**: -- ❌ 没有可视化界面 -- ❌ 需要手动构造 HTTP 请求 +- ❌ 没有完整的管理界面 +- ❌ 需要手动构造请求参数 --- -### 方式二:搭配 Saber 前端(需要获取源码) +### 方式四:使用第三方 API 工具 -**步骤 1:获取 Saber 源码** +**适合场景**: +- 复杂 API 测试 +- 批量接口测试 +- 自动化测试 -如果您有 BladeX 授权,可以从官方获取 Saber 源码: -```bash -# Gitee -git clone https://gitee.com/smallc/Saber.git - -# GitHub -git clone https://github.com/chillzhuang/Saber.git -``` - -**步骤 2:配置后端地址** - -```javascript -// Saber/src/config/website.js -export default { - // 后端 API 地址 - apiUrl: 'http://localhost:8123', - - // Token 存储键 - tokenHeader: 'Blade-Auth', - - // 其他配置... -} -``` - -**步骤 3:安装依赖并启动** - -```bash -cd Saber - -# 安装依赖 -npm install -# 或 -yarn install - -# 启动开发服务器 -npm run dev -# 或 -yarn dev -``` - -**步骤 4:访问** - -``` -浏览器访问:http://localhost:1888 - -默认账号: -用户名:admin -密码:admin -``` - -**步骤 5:使用管理后台** - -登录后,您可以在 Saber 管理后台中: -- 📊 查看仪表盘数据 -- 👥 管理用户和角色 -- 📋 配置菜单权限 -- 🥋 使用武术比赛管理功能(需要先配置菜单) - ---- - -### 方式三:使用第三方 API 工具(临时方案) - -如果暂时没有 Saber 源码,可以使用: +**推荐工具**: **Postman / Apifox / Insomnia** ``` 1. 先调用登录接口获取 Token: - POST http://localhost:8123/blade-auth/token + POST https://martial-api.johnsion.club/blade-auth/oauth/token Body: { "tenantId": "000000", "username": "admin", "password": "admin", - "grant_type": "captcha", + "grant_type": "password", "scope": "all" } @@ -240,25 +354,25 @@ yarn dev Blade-Auth: bearer 4. 调用业务接口: - GET http://localhost:8123/api/martial/competition/list + GET https://martial-api.johnsion.club/api/martial/competition/list ``` **VS Code REST Client 扩展** ```http ### 1. 登录获取 Token -POST http://localhost:8123/blade-auth/token +POST https://martial-api.johnsion.club/blade-auth/oauth/token Content-Type: application/json { "tenantId": "000000", "username": "admin", "password": "admin", - "grant_type": "captcha", + "grant_type": "password", "scope": "all" } ### 2. 调用业务接口 -GET http://localhost:8123/api/martial/competition/list +GET https://martial-api.johnsion.club/api/martial/competition/list Blade-Auth: bearer {{token}} ``` @@ -371,62 +485,116 @@ BladeX 微服务架构 ## 七、推荐的开发方式 -### 当前阶段(无 Saber) +### 开发环境配置 -``` -1. 后端开发: - - 在 VS Code 中开发业务逻辑 - - 使用 F5 调试运行 +**本地全栈开发**: +```bash +# 终端 1: 启动后端 +cd /remote_dev/martial/martial-master +mvn spring-boot:run -2. 接口测试: - - 使用 Knife4j:http://localhost:8123/doc.html - - 使用 Postman/Apifox +# 终端 2: 启动前端 +cd /remote_dev/martial/martial-web +npm run dev -3. 数据库操作: - - 使用 Navicat/DBeaver 连接 MySQL - - 执行 SQL 查看数据 +# 访问 +前端:http://localhost:5173 +后端:http://localhost:8123 +文档:http://localhost:8123/doc.html ``` -### 有 Saber 前端时 +**仅后端开发**: +```bash +# 启动后端 +cd /remote_dev/martial/martial-master +mvn spring-boot:run +# 使用以下方式测试 +1. Knife4j 文档:http://localhost:8123/doc.html +2. Postman/Apifox +3. 对接生产前端:https://martial.johnsion.club(配置 API 代理到 localhost:8123) ``` -1. 启动后端: - cd martial-master - mvn spring-boot:run -2. 启动前端: - cd Saber - npm run dev +**仅前端开发**: +```bash +# 启动前端 +cd /remote_dev/martial/martial-web +npm run dev -3. 访问管理后台: - http://localhost:1888 +# 对接生产后端 +在 vite.config.js 中配置 proxy 指向: +https://martial-api.johnsion.club +``` -4. 全栈开发: - - 后端改代码 → 前端调用 API - - 前端页面 → 调用后端接口 +### 数据库操作 + +**开发环境**: +```bash +# 使用 Navicat/DBeaver 连接 +Host: 127.0.0.1 +Port: 33066 +Database: martial_db +Username: root +Password: WtcSecure901faf1ac4d32e2bPwd +``` + +**生产环境**(仅运维人员): +```bash +# 通过 Docker 容器访问 +ssh root@154.30.6.21 +docker exec -it martial-mysql mysql -uroot -pWtcSecure901faf1ac4d32e2bPwd martial_db ``` --- ## 八、总结 -| 组件 | 状态 | 地址 | 说明 | -|------|------|------|------| -| **后端 API** | ✅ 有 | http://localhost:8123 | 当前项目 | -| **API 文档** | ✅ 有 | http://localhost:8123/doc.html | Knife4j | -| **Druid 监控** | ✅ 有 | http://localhost:8123/druid | 数据库监控 | -| **前端管理系统** | ❌ 无 | http://localhost:1888 | Saber(需单独获取) | -| **模块管理界面** | ❌ 无 | - | 单体应用,无需管理 | +### 环境对比表 -**关键点**: -- ✅ 后端可以独立运行和开发 -- ✅ 使用 Knife4j 可以完成所有测试 -- ❌ 如需可视化管理界面,需要部署 Saber 前端 -- ❌ 单体架构下没有"模块启动管理"的概念 +| 组件 | 开发环境 | 生产环境 | 说明 | +|------|---------|----------|------| +| **后端 API** | http://localhost:8123 | https://martial-api.johnsion.club | Spring Boot 应用 | +| **API 文档** | http://localhost:8123/doc.html | https://martial-doc.johnsion.club | Knife4j 文档 | +| **Druid 监控** | http://localhost:8123/druid | https://martial-api.johnsion.club/druid | 数据库监控 | +| **前端系统** | http://localhost:5173 | https://martial.johnsion.club | Vue 3 管理系统 | +| **CI/CD 平台** | - | https://martial-ci.johnsion.club | Drone CI/CD | +| **MySQL** | 127.0.0.1:33066 | 容器内部 | 数据库 | +| **Redis** | 127.0.0.1:63379 | 容器内部 | 缓存 | + +### 项目特点 + +**架构设计**: +- ✅ 前后端完全分离 +- ✅ 后端提供 RESTful API +- ✅ 前端独立部署(可替换为任何技术栈) +- ✅ 单体应用,模块化设计 +- ✅ 支持升级为微服务架构 + +**部署方式**: +- ✅ 生产环境自动化 CI/CD(Drone) +- ✅ Docker 容器化部署 +- ✅ Caddy 自动 HTTPS +- ✅ 前后端独立扩展 + +**开发体验**: +- ✅ 本地开发无需依赖生产环境 +- ✅ Vite 热更新,开发效率高 +- ✅ Swagger 文档完整,接口调试方便 +- ✅ 支持调试和日志查看 + +### 关键点 + +1. **前端系统已存在**:martial-web 项目(Vue 3),不是 Saber +2. **生产环境可用**:https://martial.johnsion.club 直接访问完整系统 +3. **本地开发便捷**:后端 8123 端口,前端 5173 端口 +4. **API 文档齐全**:Knife4j 提供完整的 API 测试界面 +5. **自动化部署**:推送到 main 分支自动触发 CI/CD --- -**建议**: -1. 现阶段专注后端 API 开发 -2. 使用 Knife4j 测试接口 -3. 如需前端,可以自己用 Vue/React 开发,或等待获取 Saber 源码 +**开发建议**: +1. 使用生产环境了解系统功能 +2. 本地启动后端进行业务开发 +3. 使用 Knife4j 文档测试接口 +4. 前端对接本地或生产 API 均可 +5. 开发完成后推送到 dev 分支,测试通过后合并到 main 触发自动部署 diff --git a/docs/开发指南.md b/docs/开发指南.md index 6d077f5..830e79b 100644 --- a/docs/开发指南.md +++ b/docs/开发指南.md @@ -60,7 +60,7 @@ src/main/java/org/springblade/modules/martial/ #### 步骤 1:创建数据库表 ```sql --- doc/sql/mysql/martial-competition-tables.sql +-- database/martial-db/新增表.sql CREATE TABLE mt_judge_level ( id BIGINT PRIMARY KEY, level_name VARCHAR(50) NOT NULL COMMENT '等级名称',