相关知识点文档参考：
集成接口一键发布生成开放平台接口：https://doc.oinone.top/designer/eipdesigner/6454.html
集成接口与数据流程的使用：https://doc.oinone.top/designer/eipdesigner/4414.html
Oinone社区 作者：shao原创文章，如若转载，请注明出处：https://doc.oinone.top/shu-shi-oinone-xue-yuan/18145.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
场景介绍 在日常开发调试表单页的过程中，细心的小伙伴应该注意到，视图内的数据(通过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',…
相关知识点参考 【界面设计器】模型增删改查基础：
相关文档参考 问题排查调试工具使用手册：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
一、培训学习路径 下载培训清单(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平台可视化调试工具 场景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”的动作确实没有选中 我们将该动作选中后再次刷新运行时的页面，页面动作全部正确展示。
