动态高可配置表单设计

2018-06-14 admin

demo: 表单配置 clipboard.png 校验配置 clipboard.png 属性流flow配置 clipboard.png 生成表单交互 图片描述

技术栈: vue+elementui+springboot+mybatis+mysql

特性:

  1. 支持自定义属性
  2. 支持基于async-validator的值校验
  3. 支持父子属性
  4. 支持属性流程设置
  5. 支持多值

数据库设计:

图片描述

期望:

  1. 校验支持flow属性
  2. 自动填表 表单项联动监听
  3. 减少递归函数
  4. 性能优化,懒加载可行性
  5. 移动端支持

值得探讨的问题:

  1. 为什么 子属性(childrenAttr) 不和 流程属性(flowAttr) 合并?

理论上childrenAttr属于元属性,作为主体的基本属性必须存在,即便值为空,而flowAttr是动态的,不一定会存在

2.flowAttr为什么要通过json string 类型存储? 前期的设想是想按照id->value的方式存储,但这样很难找到原有的对应关系,因为数据库读取时批量的

原文链接:https://segmentfault.com/a/1190000015287014

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-34023.html

文章标题:动态高可配置表单设计

相关文章
详细解读AngularJS中的表单验证编程
需求 Name 必填 Username 非必填,最小长度3,最大长度8 Email 非必填,但必须是合法的email 验证未通过的表单不能提交 显示一个必填或者非法email格式的错误信息 如果正确提交就弹出一个祝贺信息 现在知道我们的...
2017-03-25
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
深入分析JSON编码格式提交表单数据
以JSON编码格式提交表单数据是HTML5对WEB发展进化的又一大贡献,以前我们的HTML表单数据是通过key-value方式传输的服务器端,这种形式的传输对数据组织缺乏管理,形式十分原始。而新出现的JSON格式提交表单数据方法,将表单里的...
2017-03-25
javascript框架设计之类工厂
类与继承在javascript的出现,说明javascript已经达到大规模开发的门槛了,在之前是ECMAScript4,就试图引入类,模块等东西,但由于过分引入太多的特性,搞得javascript乌烟瘴气,导致被否决。不过只是把类延时到E...
2017-03-24
JavaScript实现动态添加,删除行的方法实例详解
本文实例讲述了JavaScript实现动态添加,删除行的方法。分享给大家供大家参考。具体如下: <html> <head> <meta http-equiv="Content-Type&q...
2017-03-27
JavaScript实现DIV层拖动及动态增加新层的方法
本文实例讲述了JavaScript实现DIV层拖动及动态增加新层的方法。分享给大家供大家参考。具体分析如下: 无刷新添加一个新的DIV层,并可实现的该层的拖动,鼠标拖动层可移动位置,将JS部分另存为一个新文件,用到的时候从外部引入,这个拖动...
2017-03-23
JavaScript实现仿网易通行证表单验证
介绍一下表单验证,不错哦: 如图 CSS代码 @charset "gb2312"; /* CSS Document */ body,dl,dt,dd,div,form {padding:0;ma...
2017-03-23
JS使用ajax从xml文件动态获取数据显示的方法
本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下: 下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新 <!DOCTYPE html> <htm...
2017-03-21
详细分析使用AngularJS编程中提交表单的方式
在AngularJS出现之前,很多开发者就面对了表单提交这一问题。由于提交表单的方式繁杂而不同,很容易令人疯掉……然而现在看来,依然会让人疯掉。 今天,我们会看一下过去使用PHP方式提交的表单,现在如何将其转换为使用Angular提交。使用...
2017-03-25
jquery实现动态改变div宽度和高度
完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...
2017-03-23
回到顶部