动态表单实现原理

news2024/11/23 8:38:07

目录

动态表单是什么

动态表单的关键

前后端职责

数据库与表结构

功能实现与改进建议


动态表单是什么

静态表单是很常见,也是常规做法,其表单的结构是固定的,通常情况下一个表单对应数据库的一张表,表单中一个数据项对应数据表的一个字段。虽然结构固定,但查询和统计方便。

而动态表单,特点是表单的内容项是动态可变的,可轻易的添加和减少表单的内容项,而不需要改动表结构和功能实现。结构灵活,但是不便于查询统计。

例如人员统计表单包含姓名、性别、籍贯、身份证号,对于静态表单,数据表有对应的四个字段,若想为表单增加或减少内容项,就需要修改数据表结构了,而且前后端功能实现也需要变化;对应动态表单,只需对表单的内容项进行配置,即可完成结构变更,不需要改动数据表和功能实现。

动态表单的关键

动态表单的关键,在于前后端达成共识的报文结构规范

前端根据用户的配置生成报文,达到表单动态配置目的;

前端解析报文并组织页面元素,达到表单动态显示的目的。

后台对回收采集的json数据进行解析和聚合,提供数据报表和数据统计功能。

tduck、卷王、erupt的动态表单,皆是如此。

前后端职责

由于已经制定了报文规范,所以服务端不做数据转换,而是直接写入数据库。前后端的职责很明确。

前端实现

  1. 前端通过scheme结构描述一个 表单组件,描述结构大概如下图。

  1. 通过拖拽表单组件到当前编辑区,表单组件样式渲染 也是通过 组件的scheme结构进行渲染的。
  2. 编辑表单组件属性,实际就是修改scheme属性字段。
  3. 保存到服务器接口 也是把当前表单的 scheme描述结构发送到接口进行保存。

数据库与表结构

数据库为MySQL

表单相关表结构

tduck和卷王在表结构方面的对比

tduck表单基础信息、表单组件信息、表单配置信息等分别放在不同的表中。

卷王是用一张表存储表单的所有信息,用不同字段存储组件信息、配置信息等。

功能实现与改进建议

回收数据列表

现有流程

举个例子

回收的用户填写数据 json形式

{"input1688020520318":"xxxxx"}

报表接口查询返回

前端根据表单配置信息,进行表格渲染

改进建议-数据筛选

现状:目前报表功能不支持数据筛选。基于现有数据模型,很难做数据筛选。

解决思路:需要借助其他存储方式,并进行二次开发

其他存储方式可选用:

MongoDB,支持json筛选的数据库

es,支持json存储和搜索

存储流程:

查询筛选流程:

数据统计仪表盘功能

现有流程

回收数据表有独立的几个字段记录了相关数据,如用户使用的设备、用户使用的浏览器、IP地址、填写表单用时。

对回收数据表进行group by查询,即可得到仪表盘的数据。

select 设备,count(1) from 回收表 group by 设备
接口返回分组统计数据,由H5进行渲染。

改进建议-改进

考虑数据量很大的情况,不影响数据库性能,功能支持高qps,可以考虑使用redis进行计数。

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

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

相关文章

物业小程序制作:提升管理效率与服务质量

随着物业管理的日益复杂,物业小程序成为了提高管理效率和提供优质服务的重要工具。物业小程序旨在提供高效的物业管理服务。通过物业小程序,物业公司能够方便地与业主进行信息交流、报修处理等操作。 物业小程序的好处 提高管理效率:物业小程…

暑假第七天打卡

离散: 主析取范式和主合取范式的应用: (1)求公式成真与成假赋值: 化为主析取范式后,下标化为二进制就是成真赋值,不在下标里的就是成假赋值 化为主合取范式后,下标化为二进制就是…

2.Postgresql--array

CREATE TABLE city(country character varying(64),city character varying(64) );INSERT INTO city VALUES (中国,台北), (中国,香港), (中国,上海), (日本,东京), (日本,大阪);select country,string_agg(city,; order by city desc) from city group by countryselect coun…

React native 已有项目升级兼容web

基础 概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 深入理解Webpack及Babel的使用 - 掘金 Introduction to React Native for Web // React Native for Web Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具,它将应用程序所依赖的各…

DynaSLAM2 2020论文翻译

DynaSLAM2:紧耦合的多目标追踪和SLAM 摘要 - 场景刚度的假设在视觉SLAM算法中很常见。但是,它限制了它们在人口稠密的现实环境中的适用性。此外,大多数智力包括自动驾驶,多机器人协作和增强/虚拟现实,都需要对周围环境进行明确的…

Low-Light Image Enhancement via Self-Reinforced Retinex Projection Model 论文阅读笔记

这是马龙博士2022年在TMM期刊发表的基于改进的retinex方法去做暗图增强(非深度学习)的一篇论文 文章用一张图展示了其动机,第一行是估计的亮度层,第二列是通常的retinex方法会对估计的亮度层进行RTV约束优化,从而产生…

Java正则校验:密码必须由字母和数字组成,且大于等于8个字符。

需求 对登录密码进行校验,需要密码必须由字母和数字组成(同时包括数字和数字),且大于等于8个字符。 原理 使用正则表达式校验字符串。 正则表达式构建思路: 字符为数字或字母;不能全是数字&#xff1b…

关于cip.cc查IP出口地址的工具到底准确不准确?

关于 cip.cc 或其他在线IP查询工具的准确性, 首先来看2张图片,分别如下 实际情况就是作者在杭州,使用的网络出口地址应该是百度的,而不是cip.cc所显示的地址。 所以结论是cip.cc并不靠谱,我又查阅了相关资料如下 1.…

Centos7部署nacos集群

一、GitHub下载Nacoc安装包 https://github.com/alibaba/nacos/releases 二、环境准备 1.服务器准备 2、JVAV环境安装 每台服务器都安装 JDK:yum install java-1.8.0-openjdk* -y三、软件安装 1、上传下载好的压缩包导服务目录(自定义/app&#xff…

Spring Scope

Spring中五种 Scope域 singleton,容器启动时创建(未设置延迟),容器关闭时销毁【单例】prototype,每次使用时创建,不会自动销毁,需要调用 DefaultListableBeanFactory.destroyBean(bean) 销毁【…

前端Web实战:从零打造一个类Visio的流程图拓扑图绘图工具

前言 大家好,本系列从Web前端实战的角度,给大家分享介绍如何从零打造一个自己专属的绘图工具,实现流程图、拓扑图、脑图等类Visio的绘图工具。 你将收获 免费好用、专属自己的绘图工具前端项目实战学习如何从0搭建一个前端项目等基础框架项…

小白到运维工程师自学之路 第五十三集 (rsync+inotify备份)

一、概述 Rsync是一个用于在不同计算机之间同步文件和文件夹的工具。它可以在本地计算机和远程服务器之间复制、更新和备份文件。rsync通过比较源和目标文件的差异来最小化传输的数据量,从而提供高效的文件同步功能。 Inotify是Linux内核提供的一种机制&#xff0…

【C++】模板(函数模板与类模板)讲解

本篇文章会对C中的模板进行讲解,其中会对函数模板和类模板进行讲解。希望本篇文章会对你有所帮助。 文章目录 一、函数模板 1、1 模板的引入 1、2 函数模板举例讲解 1、2、1 函数模板的概念 1、2、2 函数模板格式 1、2、3 函数模板实例化 1、2、4 模板参数的匹配原则…

2023下半年软考高级系统架构设计师怎么报名?

软考高级系统架构设计师报名时间: 广西2023下半年软考高级系统架构设计师报名时间:8月15日8:00至8月24日17:00 广东2023下半年软考高级系统架构设计师报名时间:8月16日9:00-8月24日17:00 甘肃2023下半年软考高级系统架构设计师报名时间&am…

恢复idea删除的git本地文件

idea中删除git本地文件无法远程拉取pull已删除文件的问题 当前本地库处于另一个分支中,需将本分支Head重置,git 强行pull并覆盖本地文件 解决方式一: git fetch --all git reset --hard origin/master git pull解决方式二: git…

Docker基础——基础详解

仓库,镜像,容器的关系 Docker镜像 当运行容器时,使用的镜像如果在本地中不存在,docker 就会自动从 docker 镜像仓库中下载,默认是从 Docker Hub 公共镜像源下载 镜像列表 可以使用 docker images 来列出本地主机上的…

vue3,elementPlus和自己封装,点击 新增添加表单,删除表单,提交数据

ElementPlus下的form也有新增表单 如果你写H5等没找到合适的 自己也可以进行封装 实现3个代码讲解:1:ElementPlus的代码 2:自己书写的代码 3:自己把2的代码进行封装 1:ElementPlus的运行效果 点击提交 1:ElementPlus…

jieba和WordCloud

词云图像 import wordcloud import jieba import matplotlib.pyplot as plttext"中华人民共和国是伟大的国家,我最敬爱的祖国啊,你是美丽的花园" textjieba.lcut_for_search(text) text" ".join(text) wwordcloud.WordCloud(width1000,height8…

05 Docker 安装常用软件 (mongoDB)

目录 1. mongoDB简介 1.1 mongodb的优势 2. mongodb的安装 2.1 创建数据文件夹 2.2 备份日志 2.3 配置文件夹 2.4 创建两个文件 ---> 2.4.1 配置如下: 2.5 拉取mongodb 2.6 运行容器 2.7 进入mongodb容器 ---> 2.7.0 高版本(6.0)以上是这样的 , 旧版的没研究 …

我爱学QT--qt的网络编程

学习地址: QT网络编程之TCP通信_哔哩哔哩_bilibili QT网络编程有TCP和UDP。 TCP编程需要用到两个类:QTcpServer和QTcpSocket 本节课目标: 完成一个服务器和一个客户端 首先是经典的几步 先设计ui再设计逻辑实现 多看看写的文件理解吧