企业级自定义表单引擎解决方案(十五)--前端开源说明

时间:2022-10-28 18:08:48
  • 一直做后端开发,前端还真不是强项,半桶水的样子,好在现在前端框架和组件层出不穷,基本上勉强可以上路。
  • 自定义表单对前端要求非常高,技术上的难度不亚于后端,而且要考虑扩展性、性能,对于扩展性的设计要求非常高,比如你做一个按钮点击事件,就要考虑文本框、下拉框的值改变事件,再比如界面上的参数来源,可以从其他界面传入,也要考虑从菜单传入或者其他规则传入,总之就是要穷举所有你能够想到的,那么就注定了研发自定义表单是不断完善的一个过程,且对组件化设计要求非常高。
  • vue和angular都有用过,最开始尝试用angular来做,但做技术调研的时候,发现他的动态组件,动态属性绑定这些很死,很难随心所欲的动态加载渲染组件,动态应用一些属性,于是不得不放弃,转向用vue来实现,选择的前端开发框架是ant vue.
  • 对于性能这块来说,做自定义表单,不能影响前端性能,不然基本没什么意义,至少和传统码代码的方式比不能差太多,对于自定义表单来说,渲染过程比较简单,当用户打开界面时,找到界面的表单定义信息(Json数据,且是最新的数据),根据界面信息动态渲染界面,动态渲染是vue做的事情,这个改变不了,那么找到最新的表单定义信息就是比较影响性能的地方了。对于这块来说,后端和前端都采用缓存的方式实现,后端缓存到内存中,前端把表单定义信息存储到indexdb中,绝大多数是从本地数据里面取的,只有在第一次获取表单定义数据和数据变更之后,才会从后端拿取数据,再存储到indexdb中,这样在生产环境,这块的性能损失基本就比较小了。
  • 前端开始采用的是单点登录,但用户部门等基础数据、消息通知、Job、登录等都是调用远程服务器上的服务,而自定义表单调用的本地服务,因此会有一些问题,所以把单点登录去掉了,改为密码模式登录,拿到Token去请求接口,Token过期设置的是24小时,暂时还没有做Token刷新。
  • 前端除自定义表单外,其他都是调用的远程服务器接口,自定义表单接口调用的是本地启动的后端项目接口,自定义表单前后端代码都可以本地调试。

使用说明
后端

  1. git切换到dev版本
  2. 后端VS打开项目文件 > 03_form\CK.Sprite.Form\CK.Sprite.Form.sln
  3. 设置CK.Framework.HttpApi.Host为启动项目,直接运行项目,数据库连接信息已经在配置文件appsettings.json里面,可用其他数据库连接工具直接打开(外网公共的数据库资源,请不要乱操作数据库,定时还原)

前端

  1. 运行前,确定VUE_APP_Form_URL变量是否与后端启动的端口一致
  2. yarn install
  3. yarn serve 或者 npm run serve(如果第一次运行报错,退出之后再次运行即可)
  4. 如果不需要运行后端,请将VUE_APP_Form_URL参数改为http://47.108.141.193:8031 站点由之前的SSO改为密码Token认证,后端项目认证直接接入47.108.141.193:8031认证服务器 认证服务、基础数据、流程引擎、消息中心、Job管理等都是调用的47.108.141.193部署的站点,自定义表单部分运行的代码直接调用本地启动项目。
  5. 自定义表单将所有表单定义信息都存储到本地缓存的,部署的开源站点和本地的站点都是连接的同一个数据库,但采用了Redis的发布订阅功能,只要在任何地方改变了表单定义信息,其他地方都会自动刷新本地站点的内存中的表单定义信息。

运行演示

企业级自定义表单引擎解决方案(十五)--前端开源说明

 

 


 

wike文档地址:https://gitee.com/kuangqifu/sprite/wikis/pages
后端开源地址:https://gitee.com/kuangqifu/sprite

前端开源地址:https://gitee.com/kuangqifu/spritefronts
体验地址:http://47.108.141.193:8031 (首次加载可能有点慢,用的阿里云最差的服务器)
自定义表单文章地址:https://www.cnblogs.com/spritekuang/
流程引擎文章地址:https://www.cnblogs.com/spritekuang/category/834975.html (采用WWF开发,已过时,已改用Elsa实现,https://www.cnblogs.com/spritekuang/p/14970992.html )