焦点要闻:重构一个可配的查询统计到底有多难?
时间:2023-02-28 15:05:37 来源:腾讯云
背景
查询统计,可以说是任何业务系统都必备的一个工具。也是很多公司给新人熟悉业务练手的一个系统。
它的前端业务逻辑一般比较简单明了。设置几个输入条件,根据输入条件生成调用参数,通过后端接口生成报表。
这样一个系统维护起来难度并不大,但是往往随着报表的增多,工作量很大。因此我们需要设计一个可根据配置自动生成报表页面的查询统计前端。这样前端的工作量就可以大大减少,节约了前端开发的资源。
(相关资料图)
基础实现
这个查询统计到我手里时,已经实现了既定的功能。下面我们简单看一下原来的功能和代码结构。
原来的实现大致可以分成三个模块。
上方是导航栏,是可配置的菜单。
中间是查询条件,也是不同报表间最大的区别。我们希望这个区域能修改成可配置的。比较常见的查询方式有时间,输入框,下拉框,下拉框树等。此外还包含一个查询和重置的按钮。
下方是ureport的报表,由后端生成。
那么我们看看原来的代码实现:
菜单实现
菜单的实现可以说已经非常的不错了,抽象出了一级菜单name,code,icon,二级菜单通过parentCode确定挂载在哪个一级菜单下面,点击时通过routeCode路由到对应查询组件页面。
扩展开发痛点
相信大家看到第三张图,也就是我们已有的报表组件时,就会发现原来实现的问题。
其一:报表数量太大了,后续维护管理,包括项目上二次开发回归代码,都存在巨大的工作量。
其二:新增报表时修改工作量也不小,首先复制一个已经做好的报表,然后在上面修改字段,在路由中添加这个组件。一个报表前前后后修改的工作也不少。
模板生成查询条件
首先需要定义的是我们模板的数据结构,他应该包含报表名字,报表code,报表的url路径,查询字段,报表归属菜单等主要属性。特别需要注意的是下拉框,下拉框树这种查询条件,需要配置字典来源Source。当然还可以包括排序,是否展示等辅助属性。routeCode咱们复用一下原来的实现。新增一个template模板组件,通过配置生成的报表统一路由到这个模板组件展示。
按照这个思路我定义了TemplateItem这个模板数组。同时顺手把title和菜单配置也一起单独拉出来,为了后续进一步优化做准备。
首先要把模板生成的菜单和原有的菜单兼容,通过设置sort属性来排序。这样就可以在不破坏原有实现的基础上追加新功能。
在路由切换时,需要缓存一下点击进入了哪个模板,这样打开模板页面时才能根据缓存的数据生成页面。
模板组件
前面的工作完成后,那么模板组件的实现也是水到渠成了。
根据field生成查询条件,采用flex布局,一行六个条件,自动换行。
除了时间,输入框,下拉框,下拉框树等之前说的查询条件,这边还新加了两个type,space代表一个空的区域,便于调整页面布局,query代表查询和重置两个按钮。
展开来看,里面是各个查询的具体实现,非常的简单,唯一值得一提的是里面的各个code不是写死的,采用queryData[xxxCode]这样的形式去绑定。下拉框内的字典来源基本采用了原有的实现,我这边加了个GetSource的方法,根据Source配置的key获取字典定义。
最后
既然json定义好了,也能根据json生成页面了。那么最后一步显而易见,我们把这个json放到数据库里,在页面打开时通过后端查询获取。那么前端的工作量就彻底消灭了。将来再有新的报表需求,前端版本发布完后不再需要再在前端修改。后端完成报表后根据字段填写json即可实现前端查询条件模板的自动生成。当然我们甚至可以更进一步,提供一个维护页面,通过可视化的界面去输入字段name code,选择source type。这样现场的工程人员可以直接通过操作页面来生成json。
感想
比较大的前端项目也从零开始做了三四个了。在做前端产品的时候,我最大的感受就是我们不能仅仅局限于我们亲自去实现一个页面,也要让没有前端编程经验的人,甚至是没有编程经验的工程人员参与进来。当他们在现场接到需求时,我们可以赋予他们一点实现需求的能力。这样的实现才能说是一个好的实现。
最新文章推荐
- 陕西7名核酸检测阳性外省游客活动轨迹公布
- 万人说新疆 | 棉花朵朵赛白云,阿克苏美出新高度!
- 万人说新疆 | 孙芳红:我在新疆每天过得很充实也很快乐
- 万人说新疆 | 棉农阿卜来提开心地笑了
- 万人说新疆 | 阿迪力的棉花合作社年入300万
- 四川乐山犍为县发生4.3级地震 无人员伤亡
- 西安全面开展排查管控 目前20481人核酸检测结果均阴性
- 陕西7名核检阳性者为一旅行团同行人员 活动轨迹公布
- 西安交大举行2021级本科生迎新会 校长:学习是主动作为之事
- 【母亲河畔的中国】黄河岸边的这个村庄如何打好旅游服务牌?
资讯中心

2022-08-09

2022-06-20

2021-10-18

2021-10-18
热点资讯
-
1
焦点要闻:重构一个可配的查询统计到底有多难?
-
2
世界热文:微软、和硕合作的5G方案已导入和硕新厂 ;
-
3
视焦点讯!吃水不忘挖井人的意思是饮水思源对吗
-
4
每日消息!2023宜昌城区最低工资标准是多少?
-
5
实时焦点:澎湃:平均年龄超过30岁,国足还要继续啃老?
-
6
当前播报:苹果数据线供应商 Foxlink 印度工厂失火:损失 1200 万美元
-
7
全球微动态丨X射线管组件固有滤过的测定
-
8
天天快资讯丨疯狂暗示?FIFA官方晒贴有梅西名字的座位照片
-
9
全球观焦点:艾草泡脚有什么好处_艾草泡脚的好处
-
10
【世界时快讯】090003基金今天净值查询_090003基金今天净值
-
11
每日快讯!人才政策持续推动“软联通”——粤港澳合力构筑“人才湾区”
-
12
环球新动态:四部门发布“剑网2022”专项行动十大案件
-
13
新动态:三年后 我们继续相爱
-
14
当前简讯:枣庄龙潭公园梅花绽放 游客踏青赏花享受“梅”好时光
-
15
世界热推荐:dnf代币券如何换钱_dnf代币券怎么换成点券
-
16
速读:肝不好不能吃什么食物和水果_肝不好不能吃什么
-
17
【环球新视野】等位分查询系统2021四川理科_等位分查询系统2021
-
18
【新要闻】京津冀协同发展不断迈向高水平
-
19
全球观天下!入伏啥意思?_入伏是什么意思 什么叫做入伏
-
20
当前快播:孟静娴