首页>资讯>正文
重构一个可配的查询统计到底有多难?
2023-02-25 15:01:26    来源:腾讯云

背景

查询统计,可以说是任何业务系统都必备的一个工具。也是很多公司给新人熟悉业务练手的一个系统。


(相关资料图)

它的前端业务逻辑一般比较简单明了。设置几个输入条件,根据输入条件生成调用参数,通过后端接口生成报表。

这样一个系统维护起来难度并不大,但是往往随着报表的增多,工作量很大。因此我们需要设计一个可根据配置自动生成报表页面的查询统计前端。这样前端的工作量就可以大大减少,节约了前端开发的资源。

基础实现

这个查询统计到我手里时,已经实现了既定的功能。下面我们简单看一下原来的功能和代码结构。

原来的实现大致可以分成三个模块。

上方是导航栏,是可配置的菜单。

中间是查询条件,也是不同报表间最大的区别。我们希望这个区域能修改成可配置的。比较常见的查询方式有时间,输入框,下拉框,下拉框树等。此外还包含一个查询和重置的按钮。

下方是ureport的报表,由后端生成。

界面示例

那么我们看看原来的代码实现:

菜单实现

菜单的实现可以说已经非常的不错了,抽象出了一级菜单name,code,icon,二级菜单通过parentCode确定挂载在哪个一级菜单下面,点击时通过routeCode路由到对应查询组件页面。

扩展开发痛点

相信大家看到第三张图,也就是我们已有的报表组件时,就会发现原来实现的问题。

其一:报表数量太大了,后续维护管理,包括项目上二次开发回归代码,都存在巨大的工作量。

其二:新增报表时修改工作量也不小,首先复制一个已经做好的报表,然后在上面修改字段,在路由中添加这个组件。一个报表前前后后修改的工作也不少。

菜单代码示例
菜单代码示例
组件示例

模板生成查询条件

首先需要定义的是我们模板的数据结构,他应该包含报表名字,报表code,报表的url路径,查询字段,报表归属菜单等主要属性。特别需要注意的是下拉框,下拉框树这种查询条件,需要配置字典来源Source。当然还可以包括排序,是否展示等辅助属性。routeCode咱们复用一下原来的实现。新增一个template模板组件,通过配置生成的报表统一路由到这个模板组件展示。

按照这个思路我定义了TemplateItem这个模板数组。同时顺手把title和菜单配置也一起单独拉出来,为了后续进一步优化做准备。

模板定义

首先要把模板生成的菜单和原有的菜单兼容,通过设置sort属性来排序。这样就可以在不破坏原有实现的基础上追加新功能。

菜单兼容

在路由切换时,需要缓存一下点击进入了哪个模板,这样打开模板页面时才能根据缓存的数据生成页面。

路由切换

模板组件

前面的工作完成后,那么模板组件的实现也是水到渠成了。

根据field生成查询条件,采用flex布局,一行六个条件,自动换行。

除了时间,输入框,下拉框,下拉框树等之前说的查询条件,这边还新加了两个type,space代表一个空的区域,便于调整页面布局,query代表查询和重置两个按钮。

html
scss

展开来看,里面是各个查询的具体实现,非常的简单,唯一值得一提的是里面的各个code不是写死的,采用queryData[xxxCode]这样的形式去绑定。下拉框内的字典来源基本采用了原有的实现,我这边加了个GetSource的方法,根据Source配置的key获取字典定义。

最后

既然json定义好了,也能根据json生成页面了。那么最后一步显而易见,我们把这个json放到数据库里,在页面打开时通过后端查询获取。那么前端的工作量就彻底消灭了。将来再有新的报表需求,前端版本发布完后不再需要再在前端修改。后端完成报表后根据字段填写json即可实现前端查询条件模板的自动生成。当然我们甚至可以更进一步,提供一个维护页面,通过可视化的界面去输入字段name code,选择source type。这样现场的工程人员可以直接通过操作页面来生成json。

感想

比较大的前端项目也从零开始做了三四个了。在做前端产品的时候,我最大的感受就是我们不能仅仅局限于我们亲自去实现一个页面,也要让没有前端编程经验的人,甚至是没有编程经验的工程人员参与进来。当他们在现场接到需求时,我们可以赋予他们一点实现需求的能力。这样的实现才能说是一个好的实现。

关键词: JSON 编程算法

重构一个可配的查询统计到底有多难?

查询统计,可以说是任何业务系统都必备的一个工具。也是很多公司给新人熟悉业务练手的一个系统。2023-02-25

长庆油田采油二厂:做好“五篇大文章” 助力绿色发展

推进绿色油田建设,再造油区山川秀美。长庆油田采油二厂供图坚持在开发中保护、在保护中开发,实现油田开发与生态建设和谐共进。长庆油田采油2023-02-25

环球观察:成外西区

1、成都市实验外国语学校(西区),简称实外西区,坐落于天府新区成都直管区麓山国际社区,是一所民办寄宿制外国语完全中学。22023-02-25

谁发明了电话贝尔_谁发明了电话

1、关于电话的发明者尚存争议但是争议在安东尼奥·梅乌奇和贝尔身上。2、安东尼奥·梅乌奇(AntonioMeucci,12023-02-25

五辛盘是什么怎么一回事_五辛盘有哪五种 全球看热讯

1、五辛盘亦称“辛盘”。2、即在盘中盛上五种带有辛辣味的蔬菜,作为凉菜食用。3、魏晋以下,元旦日有食五辛盘的风俗。4、意2023-02-25

义安红色地图_全球速讯

1、义安红色地图是由义安区委党史和地方志研究室历时3个月编撰出版,该书共收集整理该区革命遗址47处,其中纪念展览馆62023-02-25

每日聚焦:青衫落拓全部作品txt._青衫落拓全部作品

1、楼主:你好您要的资源我有请留下您的邮箱(最好是QQ的)最好在我的回答下面追问我这样我能及时回复您好的资源就要共享2023-02-25

最后一个武侠杂志 《今古传奇·武侠版》停刊:闭关修炼_天天观点

2月24日,《今古传奇武侠版》杂志微信公众号发文《江湖逆旅》,武侠版像经历了一场华胥之梦,在挣扎沉沦裹挟中消亡了。”作者在文中编程称:武2023-02-24

九间堂别墅|全球球精选

1、九间堂位于浦东新区行政艺术中心区域内,西临世纪公园,南靠张家浜,北面即为成熟的联洋社区。2、房型设计再现了“庭院2023-02-24

午睡睡错了,或会影响寿命,医生:年过50岁,午睡牢记“3不要”|今日报

如今越来越多的人会在中午午睡了,一上午繁忙的工作导致的疲劳现象,也可以在中午午睡时慢慢恢复精神。尤其是现在是冬季,在中午也会感觉疲劳2023-02-24

世界热推荐:章凤口岸进出口货值3.3亿元 为去年同期7倍

原标题:章凤口岸进出口货值3 3亿元为去年同期7倍瑞丽出入境边防检查站日前对外发布信息:截至目前,今年从章凤口岸进出口的2023-02-24

今日快讯:有关月亮的神话传说

1、玉兔捣药是中国神话传说故事之一。2、见于汉乐府《董逃行》。3、相传月亮之中有一只兔子,浑身洁白如玉,所以称作 玉兔2023-02-24

精选!协创数据(300857)2月24日主力资金净买入563.89万元

截至2023年2月24日收盘,协创数据(300857)报收于21 36元,上涨2 3%,换手率2 16%,成交量3 06万手,成交额6506 09万元。2023-02-24

中国代表:政治解决乌克兰危机的大门不能关上

戴兵表示,中方再次呼吁冲突当事方保持理性,克制冲动,避免危机进一步恶化甚至失控。俄罗斯、白俄罗斯、朝鲜、厄立特里亚、马里、尼加拉瓜、2023-02-24

蚊帐哪个牌子质量好2018_蚊帐哪个牌子质量好|天天亮点

1、远梦蚊帐东莞市远梦家用纺织品有限公司,羊毛被十大品牌,知名(着名)家纺品牌,国家保护商标,广东省名牌,国内一线家纺品2023-02-24

膝盖凉怎么治_膝盖凉贴什么膏药好

天气一转冷,有些人的膝盖就开始变冷:穿的衣服比别人多,也不能保暖,膝盖表面也感觉不到温暖。为什么膝盖冷?膝盖冷和正常膝盖2023-02-24

香帅巡航太子——路霸即将来袭,搭载800V缸发动机,使用皮带传动 全球报资讯

我是骑士分享。大排量巡航太子车又有新成员了,香帅旗下全新车系路霸将携三款车型即将来袭。关于香帅机车我想不用多做介绍,只要了解巡航太子2023-02-24

每日报道:巡查问题整改情况报告范文_巡查问题整改情况报告

1、去百度文库,查看完整内容>内容来自用户:dlhss1关于巡查反馈问题和意见整改落实情况的报告《关于对市档案局开展2023-02-24

时讯:耕地、生态、稀土保护将成为2023年卫片执法重点

耕地、生态、稀土保护将成为2023年卫片执法重点2023-02-23

环球资源网官方网站_环球资源

1、传统的B2B平台,市场上主流外贸平台有阿里巴巴,环球资源,以及市场份额相对较少的中国制造等还有其他小的平台不值一提了2023-02-23

天天观热点:海洋瓶配色_海洋瓶的颜色顺序

1、从网上买的资料已经到了。2、开始泡海宝贝吧。3、拿出一个瓶子。4、用针碾碎海宝宝。5、挤完再加点装饰。6、更大的7、2023-02-23

10大游乐园中的过山车_10大游乐园中的过山车是

1、今天是情人节,很多情侣喜欢去游乐园。随着全国各地的游乐园越来越多,一些古老的设备已经不能满足成年人的兴趣。为了进一步2023-02-23

丽岛新材:截至2023年2月20日,公司股东人数为16716户

丽岛新材(603937)02月23日在投资者关系平台上答复了投资者关心的问题。2023-02-23

旅日大熊猫“永明”及双胞胎女儿飞抵成都

旅日大熊猫永明及双胞胎女儿回国2023-02-23

世界热议:看山看海看安全,海南万宁,交通安全大篷车来了!|预告

看山看海看安全,海南万宁,交通安全大篷车来了!|预告2023-02-23