首页 > 其他分享 >企业级自定义表单引擎解决方案(十五)--前端开源说明

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

时间:2022-10-28 18:01:21浏览次数:113  
标签:本地 自定义 -- 前端 表单 https 企业级 com

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

标签:本地,自定义,--,前端,表单,https,企业级,com
From: https://www.cnblogs.com/spritekuang/p/16836934.html

相关文章

  • git 合并分支 merge
    git分支开发git分支开发,分支(feature)同步主干(master)代码,以及最终分支合并到主干的操作流程 由于rebase执行速度慢,分支同步主干代码时,分支的每次提交都可能和主......
  • window.opera是什么
    https://zhidao.baidu.com/question/186790434.html这是JavaScript语言,是opera5开始有的一个脚本object,一个boolean的值,用来检察浏览器是否是operaopera浏览器:Opera(欧朋)......
  • DHCP
    写在前面:讲完那些网络基础的理论知识,大家别嫌那些文字枯燥无味的,想要进入到某个技术行业,从一个小白到入门、到可独自负责项目、到技术大佬,这一节节的门槛,都是充满了枯燥的......
  • CSS 中 px、rem 与 em
    em整理:任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择......
  • C# Linq判断集合中的某个字段是否有重复
    C#Linq判断集合中的某个字段是否有重复 //orderList中的SellerID是否有重复boolsellerIDIsRepeat=orderList.GroupBy(i=>i.SellerID).Where(g=>g......
  • 光伏抄表-分布式光伏电站系统的主要设备及作用
    分布式光伏系统的主要设备及作用 建筑屋顶光伏发电系统光伏组件、光伏组件支撑系统、电缆及电缆通道、直流汇流箱(选用)、逆变器、直交流配电柜、升压变压器、升压开关站......
  • 模拟腾讯返回的json数据
     模拟腾讯返回的json数据 $(document).ready(function(){$("#SubmitButton").click(function(){alert("ajax准备......
  • AI车辆识别视频融合平台EasyCVR告警预案如何关联国标通道?
    在前期的文章中我们介绍了关于EasyCVR平台新增的告警预案功能及开发流程,今天我们来分享一下如何将告警预案关联国标通道。告警预案可以根据告警类型、告警级别、告警方式......
  • iOS开发应用上传AppStore的步骤
     原文:http://blog.csdn.net/ayangcool/article/details/46647693 前言:作为一名IOS开发者,把开发出来的App上传到AppStore是必须的。下面就来详细介绍下具体流程。1.......
  • 腾讯返回json数据转换
     腾讯返回json数据转换 #region----远程获取微信小程序二维码的流----///<summary>///远程获取微信小程序二维码的流///</summary>......