Appearance
前端二次开发
技术栈
技术 | 描述 |
---|---|
Vue3 | Vue.js 是一款轻量级、高性能的 JavaScript 框架,用于构建交互式 Web 界面。 |
Vite | Vue.js 官方提供的新一代前端构建工具,旨在提供快速的开发体验。 |
Vue-Router | Vue.js 官方的路由管理器,用于实现单页面应用中的页面跳转和路由管理。 |
Pinia | Pinia 是一个基于 Vue 3 的状态管理库,它提供了 store 的概念,用于保存全局状态和业务逻辑。 |
Element-Plus | 是一个基于 Vue 3 的高质量 UI 组件库。它包含了丰富的组件和扩展功能,能够快速搭建美观的 Web 应用界面。 |
VantUI | 一款专为移动端定制的 Vue.js 组件库,提供了丰富的移动端UI组件,适用于构建移动端应用。 |
代码目录
导出应用的代码是一个完整的基于vue2的前端项目,在编辑器中打开并安装完相关依赖后就可直接运行。

目录结构如下:
目录名 | 描述 |
---|---|
assets | 存放在设计阶段使用到的icon图标、默认图片等静态资源 |
components | 存放整个应用所使用到的公共组件 |
components/form | 存放流程引擎中所使用到的表单组件 |
config | 存放应用配置文件 |
plugins | 存放axios封装、通用的处理方法 |
router | 页面路由文件,包含了每一个和配置菜单的绑定页面 |
store | 数据的全局存储文件 |
style | 存放通用样式的配置和组件的样式文件 |
utils | 存放常用的一些处理方法 |
view/business | 存放页面设计中的每个页面文件 |
view/system | 存放平台内置的系统管理模块的页面文件 |
代码修改
页面修改
- 当开发者需要对页面的交互、接口调用进行调整、增加时,可以在平台的工作台打开对应页面的编辑页面弹窗,如下图所示:

- 页面的标签即对应导出代码中页面vue文件目录、文件名,其中当前页面目录下包含一个同名的混入文件,页面相关的逻辑代码可以写在这个文件中,方便后续页面设计调整时代码的合并。

组件自定义
- 平台基于element-ui和vant-ui封装了在工作台中所有的可推拽组件,如果实际开发中有需要更改对应组件的功能,可在components文件夹下找到对应的封装组件进行自定义的更改,并且在index.js中已经对components里所有的组件进行了全局注册,开发时无需在页面中单独引入。


表单修改
- 当开发者需要对流程引擎中使用到的表单组件修改时,可以打开平台表单设计页面,这里方便开发者快速找到需要修改的表单组件,平台使用表单名称的拼音作为文件名称,如下图所示:


接口对接
- config\ip.js里面的BASE_SERVER_URL为后端接口地址

- src\plugins\axiosPlugin\axiosPlugin.js这里为axios的二次封装,开发者可以根据实际开发需求对其进行修改调整

- commonAxios.js为公共接口文件,businessAxios.js为业务接口文件,配置的数据模型相关的接口就存放在businessAxios.js中,每个接口都有对应的注释,并且在axiosPlugin.js里对这两个文件的接口地址进行了全局挂载,这样在页面开发可以直接通过this.$getDataAxios.xxx即可调用,方便开发。

插件方法自定义
- 所有插件和自定义方法分别存在于plugins和utils中,开发者可以根据实际的业务需求进行插件和公用方法的封装。

系统设置
- 平台内置了一套系统设置模块,页面文件存放在src\view\system目录下,包括登录页、机构管理、角色管理、菜单管理、用户管理、日志管理、流程配置、数据字典这些页面,开发者可以根据自己的需求对自行调整。

后端二次开发
技术栈
技术 | 描述 |
---|---|
SpringBoot | Spring 框架的快速开发框架,用于简化基于 Spring 的应用程序开发。 |
MybatisPlus | MyBatis 的增强工具,简化了 MyBatis 的开发,提供了更加便捷的 CRUD 操作。 |
Swagger | API 文档生成工具,可以通过注解方式生成接口文档,提供接口测试和可视化。 |
Druid | 阿里巴巴开源的数据库连接池和监控框架,提供了强大的数据库连接管理和监控功能。 |
PostgreSQL | 开源的对象关系型数据库管理系统,具有高度可扩展性和符合 ACID 事务的特性。 |
MySQL | 开源的关系型数据库管理系统,被广泛应用于 Web 应用程序开发中,易用且稳定。 |
达梦 | 达梦数据库是国产的关系数据库管理系统,具有较好的性能和可扩展性。 |
人大金仓 | 人大金仓数据库是中国人民大学开发的关系型数据库管理系统,适用于国内企业需求。 |
开发环境准备
- Java 8
- ApacheMaven 3
- Spring Boot 2.4.4
- MybatisPlus 3.4.0
- Druid 1.1.23
- Mysql 8.0 / PostgreSql 42.2.2
代码目录
目录名 | 描述 |
---|---|
common | 工具类 |
└── config | 全局配置 |
└── constant | 通用常量 |
└── exception | 通用异常 |
└── util | 通用类处理 |
flowable | 流程相关 |
viewModel | 视图模型相关 |
resource | |
└── lib | 内置服务jar包 |
└── processModels | 流程相关xml配置 |
└── mapper | 持久层xml |
核心技术
系统内置功能
- 用户管理:用户是系统操作者,该功能主要完成系统用户配置。
- 机构管理:配置系统组织机构
- 角色管理:角色菜单权限分配,角色权限标识
- 菜单管理:配置系统菜单,操作权限,权限标识等。
- 字典管理:对系统中经常使用的一些较为固定的数据进行维护。
- 日志管理:系统正常操作日志记录和查询;系统异常信息日志记录和查询。
内置服务jar
内置服务 | jar | 描述 |
---|---|---|
公共内置服务 | common.jar | 系统内置基础配置 |
系统设置内置服务 | systemSetting.jar | 系统内置基础功能 |
地图内置服务 | basisPlatform.jar | 系统内置地图相关工具 |
流程内置服务 | process.jar | 系统内置流程相关工具及配置 |

内置自定义注解
RepeatSubmit
防止重复提交注解 (url、参数相同且请求时间间隔在10秒内) 返回值 code 500, msg:请勿重复提交 示例:
Permission
接口权限注解(菜单、角色中可配置对应的权限标识) 参数:method(权限方法) 、permission(权限标识) 无权限返回值:code 500, msg:接口无权限
示例:
SystemLogAnnotation
系统操作日志注解 参数:module(模块)、operation(操作)、logType(类型) 示例:
内置自定义异常 BizRuntimeException
throw new BizRuntimeException("信息不完整"); 异常返回值:code 300, msg:信息不完整 示例:
内置基础数据模型公共接口
Po 实体类
- 使用mybatisplus相关注解标识表及字段相关信息。继承BaseEntity
Controller
- 继承BaseController实现类,内置基础的增删改查等相关接口。开箱即用
Service
- 继承BaseService的实现类,内置动态查询及增删改方法,灵活使用。
Mapper
- 继承mybatisplus的BaseMapper接口