Skip to content

前端二次开发

技术栈

技术描述
Vue3Vue.js 是一款轻量级、高性能的 JavaScript 框架,用于构建交互式 Web 界面。
ViteVue.js 官方提供的新一代前端构建工具,旨在提供快速的开发体验。
Vue-RouterVue.js 官方的路由管理器,用于实现单页面应用中的页面跳转和路由管理。
PiniaPinia 是一个基于 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目录下,包括登录页、机构管理、角色管理、菜单管理、用户管理、日志管理、流程配置、数据字典这些页面,开发者可以根据自己的需求对自行调整。

后端二次开发

技术栈

技术描述
SpringBootSpring 框架的快速开发框架,用于简化基于 Spring 的应用程序开发。
MybatisPlusMyBatis 的增强工具,简化了 MyBatis 的开发,提供了更加便捷的 CRUD 操作。
SwaggerAPI 文档生成工具,可以通过注解方式生成接口文档,提供接口测试和可视化。
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接口

版权所有:武汉浮木科技有限公司