2.4.1 Oinone独特性之单体与分布式的灵活切换

相关推荐

• Oinone 7天入门到精通

  4.2.8 自定义组件与设计器结合（新）

  界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域，然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标，弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后，点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD，了解一下工程运行要点，可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码，可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build，生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录，我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面，上传上面生成的js和css文件，并点击“确定”保存，到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件（这里的表单页面是提前准备好的，这里就不介绍如何新建表单页面了） 将左侧组件库拉直最底部，可以看到刚刚新建的组件，将其拖至中间设计区域，我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的（ps: 如果样式未生效，请刷新页面查看，因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！

  史, 昂

  2024年5月23日

  1.5K000
• Oinone 7天入门到精通

  2.3 Oinone独特性之源，元数据与设计原则

  让我们来揭开Oinone元数据的神秘面纱，了解它的核心组成、获取方式、面向对象特性以及带来的好处。您或许会想，这些特性能否解决企业数字化转型中互联网架构遇到的挑战呢？ 元数据是本文多次提到的重要概念。作为LCDP的基础，元数据支持企业所有研发范式。它数字化描述了软件本身，包括数据、行为和视图等方面。在描述数据时，元数据本身就是数据的数据；在描述行为时，它就是行为的数据；在描述视图时，它就是视图的数据。只有深入理解元数据，才能全面了解Oinone的其他特性。 本章节将介绍元数据的整体概览（如下图2-3所示），带领您了解其核心组成、面向对象特性以及组织方式。请注意，本章节将不会详细展开元数据的细节，这些细节将在后续的相关章程中深入介绍。 图2-3 元数据整体视图 一：以下是元数据的核心组成介绍： 模块(Module)：它是将程序划分成若干个子功能，每个模块完成了一个子功能，再把这些模块总起来组成一个整体。它是按业务领域划分和管理的最小单元，是一组功能、界面的集合。 模型（Model）：Oinone一切从模型出发，是数据及对行为的载体。它是对所需要描述的实体进行必要的简化，并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。它包括元信息、字段、数据管理器和自定义函数。同时遵循面向对象设计原则，包括封装、继承和多态。 交互组件（UI Componment）：它用菜单、视图和Action来勾绘出模块的前端交互拓扑，并且用组件化的方式统一管理、布局和视图。它用Action来描述所有可操作行为。 函数（Function）：它是Oinone可执行逻辑单元，跟模型绑定则对应模型的方法。它描述满足数学领域函数定义，含有三个要素：定义域A、值域C{f（x），x属于A}和对应法则f。其中核心是对应法则f，它是函数关系的本质特征。它满足面向对象原则，可以设置不同开放级别，本地与远程智能切换。 元数据注册表：它以模块为单位的安装记录，在模块安装时，相关的元数据都会在元数据注册表中记录。 二：元数据的产生方式，既可以通过代码注解扫描获取，也可以通过可视化编辑器直接添加。 从代码注解中扫描获取，示例如下代码（如下图2-4所示）。 @Model.model(ResourceBank.MODEL_MODEL) @Model(displayName = "银行",labelFields = "name") public class ResourceBank extends IdModel { public static final String MODEL_MODEL = "resource.ResourceBank"; @Field.String @Field(required = true, displayName = "名称") private String name; @Field.String @Field(required = true, displayName = "银行识别号码", summary = "Bank Identifier Code, BIC 或者 Swift") private String bicCode; …… } 图2-4 从代码注解中扫描获取元数据 可视化的编辑器添加元数据，具体介绍详见7.1《Oinone的设计器》章节 三：Oinone是一种通用低代码开发平台，其元数据设计满足应用开发所需的所有元素，并支持所有研发范式。 它基于元数据的具体实现秉承以下原则： 部署与研发无关； 以模型驱动，符合面向对象设计原则； 代码与数据相互融合，编辑器产生的元数据以面向对象的方式继承扩展标准产品的元数据。 这些原则的集合使整个平台能够实现以下功能特性： 开发分布式应用与单体应用一样简单，部署方式由后期决定。如果要部署为分布式应用，则需要在boot工程中引入Oinone的rpc包。详见4.3《Oinone的分布式体验》一章节； 面向对象的特性使得每个需求都可以是独立模块，独立安装与卸载，让系统像乐高积木一样搭建； 支持两种元数据产生方式，融合的原则确保标准产品迭代与个性化保持独立，真正做到低无一体。 四：这些特性刚好也解决了2.2《互联网架构作为最佳实践为何失效》一章节中客户挑战的三个刺眼问题 互联网架构落地企业数字化转型面临的问题 Oinone应对的策略 不是说敏捷响应吗？为什么改个需求这么慢，不单时间更长，付出的成本也更高了？ 特性1、特性2、特性3 不是说能力中心吗？当引入新供应商或有新场景开发的时候，为什么前期做的能力中心不能支撑了？ 特性2、特性3 不是说性能好吗？为什么我投入的物理资源更多了？ 特性1 表2-2互联网架构落地企业数字化转型面临的问题及Oinone应对策略

  史, 昂

  2024年5月23日

  2.1K001
• Oinone 7天入门到精通

  3.5.7.1 基础概念

  模块(module) 概念 在 Oinone 系统的架构中，模块（module）是核心组成元素之一，可以被理解为域（domain）的一个具象化概念。模块的来源有两种：一种是基于后端代码定义，另一种是通过无代码新增。具体的代码定义方式，请参考“[占位符]”，而无代码定义的相关信息则可在“[占位符]”找到。在 Oinone 体系中，模块对应两种实体：模块和应用。 模块： 这是一类特定能力的集合，它可以依赖其他模块，也可以被其他模块依赖。 应用： 它是一种特殊的模块，具备模块的所有特性，并在此基础上可被终端用户访问。 使用 在前端开发中，module通常以应用的形式出现，它们往往对前端用户保持透明。在接下来的讨论中，我们主要围绕应用来探讨module的使用。从应用的角度出发，我们可以在前端开发中识别出以下几种典型使用场景，并通过具体的业务案例来加以说明 应用菜单扩展： 实现自定义母版来定义特定应用的菜单 表格布局扩展： 用于自定义布局的工具，以定义特定应用的表格布局 在这些场景中，我们着重实现了应用层面的隔离，确保每个模块都能在应用的维度上独立运作 查找 在实际业务开发中，有3个方式可以找到应用 浏览器url查找(查找速度快，可能不准) 图3-5-7-1 浏览器url查找模块(module) 接口返回查找 第一步找到截图类似请求 图3-5-7-2 接口找到viewActionQuery 第二步根据返回找应用 图3-5-7-3 接口返回查找模块(module) vue调试器选中对应的组件查找 图3-5-7-4 vue调试器查找模块(module) 推荐使用浏览器url查找，若与预期不符，可用另外两种方式查找 模型(model) 概念 在 Oinone 系统的架构中，模型（model）是另一个关键核心组成部分。模型在业务层面主要体现之一为数据库的实体表，它是承载业务实现的基础结构。要了解模型的详细介绍，请参考“[占位符]”，前端所用的模型，对应后端代码定义来说，代表的是模型的编码。 关于模型的定义，我们提供了两种方法： 代码定义： 对于需要通过编程实现的模型定义，您可以参考“[占位符]”来了解具体的代码实现方法； 无代码定义：如果您倾向于使用无代码工具来定义模型，具体的操作和流程可以在“[占位符]”中找到 使用 在前端开发中，模型是前端运行的必要条件，以下场景中，模型不直接感知: 视图渲染 页面之间跳转交互 与后端交互 以下场景中，模型会直接决定前端的渲染逻辑 母版扩展：为某模型扩展母版 布局扩展：为某模型扩展布局 页面扩展：为某模型扩展个性化页面 字段扩展: 扩展字段时加上模型的范围 动作扩展: 扩展动作时加上模型的范围 以上场景中，涵盖了前端工作的方方面面，在OInone体系中，模型不止是后端运行得基础，同样也决定了前端如何运行，那这样做有什么好处呢？ 前后端几乎不需要联调，联调的协议用模型来承载 前端无需定义路由、权限埋点 查找 在实际业务开发中，有3个方式可以找到模型 浏览器url查找 图3-5-7-5 浏览器url查找模型(model) 接口返回查找 第一步找到类似截图请求 图3-5-7-6 接口找到viewActionQuery 第二步根据返回找模型 图3-5-7-7 接口找到viewActionQuery vue调试器选中对应的组件查找 图3-5-7-8 vue调试器查找模型(model) 动作(action) 概念 动作(action)定义了终端用户得交互，它描述了前端与前端、前端与后端之间的交互。 动作涵盖了前端以下部分: 页面跳转(router) 调用后端接口 页内交互(打开弹窗、打开抽屉) 它有两部分的来源: 模型内定义动作 窗口动作(页面跳转、打开弹窗、打开抽屉) 服务器动作(调接口) 前端定义客户端动作，可自定义其它逻辑，例如: 把选中行的某一列数据复制一下 使用 动作的使用绝大部分的情况是由平台自动执行的，在平台执行不符合预期时可以使用自定义动作自行扩展 查找 vue调试器选中对应的组件查找 选中服务器动作(ServerAction) 图3-5-7-9 vue调试器查找服务器动作(ServerAction) 选中窗口动作(ViewAction) 图3-5-7-10 vue调试器查找窗口动作(ViewAction) 字段(field) 概念 在我们的后端模型中，字段（Field）是核心的定义元素，它们在数据库中表现为数据表的列。更重要的是，这些字段在前端应用中发挥着数据传输的关键作用。例如，当前端需要调用后端接口时，它会发送如下结构的数据： 图3-5-7-11 name字段数据举例 这里的 "name" 是一个字段实例，它连接了前后端的交互。在后端，该字段不仅用于数据存储，也参与逻辑运算。 字段在 Oinone 系统中的加强应用 在 Oinone 系统中，字段的功能得到了扩展。除了基本的前后端数据交互，字段的定义还直接影响前端的用户界面（UI）交互。例如： 前端交互组件的选择：前端交互组件的类型取决于字段的数据类型。对于 String 类型的 "name" 字段，前端会使用输入框来收集用户输入的 "张三"。 数据存储和类型定义：在后端，"name" 字段被明确定义为 String 类型，这决定了它如何存储和处理数据。 字段与前端组件定义的解耦 一个关键的设计原则是，前端组件的定义与具体的字段值或字段名（如 "name" 或 "张三"）不直接相关，而是基于字段的数据类型（此例中为 String）。这种设计实现了： 前端组件的一致性：确保所有组件的输入输出遵循同一数据类型（如 String）。 高度的组件复用性：在满足 UI 要求的前提下，任何 String 类型的字段都可以使用这种通用的组件设计。 使用 Oinone 系统中的视图与字段交互的灵活性 Oinone 系统为每种视图和字段类型（Ttype）提供了默认的交互模式。这不仅保证了前端工程启动时所有界面的即时展示，也为开发者带来了高度的灵活性和扩展能力。以下是这一设计理念的关键点： 1. 视图与字段交互的默认实现 每种视图都有对应字段类型（Ttype）的默认交互实现，确保用户界面一致且直观。这使得在前端工程启动时，所有界面能够无需额外配置即可正常展示。 2. 灵活性与扩展能力 尽管系统提供了默认的交互方式，开发者仍然拥有自定义这些交互方式的能力。这意味着开发者可以根据应用需求，设计更加贴合业务逻辑和用户体验的交互模式。 3. 覆盖和替换默认组件 最为重要的是，开发者不仅可以添加新的交互方式，还可以完全覆盖和替换系统的默认组件。这提供了极大的自由度，使开发者能够根据具体场景重新设计和实现界面组件，从而达到完全定制化的用户体验。 查找 vue调试器选中对应的组件查找 图3-5-7-12 vue调试器查找字段(field) 视图类型(viewType) 概念 在 Oinone 系统中，视图是模型在前端的具体表现形式。视图的核心组成和功能如下： 1. 组成要素 字段：视图中的字段代表了模型的数据结构，它们是界面上数据显示和交互的基础。 动作：视图包含的动作定义了用户可以进行的操作，如添加、编辑、删除等。 前端UI：视图的界面设计，包括布局、元素样式等，决定了用户的交互体验。 2. 数据源与交互 数据源：视图的数据直接来源于后端模型。这意味着前端视图展示的内容是根据后端模型中定义的数据结构动态生成的。 交互：视图不仅展示数据，还提供与数据交互的能力。这些交互也是基于后端模型定义的，包括数据的增删改查等操作。 3. 灵活性 视图可以灵活选择是否采用模型的交互。这意味着开发者可以根据需求决定视图仅展示模型的数据，或者同时提供与数据的交互功能。 使用 在 Oinone 系统中，用户可以通过无代码界面设计器轻松配置视图。系统内置了以下主要视图类型： 表格（Table） 表单（Form） 详情（Detail） 搜索（Search） 画廊（Gallery） 树（Tree） 界面设计器配置…

  史, 昂

  2024年5月23日

  1.8K000

• 庄卓然

  从2009年加入阿里至今，经历了“三淘”时期、天猫时期、双十一，到最后的all in无线手淘时期，几乎是赶上了淘系发展的所有历史性事件。在这个过程中，每一次业务的变革都催生着技术的变迁，倒逼着我们用技术的方式去解决业务问题：在存储、IO、网络等环节满足不了淘系的业务规模时，开始去IOE，最后演化成了阿里云；当业务的规模大到不能通过简单加机器的方式去做调整、当开发的规模大到所有人在一起开发会互相影响的的时候，我们开始做SOA改造，最后演化成了业务中台；在经历了几届双十一后的巨大挑战后，我们开创了里程碑式的全链路压测；在手淘时代，为了解决动态发版问题，我们植入容器概念，搭建了可动态插拔的三层架构，一年实现了500多次的发版；为了同时满足写一套代码就解决多端开发和高并发的性能问题，我们做了weex，最后还捐给了开源社区…… 每一次的业务需求推动技术进步，而技术的进步永远会超出我们的想象！ 同为技术宅，我在Oinone身上能清晰地感受到技术演进的脉络，企业在数字化时代，需要一个能快速上手、全面设计、灵活适应且低成本的技术工具，时代的变迁推动了Oinone的诞生。Oinone是一种全新的开发方式，在数字化时代，Oinone在提升研发效率上做出的创新性“低无一体”的设计对传统软件代码开发或者无代码开发一定会有巨大冲击，这种冲击会对软件市场格局造成什么样的变化，我拭目以待。 最后，愿我们这些追光人，在时代的洪流中，都能留下一抹印迹，不辜负时代，不辜负自己。 现任阿里巴巴副总裁，飞猪总裁，曾任阿里大文娱CTO兼优酷COO、淘宝CTO 庄卓然（南天）

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  2.2K000
• Oinone 7天入门到精通

  流程

  1. 流程介绍 日常工作和生活中到处都存在各种各样的流程，例如业务开展中的产品研发流程、产品制作流程、订单发货流程等，也有管控分险的费用报销流程、员工请假审批流程、项目立项流程等。流程设计器可以帮助公司实现流程的数字化，规范流程操作，减少人工操作并留存痕迹，提高工作效率和安全性。 2. 流程的组成 流程设计器主要包含基本操作和流程设计两个部分。前者包含了流程的新增、删除、复制、停用/启用、编辑、搜索。后者包含单一流程的基础信息修改、流程设计、参数配置、保存、发布。 2.1 流程的基本操作 流程页面有两种显示方式，默认为平铺显示的模式，可以点击切换为列表详情显示的模式。 2.1.1 新增 平铺显示和列表详情模式下点击左上角的创建按钮即可新增一个流程，点击后进入流程设计页面，流程名默认为“未命名流程”，可自行修改。 2.1.2 删除 遇到流程创建有误，没有使用过且将来也不会使用该流程，可以删除流程。需要注意的是，删除流程的前提是该流程已停用，并且该流程从未执行过。 2.1.3 复制 遇到流程节点动作相似度较高的情况可以使用复制流程的功能，点击按钮后生成一个“原流程名-复制”的流程，并且进入新流程的流程设计界面。 2.1.4 停用/启用 流程需要更新或暂时不用时可以使用停用功能。流程停用后将不会执行流程中的动作，正在执行中的流程不受停用影响，会正常执行直到流程结束。 点击启用按钮，流程恢复启用状态，可正常触发。 2.1.5 编辑 点击编辑进入该流程的设计页面。 2.1.6 搜索 页面最上方的是搜索区，可以按照流程名称、触发方式、启用状态、更新状态进行筛选搜素，点击重置按钮修改搜索条件。

  史, 昂

  2024年1月20日

  2.2K000