SREWorks云原生数智运维工程实践-SREWorks 介绍篇-SREWorks前端低代码工程设计(下)

简介: SREWorks云原生数智运维工程实践-SREWorks 介绍篇-SREWorks前端低代码工程设计

八、 动态表单

 

1. 表单工厂

 

页面交互还有重要的一环:表单数据的交互。sw-frontend提供了近三十种输入形式的表单项以供表单设计选择使用,对于Form表单提供了界面化的属性配置如:表单项类型、是否展示、表单项数据源、表单项条件渲染、表单项label、表单项key,表单拖拽排序,动态添加表单项等。

 

image.png

 

image.png

 

对于表单数据的编辑回填以及表单和页面的数据流以及action交互,也做了模型化的抽象处理,这个在后面页面操作章节做详细介绍。

 

2. 过滤器/表单Action

 

对于页面的表单Action,如新增、编辑等,sw-frontend抽象为单独的操作区块,每个操作区块创建时会生成unikey,在页面组件工具栏区添加好操作button后,可以通过页面交互或源码编辑的形式建立绑定关系。

 

image.png

 

源码视角下,在table组件的toolbar字段下,“新建应用”button以blockId的形式跟新建应用的表单操作区块建立了绑定关系;当模板引擎解析到toolbar工具栏,会用该blockId获取到该操作区块的配置,然后根配置以表单工厂函数加载对应表单项并对其表单项值初始化。

 

image.png

 

3. 过滤器

 

过滤器是对传统页面开发条件中过滤表单的一种抽象,在设计器中对过滤器的定义和action表单操作大体一致,只是过滤器没有表单提交地址,关联组件如table的过滤刷新,是经由过滤器将表单项的字段值投递到参数阈,table的数据源获取执行器进而通过侦听对比参数阈的关联字段值的变化重新拉取数据,来间接完成表格数据的过滤查询操作;而action操作则是将表单提交到后端地址,确认成功提交后通过callback来完成参数阈投递更新,间接完成组件的数据刷新操作。

 

image.png

过滤器

 

image.png

action操作

 

 

 

4. 数据源

 

sw-frontend提供了灵活的数据流处理机制,降低对接口的数据格式及参数的固定要求,使应用富客户端化,这也是serverless体验的关键一环:在此用户可以灵活定义组件/页面节点数据源类型,提供类似GraphQL的模式,在设计器中对返回数据进行灵活处理。

 

image.png

 

对于数据源为API格式的地址中使用$变量名,会统一从参数阈中渲染替换,然后获取组件数据源的数据;同时提供请求前置函数和请求后置函数的执行钩子,在这里可以进行数据的拆解或组装以及写入一些业务逻辑代码。

 

image.png

 

九、 页面操作(Action)

 

页面操作是低代码工程设计里面的重要一环,承载着很大一部分运维需求场景,sw-frontend将页面操作抽象为四个大的类别:工程内置操作类,过滤器类,表单提交类,超链跳转类。

 

image.png

 

1. 工程内置操作类

 

sw-frontend在组件的工具栏内置了若干通用的按钮类的操作,根据操作类型map,识别相应操作进行渲染。典型的如“组件刷新”操作,用户在界面添加该按钮,配置唯一识别字段“__refresh__”,即可完成组件刷新操作的配置,该刷新Button通过触发参数阈改变事件,间接完成组件的数据刷新操作。


 

2. 超链跳转类

 

超链跳转类别的操作,常用于表格等组件的行内操作,一般以JSXRender的形式进行配置,渲染为Button/Link。进行路由跳转或者超链跳转时,表格行内数据可以作为传入参数使用。

 

3. 过滤器类

 

过滤器本质而言是对传统开发方式下页面查询的一种抽象组件本身定义有数据源,过滤器的职能是触发组件重新获取数据。在sw-frontend中,过滤器的表现形式可以是一组tab、一组表单项。

 

以表单类过滤器为例:用户在填充各过滤条件之后,“提交”操作本质并没有直接的提交地址,而是进行表单参数的投递--改变节点参数阈,组件通过监听参数阈关联字段的改变,重新拉取数据,完成传统页面的查询操作。

 

4. 表单提交类

 

表单操作承载了大部分的页面操作,sw-frontend将常规的“增”、都抽象为表单提交类的事件,对这类Action操作,在完成和服务端交互后,以callback的形式,进行节点参数阈字段的投递,以触发数据渲染类组件的刷新从而完成“增”、类的操作,如下两图分别为Action操作定义和运行时渲染界面:

 

image.png

 

image.png

 

其中在进行数据编辑时的表单数据回填,大多数场景为列表类数据的编辑:定义在行内的“编辑”操作会绑定一个表单Action区块;在点击事件发生时,会将该行内数据对象rowData与当前节点参数阈合并,作为actionParams传入该Action表单区块,表单区块通过读取actionParams的对应字段value作为各表单项的initValue,完成数据回填。

 

十、 节点参数域

 

节点参数阈是以Redux状态管理机制为依托,建立路由节点页面共享参数对象nodeParams,节点页面各组件通过对nodeParams的修改和对应字段侦听来间接完成组件间的信息传递和事件交互。

 

sw-frontend在节点页创建之初,会初始化节点参数域:nodeParams;在节点页面的生命周期内,也会将url中变量参数,一些页面交互产生的runtime参数以及外部函数投递来的参数整合到节点参数域中来。

 

image.png

 

随之组件在经过统一数据源处理器获取数据流渲染之后,会对节点参数阈的target字段值通过监听对比,以触发数据reload刷新机制,重新获取数据源数据;同时页面的一些action表单操作,也是通过参数阈投递更新目标字段值进行进行间接触发相应组件的reload刷新渲染。

 

image.png

 

十一、 组件扩展

 

sw-frontend提供了声明式内置组件的注册机制,同时开辟了用户自定义组件的入口,用户可以将一些常用的自定义组件嵌入到我们的组件列表,以供前端设计器统一调拨;当前自定义组件以JSXRender的方式进行执行,可以直接书写JSX代码,同时能够识别antd组件,赋予用户更加灵活的页面渲染能力。

 

image.png

 

十二、 愿景与规划

 

现sw-frontend已内置运维场景常用的基础组件,图表组件,landing组件,布局组件等五十余个组件,除此之外还开放了用户自定义简单JSX组件的入口,让用户对自定义组件进行编辑管理,以拓展组件扩展和插拔使用的空间。同时动态加载远程组件,建立运维组件生态市场也纳入到了后面的版本规划中;以期能够共建打造出一个丰富共享的运维组件生态来,这也是我们将其开源的一个初衷愿景。

 

版本动态

 

我们会根据工作项目节奏,持续对功能进行完善优化和升级。近期发布的版本加入了页面模板保存和从模板快速创建的功能,以进一步聚焦“复用”,提升开发效率。

 

image.png

 

相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
2月前
|
存储 人工智能 调度
容器服务:智算时代云原生操作系统及月之暗面Kimi、深势科技实践分享
容器技术已经发展成为云计算操作系统的关键组成部分,向下高效调度多样化异构算力,向上提供统一编程接口,支持多样化工作负载。阿里云容器服务在2024年巴黎奥运会中提供了稳定高效的云上支持,实现了子弹时间特效等创新应用。此外,容器技术还带来了弹性、普惠的计算能力升级,如每分钟创建1万Pod和秒级CPU资源热变配,以及针对大数据与AI应用的弹性临时盘和跨可用区云盘等高性能存储解决方案。智能运维方面,推出了即时弹性节点池、智能应用弹性策略和可信赖集群托管运维等功能,进一步简化了集群管理和优化了资源利用率。
|
2月前
|
运维 监控 Cloud Native
云原生之运维监控实践:使用 taosKeeper 与 TDinsight 实现对 时序数据库TDengine 服务的监测告警
在数字化转型的过程中,监控与告警功能的优化对保障系统的稳定运行至关重要。本篇文章是“2024,我想和 TDengine 谈谈”征文活动的三等奖作品之一,详细介绍了如何利用 TDengine、taosKeeper 和 TDinsight 实现对 TDengine 服务的状态监控与告警功能。作者通过容器化安装 TDengine 和 Grafana,演示了如何配置 Grafana 数据源、导入 TDinsight 仪表板、以及如何设置告警规则和通知策略。欢迎大家阅读。
68 0
|
2月前
|
Cloud Native 安全 Java
杭州铭师堂的云原生升级实践
在短短 2-3 年间,杭州铭师堂完整经历了云计算应用的四个关键阶段:从“启动上云”到“全量上云”,再到“全栈用云”,最终达到“精益用云”。也从云计算的第一次浪潮,迈过了第二次浪潮,顺利的进入到了 第三次浪潮 AI + 云。
161 13
|
2月前
|
Cloud Native
邀您参加云原生高可用技术沙龙丨云上高可用体系构建:从理论到实践
云原生高可用技术专场,邀您从理论到实践一起交流,探索云上高可用体系构建!
|
2月前
|
Cloud Native 安全 Java
铭师堂的云原生升级实践
铭师堂完整经历了云计算应用的四个关键阶段:从”启动上云”到”全量上云”,再到”全栈用云”,最终达到”精益用云”。通过 MSE 云原生网关的落地,为我们的组织带来了诸多收益,SLA 提升至100%,财务成本降低67%,算力成本降低75%,每次请求 RT 减少5ms。
铭师堂的云原生升级实践
|
2月前
|
编解码 前端开发 开发者
探索无界:前端开发中的响应式设计深度实践与思考###
本文将带你领略响应式设计的精髓,一种超越传统页面布局限制的设计策略,它要求开发者以灵活多变的思维,打造能够无缝适应各种设备与屏幕尺寸的Web体验。通过深入浅出的讲解、实际案例分析以及技术实现细节的探讨,本文目的是激发读者对于响应式设计深层次的理解与兴趣,鼓励在实际应用中不断创新与优化。 ###
113 10
|
2月前
|
Cloud Native API 持续交付
云原生架构下的微服务治理策略与实践####
本文旨在探讨云原生环境下微服务架构的治理策略,通过分析当前面临的挑战,提出一系列实用的解决方案。我们将深入讨论如何利用容器化、服务网格(Service Mesh)等先进技术手段,提升微服务系统的可管理性、可扩展性和容错能力。此外,还将分享一些来自一线项目的经验教训,帮助读者更好地理解和应用这些理论到实际工作中去。 ####
72 0
|
2月前
|
Cloud Native 持续交付 开发者
云原生技术在现代企业中的应用与实践####
本文深入探讨了云原生技术的核心概念及其在现代企业IT架构转型中的关键作用,通过具体案例分析展示了云原生如何促进企业的敏捷开发、高效运维及成本优化。不同于传统摘要仅概述内容,本部分旨在激发读者对云原生领域的兴趣,强调其在加速数字化转型过程中的不可或缺性,为后续详细论述奠定基础。 ####
|
2月前
|
Kubernetes Cloud Native API
云原生入门:从理论到实践的探索之旅
本文旨在为初学者提供一个关于云原生技术的全面介绍,包括其定义、核心原则、关键技术组件以及如何将这些概念应用于实际项目中。我们将通过一个简易的代码示例,展示如何在云原生环境下部署一个简单的应用,从而帮助读者更好地理解云原生技术的实践意义和应用价值。

热门文章

最新文章

  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75