Oinone 7天入门到精通

开放平台

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日
1.8K000
Oinone 7天入门到精通

自定义组件

1. 定义组件介绍平台提供了大多数的通用组件，面对企业个性话需求、复杂的业务场景，我们也提供了自定义组件的能力，帮助企业更快实施业务需求。自定义组件包含“组件画廊”“组件排序”“元件画廊”“元件属性设计”四个页面。 1.1 组件与元件在介绍如何自定义组件前，需要先了解以下概念：组件：页面设计的组件库中看到的是组件。每个组件都有自己的属性面板，通过属性、字段决定组件逻辑，而自定义组件就是需要构建出组件自身的属性信息，再结合业务配置组件的属性、使用组件。一个组件在不同的业务类型、视图类型、单值/多值，其属性面板是不同的，不同业务类型、视图类型、单值/多值的组合我们成为元件，多种组合即为多个元件，所以一个组件包括多个元件。元件：一个组件可以对应多个元件。在创建时明确元件所适用的字段业务类型、单/多值、视图类型，在画布中切换元件时，会结合当前组件的字段业务类型、单/多值、所在视图类型确定可以使用哪一个元件。此处切换的也是元件。示例：创建一个“下拉选”的组件，其中可以包含“下拉单选”“下拉多选”两个元件。“下拉选”组件从组件库中拖入时，设置单值时使用“下拉单选”元件，设置多值时使用“下拉多选”元件。 2. 组件管理 2.1 组件创建在组件画廊页面，点击添加组件，在弹窗中完善信息创建组件。 2.2 组件操作自定义组件支持“搜索、删除、作废、查看引用关系、管理元件、编辑、低无一体、排序”的操作。搜索：默认搜索可见组件，可切换“全部、可用、废弃”搜索组件，也可使用组件名称搜索。删除：若组件未被引用，则可以直接删除。作废：组件作废后，不可在画布中展示，不可在组件切换时使用，但已使用的数据不影响。查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当组件无引用关系时才支持删除。管理元件：点击进入元件的管理页面。编辑：可修改组件名称、组件图表、组件描述。低无一体：比较复杂，在第5章中单独讲解。排序：进入排序页，可拖动排序自定义组件。自定义组件会插在系统组件之后。可以点击“查看排序结果”选项页查看最终排序结果。排序同样会更新画布中的组件库顺序。 3. 元件管理 3.1 元件创建在元件画廊页面，点击添加元件，在弹窗中完善信息创建一个元件。 3.2 元件操作元件支持“删除、作废、查看引用关系、编辑、设计元件属性”的操作。删除：若元件未被引用，则可以直接删除。作废：元件作废后，不影响原来已使用的元件，无法新添加、使用该元件。查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当元件无引用关系时才支持删除。此处的引用关系数量会小于等于组件引用关系的数量。编辑：可修改元件名称、支持视图类型、元件描述。设计元件属性：比较复杂，将在第4章中单独讲解。 4. 设计元件属性元件属性设计页面主要操作集中在这三部分，分别是①视图切换②属性面板设计区③复制功能视图切换：元件创建时选择的支持视图类型，在①区域平铺可切换对应视图的属性面板进行设计。属性面板设计区：可将组件拖入属性面板设计区进行设计，设计的是自定义组件的属性面板，左侧组件库和页面设计的组件库相同，仍然支持创建字段或使用模型字段，右侧进行元数据面板、属性面板设置。复制功能：可将已设置好的属性面板复制到其他视图，提高设计效率。 5. 低无一体低无一体简单讲就是组件代码上传，通过载入代码使组件在设计页面和实现页面可见和交互。系统内置的属性不满足需求时，要用低无一体写代码，定制属性，比如从模型中拖拽设计就是内置的属性，从组件库中设置，就要配合低无一体，否则无效。首次进入组件设计或组件中的元件变更时需要生成SDK。生成结束后展示SDK生成时间，并且“下载模版工程”按钮可用。点击下载模版工程，会自动下载模板工程。在模版工程中编写前端代码。根据实际需求上传JS、CSS文件后提交即可。

史, 昂
2024年6月20日
1.3K000
Oinone 7天入门到精通

4.2.5 框架之网络请求-Request

在中后台业务场景中，大部分的请求时候是可以被枚举的，比如创建、删除、更新、查询。在上文中，我们讲了httpClient如何自定义请求，来实现自己的业务诉求。本文中讲到的Request是离业务更近一步的封装，他提供了开箱即用的API，比如insertOne、updateOne，它是基于HttpClient做的二次封装，当你熟悉Request时，在中后台的业务场景中，所有的业务接口自定义将事半功倍。一、Request详细介绍元数据-model 获取模型实例 import { getModel } from '@kunlun/dependencies' getModel('modelName'); 图4-2-5-1 获取模型实例清除所有缓存的模型 import { cleanModelCache } from '@kunlun/dependencies' cleanModelCache(); 图4-2-5-2 清除所有缓存的模型元数据-module 获取应用实例，包含应用入口和菜单 import { queryModuleByName } from '@kunlun/dependencies' queryModuleByName('moduleName') 图4-2-5-3 获取应用实例查询当前用户所有的应用 import { loadModules } from '@kunlun/dependencies' loadModules() 图4-2-5-4 查询当前用户所有的应用 query 分页查询 import { queryPage } from '@kunlun/dependencies' queryPage(modelName, { pageSize: 15, // 一次查询几条 currentPage, 1, // 当前页码 condition?: '' // 查询条件 maxDepth?: 1, // 查几层模型出来，如果有2，会把所有查询字段的关系字段都查出来 sort?: []; // 排序规则 }, fields, variables, context) 图4-2-5-5 分页查询自定义分页查询-可自定义后端接口查询数据 import { customQueryPage } from '@kunlun/dependencies' customQueryPage(modelName, methodName, { pageSize: 15, // 一次查询几条 currentPage, 1, // 当前页码 condition?: '' // 查询条件 maxDepth?: 1, // 查几层模型出来，如果有2，会把所有查询字段的关系字段都查出来 sort?: []; // 排序规则 }, fields, variables, context) 图4-2-5-6 自定义分页查询查询一条-根据params匹配出一条数据 import { queryOne } from '@kunlun/dependencies' customQueryPage(modelName, params, fields, variables, context) 图4-2-5-7 根据params匹配出一条数据自定义查询 import { customQuery } from '@kunlun/dependencies' customQuery(methodName, modelName, record, fields, variables, context) 图4-2-5-8 自定义查询 update import { updateOne } from '@kunlun/dependencies' updateOne(modelName, record, fields, variables, context) 图4-2-5-9 update insert import { insertOne } from '@kunlun/dependencies' insertOne(modelName, record, fields, variables, context) 图4-2-5-10 insert delete import { deleteOne } from '@kunlun/dependencies'…

史, 昂
2024年5月23日
1.3K000
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.3K000
Oinone 7天入门到精通

2.4.2 Oinone独特性之每一个需求都可以是一个模块

我们的Oinone平台采用模型驱动的方式，并符合面向对象设计原则，每个需求都可以是一个独立模块，可以独立安装、升级和卸载。这让系统真正像乐高积木一样搭建，具有高度的灵活性和可维护性。与大部分低代码或无代码平台不同的是，它们的应用市场上的应用往往是模板式的，也就是说，这是一个拷贝，个性化只能在应用上直接修改，而且一旦修改就不能升级。这对于软件公司和客户来说都非常痛苦。客户无法享受到软件公司产品的升级功能，而软件公司在服务大量客户时，也会面临不同版本的维护问题，成本也非常高。而我们的Oinone平台完全避免了这些问题，让客户和软件公司都可以从中受益（如下图2-9、2-10所示）。图2-9软件公司与客户项目的关系-让标准与个性化共存图2-10 软件公司与客户项目的关系-让升级无忧实现原理在满足客户个性化定制需求时，传统的方法通常是直接修改标准产品源码，但这样做会带来一个问题：标准产品无法持续升级。相反，无论是在OP模式还是SaaS模式下，Oinone都采用全新的模块为客户进行个性化开发，保持标准产品和个性化模块的独立维护和升级。这是因为在元数据设计时，Oinone采用了面向对象的设计原则，实现了元数据设计与面向对象设计思想的完美融合。面向对象设计的核心特征包括封装、继承、多态，而Oinone的元数据设计完全融入了这些思想。下面是几个例子，说明Oinone的元数据设计如何体现面向对象设计的核心特征，并带来了什么好处：继承：在继承原有模型的字段、逻辑、展示的情况下，增加一段代码来扩展模型的字段、逻辑、展示。多态：在继承原有模型的字段、逻辑、展示的情况下，增加一段代码来覆盖模型的原有字段、逻辑、展示。封装：外部无需关心模型内部如何实现，只需按照不同场景调用模型对应开放级别的字段、逻辑、展示。这些特征和优势使得Oinone在满足客户个性化需求时更加灵活和可持续，同时使得标准产品的维护和升级变得更加容易和高效。在Java语言设计中，万物皆对象，一切都以对象为基础。而Oinone的元数据设计则是以模型为出发点，作为数据和行为的承载体。如下图2-11清晰地描述了Java面向对象编程中封装、继承、多态在Oinone元数据中的对应关系。Oinone元数据描述了B对象继承A对象并拥有其所有属性和方法，并覆盖了A对象的属性1和方法1，同时新增了属性3和方法3。此外，Oinone的面向对象特性是用元数据来描述的。一方面，我们基于Java编码规范收集相关元数据，以保持不改变Java编程习惯。另一方面，方法和对象的挂载是松耦合的，只要按照元数据规范进行挂载，就能轻松地将其附加到模型上。在不改变原有A对象的情况下，我们可以直接增加方法和属性（如下图2-12所示）。图2-11 java面向对象在Oinone元数据中对应图2-12 java对象的修改 VS Oinone元数据模型的修改 Oinone函数不仅支持面向对象的继承和多态特性，还提供了面向切面的拦截器和SPI机制的扩展点，以应对方法逻辑的覆盖和扩展，以及系统层面的逻辑扩展（如下图2-13所示）。这些扩展功能可以独立地在模块中维护。其中，拦截器可以在不侵入函数逻辑的情况下，根据优先级为满足条件的函数添加执行前和执行后的逻辑。扩展点是一种类似于SPI机制的逻辑扩展机制，用于扩展函数的逻辑。通过这一机制，可以对函数逻辑进行灵活的扩展，以满足不同的业务需求。图2-13 Oinone函数拦截与扩展机制不管是对象、属性还是方法，都可以以独立的模块方式来扩展，这就使得每一个需求都可以成为一个独立的模块，方便我们在研发标准产品时进行模块化的划分，同时也让我们在以低代码模式为客户进行二次开发时，能够更好地支持“标准产品迭代与个性化保持独立”的需求。在2.4.3【oinone独特性之低无一体】一文中，我们也提到了这个特性，但那是在低无一体的情况下，通过元数据融合来实现的。让我们看看基于低代码开发模式下，典型的Oinone二次开发工程结构（如下图2-14所示），就可以更好地理解这个特性啦！图2-14 Oinone典型的二开工程结构

史, 昂
2024年5月23日
1.3K000