VJSP前端架构说明文档
1. 项目概述
VJSP是一个基于Web的企业级应用平台，采用前后端分离架构，前端使用自定义框架（VJSP 框架）构建，集成了多种第三方库和组件，支持多语言、主题切换等功能。该系统包含用户管理、权限控制、工作流、表单处理等企业级应用常见功能。
2. 技术栈
2.1 核心框架
- VJSP自研框架 (vjsp.all.min.js)
2.2 UI组件库
- EasyUI (vjsp.eui.min.js)
- LayUI
- ZTree (vjsp.zt.min.js)
2.3 图表与可视化
- ECharts 5 (vjsp.ec.min.js)
2.4 富文本编辑
- UEditor (vjsp.ue.min.js)
2.5 日期选择
- LayDate
2.6 文件上传
- WebUploader (vjsp.wu.min.js)
2.7 多媒体播放
- Plyr (vjsp.pl.min.js)
2.8 日历
- FullCalendar (vjsp.fc.min.js)
3. 项目结构
vjsphtml/
├── CommonDialog/ # 通用对话框组件
├── home/ # 主页相关页面
│ ├── main.html # 桌面版主界面
│ └── portal.html # 门户页面
├── httpStatus/ # HTTP状态页面
├── modules/ # 业务模块
├── system/ # 系统管理模块
│ ├── account/ # 账户管理
│ ├── dept/ # 部门管理
│ ├── dic/ # 数据字典
│ ├── exportSql/ # SQL导出
│ ├── flowRole/ # 流程角色
│ ├── log/ # 日志管理
│ ├── menu/ # 菜单管理
│ ├── role/ # 角色管理
│ └── user/ # 用户管理
├── vjsp-resource/ # 资源文件
│ └── resource/
│ └── static/
│ ├── theme-customMade/ # 自定义主题
│ ├── theme-default/ # 默认主题
│ └── workflow/ # 工作流资源
├── vjsp-static/ # 静态资源
│ ├── script/ # JS脚本文件
│ ├── style/ # CSS样式文件
│ ├── theme-default/ # 默认主题资源
│ └── thirdlibs/ # 第三方库
│ ├── easyui/ # EasyUI库
│ ├── echarts5/ # ECharts图表库
│ ├── fullcalendar/ # 日历组件
│ ├── laydate/ # 日期选择器
│ ├── layui/ # LayUI组件库
│ ├── plyr/ # 媒体播放器
│ ├── ueditor/ # 富文本编辑器
│ ├── webuploader/ # 文件上传组件
│ └── ztree/ # 树形控件
├── vjspflow/ # 工作流相关页面
└── _vjsp_setting/ # 系统配置文件4. 核心功能模块
4.1 认证与授权
- 基于Token的身份验证
- 权限控制系统
- 多角色支持
- 超级管理员特权
4.2 用户界面
- 多主题支持
- 自定义主题
- 多语言支持（中英文等）
4.3 系统管理
- 用户管理
- 角色管理
- 部门管理
- 菜单管理
- 权限配置
- 日志管理
- 数据字典
4.4 工作流
- 流程定义
- 流程实例
- 任务管理
- 流程记录
4.5 表单系统
- 动态表单
- 表单验证
- 表单数据处理
5. 架构特点
5.1 前后端分离
- 前端负责UI渲染和用户交互
- 后端提供RESTful API
- 基于Token的身份验证
5.2 模块化设计
- 功能模块独立封装
- 业务逻辑分离
- 可扩展性强
5.3 多端适配
- 响应式布局
- 设备识别与适配
5.4 国际化支持
- 多语言切换
- 语言包管理
- 本地化配置
5.5 主题定制
- 主题切换功能
- 自定义主题支持
- 动态样式调整
6. 开发规范
6.1 文件命名
- HTML文件：功能名.html
- 语言文件：功能名.lang.语言代码.json
6.2 目录结构
- 按功能模块组织
- 静态资源集中管理
- 第三方库独立存放
6.3 代码风格
- 基于VJSP 框架的组件化开发
- 事件驱动的交互处理
- 统一的API调用方式
7. 安全机制
- Token基础的身份验证
- 权限精细化控制
- 接口授权验证
- 会话管理
- 安全头部设置
8. 部署与运行
8.1 环境要求
- 现代浏览器支持
- 兼容IE9+（通过polyfill）
8.2 资源加载
- 静态资源版本控制（URL参数_t）
- 按需加载组件
- 缓存控制
9. 扩展与定制
9.1 添加新模块
- 在modules目录下创建新的模块目录
- 实现模块的HTML、JS和CSS文件
- 在系统菜单中添加新模块入口
9.2 主题定制
- 在theme-customMade目录下修改样式文件
- 调整颜色、字体等UI元素
- 更新图片和图标资源
9.3 语言扩展
- 创建新的语言包文件（*.lang.语言代码.json）
- 在系统配置中添加新语言选项
- 实现语言切换功能
10. 最佳实践
- 使用VJSP 框架提供的组件和API
- 遵循模块化和组件化开发方式
- 合理利用第三方库功能
- 注意移动端适配和响应式设计
- 实现国际化和本地化支持