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

• 一直做后端开发，前端还真不是强项，半桶水的样子，好在现在前端框架和组件层出不穷，基本上勉强可以上路。
• 自定义表单对前端要求非常高，技术上的难度不亚于后端，而且要考虑扩展性、性能，对于扩展性的设计要求非常高，比如你做一个按钮点击事件，就要考虑文本框、下拉框的值改变事件，再比如界面上的参数来源，可以从其他界面传入，也要考虑从菜单传入或者其他规则传入，总之就是要穷举所有你能够想到的，那么就注定了研发自定义表单是不断完善的一个过程，且对组件化设计要求非常高。
• 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 ）