如何通过浏览器开发者工具提高调试效率

相关推荐

• 低无一体

  表单页如何在服务端动作点击后让整个表单都处于loading状态

  介绍 在业务场景中，有时候由于提交的数据很多，导致服务端动作耗时较长，为了保证这个过程中表单内的字段不再能被编辑，我们可以通过自定义能力将整个表单区域处于loading状态 自定义动作组件代码 import { ActionType, ActionWidget, BaseElementViewWidget, BaseView, ClickResult, ServerActionWidget, SPI, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory(ActionWidget.Token({ actionType: ActionType.Server })) class LoadingServerActionWidget extends ServerActionWidget { protected async clickAction(): Promise<ClickResult> { const baseView = Widget.select(this.rootHandle) as unknown as BaseView; if (!baseView) { return super.clickAction(); } const baseViewWidget = baseView.getChildrenInstance().find((a) => a instanceof BaseElementViewWidget) as unknown as BaseElementViewWidget; if (!baseViewWidget) { return super.clickAction(); } return new Promise((resolve, reject) => { try { baseViewWidget.load(async () => { const res = await super.clickAction(); resolve(res); }); } catch (e) { reject(false); } }); } } 本案例知识点 BaseElementWidget提供了load方法将继承了该class的元素渲染的区域做整体loading交互，等入参的函数处理完成后恢复正常状态，其实所有继承了ActionWidget的组件也提供了这个能力让按钮在执行函数中的时候处于loading状态， 每个组件都有一个全局唯一的handle值，所在根视图的rootHandle,组件可以用this.rootHandle通过Widget.Select方法查找到所在的根视图组件，从视图的实例化子元素里可以查找到具体的业务类型视图组件，如详情页的DetailWidget、表单页的FormWidget、表格页的TableWidget，拿到这些实例后就可以操作里面的属性和方法了

  nation

  2024年5月29日

  1.7K000
• 开发排错技巧

  调试工具在业务场景的使用-后端

  这篇文档主要介绍在业务场景中，使用调试工具解决后端问题的思路。 调试工具的使用见文档：问题排查调试工具使用手册 调试工具的页面内容介绍：Oinone平台可视化调试工具 例1：模型配置不存在 现象：点击详情报模型配置不存在错误 排查路径： 将报错请求复制到接口调试出，查看调试信息 在调试信息页面，可以看到全部堆栈，利用堆栈信息找报错问题。 可以看到执行了StudentAction的queryOne方法在42行有问题 检查代码发现传进queryList的wrapper参数没有指定模型编码。添加模型编码问题解决 例2：无权限问题排查 现象：用户前端自定义跳转工作流审批页面，提示无权限 排查路径： 将报错请求复制到接口调试处，查看调试信息 查看debug信息中权限上下文中角色携带的权限是否正确。复制debug信息中的path路径，去权限上下文中搜索查看该路径下所有的权限。 根据上面的path路径搜索权限信息： ~~~ "getRoleActionPermissionsByViewAction:workbench.WorkBenchWorkflowUserTaskActive:WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu": { "630732547466232342": { "/workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu/ACTION#workbench.WorkBenchWorkflowUserTaskActive#workflow_write/ACTION#workflow.WorkflowUserTask#workflow_writeturnon": 1, "/workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu/ACTION#workbench.WorkBenchWorkflowUserTaskActive#workflow_wait/ACTION#workflow.WorkflowUserTask#workflow_agree": 1, } }, ~~~ 参数介绍： 630732547466232342：角色id为630732547466232342拥有的所有权限信息 /workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu：path路径 /ACTION#workbench.WorkBenchWorkflowUserTaskActive#workflow_write：此path路径下面的ACTION，模型为workbench.WorkBenchWorkflowUserTaskActive的workflow_write动作。 对比无权限页面和以上参数是否对应。可在页面url上查看模型，动作。常见问题有模型不匹配（更换为正常有权限的模型）、角色下无动作权限。 经查看调试信息发现，设置的该角色下并无所需动作的权限信息，考虑由于前端自定义跳转页面没有配置sessionPath所致。 由于5.0版本权限是根据路径进行鉴权的，请求载荷中variables需要携带path路径。 如果是用户自定义跳转页面，需要配置sessionPath：/workflow/WorkflowMenus_WorkBenchMenu_ActiveUserTaskMenu，值为url中的path路径。

  yexiu

  2024年9月26日

  1.3K000
• 低无一体

  如何编写自定义字段组件的校验逻辑

  介绍 自定义字段组件的时候，我们可能会遇到有复杂校验规则或者业务上特殊的校验提示信息的场景，这时候可以通过覆写字段的校验方法validator来实现。 示例代码 import { SPI, ValidatorInfo, FormStringFieldWidget, isEmptyValue, isValidatorSuccess, FormFieldWidget, ViewType, ModelFieldType } from '@kunlun/dependencies' @SPI.ClassFactory(FormFieldWidget.Token({ viewType: [ViewType.Form], ttype: ModelFieldType.String, widget: 'DemoPhone' })) export class DemoFormPhoneFieldWidget extends FormStringFieldWidget { // 字段校验方法 public async validator(): Promise<ValidatorInfo> { // 建议先调用平台内置的通用校验逻辑 const res = await super.validator(); if (!isValidatorSuccess(res)) { // 校验失败直接返回 return res; } // 编写自有校验逻辑 if (!isEmptyValue(this.value) && !/^1[3456789]\d{9}$/.test(this.value as string)) { // 通过内置的validatorError方法提示校验提示信息 return this.validatorError('手机号格式错误'); } // 无异常，用内置的validatorSuccess返回校验通过的信息 return this.validatorSuccess(); } } 扩展学习 自定义字段组件如何处理vue组件内的表单校验

  nation

  2024年8月23日

  2.1K000
• 前端

  PC端、移动端默认Mask模板

  PC端 系统默认母版布局 <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask> 系统默认把多tabs放入视图内母版布局 <mask> <header> <widget widget="app-switcher" /> <block> <widget widget="notification" /> <widget widget="divider" /> <widget widget="language" /> <widget widget="divider" /> <widget widget="user" /> </block> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <block height="100%" flex="1 0 0" flexDirection="column" alignContent="flex-start" flexWrap="nowrap" overflow="hidden"> <multi-tabs inline="true" /> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </block> </container> </mask> 移动端 <mask> <widget widget="user" /> <widget widget="nav-menu" app-switcher="true" menu="true" /> <widget widget="main-view" height="100%" /> </mask>

  汤乾华

  2024年12月11日

  1.7K001
• 低无一体

  表格如何支持表尾合计计算

  介绍 可以通过扩展TableWidget.ts实现 示例代码 import { BaseElementWidget, DslDefinitionType, SPI, TableWidget, ViewType, Widget } from '@kunlun/dependencies'; @SPI.ClassFactory( BaseElementWidget.Token({ type: ViewType.Table, widget: 'table', model: 'resource.k2.Model0000000109', viewName: '移动端品牌_TABLE_0000000000021513' }) ) export class FooterStatisticsTable extends TableWidget { public initialize(props) { if (props.template) { props.template?.widgets?.forEach((a) => { if (a.dslNodeType === DslDefinitionType.FIELD && this.statisticsFieldList.includes(a.name)) { a.statistics = true; } }); } super.initialize(props); return this; } // 需要表尾做合并的字段名称 public statisticsFieldList = ['fansNum']; @Widget.Reactive() protected get showFooter(): boolean | undefined { return true; } } 效果预览

  nation

  2024年10月14日

  1.8K000