Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9315.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
5.1 CDM的背景介绍
上一篇
2024年5月23日 am8:23
4.5.2 研发辅助之SQL优化
下一篇
2024年5月23日
相关推荐
-
2.4.1 Oinone独特性之单体与分布式的灵活切换
企业数字化转型需要处理分布式带来的复杂性和成本问题。尽管这些问题令人望而却步，但分布式架构对于大部分企业仍然是必须的选择。如果一个低代码平台缺乏分布式能力，那么它的性能就无法满足客户的要求。相比之下，Oinone平台通过对部署的创新（如图2-6所示），成功实现了分布式架构的支持，而且能够按照客户的业务发展需求，灵活选择不同的部署模式，同时节约企业成本，提升创新效率。这一创新是Oinone平台与其他低代码平台的重要区别，能够满足客户预期发展并兼顾成本效益。 图2-6 传统部署方式VS Oinone部署方式 实现原理 要实现灵活部署的特性，必须满足两个基本要求： 开发过程中不需要过多关注分布式技术，就像开发单体应用一样简单。代码在运行时应该能够根据模块是否在运行容器中，来决定路由走本地还是远程。这样可以大大减少研发人员的工作量和技术复杂度。 研发与部署要分离，即"开发单体应用一样开发分布式应用，而部署形式由后期决定"。为此，我们的工程结构支持多种启动模式，并逐一介绍了针对不同场景的工程结构类型（如下图2-7所示）。这样可以让客户在后期根据业务发展情况和需求，选择最适合的部署模式，从而达到灵活部署的目的。 图2-7 Oinone工程结构梳理 在整个工程结构上，我们秉承了Spring Boot的规范，不会改变大家的工程习惯。而Oinone的部署能力则可以让我们更灵活地应对各种情况。现在，我们来逐一介绍几种常规的工程结构以及它们适用的场景： 单模块工程结构（常规操作） a. 这是非常标准的Spring Boot工程，适用于简单的应用场景开发以及入门学习。 多模块工程结构（常规操作） a. 这是非常标准的多Spring Boot工程，可以实现分布式独立启动，适用于常规的分布式应用场景开发。 多模块工程结构-独立boot工程模式 a. 这种工程结构在多模块工程的基础上，通过独立的boot工程来支撑多部署方式。适用于中大型分布式应用场景开发。 b. 然而，随着工程越来越多，我们也会面临一些问题： ⅰ研发：环境准备非常困难，每个模块都要单独启动，研发调试跟踪困难。 ⅱ部署：分布式的高可靠性保证需要每个模块至少有两个部署节点，但在模块较多的情况下，起步成本非常高。同时，企业初期业务不稳定且规模较小，使用多模块工程的第二种模式会增加问题排查难度和成本。 c. 此时，Oinone的多模块工程下的独立boot工程模式部署就可以发挥其灵活性，让研发和业务起步阶段可以选择all-in-one模式，等到业务发展到一定规模的时候，只需要把线上部署模式切换成模块独立部署，而研发还可以保留all-in-one模式的优势。 d. 值得注意的是，分分合合的部署模式在传统互联网架构和低代码或无代码平台上都是有代价的，但是Oinone却可以灵活适配，只需要在boot工程的yml文件中写入需要加载的模块就可以解决。此处我们仅介绍多模块加载配置，选择性忽略其他无关配置，具体配置（如下图2-8所示）。 pamirs: boot: init: true sync: true modules: – base – resource – sequence – user – auth – web tenants: – pamirs 图2-8 Oinone yml配置图大型多场景工程结构-独立boot工程模式： a. 在多模块工程结构基础上的加强版，增加CDM层设计，让不同场景即保持数据统一，又保持逻辑独立。这种工程结构特别适用于大型企业软件开发，其中涉及到多个场景的情况，例如B端和C端的应用，或者跨不同业务线的应用，能够保证数据的一致性，同时也能够保持逻辑独立，避免不同场景间的代码冲突。 b. 这种工程结构是我们Oinone支撑“企业级软件生态”的核心，我们可以把场景A当作我们官方应用，场景B当作其他第三方伙伴应用。在这个工程结构下，我们的客户可以定制化开发自己的应用，同时我们也可以通过这种模式来支持我们的伙伴们进行开发，实现多方共赢。 c. 基于独立boot工程模式，我们同样对应多种部署模式应对不同情况，并统一管理所有伙伴应用。这种工程结构的优点是扩展性好，可以支持不同规模的应用，并且可以根据需要进行快速扩展或缩小规模，具有很高的灵活性。 基于标准产品的二开工程结构，是指基于标准产品进行二次开发，满足客户特定需求的工程结构。这种模式下，Oinone提供标准产品，客户可以根据自己的需求进行二次开发，实现定制化需求，同时可以利用我们的模块化开发特性，将每一个需求作为一个模块进行开发和管理。这种工程结构的优点是能够快速满足客户特定需求，同时也具有很好的可维护性和可扩展性，因为每个需求都是一个独立的模块，可以方便地进行维护和扩展。在下一篇“Oinone独特性之每一个需求都是一个模块”文章中有详细介绍。
-
流程设计
1.流程设计 进入流程设计页之后可以进行流程名称、流程说明的编辑，可以进行流程设计，流程参数配置，保存和发布。 1.1 流程配置 点击进入流程配置页面，若需要配置一些参数供流程使用，可在此添加和删除。删除流程参数时，若该参数已在流程中被使用则无法删除。参数支持文本、数值、日期、布尔四种类型。 1.2 保存 点击后流程设计进行存档，流程设计不完整也支持保存，下次进入流程设计回到保存的页面。 1.3 发布 第一次发布时右上角发布显示文字为发布流程，后续发布按钮显示文字为更新发布。发布后流程才会按照设计触发，首次发布和更新发布的逻辑一致，若流程中有未解决的错误则无法发布不成功，发布成功后页面跳转到显示全部流程的页面，流程状态为已启用、已更新。
-
4.2.6 框架之网络请求-拦截器
在整个http的链路中，异常错误对前端来说尤为重要，他作用在很多不同的场景，通用的比如500, 502等; 一个好的软件通常需要在不同的错误场景中做不同的事情。当用户cookie失效时，希望能自动跳转到登录页；当用户权限发生变更时，希望能跳转到一个友好的提示页；那么如何满足这些个性化的诉求呢？接下来让我们一起了解oinone前端网络请求-拦截器。 一、入口 在src目录下main.ts中可以看到VueOioProvider，这是系统功能提供者的注册入口 图4-2-6-1 VueOioProvider import interceptor from './middleware/network-interceptor'; VueOioProvider( { http: { callback: interceptor } }, [] ); 图4-2-6-2 拦截器的申明入口 二、middleware 在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现： 图4-2-6-3 在src/middleware有拦截器的默认实现 三、interceptor interceptor在请求返回后触发，interceptor有两个回调函数，error和next error参数 graphQLErrors 处理业务异常 networkError 处理网络异常 next extensions 后端返回扩展参数 const interceptor: RequestHandler = (operation, forward) => { return forward(operation).subscribe({ error: ({ graphQLErrors, networkError }) => { console.log(graphQLErrors, networkError); // 默认实现 => interceptor error }, next: ({ extensions }) => { console.log(extensions); // 默认实现 => interceptor next }, }); }; 图4-2-6-4 后端返回扩展参数 四、interceptor error // 定义错误提示等级 const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR; // 错误提示等级 对应提示的报错 const MESSAGE_LEVEL_MAP = { [ILevel.ERROR]: [ILevel.ERROR], [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN], [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO], [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS], [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG] }; // 错误提示通用函数 const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => { notification[type]({ message: tip, description: desc }); }; // 根据错误等级 返回错误提示和类型 const getMsgInfoByLevel = (level: ILevel) => { let notificationType = 'info'; let notificationText = translate('kunlun.common.info'); switch (level) { case ILevel.DEBUG: notificationType = 'info'; notificationText = translate('kunlun.common.debug'); break; case ILevel.INFO: notificationType = 'info'; notificationText = translate('kunlun.common.info'); break;…
-
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文件在页面初始加载的时候才会导入进来，刚刚上传的动作未导入新上传的代码文件），再次点击设计区域中的自定义组件，可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果，与代码逻辑一致！