昆山网站优化建设,网站中图片加水印,微信开发者平台取消授权,注册资金100万的公司要多少钱背景
有些业务场景需要产品或运营去配置JSON数据提供给开发去使用#xff08;后面有实际业务场景的说明#xff09;#xff0c;原有的业务流程#xff0c;非开发人员#xff08;后面直接以产品指代#xff09;把数据交给开发#xff0c;再由开发去更新JSON数据。对于产…背景
有些业务场景需要产品或运营去配置JSON数据提供给开发去使用后面有实际业务场景的说明原有的业务流程非开发人员后面直接以产品指代把数据交给开发再由开发去更新JSON数据。对于产品来说直接接触JSON数据并不友好一是搞不懂JSON二是容易出错影响现网数据。
基于此要解决2个方面的问题
如何让产品也能更友好地去配置各类数据如何尽可能减少数据错误
表单也许是个可以接受的方案有标题、有各类交互的UI组件…比直接让产品直接在Monaco Editor手写JSON来的好一点表单本身也支持数据校验是否必填、最大值最小值、数据格式、正则匹配…
而且对于表单这类UI来说无论是react、vue都有很多比较成熟的基于JSON Schema的表单UI库比如阿里开源的一站式中后台表单解决方案form-render上述需要的功能基本都有了接入也方便。
优点
通过表单UI完成数据配置的交互更容易被非开发人员接受。配置JSON Schema的时候开发可以根据各个字段规范编辑好校验逻辑在配置数据的时候就能直接检查出错误类似于typescript在编译时会执行静态类型的检查。交互约束保护数据结构避免误操作破坏数据结构导致线上数据出现问题。有效保护数据安全比如给产品提供个Checkbox去勾选需要的数据总比让产品直接写一个数组要好得多。自定义表单组件如form-render的widget开发可以自定义表单组件功能型组件如CDN图片上传裁剪组件、链接生成组件、数据预填充组件指先填写部分字段再拉从后台拉取其他相关的数据填充到表单内如输入某个用户的uin组件会自动拉取到这个uin相关的个人信息填到表单中
功能
后台
提供cdn和请求接口两种拉取方式
CDN
CDN的速度好一点对服务器压力也没那么大并且能够缓存下来但在更新上会有延迟需要刷新。所以适用于相对固定的数据。
请求接口
请求接口在速度稍微慢一点但好在数据足够实时并且能够支持数据半配置化。数据半配置化是指后台在接收到表单提交的数据后对部分字段再做一层标准化的处理。
举个例子
现在需要一份每周作者投票数排行榜的数据产品填好或自动生成一些基本字段后如作者们的头像链接、昵称、描述等用户个人信息再给需要实时更新的字段如票数选择相应的标识选项去告知后台这个字段需要后台另外拉取并填充到数据内才能返回给请求方。
需要注意的是选择相应的标识选项这个能力也一般是通过widget开发的但和数据预填充组件的区别在于这个widget主要是为了告知后台去完成相关逻辑填充数据而不是在前端直接拉取数据自动填在表单内如上面提到的用户个人信息可以通过用户uin去拉。
前端
数据列表页
入口页区分测试环境和正式环境可以通过域名或者其他方式区分。
原型图如下 顶部栏
表单id自动生成作为获取数据包括用于描述表单UI的JSON Schema、表单填写的实际数据等的唯一标识创建人备注数据预览展示数据超过xx字数展示部分状态编辑中、发布、已删除当前版本号创建时间类型表单在生成的表单内填写默认在Monaco Editor直接填JSON数据
操作栏
编辑schema跳转表单编辑页如果类型不是表单置灰不可用编辑数据表单页或者数据页取决于创建时怎么选择删除使数据失效历史版本版本记录、版本回退、版本对比高亮、当前版本以数据库数据为准并且通过和CDN链接的数据做对比判断CDN是否更新
表单编辑页
使用fr-generator支持手动导入导出JSON Schema。编辑生成的schema要存储起来用于下次编辑时能够直接显示表单UI同时需要请求数据库数据把数据回填到表单内。
表单页
左侧为表单通过表单id拉取相应的Schema由form-render渲染UI右侧实时展示当前表单的JSON数据。左侧表单数据变更时右侧JSON数据实时更新并高亮差异。同时支持JSON数据导入导出。
数据页
基于Monaco Editor实现适用于开发自己快速填写一些数据使用。
总结
本文主要是介绍背景和功能。
其实还有很多细节没有讲比如后台接口的数据结构是如何定义的使其能够支持较为通用的数据如JSON Schema也是用同一个接口去读写读写需求后台服务又是如何实现的具体用的什么技术栈平台的权限管理又是如何实现等细节。
同时很多问题也值得思考比如如何对正式环境和测试环境的数据做隔离能否用表单hook的方式替代掉数据预填充组件使其更简洁易扩展如何实现不同表单之间的数据联动等相关问题。
后续还会有其他文章去聊一下这些细节和问题。
