动态可配置表单的设计构思

简介:

1、引言

   在浏览网站的时候,我们经常会提交一些信息,这些信息也被叫做“表单”,提交信息专业一点也叫做提交表单。

   通常会提交的信息就是注册信息,登录信息,登陆之后还需要提交详细的个人信息,其中就会包括学历,地址,项目经验等等。

   还有就是在电商网站,我们还会提交订单,添加收藏,添加购物车。

   在网络中,我们每天都会遇到各种各样的表单,随着网络的普及,信息化的普及,很多信息都是通过网络提交的,我们会频繁的和表单打交道。


那么什么是表单呢?

   表单指的是用户在页面中填写的信息的总和,也是填写的信息项的总和。表单的主要作用是收集信息。


   在百度百科中是这么解释的。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:

1、表单标签;

2、表单域,包含了文本框、密码框、隐藏域多行文本框复选框单选框、下拉选择框和文件上传框等;

3、表单按钮。



2、表单的设计

2.1、静态表单

   表单所有的表单项事先已经固定,比如说有多少个表单项,每一项都是什么类型,那些需要不会再前台显示,这些表单项的排序,显示的控制,大多是固定的。

   在应用开发完成之后,如果需要修改表单项,比如说增加表单项,调整表单项的显示位置。表单项分组显示,分组控制。这些都会需要修改代码,甚至是修改数据库才能满足要求。

   所有人都希望表单是动态的,动态管理表单项。


2.2、动态表单

2.2.1、第一种




优点:

   简单明了。

   配置简单。


缺点:

   表单信息没有分类,不便于显示控制。比如说个人信息中的基本信息,学历信息,联系信息,不能动态的分块显示。

   属性不能复用。比如说学历信息,联系信息,其实个人表单和企业表单,甚至其他表单也会用到,没有必要重复配置。


2.2.2、第二种



缺点:

   没有支持表单的模板化。


优点:

   配置更灵活,不复杂。

   支持属性组的复用。比如说学历信息属性组,联系方式属性组。

   属性组可以排序,控制显示。


2.2.3、第三种



缺点:

   配置复杂,稍显冗余。

   不容易理解。


优点:

   灵活,强大。

   最大化支持动态表单的动态配置需要。

   相同表单,支持多个模板,支持启用与禁用模板。


2.3、静态+动态

   部分静态表单+动态表单


3、总结

   以上是我设想的三种动态表单的实现方式,图中是数据存储的简单表述。

   如果大家有其他的方式,也请留言。如果允许,我将会补充在本文的后面。

   共享出来,可以帮助更多的人,让我们一起努力,将动态表单的实现设计的更好更强大。


后记


2013-09-03 14:40

动态表单的设计,除了要考虑存储,还要考虑查询。保存的数据如何查询,因为原来是列级别的数据,现在都被行化了。

举个例子:开始我们会设计一张表,有姓名列,性别列,简介列。但是现在是姓名行,性别行,简介行。如果是关系数据库,原来的常规查询SQL都会失效,怎么办呢?是用特殊方式实现,还是将这些数据导出到常规数据库设计中,用老方法查询。

这可能会用到OLTP(在线联机事务处理)和OLAP(在线联机分析处理)的概念。

还有一种办法,就是讲应用分为两个部分,命令与查询。命令包括:增删改,是对数据的维护。查询就是获取数据,可能包括各种获取接口,获取参数,获取维度。这方面比较有名的就是CQRS(Command Query Responsibility Segregation命令查询职责分离)。可以将它扩展到系统设计上来。


还有就是Field的类型众多,有一些类型的储存还是需要琢磨一下的。常规的单行文本也就是直接存储一个值就可以了,单多选类型需要存储的是key,尤其是都选,需要存储的是多个选中项的key,多个的个数是不定的,这些key是存储在一列中,还是用行来存储,这也是一个挠头的地方!!!


其实个人还有一个想法。#数据库#CRUD,create,read,update,delete到底是不是增删改查呢?我想大家对于其中的read是否等于差是有一些疑惑的!read按照字面来说就是读取,读取和查询还是有区别的吧。个人觉得读取!=查询,read只是单个数据的获取,查询是有条件的多行数据的获取。所以说CRUD不是增删改查,更应该叫做增删改读。


表单项还可能是一个树形的选择项,对于这方面还没有想出好的解决方案。只是觉得应该封装成一个独立控件,对于树形选项的数据加载,选择之后的存储,已经将来的匹配查询,都应该有一整套的封装。比如说精确单编号匹配,多编号匹配,层级匹配等等。


还有一些表单项是单多选是结合的,比如说第一级是只能选择单个,下一级就可以选择多个了。


还有一些树形表单项是只能在叶子节点多选。


单选和多选的表单项的具体项可以从数据源中加载。先设置数据源,也就是一些key/value的键值对,一组,然后再添加单选或者多选表单项的时候,选择数据源来填充表单项。




本文转自 virusswb 51CTO博客,原文链接:http://blog.51cto.com/virusswb/1287768,如需转载请自行联系原作者

目录
相关文章
|
4月前
|
前端开发
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
这篇文章详细介绍了如何在HTML和CSS中设置背景、设计表格、创建表单以及使用框架集,并通过代码示例和测试结果展示了具体的实现方法和效果。
HTML+CSS基础知识(6)背景的设置、表格的设计、表单的设计和框架集
|
4月前
|
数据采集 前端开发 开发者
Angular表单控件详解:掌握模板驱动与响应式表单的精髓,让Web应用中的数据采集工作变得高效又简单,彻底告别繁琐的表单处理流程
【8月更文挑战第31天】表单是 Web 应用的关键组件,用于用户登录、注册及信息提交。Angular 作为成熟前端框架,提供了强大的表单处理功能,包括模板驱动与响应式表单。本文通过技术博客形式,详细介绍这两种表单控件,并提供示例代码,展示如何利用它们简化表单处理流程,提高开发效率。首先介绍简单的模板驱动表单,然后讲解基于 RxJS 的响应式表单,适用于复杂逻辑。通过本文,你将学会如何高效地使用 Angular 表单控件,提升应用的用户体验。
49 0
|
4月前
|
前端开发 JavaScript 机器人
中后台前端开发问题之动态标注组件渲染到界面上如何解决
中后台前端开发问题之动态标注组件渲染到界面上如何解决
37 0
|
6月前
|
编解码 前端开发 JavaScript
带您一步步构建一个基本的动态新闻网站,包括页面布局、样式设计以及交互效果的实现
【6月更文挑战第14天】构建动态新闻网站实战项目,涉及页面布局、样式设计和交互实现。首页采用顶部导航栏、轮播图和新闻列表布局;新闻列表页按分类显示新闻,详情页展示完整内容并可添加相关推荐和评论。设计注重色彩搭配、字体选择和布局间距,实现轮播图效果、导航栏交互和响应式设计,提升用户体验。该项目有助于锻炼HTML和CSS技能,理解网页设计实际应用。
206 1
|
前端开发 API 容器
关于我对表单设计的一点思考—自动化生成表单
关于我对表单设计的一点思考—自动化生成表单
181 0
|
前端开发
3.26前端作业-表格表单的综合应用
3.26前端作业-表格表单的综合应用
95 0
3.26前端作业-表格表单的综合应用
|
存储 自然语言处理 数据可视化
云巧动态表单的国际化方案解密
介绍云巧动态表单以及解决的问题和价值,解密云巧动态表单的国际化能力和整体方案
407 0
|
JSON 前端开发 测试技术
【测试开发】十三、接口测试-接口定义功能-前端-实现动态增删表单
【测试开发】十三、接口测试-接口定义功能-前端-实现动态增删表单
|
前端开发
前端工作总结280-表单验证层级添加
前端工作总结280-表单验证层级添加
99 0
前端工作总结280-表单验证层级添加
|
JSON 运维 JavaScript
《前端那些事》从0到1开发动态表单
前沿:中后台应用中表单需求颇多,左手一个表单,右手又是一个表单,无穷无尽,如果用模版一个个来写,不单写起来费时费力,而且看起来也是天花乱坠,于是这个时候你会去设想,那有没有什么方式可以去替换琐碎的手写表单模版的方式呢?让表单是“配出来”的,而不是撸出来的,让你轻松解决 form 表单,也不再为表单而烦恼。答案就是:动态表单
308 0
《前端那些事》从0到1开发动态表单