160 lines
4.1 KiB
Markdown
160 lines
4.1 KiB
Markdown
|
# Java Admin前端迁移到Vben框架 - 迁移指南
|
|||
|
|
|
|||
|
|
## 项目概述
|
|||
|
|
|
|||
|
|
本项目将基于Java + Vue3 + Element Plus的admin前端系统迁移到Vben框架（Vue3 + Ant Design Vue + Vben组件库）。
|
|||
|
|
|
|||
|
|
## 迁移状态
|
|||
|
|
|
|||
|
|
### ✅ 已完成迁移
|
|||
|
|
|
|||
|
|
1. **登录认证系统**
|
|||
|
|
- 迁移了登录页面 (`login-migrated.vue`)
|
|||
|
|
- 适配了Java admin的登录逻辑和双端登录（平台端/站点端）
|
|||
|
|
- 创建了认证API接口 (`auth.ts`)
|
|||
|
|
- 创建了适配的认证状态管理 (`auth-migrated.ts`)
|
|||
|
|
|
|||
|
|
2. **系统管理模块**
|
|||
|
|
- 用户管理页面 (`system/user/index.vue`)
|
|||
|
|
- 用户编辑模态框 (`system/user/components/user-edit-modal.vue`)
|
|||
|
|
- 用户管理API接口 (`user.ts`)
|
|||
|
|
- 创建了系统管理相关的中文翻译
|
|||
|
|
|
|||
|
|
3. **路由配置**
|
|||
|
|
- 创建了迁移后的系统管理路由配置 (`system-migrated.ts`)
|
|||
|
|
|
|||
|
|
### 🚧 待完成迁移
|
|||
|
|
|
|||
|
|
1. **角色管理模块**
|
|||
|
|
- 角色列表页面
|
|||
|
|
- 角色权限配置
|
|||
|
|
- 角色编辑功能
|
|||
|
|
|
|||
|
|
2. **菜单管理模块**
|
|||
|
|
- 菜单列表页面
|
|||
|
|
- 菜单编辑功能
|
|||
|
|
- 菜单权限配置
|
|||
|
|
|
|||
|
|
3. **部门管理模块**
|
|||
|
|
- 部门列表页面
|
|||
|
|
- 部门编辑功能
|
|||
|
|
|
|||
|
|
4. **站点管理模块**
|
|||
|
|
- 站点列表页面
|
|||
|
|
- 站点分组管理
|
|||
|
|
- 站点配置功能
|
|||
|
|
|
|||
|
|
5. **DIY装修模块**
|
|||
|
|
- 页面编辑器
|
|||
|
|
- 组件库管理
|
|||
|
|
- 预览与发布功能
|
|||
|
|
|
|||
|
|
6. **渠道管理模块**
|
|||
|
|
- 微信小程序配置
|
|||
|
|
- 微信公众号配置
|
|||
|
|
- APP配置
|
|||
|
|
- H5配置
|
|||
|
|
- PC配置
|
|||
|
|
|
|||
|
|
## 技术栈对比
|
|||
|
|
|
|||
|
|
| 功能 | Java Admin | Vben |
|
|||
|
|
|------|-----------|------|
|
|||
|
|
| UI框架 | Element Plus | Ant Design Vue |
|
|||
|
|
| 状态管理 | Pinia | Pinia + @vben/stores |
|
|||
|
|
| 路由 | Vue Router | Vue Router + 动态路由 |
|
|||
|
|
| 请求库 | Axios | Axios + @vben/request |
|
|||
|
|
| 国际化 | vue-i18n | @vben/locales |
|
|||
|
|
| 表单 | Element Plus Form | Vben Form + Ant Design Form |
|
|||
|
|
| 表格 | Element Plus Table | Ant Design Table + vxe-table |
|
|||
|
|
|
|||
|
|
## 迁移策略
|
|||
|
|
|
|||
|
|
### 1. 保持API兼容性
|
|||
|
|
- 所有API接口保持与Java后端一致
|
|||
|
|
- 请求参数和响应数据结构不变
|
|||
|
|
- 错误处理机制保持一致
|
|||
|
|
|
|||
|
|
### 2. UI组件替换
|
|||
|
|
- Element Plus组件 → Ant Design Vue组件
|
|||
|
|
- 保持相同的用户体验和交互逻辑
|
|||
|
|
- 适配响应式设计
|
|||
|
|
|
|||
|
|
### 3. 状态管理适配
|
|||
|
|
- 保持业务逻辑不变
|
|||
|
|
- 适配Vben的状态管理架构
|
|||
|
|
- 保持数据流的一致性
|
|||
|
|
|
|||
|
|
### 4. 路由配置
|
|||
|
|
- 保持路由结构不变
|
|||
|
|
- 适配Vben的动态路由系统
|
|||
|
|
- 保持权限控制逻辑
|
|||
|
|
|
|||
|
|
## 文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
admin-vben/
|
|||
|
|
├── apps/web-antd/src/
|
|||
|
|
│ ├── api/
|
|||
|
|
│ │ ├── core/
|
|||
|
|
│ │ │ ├── auth.ts # 认证API
|
|||
|
|
│ │ │ └── user.ts # 用户管理API
|
|||
|
|
│ │ └── index.ts # API导出
|
|||
|
|
│ ├── views/
|
|||
|
|
│ │ ├── _core/authentication/
|
|||
|
|
│ │ │ └── login-migrated.vue # 迁移后的登录页
|
|||
|
|
│ │ └── system/
|
|||
|
|
│ │ └── user/
|
|||
|
|
│ │ ├── index.vue # 用户管理页面
|
|||
|
|
│ │ └── components/
|
|||
|
|
│ │ └── user-edit-modal.vue # 用户编辑模态框
|
|||
|
|
│ ├── store/
|
|||
|
|
│ │ └── auth-migrated.ts # 适配的认证状态管理
|
|||
|
|
│ ├── locales/langs/zh-CN/
|
|||
|
|
│ │ └── system.json # 系统管理中文翻译
|
|||
|
|
│ └── router/routes/modules/
|
|||
|
|
│ └── system-migrated.ts # 迁移后的系统管理路由
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 下一步计划
|
|||
|
|
|
|||
|
|
1. **完成核心模块迁移**
|
|||
|
|
- 角色管理
|
|||
|
|
- 菜单管理
|
|||
|
|
- 部门管理
|
|||
|
|
|
|||
|
|
2. **业务模块迁移**
|
|||
|
|
- 站点管理
|
|||
|
|
- DIY装修
|
|||
|
|
- 渠道管理
|
|||
|
|
|
|||
|
|
3. **测试与优化**
|
|||
|
|
- 功能测试
|
|||
|
|
- 性能优化
|
|||
|
|
- 用户体验优化
|
|||
|
|
|
|||
|
|
4. **部署与上线**
|
|||
|
|
- 构建配置
|
|||
|
|
- 部署脚本
|
|||
|
|
- 监控配置
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. **保持向后兼容**
|
|||
|
|
- 不要修改后端API接口
|
|||
|
|
- 保持数据格式一致
|
|||
|
|
- 保持业务逻辑一致
|
|||
|
|
|
|||
|
|
2. **用户体验**
|
|||
|
|
- 保持操作习惯一致
|
|||
|
|
- 优化响应速度
|
|||
|
|
- 改善界面美观度
|
|||
|
|
|
|||
|
|
3. **代码质量**
|
|||
|
|
- 遵循Vben的开发规范
|
|||
|
|
- 保持代码整洁
|
|||
|
|
- 添加必要的注释
|
|||
|
|
|
|||
|
|
## 联系方式
|
|||
|
|
|
|||
|
|
如有问题或建议，请联系开发团队。
|