Oinone社区 作者：shao原创文章，如若转载，请注明出处：https://doc.oinone.top/shu-shi-oinone-xue-yuan/18113.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
界面设计器教程：如何快速完成增删改查
上一篇
2024年9月30日 pm12:25
界面设计器教程：如何配置左树右表布局
下一篇
2024年9月30日 pm12:28
相关推荐
-
字段组件submit方法详解
场景介绍 在日常开发调试表单页的过程中，细心的小伙伴应该注意到，视图内的数据(通过vue调试工具看到的formData就是视图的数据)和最终通过服务端动作提交的数据不总是一致的，本文将带领大家解开疑惑。 为什么会出现这种现象？ 出现这种情况都是当前模型上有关联关系字段的场景，以多对一(M2O)场景为例，由于当前模型的关联关系字段是通过字段配置中的referenceFields属性和当前模型的relationFields属性进行关联的，所以提交数据的时候只需要拿到relationFields配置的字段就可以了，没有必要再去多拿关联关系字段本身的数据。 结合业务场景说明 这里以商品模型和类目模型举例，商品模型内有个类目的m2o字段category和对应的relationFields字段categoryId，数据提交到后端的时候前端默认会根据字段配置只获取categoryId，而category的整个对象都不会被提交。 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.model.DemoItemCategory; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.common.CodeModel; @Model.model(DemoItem.MODEL_MODEL) @Model(displayName = "测试商品") public class DemoItem extends CodeModel { private static final long serialVersionUID = -5104390780952631397L; public static final String MODEL_MODEL = "demo.DemoItem"; @Field.String @Field(displayName = "商品名称") private String name; @Field.Integer @Field(displayName = "类目ID") private Long categoryId; @Field.many2one @Field.Relation(relationFields = {"categoryId"}, referenceFields = {"id"}) @Field(displayName = "商品类目") private DemoItemCategory category; } 前端是如何处理数据的 前端的字段组件提供了submit()方法来让我们可以有就会在提交数据的时候改变数据。 // 字段组件基类 export class BaseFormItemWidget< Value = unknown, Props extends BaseFormItemWidgetProps = BaseFormItemWidgetProps > extends BaseDataWidget<Props> { /** * 数据提交的方法，例如：m2o字段user(假设其关系字段为userId)的值{id: 1, name: 'xxx'},但是实际后端数据只需要其中的id，所以用m2o对应的关系字段userId提交数据就可以了 * @param submitValue */ public submit(submitValue: SubmitValue): ReturnPromise<Record<string, unknown> | SubmitRelationValue | undefined> { return undefined; } } 这里先以FormStringFieldSingleWidget组件处理密码类型的字段讲解。密码一般在输入的时候是明文，为了提高提交到后端的安全性，可以将这个密码加密后再传到后端，后端再做进一步处理，这个场景中，视图中的密码和提交给后端的密码就出现了不一致的情况， @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class FormStringFieldSingleWidget extends FormStringFieldWidget { public submit(submitValue: SubmitValue) { let finalValue = this.value; /** * 数据提交的时候，如果判断当前字段是否需要加密，需要加密的情况用encrypt函数做加密处理 */ if (this.crypto && finalValue) { finalValue = encrypt(finalValue); } return SubmitHandler.DEFAULT(this.field, this.itemName, submitValue, finalValue); } 注意：关系字段配置的透出字段只影响该字段的查询数据方法的返回值，不会因为此配置就在提交数据里加上这部分配置的字段 字段需要提交关联关系字段内的所有数据如何处理？ 我们可以在自定义组件里覆写submit()方法，直接将this.value内的数据返回这里以覆写多对多m2m字段为例 import { BaseFieldWidget, FormM2MFieldSelectWidget, ModelFieldType, SPI, SubmitValue, ViewType } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseFieldWidget.Token({ viewType: ViewType.Form, ttype: ModelFieldType.ManyToMany, widget: 'Select', model: 'xxx.yyyyy', name: 'fileName01',…
-
数式Oinone培训学习路径
一、培训学习路径 下载培训清单(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有基础的了解 点击查看文章：调试工具在业务场景的使用-前端 点击查看文章：如何提高自定义组件的开发效率…
-
如何提高自定义组件的开发效率
引言 本文将通过前端的开发者模式带领大家提高自定义组件的开发效率 支持2024年9月6日之后用npm i安装的4.7.x之后的所有版本 介绍前端开发者模式 开发者模式的特性 浏览器控制台可以看到更多利于开发的日志输出 页面顶部状态栏消息模块的轮询接口，将只在页面刷新后请求一次，这样会减少开发阶段不必要的请求，以及解决后端断点调试的时候被消息轮询干扰的问题 页面视图的数据将不在走缓存，而是每次实时从base_view表里查询template字段获取，方便需要实时看通过xml修改的页面效果 如何进入开发者模式 通过在浏览器地址栏后追加;mode=dev刷新页面进入开发者模式，页面加载后可以在浏览器开发者工具的应用标签下的本地存储空间(即localStorage)中看到本标识的存储，如果想退出开发者模式可以手动清除该值 开发者模式的应用场景 1.通过控制台跳转到视图动作(ViewAction)的调试页面 页面刷新后，可以在浏览器开发者工具的控制台看到如下图的日志输出，直接点击该链接可以跳转到当前页面的调试链接弹窗视图动作、抽屉视图动作等以弹出层为展示效果的页面，之前的版本是无法进入调试链接查看的，现在可以在弹窗等视图动作点击后在控制台看到该链接点击进入调试页面 2.查看页面母版(mask)、布局(layout)的匹配情况 母版(mask)匹配结果布局(layout)匹配结果 3.查看视图组件(View)、字段组件(Field)、动作组件(Action)的匹配情况 通过浏览器开发者工具的控制台，我们可以看到每个视图、字段、字段匹配到的组件的class类名，这样我们就知道当前用的是那个组件，在自定义的时候可以在源码查看该组件类的实现代码，然后再选择是否继承该父类。另外我们在给组件定义SPI条件的时候，可以参考匹配入参和匹配结果内的属性。 匹配入参是当前元数据SPI的最全量注册条件 匹配结果是当前匹配到的组件的注册条件，一般情况下我们只需要在匹配结果的条件加上当前模型编码(model)、视图名称(viewName)、字段名称(name)、动作名称(actionName)等条件就可以完成自定义组件的覆盖。 在浏览器开发者工具的控制台，通过模型编码、视图名称、字段名称、动作名称等关键字快速搜索定位到需要查找的组件 控制台搜索快捷键：win系统通过ctrl+f，mac系统通过cmd+f 总结 在确保自定义部分代码最终正确被import导入到启动工程main.ts内的情况下，可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。
-
界面设计器教程 -如何上传自定义组件
自定义组件实战 【界面设计器】自定义字段组件实战——轮播图:https://doc.oinone.top/frontend/55.html 【界面设计器】自定义字段组件实战——表格字段组合展示https://doc.oinone.top/frontend/57.html 【界面设计器】自定义字段组件实战——表格字段内嵌表格https://doc.oinone.top/frontend/59.html 【界面设计器】自定义字段组件实战——千分位输入框https://doc.oinone.top/frontend/57.html
