致Oinone读者

相关推荐

• Oinone 7天入门到精通

  3.5.7.6 自定义字段

  字段是什么 字段的基本概念 定义：字段通常指的是数据的一个单独项，它可以是一个文本框、下拉菜单、复选框等，用于在用户界面上收集或展示数据。 用途：在表单中，字段用于收集用户输入；在表格或列表中，字段用于显示数据。 类型：字段可以有不同的类型，如文本、数字、日期等，这些类型通常由数据模型定义。 Oinone框架中的字段 在Oinone框架中，字段的设计和实现遵循以下原则： 后端模型驱动：前端的字段直接由后端的数据模型决定。这意味着后端定义了哪些数据应该展示，以及如何展示。 减少前后端联调：由于字段的定义和行为是由后端控制的，前后端的联调需求大大减少。前端开发者主要关注于如何呈现这些字段，而后端则负责数据的逻辑和结构。 灵活性与规范性：虽然Oinone推荐所有场景都遵循后端模型驱动字段的原则，以保持前后端的一致性和减少沟通成本，但它也为高度定制化的前端页面提供了灵活性。 元数据使用：Oinone可能还使用元数据来进一步定义字段的行为，例如它们是否可见、如何验证用户输入等。 结合前后端 在使用Oinone时，理解前后端如何合作来定义和展示字段是很重要的。这种方法不仅提高了开发效率，而且有助于确保数据的一致性和应用程序的可维护性。同时，对于那些需要特定定制或特殊处理的场景，开发团队能够灵活地适应这些需求，在遵守总体架构原则的同时进行一些特定的调整和优化。 作用场景 在Oinone框架中，字段扮演着连接后端数据模型和前端用户界面的重要角色。其作用场景包括但不限于以下几点： 业务组件的核心： Oinone集成了AntdDesignVue的全部UI组件，将它们转化为业务组件。这些业务组件以字段的形式存在，使得前端开发变得简单高效。开发人员可以直接使用这些现成的业务组件来构建用户界面，大大减少了开发工作量。 无代码开发支持： 字段的设计使得Oinone支持无代码开发。开发者可以通过拖拉拽的方式在前端快速构建界面，而后端模型的定义直接决定了这些界面的生成。这种模式简化了传统的前端开发流程，提升了开发效率。 个性化定制： 虽然标准的UI组件可以满足大部分需求，但复杂多变的业务场景往往需要更多个性化的处理。在Oinone中，开发者可以根据具体业务需求和公司的UI指南，定义专门针对特定行业或客户的定制化字段和组件。 与无代码平台的结合： Oinone允许将个性化的字段和组件与无代码平台相结合。这意味着即使在进行个性化定制时，也能保持使用无代码工具的便利性，实现更灵活、更高效的前端开发。 适应多维度业务需求： 由于字段在Oinone中的灵活性和可定制性，它们能够适应多维度的业务需求，无论是从UI设计、用户体验还是业务逻辑的角度，字段都能提供合适的解决方案 自定义字段 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./field： 图3-5-7-24 自定义字段工程目录示例 示例代码 创建自定义字段组件： 使用Vue框架创建一个新的组件（例如 CustomStringFieldVue），并定义其模板、脚本和样式。 在模板中定义字段的HTML结构。 在脚本中使用 defineComponent 来定义Vue组件。 字段类的定义： 导入必要的模块，如 FormFieldWidget, ModelFieldType, SPI, ViewType 等。 使用 @SPI.ClassFactory 装饰器来注册自定义字段。 在类内部初始化并设置组件。 SPI注册参数解释： viewType: 指定视图类型，如表单视图或搜索视图。 widget: 可以指定组件名称。 ttype: 字段的业务类型，例如字符串、数字等。 multi: 指明字段是否支持多值。 model: 定义字段所属的模型。 viewName: 指定视图名称。 name: 定义所属字段的名称。 import {FormFieldWidget, ModelFieldType, SPI, ViewType} from '@kunlun/dependencies'; import CustomStringFieldVue from './CustomStringField.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class CustomStringField extends FormFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomStringFieldVue); return this; } } 图3-5-7-24 自定义字段组件(TS)示例 <template> <div class="custom-string-filed-wrapper"> 字段组件 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'CustomStringFieldVue' }) </script> <style lang="scss"> .custom-string-filed-wrapper { } </style> 图3-5-7-24 自定义字段组件(Vue)示例 效果 图3-5-7-24 自定义字段效果示例

  史, 昂

  2024年5月23日

  1.6K000
• 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天入门到精通

  通知类

  1.通知类 1.1 站内信 当流程节点需要向用户发送消息或提示时使用站内信这个节点动作。接收人的选取类似审批节点的审批人，通知内容必填，配置完成，保存即可。 节点触发后，接收人会在全渠道运营平台-工作台-我的消息中查看到站内信。 1.2 邮件 当需要向指定邮箱发送邮件时使用邮件这个节点动作。可直接输入邮箱号，或者按照员工、部门、角色来选择，给接收人登记的邮箱发送邮件，也可以选择模型中的邮箱来发送邮件，若人员重复时只会发送一次邮件。填写主题，填写正文时可以调用当前流程中的一些模型字段的变量。 1.3 短信 发送短信需要在工作流-系统设置-短信模板中创建一个短信模板，阿里云模版新增需要一段时间审核，审核通过后就可以正常使用短信节点。短信的接收人与邮件的操作方式一致，之后选择短信模板，并且确定好变量的对应关系即可。

  史, 昂

  2024年6月20日

  1.6K000
• Oinone 7天入门到精通

  高级组件

  本篇主要结合业务场景介绍高级组件的使用方法。 级联选择/树选择 级联选择与树选择是同一类业务场景、不同的交互体验，在这里我们一起说明。 业务场景 行业分类、产品类目/分类等自关联场景，案例以行业分类说明。 操作步骤 Step1：搭建模型 搭建行业模型，在行业模型中创建多对一字段“上级行业”，指多个子行业对应一个上级行业。如下图： Step2：界面设计 创建行业的表格视图，绑定菜单，并且在此视图中增加“跳转动作 – 新增行业”； 创建新增行业表单，将“上级行业”拖进画布中，组件切换为“级联选择”，属性面板配置“选项字段、搜索字段、透出字段”，平台低代码为每个模型自动生成了名称、编码字段，如果不使用平台提供的名称、自建名称时，需要配置这三个字段； 为“上级行业”设置联动关系，自关联默认选择行业、标题定义为行业名称、自关联的字段为上级行业。 配置后发布表格、表单视图，即可获得级联选择效果。 表单视图中将“上级行业”切换为“树选择”组件，在发布后，即可获得树选择效果。 Step3：效果展示 级联选择 树选择

  史, 昂

  2024年6月20日

  1.5K000

• 4.5.2 研发辅助之SQL优化

  Oinone体系中是不需要针对模型写SQL的，默认提供了通用的数据管理器。在带来便利的情况下，也导致传统的sql审查就没办法开展。但是我们可以以技术的手段收集慢SQL和限制问题SQL执行。 慢SQL搜集目的：去发现非原则性问题的慢SQL，并进行整改 限制问题SQL执行：对应一些不规范的SQL系统上直接做限制，如果有特殊情况手动放开 一、发现慢SQL 这个功能并没有直接加入到oinone的版本中，需要业务自行写插件，插件代码如下。大家可以根据实际情况进行改造比如： 堆栈入口，例子中只是放了pamirs，可以根据实际情况改成业务包路径 对慢SQL的定义是5s还是3s，根据实际情况变 package pro.shushi.pamirs.demo.core.plugin; import org.apache.ibatis.executor.Executor; import org.apache.ibatis.mapping.MappedStatement; import org.apache.ibatis.plugin.*; import org.apache.ibatis.session.ResultHandler; import org.apache.ibatis.session.RowBounds; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; @Intercepts({ @Signature(type = Executor.class,method = "query",args = {MappedStatement.class,Object.class, RowBounds.class, ResultHandler.class}) }) @Component @Slf4j public class SlowSQLAnalysisInterceptor implements Interceptor { @Override public Object intercept(Invocation invocation) throws Throwable { long start = System.currentTimeMillis(); Object result = invocation.proceed(); long end = System.currentTimeMillis(); if (end – start > 10000) {//大于10秒 try { StackTraceElement[] stackTraceElements = Thread.currentThread().getStackTrace(); StringBuffer slowLog = new StringBuffer(); slowLog.append(System.lineSeparator()); for (StackTraceElement element : stackTraceElements) { if (element.getClassName().indexOf("pamirs") > 0) { slowLog.append(element.getClassName()).append(":").append(element.getMethodName()).append(":").append(element.getLineNumber()).append(System.lineSeparator()); } } Object parameter = null; if (invocation.getArgs().length > 1) { parameter = invocation.getArgs()[1]; } MappedStatement mappedStatement = (MappedStatement) invocation.getArgs()[0]; BoundSql boundSql = mappedStatement.getBoundSql(parameter); Configuration configuration = mappedStatement.getConfiguration(); String originalSql = showSql(configuration, boundSql); originalSql = originalSql.replaceAll("\'", "").replace("\"", ""); log.warn("检测到的慢SQL为：" + originalSql); log.warn("业务慢SQL入口为：" + slowLog.toString()); } catch (Throwable e1) { //忽略 } } return result; } public String showSql(Configuration configuration, BoundSql boundSql) { Object parameterObject = boundSql.getParameterObject(); List<ParameterMapping> parameterMappings = boundSql.getParameterMappings(); String sql = boundSql.getSql().replaceAll("[\\s]+", " "); if (parameterMappings.size() > 0 && parameterObject != null) { TypeHandlerRegistry typeHandlerRegistry…

  史, 昂

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

  1.2K000