3.5.7.1 基础概念

模块(module)

概念

在 Oinone 系统的架构中,模块(module)是核心组成元素之一,可以被理解为域(domain)的一个具象化概念。模块的来源有两种:一种是基于后端代码定义,另一种是通过无代码新增。具体的代码定义方式,请参考“[占位符]”,而无代码定义的相关信息则可在“[占位符]”找到。在 Oinone 体系中,模块对应两种实体:模块和应用。

  • 模块: 这是一类特定能力的集合,它可以依赖其他模块,也可以被其他模块依赖。
  • 应用: 它是一种特殊的模块,具备模块的所有特性,并在此基础上可被终端用户访问。

使用

在前端开发中,module通常以应用的形式出现,它们往往对前端用户保持透明。在接下来的讨论中,我们主要围绕应用来探讨module的使用。从应用的角度出发,我们可以在前端开发中识别出以下几种典型使用场景,并通过具体的业务案例来加以说明

  • 应用菜单扩展: 实现自定义母版来定义特定应用的菜单
  • 表格布局扩展: 用于自定义布局的工具,以定义特定应用的表格布局

在这些场景中,我们着重实现了应用层面的隔离,确保每个模块都能在应用的维度上独立运作

查找

在实际业务开发中,有3个方式可以找到应用

  • 浏览器url查找(查找速度快,可能不准)

image.png

图3-5-7-1 浏览器url查找模块(module)

  • 接口返回查找

第一步找到截图类似请求

image.png

图3-5-7-2 接口找到viewActionQuery

第二步根据返回找应用

image.png

图3-5-7-3 接口返回查找模块(module)

  • vue调试器选中对应的组件查找

image.png

图3-5-7-4 vue调试器查找模块(module)

推荐使用浏览器url查找,若与预期不符,可用另外两种方式查找

模型(model)

概念

在 Oinone 系统的架构中,模型(model)是另一个关键核心组成部分。模型在业务层面主要体现之一为数据库的实体表,它是承载业务实现的基础结构。要了解模型的详细介绍,请参考“[占位符]”,前端所用的模型,对应后端代码定义来说,代表的是模型的编码。

关于模型的定义,我们提供了两种方法:

  • 代码定义: 对于需要通过编程实现的模型定义,您可以参考“[占位符]”来了解具体的代码实现方法;
  • 无代码定义:如果您倾向于使用无代码工具来定义模型,具体的操作和流程可以在“[占位符]”中找到

使用

在前端开发中,模型是前端运行的必要条件,以下场景中,模型不直接感知:

  • 视图渲染
  • 页面之间跳转交互
  • 与后端交互

以下场景中,模型会直接决定前端的渲染逻辑

  • 母版扩展:为某模型扩展母版
  • 布局扩展:为某模型扩展布局
  • 页面扩展:为某模型扩展个性化页面
  • 字段扩展: 扩展字段时加上模型的范围
  • 动作扩展: 扩展动作时加上模型的范围

以上场景中,涵盖了前端工作的方方面面,在OInone体系中,模型不止是后端运行得基础,同样也决定了前端如何运行,那这样做有什么好处呢?

  • 前后端几乎不需要联调,联调的协议用模型来承载
  • 前端无需定义路由、权限埋点

查找

在实际业务开发中,有3个方式可以找到模型

  • 浏览器url查找

image.png

图3-5-7-5 浏览器url查找模型(model)

  • 接口返回查找

第一步找到类似截图请求

image.png

图3-5-7-6 接口找到viewActionQuery

第二步根据返回找模型

image.png

图3-5-7-7 接口找到viewActionQuery

  • vue调试器选中对应的组件查找

image.png

图3-5-7-8 vue调试器查找模型(model)

动作(action)

概念

动作(action)定义了终端用户得交互,它描述了前端与前端、前端与后端之间的交互。

动作涵盖了前端以下部分:

  • 页面跳转(router)
  • 调用后端接口
  • 页内交互(打开弹窗、打开抽屉)

它有两部分的来源:

  • 模型内定义动作
  • 窗口动作(页面跳转、打开弹窗、打开抽屉)
  • 服务器动作(调接口)
  • 前端定义客户端动作,可自定义其它逻辑,例如: 把选中行的某一列数据复制一下

使用

动作的使用绝大部分的情况是由平台自动执行的,在平台执行不符合预期时可以使用自定义动作自行扩展

查找

  • vue调试器选中对应的组件查找
  • 选中服务器动作(ServerAction)

image.png

图3-5-7-9 vue调试器查找服务器动作(ServerAction)

  • 选中窗口动作(ViewAction)

image.png

图3-5-7-10 vue调试器查找窗口动作(ViewAction)

字段(field)

概念

在我们的后端模型中,字段(Field)是核心的定义元素,它们在数据库中表现为数据表的列。更重要的是,这些字段在前端应用中发挥着数据传输的关键作用。例如,当前端需要调用后端接口时,它会发送如下结构的数据:

图3-5-7-11 name字段数据举例

这里的 "name" 是一个字段实例,它连接了前后端的交互。在后端,该字段不仅用于数据存储,也参与逻辑运算。

字段在 Oinone 系统中的加强应用

在 Oinone 系统中,字段的功能得到了扩展。除了基本的前后端数据交互,字段的定义还直接影响前端的用户界面(UI)交互。例如:

  1. 前端交互组件的选择:前端交互组件的类型取决于字段的数据类型。对于 String 类型的 "name" 字段,前端会使用输入框来收集用户输入的 "张三"。

  2. 数据存储和类型定义:在后端,"name" 字段被明确定义为 String 类型,这决定了它如何存储和处理数据。

字段与前端组件定义的解耦

一个关键的设计原则是,前端组件的定义与具体的字段值或字段名(如 "name" 或 "张三")不直接相关,而是基于字段的数据类型(此例中为 String)。这种设计实现了:

  • 前端组件的一致性:确保所有组件的输入输出遵循同一数据类型(如 String)。
  • 高度的组件复用性:在满足 UI 要求的前提下,任何 String 类型的字段都可以使用这种通用的组件设计。

使用

Oinone 系统中的视图与字段交互的灵活性

Oinone 系统为每种视图和字段类型(Ttype)提供了默认的交互模式。这不仅保证了前端工程启动时所有界面的即时展示,也为开发者带来了高度的灵活性和扩展能力。以下是这一设计理念的关键点:

1. 视图与字段交互的默认实现

每种视图都有对应字段类型(Ttype)的默认交互实现,确保用户界面一致且直观。这使得在前端工程启动时,所有界面能够无需额外配置即可正常展示。

2. 灵活性与扩展能力

尽管系统提供了默认的交互方式,开发者仍然拥有自定义这些交互方式的能力。这意味着开发者可以根据应用需求,设计更加贴合业务逻辑和用户体验的交互模式。

3. 覆盖和替换默认组件

最为重要的是,开发者不仅可以添加新的交互方式,还可以完全覆盖和替换系统的默认组件。这提供了极大的自由度,使开发者能够根据具体场景重新设计和实现界面组件,从而达到完全定制化的用户体验。

查找

  • vue调试器选中对应的组件查找

image.png

图3-5-7-12 vue调试器查找字段(field)

视图类型(viewType)

概念

在 Oinone 系统中,视图是模型在前端的具体表现形式。视图的核心组成和功能如下:

1. 组成要素

  • 字段:视图中的字段代表了模型的数据结构,它们是界面上数据显示和交互的基础。
  • 动作:视图包含的动作定义了用户可以进行的操作,如添加、编辑、删除等。
  • 前端UI:视图的界面设计,包括布局、元素样式等,决定了用户的交互体验。

2. 数据源与交互

  • 数据源:视图的数据直接来源于后端模型。这意味着前端视图展示的内容是根据后端模型中定义的数据结构动态生成的。
  • 交互:视图不仅展示数据,还提供与数据交互的能力。这些交互也是基于后端模型定义的,包括数据的增删改查等操作。

3. 灵活性

  • 视图可以灵活选择是否采用模型的交互。这意味着开发者可以根据需求决定视图仅展示模型的数据,或者同时提供与数据的交互功能。

使用

在 Oinone 系统中,用户可以通过无代码界面设计器轻松配置视图。系统内置了以下主要视图类型:

  1. 表格(Table)

  2. 表单(Form)

  3. 详情(Detail)

  4. 搜索(Search)

  5. 画廊(Gallery)

  6. 树(Tree)

界面设计器配置

  • 简便配置:系统提供无代码界面设计器,使用户能够轻松配置内置视图。
  • 系统支持视图:表格、表单、详情等内置视图类型可以直接通过设计器进行配置,包括字段的展示和交互。

自定义页面

  • 个性化需求:如果用户需求超出系统内置视图的范围,可以选择创建自定义页面。
  • 高级专家认证:高级专家认证的用户,理解透前端元数据,可以将自定义页面转化为内置视图之一。
  • 与无代码结合:高级专家认证用户可以结合无代码界面设计器,将个性化的页面与系统内置视图深度融合。

通过这种深度的整合和自定义的能力,系统提供了更灵活、更个性化的前端界面配置和设计体验。

查找

  • 浏览器url查找

image.png

图3-5-7-13 浏览器url查找视图类型(viewType)

-vue调试器查找

image.png

图3-5-7-14 vue调试器查找视图类型(viewType)

-代码查找

-找到如下代码,点击后看所有类型的定义

image.png

图3-5-7-15 SPI中找到注册的视图类型(viewType)

image.png

图3-5-7-16 点击查看所有视图类型(viewType)定义

字段类型(ttype)

概念

在 Oinone 系统中,每个字段的数据类型都与后端的 ttype(类型)一一对应。这意味着每个前端字段类型都有其对应的后端数据类型。开发者可以根据这些 ttype 定义某类类型的组件,以便在前端实现对应类型的数据展示和交互

使用

在 Oinone 系统中,字段类型的前后端协议已经枚举了所有存在的业务类型,满足了多样化的业务场景需求。这些字段类型在前端是只读的,前端开发者只能查看,而不能定义和变更。

内置字段类型包括:

  1. 字符串(String)

  2. 文本(Text)

  3. HTML

  4. 电话号码(Phone)

  5. 电子邮件(Email)

  6. 整数(Integer)

  7. 长整数(Long)

  8. 浮点数(Float)

  9. 货币(Currency)

  10. 日期时间(DateTime)

  11. 日期(Date)

  12. 时间(Time)

  13. 年份(Year)

  14. 布尔(Boolean)

  15. 枚举(Enum)

  16. 映射(Map)

  17. 关联(Related)

  18. 一对一(OneToOne)

  19. 一对多(OneToMany)

  20. 多对一(ManyToOne)

  21. 多对多(ManyToMany)

  22. 对象(Object)

这些内置字段类型涵盖了多种业务场景,同时在前端上的只读特性确保了数据类型的一致性和稳定性。

查找

  • 每一个字段必然有ttype,选中字段查看对应的ttype

image.png

图3-5-7-17 vue调试器查找字段ttype

部件(widget)

概念

在 Oinone 系统中,widget 是字段组件的另一个筛选条件,可以被理解为组件的别名。当字段没有指定别名时,该组件将覆盖所有符合 ttype 和 viewType 条件的组件。widget 适用于在特定页面中定义组件的出现,提供了更灵活的定制能力。

使用

使用场景:

  1. 组件别名:widget 可以被视为字段组件的别名,用于在配置中标识和引用特定的组件。

  2. 条件筛选:通过 widget,可以在部分页面中定义组件的出现,而不影响其他页面的配置。

注意事项:

  • 默认覆盖:当字段未指定 widget 时,该组件将覆盖所有符合 ttype 和 viewType 条件的组件。

  • 页面定制:使用 widget,开发者可以更精细地定制组件在不同页面中的呈现方式。

通过合理使用 widget,系统提供了更加灵活和个性化的组件配置方式,使得不同页面可以呈现不同的组件。

查找

在 Oinone 系统中,用户可以选择查看当前字段对应的 widget。这个操作并非必选项,若未选择,系统将使用默认的字段渲染方式。然而,若用户选择了 widget,它必须与当前字段相同,以确保正确覆盖当前字段的渲染方式。

操作步骤:

  1. 选中字段:在字段配置界面,用户可以选择特定字段进行配置。

  2. 查看 Widget:用户可以查看当前字段对应的 widget,以了解当前字段的渲染方式。

  3. 非必选项:查看当前字段的 widget 是一个非必选项,用户可以选择使用默认的字段渲染方式。

  4. Widget 一致性:如果用户选择了 widget,确保它与当前字段相同,以便正确覆盖当前字段的渲染方式。

通过这种设计,系统提供了灵活的字段配置选项,同时保证了渲染方式的一致性和准确性。

image.png

图3-5-7-18 vue调试器查找部件(widget)

多值(multi)

概念

在 Oinone 系统中,multi 是字段的一个扩充选项,主要解决普通数据类型字段存储多个值的情况。举例来说,如果某个字段定义为 String 类型,后端存储的是单个图片的地址,而需要上传多张图片时,后端需要将该字段定义为 List<String> 类型。在前端,multi 允许将普通数据类型的 String 转换为 Array<String> 进行传输。

使用

在 Oinone 系统中,前端使用时需要在字段注册上标记 multi。这个标记的取值(true 或 false)并非由前端决定,而是由后端在定义字段时确定的。前端只具有查看权限,无法变更这个标记。

操作步骤:

  1. multi 标记:multi 标记表示该字段是否支持存储多个值,由后端在字段定义时决定,缺省时默认为false。

  2. 前端权限:前端只有查看权限,不能在字段注册时变更 multi标记的取值。

查找

  • 每一个字段必然有multi,选中字段查看对应的multi,若没有声明,默认为false

image.png

图3-5-7-19 vue调试器查找多值(multi)

Oinone社区 作者:史, 昂原创文章,如若转载,请注明出处:https://doc.oinone.top/oio4/9264.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:14
下一篇 2024年5月23日 am9:16

相关推荐

  • 特别说明

    教材进度 目前还在编写整改中,特别是目录上带(改)字样的 本版本教材针对4.0,相对3.0增加的特性有: 通用能力部分:比如权限、审计、国际化、系统配置、集成可视化等 新版权限:交互优化,同时支持子管理员 新版审计,支持在线配置审计规则 系统配置,提供多种风格,让伙伴基础风格不在需要自定义主题和组件 新增集成设计器,通过连接器让应用api和数据库集成资产化管理,通过数据流进行接口逻辑编排,并提供统一的开放平台 设计器部分: 加强界面设计器部分对移动端、主题、自定义组件等支持,同时完善对数据管理操作、增加各类常用业务组件,加强对树形与及联的支持,表格视图搜索优化 流程设计器增加:审批员选择自定义逻辑、转交人选择自定义逻辑,支持手工触发、支持数据事务、支持调用模型函数 可视化设计器:增加自定义图表功能、增强下钻能力 模块管理:增加新增、多端配置等支持 内核机制: 性能优化:通过gql层面解决业务研发过程中1+N性能问题,权限性能优化,分布式缓存性能优化,整体性能提升2倍以上 针对多租户应用无状态的支持,低无一体支持本地调试 5.0的核心新特性预告,特性会在开发过程中陆续推出供大家体验,但完整体验时间为2024年6月份 新增打印设计功能 导出的默认交互增强以及导入导出模版设计 默认导入导出在交互时可以指定字段 导入导出模版可图形化设计 多模型AI集成设计器器 自定义组件、自定义图表交互友好性增强 自定义组件,属性面板设计模版化,解决设计组件属性面板的时候不知道有哪些默认属性。 增强组件与动作的结合灵活性 组件增加是否有子组件的通用属性,有子组件的组件具备组件拖拽区 增强UX注解能力,原本只有设计器支持的,后端UX注解也进行对应支持 后端低无一体功能开放(原本该功能只在saas版本上提供),方便咱们做应急和简单应用的时,以无代码为主,低代码为辅的模式。通过低无一体可以通过低代码的方式来解决无代码无法支撑的功能。 工作流增强 增加循环审批节点 增加分支汇集节点增强并行流程能力,比如分支汇集节点可以设置:所有并行节点处理完或只要一条处理完就继续执行。

    2024年5月23日
    2.2K00
  • 开放平台

    1. 开放介绍 开放平台是将 Oinone 平台内的能力向外开放,如开放商品信息查询接口、发货单查询接口等。 包括开放接口、三方应用管理。 2. 开放接口 管理开放接口信息,基本操作包括:新增、编辑、停用/启用。 2.1. 新增接口 定义API名称,选择业务域、关联模型,方法支持GET/POST/PUT/DELETE,配置接口参数、响应结果等信息。 2.2. 编辑接口 编辑需要填写的内容同新增,不做赘述。 2.3. 停用/启用 新增后为已启用,停用后,API将无法访问,请慎重使用;针对停用的API进行启用。 3. 应用管理 管理开放接口集成的外部应用,基本操作包括:新增、查看密钥、授权调整、停用/启用。 3.1. 新增应用 新增应用时,输入应用名称,选择数据传输加密算法AES密钥或RSA公钥,勾选授权的API接口。 3.2. 停用/启用 新增后为已启用,停用后,应用将无法访问授权的接口,请慎重使用;针对停用的应用可进行启用。 3.3. 查看密钥 点击【查看密钥】,弹窗展示当前 API Secret,支持复制。 3.4. 授权调整 指调整当前应用的授权的API 范围。

    2024年6月20日
    2.1K00
  • 2.1 数字化时代软件业的另一个本质变化

    随着企业从信息化向数字化转变,软件公司提供的产品也由传统的企业管理软件向企业商业支撑软件发展。这一变化带来了许多技术上的挑战和机遇。在之前的章节中,我们提到企业的视角已经从内部管理转向业务在线和生态在线协同,这也带来了一系列新的需求。但是,我们常常会忽视这一变化所带来的对系统要求的变化。在本章中,我们将探讨这些技术上的变化,以及这些变化所带来的机遇和挑战。 图2-1 从信息化到数字化软件本质变化 在信息化时代,企业的业务围绕着内部管理效率展开,借鉴国外优秀的管理经验,企业将其管理流程固化下来,典型的例子是ERP项目。这类项目上线后往往长期稳定,不轻易更改,因此信息化时代软件的技术流派侧重于通过模型对业务进行全面支持。例如,SAP具有丰富的配置能力,将已有企业管理思想抽象到极致。其功能基本上可以通过配置来实现,因此其模型设计特别复杂。但是,我们也应该清楚地了解到,配置是面向已知问题的。在数字化时代,创新和业务迭代速度非常快,这种方法可能就不太适合了。我们知道,模型抽象是在设计时具有前瞻性的,一旦不适合,修改起来就会异常困难。 随着数字化时代的到来,企业主的关注点已经从单一企业内部管理转变为了围绕企业上下游价值链的协同展开。这种变化给企业信息化系统提出了更高的要求,例如业务需求的响应速度、系统性能和用户体验等方面。现在,企业对软件不仅是管理需求的承载,更是业务在线化的承载。传统的重模型设计软件模式已经不再适用,因为业务本身不断创新和变化。因此,数字化时代需要新的软件技术流派,这种流派必须是轻模型加上低代码技术的结合体。通过模型抽象80%的通用场景,剩余的20%个性化需求可以通过技术手段来完成。这样的设计可以让每家企业的研发人员轻松理解模型,而不像ERP模型那样异常复杂,无法进行修改。此外,配合低代码技术可以快速研发和上线。如果说配置化是面向已知问题的,那么低代码就是面向未知问题设计的。虽然低代码的概念可以追溯到上个世纪80年代,当时是为了满足企业内部部门之间有协同需求,但又没有专业软件支撑,定制化开发又不划算的辅助场景。但现在它的核心原因是企业数字化的核心场景不稳定,变化很快,每家企业都有强烈的个性化需求。因此,低代码成为解决这些问题的核心手段,数字化时代的低代码需要具备处理复杂场景的能力,而不仅仅是围绕着内部管理展开。 企业在数字化转型的过程中需要考虑到不仅是成熟的全链路业务解决方案,还要应对数字化场景的快速变化和持续创新的需求。为此,Oinone打造了一站式低代码商业支撑平台,从业务与技术两个维度来帮助企业建立开放、链接、安全的数字化平台。这将在水平和垂直两个维度上全面推动企业数字化转型。 另外,低代码的另一个好处是完成了软件本身的数字化建设。通过基于元数据设计,元数据成为软件中数据、逻辑和交互的数据,软件结合AI可以有更多的创造可能。想象一下,AI了解软件的元数据后可以自我运作,人在极少情况下才需要参与,人机交互也会发生大的改变。未来的软件交互不再需要研发提前预设,而是能够实现用户所需即所呈现的效果。作为一家帮助企业进行数字化转型的软件公司,请问您的数字化转型是否已经完成呢?

    2024年5月23日
    1.4K00
  • 第1章 揭开面纱,理解Oinone

    本章旨在从以下几个维度逐步揭开Oinone的面纱,让大家了解Oinone的初心与愿景,以及它是如何站在软件领域的巨人肩膀上,结合企业数字化转型的深入,形成全新的理念,帮助企业完成数字化转型。 具体来说,本章会从以下四个方面逐一展开: Oinone的初心与愿景:结合中国软件行业的发展与自身职业发展经历,探讨Oinone为何诞生以及其愿景是什么。 Oinone致敬西方软件行业的新贵odoo:介绍Oinone的灵感来源,探究Oinone与odoo的异同,以及如何从odoo中汲取经验。 从企业转型困境,引出Oinone新的思路:通过剖析企业数字化转型的困境,引出Oinone提出的全新思路,以及如何应对企业数字化转型的挑战。 行业对比,让您从不同视角理解Oinone:通过与同行业产品进行对比,从不同的视角深入理解Oinone的特点和优势。

    Oinone 7天入门到精通 2024年5月23日
    3.3K00
  • 3.5.6.2 视图的配置

    ,视图的大致配置在3.5.2.2【构建View的Template】一文中已经介绍过,这里主要介绍视图层的基本属性配置,这些配置会透传给视图内的组件Widget,组件会根据配置内容做出不同的呈现样式 视图的配置 Table的配置 配置项 可选值 默认值 作用 activeCount number 5 表格上方动作区默认展示操作的数量,超过个数的操作将被折叠收起 inlineActiveCount number 3 表格最右侧操作列默认展示操作的数量,超过个数的操作将被折叠收起 defaultPageSize number 30 表格默认分页条数 表3-5-6-9 Table的配置 Form/Detail的配置 配置项 可选值 默认值 作用 direction horizontal/vertical(大小写不明感) vertical 表单标题排列方式 表3-5-6-10 Form/Detail的配置 Table的配置项举例 Step1 修改宠物达人的表格视图 我们在宠物达人的自定义表格视图的Template文件中增加三个属性配置activeCount="1" 、inlineActiveCount="1"、 defaultPageSize="1" <view name=tableView model=demo.PetTalent cols=1 activeCount=1 inlineActiveCount=1 defaultPageSize=1 type=TABLE enableSequence=true > </view> 图3-5-6-15 在宠物达人的自定义表格视图的Template文件中增加三个属性配置 Step2 重启看效果 图3-5-6-16 示例效果 Form的配置举例 Step1 修改宠物达人的表单视图 我们在宠物达人的自定义表格视图的Template文件中增加一个属性配置direction = horizontal 。 另:宠物达人在之前的教程中增加了一些字段,大家利用默认视图把新增字段也展示出来。还是通过数据库查看默认页面定义,找到base_view表,过滤条件设置为model =\’demo.PetTalent\’ and name =\’formView\’,查看template字段,把里面涉及新增字段复制到pet_talent_form.xml文件中。 <view name=formView1 model=demo.PetTalent cols=2 type=FORM priority=1 direction = horizontal> </view> 图3-5-6-17 增加一个属性配置direction = "horizontal" Step2 重启看效果 图3-5-6-18 示例效果

    2024年5月23日
    1.5K00

Leave a Reply

登录后才能评论