动态表单设计

news2024/9/19 10:57:39

动态表单设计

      • 背景
        • 方案讨论
        • 基于上面分析,对比调研,自定义动态表单
        • 数据模型
        • 表单详解
          • (一) 表单模板:jim_dynamic_form
          • (二)表单数据类型:jim_form_data_type
          • (三)表单字段定义:jim_form_column
          • (四)表单数据记录:jim_form_data
          • (五)表单数据统计:jim_form_data_detail
        • 自定一组件
        • 总结

背景

实现动态表单功能,支持表单自定义并实现后期的数据统计、分析。
在这里插入图片描述

方案讨论

  • 一 、基于非结构化的Json。
    • 优点:通过NoSql的mongdb存储可以减少json解析的复杂度及资源损耗,可以提高效率。
    • 缺点:非结构化的Json,模板定义和表单数据值存在一起,后期的数据分析非常困难。解决不了非结构化数据分析的根本问题。
{
        "item": [
            {
                "repeats": 0,
                "childType": "text",
                "itemType": 1,
                "updateDate": "1619599422000",
                "max": 0,
                "prefix": "1",
                "readOnly": 0,
                "optionRepeats": 0,
                "qtId": "584824102494277632",
                "sectionId": "584824208362704896",
                "type": "string",
                "required": 0,
                "itemId": "569271103424434176",
                "score": 0,
                "sequence": 1,
                "configRes": {
                    "childType": "text",
                    "configContent": "{\"childType\":\"text\",\"max\":0,\"showTypeName\":\"¶àÐÐÎı¾Ìâ\",\"typeName\":\"×Ö·û´®\",\"characterLimit\":\"none\",\"textType\":\"string\",\"type\":\"string\",\"categoryName\":\"ÎÒµÄÌâ¿â\",\"min\":0,\"showType\":\"text\",\"id\":\"569271103424434176\",\"text\":\"ÐÕÃû\",\"categoryId\":\"1371773393070960641\"}",
                    "textType": "string",
                    "characterLimit": "none"
                },
                "linkId": "ab108b9f-86ae-43c7-885c-9eb3de2935e9",
                "min": 0,
                "showType": "text",
                "sectionItemRId": "1387326646303043586",
                "id": "1387326646303043586",
                "text": "ÐÕÃû",
                "createDate": "1619599422000",
                "status": 1
            },
            {
                "repeats": 0,
                "arrayType": "1",
                "itemType": 1,
                "updateDate": "1619599422000",
                "prefix": "2",
                "readOnly": 0,
                "optionRepeats": 0,
                "qtId": "584824102494277632",
                "sectionId": "584824208362704896",
                "type": "choice",
                "required": 0,
                "itemId": "569271034725928960",
                "score": 0,
                "sequence": 2,
                "configRes": {
                    "configContent": "{\"arrayType\":\"1\",\"optionValue\":\"ÄÐ | Å®\",\"showTypeName\":\"µ¥Ñ¡Ìâ\",\"optionList\":[{\"defaultStatus\":\"0\",\"itemId\":\"569271034725928960\",\"sequence\":1,\"code\":\"0\",\"detailedStatus\":\"0\",\"display\":\"ÄÐ\",\"itemOptionId\":\"569271034797232128\"},{\"defaultStatus\":\"0\",\"itemId\":\"569271034725928960\",\"sequence\":2,\"code\":\"1\",\"detailedStatus\":\"0\",\"display\":\"Å®\",\"itemOptionId\":\"569271034797232129\"}],\"typeName\":\"Ñ¡Ôñ\",\"showType\":\"choice\",\"id\":\"569271034725928960\",\"text\":\"ÐÔ±ð\",\"type\":\"choice\",\"categoryName\":\"ÎÒµÄÌâ¿â\",\"categoryId\":\"1371773393070960641\"}"
                },
                "linkId": "2ddd6ba5-394b-4634-9802-099ce64eb3b0",
                "showType": "choice",
                "sectionItemRId": "1387326646324015106",
                "id": "1387326646324015106",
                "text": "ÐÔ±ð",
                "createDate": "1619599422000",
                "option": [
                    {
                        "value": {
                            "defaultStatus": "0",
                            "code": "0",
                            "detailedStatus": "0",
                            "display": "ÄÐ",
                            "itemOptionRId": "584824208413036544"
                        }
                    },
                    {
                        "value": {
                            "defaultStatus": "0",
                            "code": "1",
                            "detailedStatus": "0",
                            "display": "Å®",
                            "itemOptionRId": "584824208429813760"
                        }
                    }
                ],
                "status": 1
            },
            {
                "repeats": 0,
                "itemType": 1,
                "updateDate": "1619599422000",
                "prefix": "3",
                "type": "integer",
                "required": 0,
                "score": 0,
                "min": 0,
                "showType": "text",
                "id": "1387326646361763842",
                "text": "ÄêÁä",
                "createDate": "1619599422000",
                "childType": "number",
                "max": 0,
                "readOnly": 0,
                "optionRepeats": 0,
                "qtId": "584824102494277632",
                "sectionId": "584824208362704896",
                "itemId": "569271835015909376",
                "sequence": 3,
                "configRes": {
                    "childType": "number",
                    "configContent": "{\"childType\":\"number\",\"max\":0,\"showTypeName\":\"¶àÐÐÎı¾Ìâ\",\"typeName\":\"ÊýÖµ\",\"isSlide\":\"0\",\"type\":\"integer\",\"categoryName\":\"ÎÒµÄÌâ¿â\",\"min\":0,\"showType\":\"text\",\"numericType\":\"1\",\"id\":\"569271835015909376\",\"text\":\"ÄêÁä\",\"decimal\":0,\"categoryId\":\"1371773393070960641\"}",
                    "numericType": "1"
                },
                "linkId": "566122e3-4fb3-4fcb-8b44-2288f4ed1eea",
                "sectionItemRId": "1387326646361763842",
                "decimal": 0,
                "status": 1
            }
        ],
        "linkId": "982cb230-5381-419a-83af-916f66392824",
        "sectionId": "584824208362704896",
        "text": "·Ö×é1",
        "type": "group"
    }
  • 二 、基于jeecg/ruoyi-低代码开发平台
    • 比较固定的样式 和表定义
    • 针对自己需求坐二次开发改动较大
    • 表比较多涉及功能广,跟原需求出入较大,不好扩展。

基于上面分析,对比调研,自定义动态表单

  • 自定一表单数据结构。
  • 内容展示如有必要行转列。

数据模型

在这里插入图片描述

表单详解

select * from jim_dynamic_form where form_name = '调研问卷A'; -- 表单-调研问卷A
select * from jim_form_data_type ; -- 表单-数据类型

select * from jim_form_column where form_id = 1; -- 表单-调研问卷A的定义

select * from jim_form_data where form_id = 1 and data_id = 1 ; -- 表单-调研问卷A的数据记录1

-- 表单数据统计
select 
(select data_value from jim_form_data_detail where data_id = t.data_id and column_id = 1) as `姓名`, 
(select data_value from jim_form_data_detail where data_id = t.data_id and column_id = 2) as `年龄`,
(select data_value from jim_form_data_detail where data_id = t.data_id and column_id = 3) as `性别`,
(select data_value from jim_form_data_detail where data_id = t.data_id and column_id = 4) as `出生日期`
 from jim_form_data t where t.form_id = 1 and t.data_id = 1 ;
(一) 表单模板:jim_dynamic_form

在这里插入图片描述

(二)表单数据类型:jim_form_data_type

在这里插入图片描述

(三)表单字段定义:jim_form_column

在这里插入图片描述

(四)表单数据记录:jim_form_data

在这里插入图片描述

(五)表单数据统计:jim_form_data_detail

在这里插入图片描述

自定一组件

  • 前端根据题目类型自定义组件
  • 后端根据题目类型用策略模式校验各种类型

总结

  • 这样有统计功能的简单动态问卷就可以了
  • 展示时可能某些场景需要行转列。
  • 大概估摸使用的话有可能jim_form_data_detail表的记录数比较大,后期再考虑数据或者表迁移或拆分。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/988788.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端面试经典题--页面布局

题目 假设高度已知&#xff0c;请写出三栏布局&#xff0c;其中左、右栏宽度各为300px&#xff0c;中间自适应。 五种解决方式代码 浮动解决方式 绝对定位解决方式 flexbox解决方式 表格布局 网格布局 源代码 <!DOCTYPE html> <html lang"en"> <…

vue优化首屏加载时间优化-gzip压缩

前言 为什么要进行首屏加载优化&#xff0c;因为随着我们静态资源和第三方包和代码增加&#xff0c;压缩之后包会越来越大 随着网络的影响&#xff0c;在我们第一输入url请求资源时候&#xff0c;网络阻塞&#xff0c;加载时间长&#xff0c;用户体验不好 仔细观察后就会发现…

解锁在线教育新机遇|V-More在线教育行业沙龙圆满落幕!

AIGC技术的渗透&#xff0c;也将为在线教育领域带来新的模式创新。面对以上增长机遇与潜在挑战&#xff0c;在线教育企业想要做好用户增长和技术降本并不简单。 9月1日&#xff0c;由火山引擎、AMD与msup联合举办的在线教育行业私享会成功举办&#xff0c;40余位在线教育行业的…

如何利用ProcessOn 做资产管理流程图

资产管理 是一家公司最重要的管理活动。好的资产管理可以让资源最优化利用&#xff0c;实现资产价值的最大化。可以帮助组织管理和降低风险。同时当需要决策的时候&#xff0c;对资产数据进行分析和评估&#xff0c;也可以帮助做出更明智的决策&#xff0c;如优化资产配置、更新…

YOLOV7改进-添加P2和P6检测层(以YOLOV7-Tiny为例)

下载三个配置文件地址 1、加p6 1、配置文件添加 2、让它自己利用k-means算法进行聚类 3、如果从8或9出来&#xff0c;在这里改 完整

NoUniqueBeanDefinitionException: expected single matching bean but found 2

文章目录 前言一、错误现象二、原因分析三、解决办法总结 前言 看到这个错误,大致也能猜出错误的原因,就是spring中注入的bean重复了,本来应该是单利的bean,但是现在却找到了两个,那么导致这个问题的原因是什么?如何解决呢? 一、错误现象 运行项目或者运行junit测试,直接报…

修改Docker镜像默认下载地址

1、安装完docker desktop后&#xff0c;先不要打开 2、新建目录 D:\ProgramData\Docker 3、在C:\Users\你的用户名\AppData\Local下&#xff0c;打开cmd或者powershell执行以下命令&#xff0c;命令语法略有不同。 powershell命令&#xff1a; cmd /c mklink /J Docker D:\Pro…

知识图谱实战应用27-基于多模态数据的洪涝灾害知识图谱构建与实际应用

大家好,我是微学AI,今天给大家介绍一下知识图谱实战应用27-基于多模态数据的洪涝灾害知识图谱构建与实际应用。今年以来,很多省份都经历了暴雨肆虐,并造成了洪涝灾害,洪涝灾害是一种常见而严重的自然灾害,对人类社会和环境造成了巨大的影响。为了有效地应对洪涝灾害,构建…

Foxboro FBM232 P0926GW以太网通信模块

以太网通信&#xff1a;FBM232 P0926GW 模块支持以太网通信&#xff0c;可用于与其他设备、传感器、执行器和监控系统进行数据交换。 通信协议&#xff1a;模块通常支持多种通信协议&#xff0c;如Modbus TCP/IP、EtherNet/IP 等&#xff0c;以便与不同类型的设备和系统进行通…

3.xaml Label TextBox PasswordBox Button

1. Label TextBox PassWordBox Button a.运行图片 b.Xaml源码 <Grid><!--VerticalAlignment 控件竖直--><!--HorizontalAlignment 控件水平--><!--VerticalConte

etcd选举源码分析和例子

本文主要介绍etcd在分布式多节点服务中如何实现选主。 1、基础知识 在开始之前&#xff0c;先介绍etcd中 Version, Revision, ModRevision, CreateRevision 几个基本概念。 1、version 作用域为key&#xff0c;表示某个key的版本&#xff0c;每个key刚创建的version为1&#…

切片机制和MR工作机制

InputFormat基类 TextInputFormat&#xff1a;TextInputFormat是默认的FileInputFormat实现类。按行读取每条记录。键是存储该行在整个文件中的起始字节偏移量&#xff0c; LongWritable类型。 CombineTextInputFormat&#xff1a;CombineTextInputFormat用于小文件过多的场景…

什么是正向代理和反向代理

一、什么是正向代理 正向代理&#xff08;Forward Proxy&#xff09;是一种代理服务器&#xff0c;它位于客户端和服务端之间&#xff0c;代表客户端向其他服务器发送请求。 一般使用的场景就是&#xff0c;当客户端无法直接访问某些资源时&#xff0c;可以通过正向代理来访问…

QML实现文件十六进制数据展示

前言 将一个二进制文件直接拖放到Qt Creator中可以直接查看到以十六进制显示的数据格式&#xff0c;如&#xff1a; 要实现一个这样的效果&#xff0c;还是要花不少时间的。 在网上找了挺多示例&#xff0c;其中一个开源代码效果不错&#xff08;参考这里&#xff09;&#…

Linux:【Mysql】Centos7安装mysql8.0

目录 一、环境及版本介绍 二、安装前准备 三、开始安装 一、环境及版本介绍 Linux环境&#xff1a;Centos7 Mysql版本&#xff1a;8.0.26 安装时使用的用户&#xff1a;root 二、安装前准备 1.1、下载Centos7镜像 网上寻找相关资源即可 1.2、下载VMwareWorkstation Pro并…

cpolar内网穿透

目录 一、引言二、什么是cpolar三、内网穿透四、如何使用cpolar1、下载cpolar软件安装包2、注册cpolar账号3、使用cpolar 一、引言 当我们完成了一个tomcat的web项目之后&#xff0c;如果我们想让其他电脑访问到这个项目&#xff0c;我们可以让其他电脑和本机连接到同一个局域…

python如何学习

功能如此强大、高效的Python&#xff0c;却非常的简单好学&#xff0c;这让学它的同学爱不释手&#xff0c;也让越来越多的互联网企业开始用Python来做主要的开发语言&#xff0c;比如谷歌、Facebook&#xff08;现Meta&#xff09;、豆瓣、知乎等知名互联网公司都在使用Python…

idea2018修改大小写提示(敏感)信息

操作步骤如下&#xff1a; File > Settings > Editor > Code Completion > Code Completion&#xff08;默认是首字母&#xff0c;选为none将不区分大小写&#xff09;

花生壳内网穿透+Windows系统,如何搭建网站?

1. 准备工作 在百度搜索“Win7下安装ApachePHPMySQL”&#xff0c;根据搜到的教程自行安装WAMP环境。 如果在网页上键入http://127.0.0.1/ 出现以下页面表示您的服务器已经建好&#xff0c;下一步就是关键&#xff0c;如何通过花生壳内网穿透&#xff0c;让外网的用户访问到您…