数式Oinone 学院

OinoneDesign，旨在帮助开发者和设计师提升设计效率，减少在产品美化上的弯路。规范包括颜色、文字、圆角、阴影等通用设计规范以及组件设计规范，覆盖按钮、布局、导航等多个方面，提供了一套拿来即用的设计系统，以增强B端产品的用户体验和一致性。 框架设计和自由组合• 框架设计：通过合理的规则组织设计元素，以保证高效的运作和视觉的一致性。• 自由组合：在秩序的框架下，去除不必要的束缚，允许各角色充分发挥创意，灵活组合，快速生成符合市场需求的UI设计方案。 我们设定的秩序并非限制，而是为每个角色提供清晰的选择和范围，确保大家能高效协作、创新 点击下载数式Oinone UI示例 一.颜色 二.文字 三.按钮 四.分页 五.下拉菜单 六.级联选择 七.选择器 八.开关 九.标签 十.提示信息 十一.对话框 十二.气泡确认框 十三.文字提示 十四.进度条 十五.图片预览 十六.详情 十七.表格 十八.搜索框 十九.折叠面板 二十.树选择 二十一.上传 二十二.日期选择 二十三.时间选择 二十四.单选框 二十五.多选框 二十六.表单 二十七.步骤条 二十八.输入框 二十九.导航页签 三十.选项卡 三十一.菜单 三十二.预览图备份

一、培训学习路径 下载培训清单(world) 数式Oinone 培训学习路径清单.docx 类别 步骤详解 核心事件 参与人员 是否完成 快速上手 阅读查看快速上手文档 阅读并理解文档中的每个步骤和视频 前端/后端 ✅ 启动完成 对应参与人员完成前/后端工程启动 前端/后端 ✅ 实现deno 生成demo 效果 前端/后端 ✅ 准备工作 技术工具检查 请确在本地已安装并配置好必要的开发工具和环境（如 IDE、Node.js、数据库等） 前端/后端 ✅ 问题反馈 快速上手过程中问题清单提交 前端/后端 ✅ 版本情况 版本是否是最新的版本，且建议研发人员版本一致，且类型是 min 前端/后端 ✅ 培训知识点 前后端标准研发流程 了解数式Oinone 前后端协作 前端/后端 ✅ 前端工程讲解 了解数式Oinone 前端工程最佳实践 前端 ✅ 后端工程讲解 了解数式Oinone 后端工程最佳实践 后端 ✅ 前端文章大纲 阅读数式Oinone 前端文章大纲,知道相应文章如何查找 前端 ✅ 前端初阶知识点讲解 了解数式Oinone 如何自定义母版/视图/动作/字段 前端 ✅ 前端进阶知识点讲解 了解如何自定义GraphQL 请求/前端组件覆盖/ 前端ts写法 前端 ✅ 前端调试工具使用 了解数式Oinone debug 调试工具如何使用 前端 ✅ 后端文章大纲 阅读数式Oinone 后端文章大纲,知道相应文章如何查找 后端 ✅ 后端初阶知识点讲解 了解数式Oinone 模块类型/定义/数据管理器/继承/枚举与数据字典/字段序列化与类型、函数（Function）概述Oinone执行逻辑单元与模型方法的绑定 后端 ✅ 后端进阶知识点讲解 了解数式Oinone 界面导入导出、文件导入导出、工作流、协同开发等功能如何使用 后端 ✅ 二、培训注意要点事项 快速入门，简单快捷 数式Oinone培训前注意事项 三、培训学习知识点 优秀创见者经验分享，让学习事半功倍 数式Oinone 标准研发流程（点击此处观看） 视频简介：前后端同学将了解如何高效协作，解决常见开发难题，并掌握如何使用Oinone平台提高工作效率。课程分为五个模块：1) 前后端开发流程最佳实践，2) 前端与后端各自的责任，3) 协同开发模式，4) 自查自纠方法，5) 传统开发模式的问题 观看对象：建议都看 数式Oinone前端工程合理讲解（点击此处查看） 视频简介：前端工程结构建议参考，以及注意事项 观看对象：前端，对Vue有基础的了解，且已经完成了前端工程启动 点击查看文章：前端工程结构示例，包括标品和定制层 数式Oinone后端工程合理讲解(点击此处查看） 视频简介：后端工程结构建议参考，以及注意事项 观看对象：后端，对Java有基础的了解，且已经完成了后端工程启动 点击查看文章：后端工程示例 前端必看知识点清单 前端文章大纲 （建议前端伙伴一定要收藏哦） 文章内容：使用数式Oinone ,前端项目中场景使用场景文章合集 观看对象：前端，且已经完成前端工程启动，对Vue有基础的了解 前端初阶知识点讲解 数式Oinone— 如何自定义母版（点击此处观看） 视频简介：母版是什么，以及在业务中如何应用，如何自定义 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解 点击查看文章：3.5.7.2 自定义母版 数式Oinone —如何自定义视图（点击此处观看） 视频简介：视图是什么，以及在业务中如何应用，如何自定义 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解 点击查看文章:3.5.7.4 自定义页面 数式Oinone —如何自定义动作（点击此处观看） 视频简介：动作各种类型操作及示例，以及在业务中如何应用，如何自定义 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解 点击查看文章 ：3.5.7.5 自定义动作 数式Oinone—如何自定义字段（点击此处观看） 视频简介：动作各种类型操作及示例，以及在业务中如何应用，如何自定义 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解 点击查看文章：3.5.7.6 自定义字段 前端进阶知识点讲解 如何自定义 GraphQL 请求 （点击此处观看） 视频简介：GraphhQL在业务中如何应用，如何自定义 观看对象: 前端，且已经完成前端工程启动，对Vue和GraphhQL有基础的了解 点击查看文章：如何自定义 GraphQL 请求 数式Oinone—前端组件覆盖 （点击此次观看） 视频简介：了解如何自定义组件，以及如何组件覆盖 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解 数式Oinone—前端ts写法（点击此处观看） 视频简介：了解如何前端ts写法，以及如何应用 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解点击查看文章：前端 SPI 注册 + 渲染 数式–Oinone前端调试工具如何使用提升开发效率（点击此处观看） 视频简介：了解数式Oinone debug，学会使用平台默认的调试工具，通过控制台查看当前视图元数据信息，学会浏览器调试，以及如何使用vue 调试工具提升研发效率 观看对象: 前端，且已经完成前端工程启动，对Vue有基础的了解 点击查看文章：调试工具在业务场景的使用-前端 点击查看文章：如何提高自定义组件的开发效率…

前言 虽然oinone框架减少了很多的代码，但是低代码部分的代码质量也需要高度关注，不管是写的代码bug多，或者说被吐槽代码不行，还是说写的代码经常被重构，核心点还是没有代码规范的意识和技巧，下面摘录了一些常见的规范要求，去提高后端的代码质量，代码质量提高后，自然效率也会提升。 常见代码规范 **1、规范命名** 命名是写代码中最频繁的操作，比如类、属性、方法、参数等。好的名字应当能遵循以下几点： **见名知意** 比如需要定义一个变量需要来计数 int i = 0; 名称 i 没有任何的实际意义，没有体现出数量的意思，所以我们应当指明数量的名称 int count = 0; **能够读的出来** 如下代码： private String sfzh; private String dhhm; 这些变量的名称，根本读不出来，更别说实际意义了。 所以我们可以使用正确的可以读出来的英文来命名 private String idCardNo; private String phone; **2、规范代码格式** 好的代码格式能够让人感觉看起来代码更加舒适。 好的代码格式应当遵守以下几点： 合适的空格 代码对齐，比如大括号要对齐 及时换行，一行不要写太多代码 好在现在开发工具支持一键格式化，可以帮助美化代码格式，大家统一使用idea的规范即可。 **3、写好代码注释** 在《代码整洁之道》这本书中作者提到了一个观点，注释的恰当用法是用来弥补我们在用代码表达意图时的失败。换句话说，当无法通过读代码来了解代码所表达的意思的时候，就需要用注释来说明。 书的作者之所以这么说，是因为作者觉得随着时间的推移，代码可能会变动，如果不及时更新注释，那么注释就容易产生误导，偏离代码的实际意义。而不及时更新注释的原因是，程序员不喜欢写注释。😒 但是这不意味着可以不写注释，当通过代码如果无法表达意思的时候，就需要注释，比如如下代码： for (Integer id : ids) { if (id == 0) { continue; } //做其他事 } 为什么 id == 0 需要跳过，代码是无法看出来了，就需要注释了。 好的注释应当满足一下几点： 解释代码的意图，说明为什么这么写，用来做什么 对参数和返回值注释，入参代表什么，出参代表什么 有警示作用，比如说入参不能为空，或者代码是不是有坑 当代码还未完成时可以使用 todo 注释来标记 代码review发现漏洞时 可以使用 fixme 注释来标记 **4、try catch 内部代码抽成一个方法** try catch代码有时会干扰我们阅读核心的代码逻辑，这时就可以把try catch内部主逻辑抽离成一个单独的方法 如下图是Eureka服务端源码中服务下线的实现中的一段代码 整个方法非常长，try中代码是真正的服务下线的代码实现，finally可以保证读锁最终一定可以释放。 所以这段代码其实就可以对核心的逻辑进行抽取。 protected boolean internalCancel(String appName, String id, boolean isReplication) { try { read.lock(); doInternalCancel(appName, id, isReplication); } finally { read.unlock(); } // 剩余代码 } private boolean doInternalCancel(String appName, String id, boolean isReplication) { //真正处理下线的逻辑 } **5、方法别太长** 方法别太长就是字面的意思。一旦代码太长，给人的第一眼感觉就很复杂，让人不想读下去； 同时方法太长的代码可能读起来容易让人摸不着头脑，不知道哪一些代码是同一个业务的功能。 比如代码中有那种2000+行大类，各种if else判断，光理清代码思路就需要用很久时间。🤷🏻‍♀️ 所以一旦方法过长，可以尝试将相同业务功能的代码单独抽取一个方法，最后在主方法中调用即可。 **6、抽取重复代码** 当一份代码重复出现在程序的多处地方，就会造成程序又臭又长，当这份代码的结构要修改时，每一处出现这份代码的地方都得修改，导致程序的扩展性很差。 所以一般遇到这种情况，可以抽取成一个工具类，还可以抽成一个公共的父类。 **7、多用return** 在有时我们平时写代码的情况可能会出现if条件套if的情况，当if条件过多的时候可能会出现如下情况： if (条件1) { if (条件2) { if (条件3) { if (条件4) { if (条件5) { System.out.println("11111"); } } } } } 面对这种情况，可以换种思路，使用return来优化 if (!条件1) { return; } if (!条件2) { return; } if (!条件3) { return; } if (!条件4) { return; } if (!条件5) { return; } System.out.println("11111"); 这样优化就感觉看起来更加直观 **8、if条件表达式不要太复杂**…

前端必学课程目录 分类 内容 描述 基础篇 自定义 Mask PC端、移动端默认Mask模板 PC端、移动端默认Mask模板 自定义布局 自定义视图 自定义布局、视图本质上是一样的 PC端默认布局模板 PC端默认布局模板 移动端端默认布局模板 移动端端默认布局模板 自定义表单字段 自定义表格字段 自定义动作 自定义 Graphql 请求 进阶篇 ts + vue 的写法 熟悉 Oinone 的前端开发 注册条件集合 如果你不知道 SPI 应该如何注册，可以参考这篇文章的注册条件集合章节 自定义视图、字段如何获取界面设计的配置 比如自定义了视图或者字段，想要获取界面设计器配置的动作或者其他配置 自定义视图、字段调用界面设计器配置的按钮（包含权限控制） 动态执行动作 自定义视图、字段只修改 UI，不修改数据和逻辑 所有的自定义视图都可以参考这篇文章 自定义视图部分区域渲染设计器的配置 自定义视图部分区域渲染对应设计器配置的与字段、动作 自定义视图内部渲染动态视图 一部分是自定义的视图，另外一部分是其他页面对应的视图 上下文 理解上下文概念 主视图数据和当前视图数据使用介绍 与上篇文章结合 调试篇 调试工具 学会使用平台默认的调试工具 调试工具 通过控制台查看当前视图元数据信息 调试工具 学会浏览器调试 原理篇 SPI 注册 + 渲染原理 了解 SPI 的注册以及渲染原理 移动端入门 Oinone 移动端快速入门 前端常见问题集合目录 分类 内容 描述 表单 表单字段 自定义字段提交的值 表格 如何自定义表格单元格样式 列表视图支持表格、卡片切换 一个视图，多种形态展示，通过切换按钮的方式切换成不同的UI展示 表格如何支持表尾合计计算 自定义表格支持合并或列、表头分组 表格字段 如何在表格的字段内添加动作 动作 如何自定义点击导出动作绑定指定模板 打开弹窗/抽屉的动作如何在弹窗关闭后扩展逻辑 列表页内上下文无关的动作如何添加自定义上下文 提交数据动作如何把弹窗内的数据完全返回 动作跳转页面的时候携带参数 表格页自定义按钮如何获取搜索区域的查询条件 左树右表 界面设计器教程：如何配置左树右表布局 自定义左树右表视图中的树 左树右表视图中的树默认选中第一行 表格上方动作点击时获取左侧树的数据 树型表格全量加载数据如何处理 工作流 如何添加工作流运行时依赖 如何自定义工作流的待办任务列表 样式相关 如何自定义指定页面的样式 主题设置-设置表格全局样式 弹窗、抽屉 弹窗生命周期实践 全局API 获取当前用户信息以及语言 前端动作API 其他问题 自定义字段样式 如何在多标签页切换时自动刷新视图 前端密码加密 Oinone 如何接入乾坤微前端

相关知识文档参考 数式Oinone 前后端标准开发流程：https://doc.oinone.top/other/15957.html

相关文档参考 问题排查调试工具使用手册：https://doc.oinone.top/kai-fa-shi-jian/7484.html 调试工具在业务场景的使用-前端https://doc.oinone.top/shu-shi-oinone-xue-yuan/kai-fa-pai-cuo-ji-qiao/18412.html 调试工具在业务场景的使用-前端：https://doc.oinone.top/wen-ti-zhen-duan/17746.html 如何通过浏览器开发者工具提高调试效率https://doc.oinone.top/frontend/17130.html

目录 工程结构篇 协议篇 GraphQL请求：后端接口实现逻辑解析 基本功能及配置篇 Dubbo Dubbo配置详解 Nacos Oinone项目引入Nacos作为注册中心 Oinone项目引入Nacos作为配置中心 Nacos做为注册中心调用其他系统的SpringCloud服务 OSS OSS(CDN)配置和文件系统的一些操作 MINIO无公网访问地址下OSS的配置 Trigger/Async/Schedule 函数之触发与定时配置和示例 函数之异步执行 Excel导入/导出（file） Excel批量导入 【Excel导入/导出】多Sheet导入导出示例 如何自定义Excel导入功能 如何自定义Excel导出功能 Excel导入导出模板翻译 Expression（表达式） 扩展内置函数表达式 ShardingJDBC（分库分表） 分库分表与自定义分表规则 Elasticsearch（ES） Oinone引入搜索引擎(增强模型) 引入搜索(增强模型Channel)常见问题解决办法 数据库方言配置（Dialect） 【DM】后端部署使用Dameng数据库（达梦） 【PostgreSQL】后端部署使用PostgreSQL数据库（PGSQL） 【OpenGauss】后端部署使用OpenGauss数据库（高斯） 【MSSQL】后端部署使用MSSQL数据库（SQLServer） 【KDB】后端部署使用Kingbase数据库（人大金仓/电科金仓） 其他功能使用文档 框架之MessageHub(信息提示) DsHint(指定数据源)和BatchSizeHint(指定批次数量) IWrapper、QueryWrapper和LambdaQueryWrapper使用 查询时自定义排序字段和排序规则 如何在代码中使用自增ID和获取序列 非存储字段搜索，适应灵活的搜索场景 如何使用位运算的数据字典 全局首页及应用首页配置方法（homepage） 如何增加用户中心的菜单 自定义RSQL占位符(placeholder)及在权限中使用 Function、Action函数使用规范 特定场景解决方案 Oinone连接外部数据源方案 如何自定义SQL(Mapper)语句 工程部署 后端部署 Oinone平台部署及依赖说明 v4.7 v5.0 v5.1 v5.3 Oinone License 许可证使用常见问题 后端无代码设计器Jar包启动方法 Oinone环境保护（v5.2.3以上） 设计器部署 Oinone设计器部署参数说明 Oinone离线部署设计器镜像 Oinone离线部署设计器JAR包 Docker部署常见问题 其他环境部署 东方通Web和Tomcat部署Oinone项目 可视化调试工具 Oinone平台可视化调试工具 协同开发 Oinone协同开发使用手册 工作流 项目中工作流引入和流程触发 【工作流】流程扩展自定义函数示例代码汇总 工作流-流程代办等页面自定义 工作流审核撤回/回退/拒绝钩子使用 如何添加工作流运行时依赖（前后端） 数据可视化运行时 如何添加数据可视化运行时依赖 界面设计器 如何实现页面间的跳转 界面设计器的导入导出 流程设计器 流程设计器的导入导出 数据可视化 数据可视化-项目中如何引用图表、报表、大屏 数据可视化中图表的低无一体 数据可视化-如何自定义查询数据方法 数据可视化的导入导出 其他 EIP开放接口使用MD5验签发起请求（v5.x） 缓存连接由Jedis切换为Lettuce Oinone登录扩展：对接SSO QA 导入设计数据时dubbo超时导入失败

这篇文档主要介绍在业务场景中，使用调试工具解决前端问题的思路。 调试工具的使用见文档：问题排查调试工具使用手册 调试工具的页面内容介绍：Oinone平台可视化调试工具 场景1：页面上的字段被删除 现象：未查询配置字段的数据 在设计页面给类目字段的“选项字段”配置了“速记码(字段名称为fastCode)”在其中 排查路径： 将问题页面url路由中的page改为debug进入页面调试模式，可以看到页面的调试信息 在标签页“页面字段”内的找到问题字段的配置，可以看到optionFields内还是有字段“速记码(字段名称为fastCode)”的但是存储关联关系模型字段配置的options[0].widggets内只有code、name、id字段了，fastCode的元数据未返回 联系后端开发检查模型定义的代码，发现该字段已被注释删除 跟后端同学沟通字段删除后的处理方案 其他相似场景参考 数据字典项出现过删除、重命名 Field字段出现过重命名、配置项发生过更改 Function函数/Action动作出现过删除、重命名 想查看计算公式、条件隐藏、条件禁用、条件只读等表达式的真实值 场景2：动作权限问题排查 现象：页面配置的动作，部分角色登录后无法看到 设计页面是有个“发消息2”的动作 test01用户登录后，发现页面并没有这个动作 排查路径： 将问题页面url路由中的page改为debug进入页面调试模式，可以看到页面的调试信息 在标签页打开“页面动作”，在设计页面的“返回”动作后并没有看到“发消息2”的动作，我们再去权限管理页面查看权限 在权限管理处，查看当前页面的动作权限情况，可以看到“发信息2”的动作确实没有选中 我们将该动作选中后再次刷新运行时的页面，页面动作全部正确展示。

相关知识点参考 前端文章大纲：https://doc.oinone.top/shu-shi-oinone-xue-yuan/xiang-mu-shi-jian-qian-duan-kai-fa-chong-dian-zhan/qian-duan-ji-chu/19196.html 前端项目开发前端知识要点地图：https://doc.oinone.top/frontend/51.html

相关文章推荐： 前端文章大纲：https://doc.oinone.top/shu-shi-oinone-xue-yuan/xiang-mu-shi-jian-qian-duan-kai-fa-chong-dian-zhan/qian-duan-ji-chu/19196.html 【前端】项目开发前端知识要点地图：https://doc.oinone.top/frontend/51.html