EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理

简介: EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理

前面两篇随笔介绍了EAV模型(实体-属性-值)的设计思路和Winform前端对于通用查询的处理,本篇随笔继续深入EAV模型(实体-属性-值)设计的探讨,介绍实体属性的定义,以及根据不同属性的定义构建不同的输入控件处理,以及列表界面的展示。旨在结合关系型数据库的熟练使用、性能优势和MongoDB数据库的弹性化文档处理特点,为低代码的处理方案提供一个实用的思路供参考。

1、实体属性定义

根据实体定义的一些特性,我们设计了下面的定义界面,主要就是对实体类属性的各种类型或者数据关联处理进行更好的维护,以及控制属性的可排序、可查询、是否可用、是否只读、是否隐藏值、是否必填等常规特性。

在通用的列表展示的时候,我们会根据属性的定义信息来统一展现不同的控件以及相关的属性设置,如常规可以根据储存类型来定义不同的控件输入,如文本、多文本、日期、整形、浮点型等数据,进一步还可以绑定下拉列表(动态字典、静态列表或者在字段自身值列表),也可以选择在选择字典的时候,复制某些值,或者在选择其他业务表的时候,同步复制关联的值等等,以及可以再前端类型进一步细化定义一些类型,如选择系统用户、系统机构、系统角色、查看附件、系统业务编码等等,这些内置的处理能够更贴切的符合实际系统的数据选择需求。

例如对于一些常规的字段属性(如产品名称),我们默认保留存储类型为varchar即可。

而对于一些需要引用字典信息的,我们可以选择设置系统字典类型,如下所示。

而对于需要在数据录入的时候设置为下拉列表的方式(单选或者复选),并指定动态字典的,也可以实现。

前端的输入类型,有复选框、单选框组、评分控件、下拉列表、系统用户、系统角色、系统机构、系统附件、系统业务表编码 等选项,分别对应不同的控件界面录入处理。

我们选中通用的下拉列表,可以进一步指定是单选还是多选,并且数据来源可以为静态、动态、字段所有唯一值等不同的方式。

如果我们定义了很多不同的实体类型业务表,那么如果需要主从表中选择复制某些字段,如何实现呢,通过上面的表选择设置即可实现。

 

2、WInform前端列表展示和数据录入处理

有了上面的准备定义工作,我们就可以为通用的EAV列表界面展示进行处理了,常规的列表界面分为单业务表的显示(如产品信息),以及主从表的业务显示(如订单和订单明细),如下界面所示。

单业务表的显示(如产品信息)

可以看到,这个列表的展示和常规开发的业务表显示没有太大的差异,也可以根据字段进行查询,以及进行自定义条件查询、或者进行高级查询。

主从表的业务显示(如订单和订单明细)

这两种不同的数据展示方式,自动根据系统属性设置关联进行动态创建(在属性定义的时候,指定了包含的明细对象)。

有了列表信息的动态展示,我们还需要确定每行记录的数据录入控件类型。

前面介绍了界面控件录入的类型,常规可以根据储存类型来定义不同的控件输入,如文本、多文本、日期、整形、浮点型等数据,进一步还可以绑定下拉列表(动态字典、静态列表或者在字段自身值列表),也可以选择在选择字典的时候,复制某些值,或者在选择其他业务表的时候,同步复制关联的值等等,以及可以再前端类型进一步细化定义一些类型,如选择系统用户、系统机构、系统角色、查看附件、系统业务编码等等。

对于整数或者带有小数点的浮点数,可以使用SpinEdit的输入来录入数值内容,如下所示,并可以定义设置显示的格式。

同理对于日期类型,一样也是构建一个DateEdit控件用来录入数据,如下所示。

对于一些录入,有时候根据自身字段已有的数据列表进行选择录入,如下所示。

这个字段选择的时自身的值列表配置,如下是它的属性定义。

对于复选框、评分控件,也是根据配置信息,构建对应的录入控件的,如下界面所示。

对于系统用户、角色、机构的选择信息,我们可以根据用户是否允许多选来构建选择界面,定义好选择用户、角色、机构的界面即可,如下所示。

选择机构的界面如下所示。

选择角色的界面类似(多选出现复选框),如下面所示。

 

我们也可以指定属性为系统的附件,

从而在列表显示并编辑的时候,接受系统上传的附件并显示附件的数量

单击按钮,可以打开查看记录的附件的列表信息。

另外,对于一些业务编码,我们也可以内置进行快速生成,使用系统配置好的生成编码规则,能够更好的符合我们实际的需求。

系统业务编码规则管理是我们系统业务中的一个通用模块,可以引用它进行生成即可。

这样我们在创建订单的时候,可以根据这个约定好的规则进行生成订单编码,是不是很方便?

 

3、动态业务菜单的定义

上面我们介绍了实体类型的属性定义,以及通用的EAV数据列表界面展示,包括单业务列表界面,以及主从表界面的展示,并已经完成了各种常规输入控件类型的处理,包括系统字典、系统用户、系统角色、系统机构、系统附件、系统业务编码规则等,基本上覆盖了我们大多数的业务录入的需求了。

完成了上面的那些工作,我们来考虑动态业务菜单的问题,动态菜单是系统的一个管理模块,管理系统所有可用的菜单,并可以根据不同的角色授权不同的菜单,从而实现更加个性化的系统界面展示。

前面介绍了可以定制不同的业务实体类型,如下界面定义了很多不同的业务实体类型。

随着我们业务定义的变化,肯定会定义更多的实体类型,那么我们就要考虑动态菜单与具体的业务实体类型结合的问题了。

通过结合一个特定业务的菜单和一个特定的实体类型,我们就可以让系统打开一个业务的列表界面显示,从而实现常规的菜单元素的管理和分配了。

我们改造一下传统的菜单定义,我们只需要确定这个菜单项目为EAV的业务菜单和具体的绑定实体类型ID即可,如下界面所示。

我们通过再菜单编辑/新增界面中,指定菜单为EAV模式菜单,并确定好关联的实体类型ID(可以通过弹出框选择),从而创建一个EAV业务菜单即可。

同理,对于订单和订单明细的主从表列表业务,也是通用的处理方式,如下界面所示。

这样,我们在动态菜单中单击处理,就可以传递对应的实体类型ID给具体的窗体,并通过实体类型ID进行对应的初始化和显示记录即可,如下是单表的EAV模式的产品信息表的显示和录入处理界面。

下面则是主从表的(订单和订单明细表)的显示和录入处理界面。

这样,通过直接配置而不需要编码,就可以实现常规业务表的设计,并可以结合动态菜单的方式,给客户进行开发,可以快速根据客户的需求进行增加或者修改字段,调整字段录入方式,顺序,可用等等,实现快速开发的响应。

同时,由于数据记录是存储在MongoDB的数据库上,即使数据量很大,也是能够高性能的进行响应,减少了关系型数据库在多表联合的弊端,同时还能利用数据文档的可修改性等突出特点,极大的减少编码的开发出来,可以说基本是零代码的开发方式。

深入一点,我们可以记录每个字段的修改日志,增加每个字段对不同人员的可见性(可访问性)、可修改性等进行控制,从而实现更加弹性化的展示和录入的处理方式。

 

专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
 转载请注明出处:撰写人:伍华聪  http://www.iqidi.com

相关文章
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
1037 14
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
transition过渡属性 早期在Web中要实现动画效果,都是依赖于JavaScript或Flash来完成。 但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, 让效果显得更加细腻。简单点说,就是通过鼠标经过、获得焦点,被点击或对元素任何改变中触发, 并平滑地以动画效果改变CSS的属性值。 在CSS中创建简单的过渡效果可以从以下几个步骤来实现: 在默认样式中声明元素的初始状态样式; 声明过渡元素最终状态样式,比如悬浮状态; 在默认样式中通过添加
205 1
|
2月前
|
前端开发 JavaScript 算法
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
transform变形 css3在原来的基础上新增了变形和动画相关属性,通过这些属性可以实现以前需要大段JavaScript才能实现的 功能。 CSS3的变形功能可以对HTML组件执行位移、旋转、缩放、倾斜4种几何变换,这样的变换可以控制HTML组件 呈现出丰富的外观。 借助于位移、旋转、缩放、倾斜这4种几何变换,CSS3提供了transition动画。 transition动画比较简单,只要指定HTML组件的哪些CSS属性需要使用动画效果来执行变化,并指定动画时间,就可保证动画播放。 比transitio
147 0
|
5月前
|
JSON 前端开发 JavaScript
惊艳!阿里开源 15.2k Star 企业级低代码引擎揭秘,如何变革前端开发方式?
阿里巴巴开源的 LowCodeEngine 是一款企业级低代码引擎,具备可视化编排、UI 渲染、代码生成等全链路能力。支持 React、Vue、Rax 等框架,提供高扩展性与类型安全,助力高效开发,降低维护成本,适用于后台系统、多端同步等场景。
928 1
|
4月前
|
JSON 监控 前端开发
AMIS:百度开源的前端低代码神器,18.4k star 背后的开发效率提升利器
AMIS(前端低代码框架)是百度开源的低代码前端框架,基于纯 JSON 配置即可生成完整后台页面,包括表单、表格、图表、CRUD 列表,支持可视化拖拽编辑。,星标数已达 18.4k,百度内部已沉淀超过 5 万个页面,广泛应用于审核系统、数据管理后台、模型监控等落地场景
873 0
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
position定位(核心) 我们讲盒模型的时候,提到了3个属性可以用来控制页面排版。 三大属性:position属性,display属性,float属性。 position 属性控制页面上元素间的位置关系。 display 属性控制页面元素是否显示或者是堆叠还是并排显示。 float 属性提供控制方法。 通过float这种控制方法,可以实现多栏布局,导航菜单等等。 position属性是干嘛用的?怎么用?有哪些属性值? position属性控制页面上元素间的位置关系,也就是排版。 怎么用?要知道怎么用
371 1
|
2月前
|
前端开发 算法 Java
【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的,其中相当一部分是跟文字的相关的,比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制: 当元素的同一个样式属性有多种样式值的时候,CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则: 层叠规则一:找到应用给每个元素和属性的声明。 说明:浏览器在加载每个页面时,都会据此查找到每条CSS规则, 并标识出所有受到影响的HTML元素。
100 1
|
3月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
204 5
|
12月前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
1002 115
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
277 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
  • 10
    「Web应用架构」模式:前端的后端(BFF)
  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    529
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    200
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    205
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    147
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    254
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    371
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    162
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    100
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    171
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    234