最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。
门户
极态云中的门户,相当于一个子系统,针对某一类用户群体定义的一个前端展示框架。一个门户通常包含菜单容器和页面容器,可以配置菜单和菜单对应的页面。
一个应用中,可以有多个子系统,每个子系统配置自己的门户。
例如 CRM 应用中既有外部联系人要使用,也有企业内部员工在使用 , 一般的低代码平台要么就是前端页面框架一样,只是不同人群进入后的菜单项不一样。要么就是分别创建 2 个应用,这样又增加了工作量。在极态云中,针对外部联系人配置一个门户,界面如下:
针对公司内部员工配置的门户如下:
极态云已经内置的门户有:
- 前端渲染(Client-Side Rendering)门户: CSR 门户,极态云中叫标准门户。即单页面应用,适合开发 CRM、ERP、OA、商城等业务管理系统。
- 后端渲染(Server-Side Rendering)门户: SSR 门户,适合开发静态页面,例如: 官网、帮助手册等。
- 空白门户:即没有导航的独立页面。
也支持开发者自己扩展自己的门户。
页面
页面,极态云中的页面是展示内容的主要区域。 支持多种页面类型:例如标准页面类型、HTMl 页面类型、数据管理页面类型、数据录入页面类型、全代码页面、Markdown 页面等等,也支持开发者自己扩展类型。
这里重点讲下 标准页面类型。标准页面类型,是由组件组成。
组件
组件是构建极态云页面的核心元素。与传统的React组件相比,极态云提供的组件具有更大的封装程度以及更丰富的功能选项。特别是针对后端数据交互逻辑进行了深入整合,使得即使是非专业程序员也能轻松完成复杂的业务逻辑实现。
例如:表格组件的组件参数:数据表 ID 及筛选条件排序、显示字段的配置(是否可编辑、冻结、换行显示、统计方式等)、按钮配置(按钮标题、图标、类型、颜色、显示条件等)、禁用选择列、显示序号、每页显示条数、样式规则(满足条件、行列样式)、编辑规则等参数。有明显的 2 个特点:
- 只需要传入数据表 ID,表格组件内部就可以根据这个表 ID 向后端请求数据。
- 参数很多,很全。优势是:方便个性化配置业务场景。劣势是:全代码配置麻烦。不过,极态云提供可视化开发,就解决了配置麻烦的问题。
每个组件就相对于一个类,组件变量,就相当于类的变量;组件函数,就相当于类的函数。在具体的业务页面中,通过修改组件变量或者调用组件函数来从外部控制组件的变化。组件变量的值,也可以被外部获取。
例如:表格组件有以下组件变量:
变量 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 |
例如:我们在表格上新增一个「移入公海」的按钮,表格组件就会自动增加一个「移入公海」的按钮,配置其响应事件如下:
切换到源码如下:
最后
极态云前端架构从宏观到微观,每一层均支持扩展类型,且每一层都能够自由组合,实现了完美解耦。而当各层组合在一起时,又能够满足千行百业的多样化需求。
在下一篇内容中,我将继续深入剖析极态云的登录方式、组织架构以及角色权限。