深入剖析极态云优雅的前端框架设计方案(上)

简介: 最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。

最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。

门户

极态云中的门户,相当于一个子系统,针对某一类用户群体定义的一个前端展示框架。一个门户通常包含菜单容器和页面容器,可以配置菜单和菜单对应的页面。

一个应用中,可以有多个子系统,每个子系统配置自己的门户

例如 CRM 应用中既有外部联系人要使用,也有企业内部员工在使用 , 一般的低代码平台要么就是前端页面框架一样,只是不同人群进入后的菜单项不一样。要么就是分别创建 2 个应用,这样又增加了工作量。在极态云中,针对外部联系人配置一个门户,界面如下:

针对公司内部员工配置的门户如下:

极态云已经内置的门户有:

  • 前端渲染(Client-Side Rendering)门户: CSR 门户,极态云中叫标准门户。即单页面应用,适合开发 CRM、ERP、OA、商城等业务管理系统。

  • 后端渲染(Server-Side Rendering)门户: SSR 门户适合开发静态页面,例如: 官网、帮助手册等。
  • 空白门户:即没有导航的独立页面。

也支持开发者自己扩展自己的门户。

页面

页面,极态云中的页面是展示内容的主要区域。 支持多种页面类型:例如标准页面类型、HTMl 页面类型、数据管理页面类型、数据录入页面类型、全代码页面、Markdown 页面等等,也支持开发者自己扩展类型。

这里重点讲下 标准页面类型。标准页面类型,是由组件组成。

组件

组件是构建极态云页面的核心元素。与传统的React组件相比,极态云提供的组件具有更大的封装程度以及更丰富的功能选项。特别是针对后端数据交互逻辑进行了深入整合,使得即使是非专业程序员也能轻松完成复杂的业务逻辑实现。

例如:表格组件的组件参数:数据表 ID 及筛选条件排序、显示字段的配置(是否可编辑、冻结、换行显示、统计方式等)、按钮配置(按钮标题、图标、类型、颜色、显示条件等)、禁用选择列、显示序号、每页显示条数、样式规则(满足条件、行列样式)、编辑规则等参数。有明显的 2 个特点:

  1. 只需要传入数据表 ID,表格组件内部就可以根据这个表 ID 向后端请求数据。
  2. 参数很多,很全。优势是:方便个性化配置业务场景。劣势是:全代码配置麻烦。不过,极态云提供可视化开发,就解决了配置麻烦的问题。

每个组件就相对于一个类,组件变量,就相当于类的变量;组件函数,就相当于类的函数。在具体的业务页面中,通过修改组件变量或者调用组件函数来从外部控制组件的变化。组件变量的值,也可以被外部获取。

例如:表格组件有以下组件变量:

变量 title

变量 name

读写

值类型

说明

当前页数据

displayRowList

只读

多行数据

选中的多行数据

selectedRowList

只读

多行数据

操作的单行数据

activeRow

只读

单行数据

筛选条件

filter

只读

筛选条件

以下情况的组合筛选:

1、数据源本身的设置筛选条件

2、call方法传入的筛选条件

3、权限设置的条件

有以下组件函数

函数 title

函数 name

参数

返回值

说明

刷新

call

筛选条件:筛选条件

刷新当前页

refresh

通过组件事件,即开放自己组件的某些特定触发时机给外部,向页面发送一个事件消息,方便开发者按业务需求自定义这个事件之后的下一步动作。例如:表格的事件如下

事件 title

事件 name

输出参数

说明

选中行后

selectedChange

选中的多行数据:多行数据seletedRowList

点击行后

clickRow

操作的单行数据:单行数据activeRow

{列}点击后

click{FieldName}

操作的单行数据:单行数据activeRow

任意字段值改变后

afterRowChange

操作的单行数据:单行数据activeRow

{XX字段}值改变后

after{FieldName}Change

操作的单行数据:单行数据activeRow

{XX工具栏按钮}点击后

click{Btn}

选中的多行数据:多行数据seletedRowList

{XX操作列按钮}点击后

click{Btn}

操作的单行数据:单行数据activeRow

例如:我们在表格上新增一个「移入公海」的按钮,表格组件就会自动增加一个「移入公海」的按钮,配置其响应事件如下:

切换到源码如下:

最后

极态云前端架构从宏观到微观,每一层均支持扩展类型,且每一层都能够自由组合,实现了完美解耦。而当各层组合在一起时,又能够满足千行百业的多样化需求。

在下一篇内容中,我将继续深入剖析极态云的登录方式、组织架构以及角色权限。

相关文章
|
6月前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
147 1
|
12月前
|
前端开发 JavaScript
常见的8个前端防御性编程方案
常见的8个前端防御性编程方案
145 0
|
21天前
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
116 0
|
2月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
279 3
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
36 2
|
2月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
84 0
|
4月前
|
缓存 前端开发 JavaScript
前端常见的性能优化方案?
【7月更文挑战第14天】前端性能优化包括代码压缩、资源合并、图片优化、缓存策略和DOM操作改进。例如,压缩CSS、JS,懒加载图片,使用CDN,事件委托,启用HTTP/2,及利用性能工具进行评估和优化。目标是加快加载速度,提升用户体验和服务器效率。
73 2
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化都有那些方案 ?
【7月更文挑战第11天】 前端性能优化包括资源合并压缩、懒加载、CDN使用、代码优化、缓存利用和图片优化等策略。例如,减少HTTP请求、压缩CSS/JS、事件委托、利用浏览器及服务器缓存、选择合适图片格式等,旨在提升网页速度和用户体验。服务工作者、异步加载和响应式设计也是关键。持续学习新技术以适应不断变化的优化需求。
67 1
|
3月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
|
4月前
|
存储 前端开发 JavaScript
前端菜单及按钮权限拦截,实现方案及思路
此实现方案基于vue框架,并需要依赖vue项目相关的库,router、store等等;前端同学要与后端同学协商,常规是让后端返回一个树结构的菜单数据,并且将所有的涉及权限控制的页面path给到后端,如果是按钮,需要把所有的按钮 code 码统一下,这是前期工作,很重要。