界面设计器 扩展字段的查询上下文

相关推荐

• 低无一体

  如何提高自定义组件的开发效率

  引言 本文将通过前端的开发者模式带领大家提高自定义组件的开发效率 支持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内的情况下，可以通过开发者模式在浏览器控制台打印的日志来排查组件未正确覆盖的问题。

  nation

  2024年9月6日

  1.6K002
• 前端

  表单字段API

  FormFieldWidget 表单字段的基类，包含了表单字段通用的属性跟方法 示例 class MyFieldClass extends FormFieldWidget{ } 字段属性 属性名 说明 类型 可选值 默认值 value 当前字段的值 any – null formData 当前表单视图的数据 Object – {} rootData 跟视图的数据，如果当前只有一个视图，那么与formData是一样的 Array – [] metadataRuntimeContext 当前视图运行时的上下文，可以获取当前模型、字段、动作、视图等所有的数据 Object – – urlParameters 当前url参数 Object – – field 当前字段的元数据 Object – – model 当前模型 Object – – view 当前视图 Object – – disabled 是否禁用 Boolean – false invisible 当前字段是否不可见 Boolean – false required 当前字段是否必填，如果当前字段是在详情页，那么是false Boolean – false readonly 当前字段是否只读，如果当前字段是在详情页、搜索，那么是false Boolean – false placeholder 占位符 String – 当前字段的displayName label 字段的标题 String – 当前字段的displayName 方法 方法名 说明 参数 例子 getDsl 获取当前字段所有的配置 – change 修改当前字段的值 any focus 获取焦点触发的方法 – blur 失去焦点触发的方法 – executeValidator 执行当前字段的校验，异步的 – submit 重写当前字段的提交逻辑 – submit() { return ‘value’ } reloadActiveRecords 替换当前视图的数据 Array this.reloadActiveRecords([{code: xxx, name: 111}]) reloadRootData 替换根视图的数据 Array this.reloadRootData([{code: xxx, name: 111}])

  汤乾华

  2023年11月15日

  1.1K002
• 前端

  如何在自有前端工程中使用gql请求？

  场景 客户在个性化程度比较高的h5工程中想使用平台的服务端能力，这个时候需要调用后端的gql请求，此时需要引入平台的请求库依赖 npm的package.json中加入依赖 此文档以4.x举例，使用其他版本的请自行修改版本号 "dependencies": { "@kunlun/request": "~4.3.0", "@kunlun/state": "~4.3.0" } 使用示例 import { HttpClient } from ‘@kunlun/request’ const http = HttpClient.getInstance() http.setBaseURL(”) export const login = (data) => { const gqlBody = `mutation { pamirsUserTransientMutation { login(user: {login: “${data.username}”, password: “${data.password}”}) { broken errorMsg errorCode errorField } } }` return http.mutate(‘user’, gqlBody) } 注意事项 开发环境记得配置oinone请求的路由转发规则，这里以vite.config.js举例 import { defineConfig } from ‘vite’ export default defineConfig({ server: { port: 8088, open: true, proxy: { ‘/pamirs’: { changeOrigin: true, // 服务端请求地址 target: ‘http://127.0.0.1:8091’ } } } })

  oinone

  2023年11月1日

  868000

• 【前端】IOC容器（v4）

  什么是IOC容器？ IOC不是一种技术，只是一种思想，一个重要的面向对象编程的法则，它能指导我们如何设计出松耦合，更优良的程序。传统应用程序都是由我们在类内部主动创建依赖对象，从而导致类与类之间高耦合，难于测试；有了IOC容器后，把创建和查找依赖对象的控制权交给了容器，由容器进行注入组合对象，所以对象与对象之间是松散耦合，这样也方便测试，利于功能复用，更重要的使程序的整个体系结构变得非常灵活。在运行期，在外部容器动态的将依赖对象注入组件，当外部容器启动后，外部容器就会初始化。创建并管理对象实例，以及销毁，这种应用本身不负责依赖对象的创建和维护，依赖对象的创建和维护是由外部容器负责的称为控制反转。 IOC（控制反转）和DI（依赖注入） IOC（Inversion of Control, 控制反转）：通过外部容器管理对象实例的一种思想。DI（Dependency Injection, 依赖注入）：IOC的一种实现方式。 作者简述 IOC是Spring框架（一种以Java为语言开发的框架）的核心，并贯穿始终。其面向接口的开发能力，使得服务调用方和服务提供方可以做到完全解耦，只要遵循接口定义的规则进行调用，具体服务的实现可以是多样化的。 对于前端，我们使用inversify进行了IOC的实现。其强大的解耦能力可以使得平台进行大量的抽象，而无需关系具体的实现。 接下来，我们将介绍IOC在开发中的基本运用。 API 为了方便起见，我们将IOC相关功能与组件SPI的调用方式放在了一起。（更高版本的平台版本将自动获得该能力） export class SPI { /** * register singleton service */ public static Service; /** * autowired service property/parameter in service */ public static Autowired; /** * service construct after execute method */ public static PostConstruct; /** * autowired service in widget */ public static Instantiate; /** * autowired services in widget */ public static Instantiates; /** * service construct after execute method in widget */ public static InstantiatePostConstruct; } 创建第一个服务 service/ProductService.ts import { ServiceIdentifier } from '@kunlun/dependencies'; /** * 产品 */ export interface Product { id: string; name: string; } /** * 产品服务 */ export interface ProductService { /** * 获取产品列表 */ getProducts(): Promise<Product[]>; /** * 通过ID获取产品 * @param id 产品ID */ getProductById(id: string): Promise<Product | undefined>; } /** * 产品服务Token */ export const ProductServiceToken = ServiceIdentifier<ProductService>('ProductService'); service/impl/ProductServiceImpl.ts import { SPI } from '@kunlun/dependencies'; import { Product, ProductService, ProductServiceToken } from '../ProductService'; @SPI.Service(ProductServiceToken) export class ProductServiceImpl implements ProductService { public async getProducts(): Promise<Product[]> { // request api get products return []; } public async getProductById(id:…

  nation

  前端 2023年11月1日

  928000
• 前端

  从一个方法开始：浅析页面渲染流程

  渲染前的准备 渲染前的准备，在 Vue 渲染框架下，会先安装所有所支持的默认组件，比如 Mask，Header 等，这些组件支持 XML 默认模版的 Vue 框架下的渲染，详情可见 main.ts 中，maskInstall 与 install，这两个函数将平台内部支持的组件进行了注册，随后将整个 Vue 挂载为运行时 App，随后进行初始化。 渲染的起步 OioProvider 方法是整个应用的入口，我们忽略掉一些配置方法，将注意力集中到 initializeServices 从名称中我们可以看出来内部保存的都是初始化服务，其中提供了渲染服务等，我们当前使用的是 Vue 框架，所以当前其渲染的 Root 节点为 Vue， 以此，我们视野可以暂时转移到 admin-base中的 Root.vue以及 RootWidget上， 其实现了整个 Vue 框架下的 Root 节点如何渲染，其中定义了多个 widget，比如登陆页，首页，忘记密码已经重置密码等页面， 在本文中我们着重关注渲染首页的能力，RootWidget将 DefaultMetadataMainViewWidget作为渲染 Props中的 page即首页提供给下层组件使用， 渐入佳境 DefaultMetadataMainViewWidget从名称中可以看到，其为元数据主视图，主要做两件事，1:提供 Mask 的渲染2:提供元数据上下文初始化 该组件主要通过观察路由变化触发上面两个动作，当路由发生变化，该组件 reloadPage将被调用，reloadPage方法通过组装路由参数构成一个唯一 key 向后段查询当前路由所对应的渲染信息， 随后将获取到的信息进行处理，初始化，即 元数据上下文初始化，在初始化后，会将获取到的数据注入到 MetadataViewWidget中， Mask 的渲染 关于 Mask 的渲染，在获取到数据后，将生成 maskTemplate，并将其赋值， DefaultMetadataMainView.vue文件将渲染该模板，并渲染到页面中 数据的变更 当上面两件任务完成后，将开始主视图的渲染，上文提到，DefaultMetadataMainViewWidget只负责 mask 的渲染和上下文的初始化，所以 DefaultMetadataMainViewWidget通过触发事件的方式来实现主视图的渲染， DefaultMetadataMainViewWidget将必要信息作为事件参数触发，MultiTabsContainerWidget接收到 reloadMainViewCallChaining事件后，开启主视图渲染， MultiTabsContainerWidget会刷新运行时上下文，即 refreshRuntimeContext，该方法将尝试查询并通过 createOrUpdateEnterTab方法创建 Tab 页，createOrUpdateEnterTab最终生成一个 MultiTabItem格式的对象，该对象描述了 Tab 的相关信息，随后调用 createTabContainerWidget创建 tab 的容器即新建了一个 MultiTabContainerWidget组件即单个 tab 的容器，随后调用 setActiveTabItem， 并获取其绑定的 Vue 组件，并将其组件放置在 KeepAlive内部，触发更新, 主视图的渲染 MultiTabContainerWidget继承自MetadataViewWidget，当 MetadataViewWidget数据发生变更， 其绑定的 Vue 组件将解析 viewTemplate, 获取到与该模板 dslNodeType想匹配的 Vue 组件，当前例子中为 View.vue，随后 View.vue开始渲染，View.vue文件只是一个纯粹的容器，当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue需要做的就是将这个 template翻译并渲染成 DOM 展现在浏览器上， 渲染整个页面 当 View.vue被挂载时，其内部的 template属性包含了整个页面的描述信息，View.vue主要做了两个事情，一：将 template 中的 widget转换为组件，二：根据当前的 template信息生成 slot信息， const currentSlots = computed<Slots | undefined>( () => DslRender.fetchVNodeSlots(props.dslDefinition) || (Object.keys(context.slots).length ? context.slots : undefined) ); const renderWidget = createCustomWidget(InternalWidget.View, { …context.attrs, type: props.type || viewType.value, template: props.dslDefinition, metadataHandle: props.metadataHandle || metadataHandle.value, rootHandle: props.rootHandle || rootHandle.value, parentHandle: props.parentHandle || parentHandle.value, slotName: props.slotName, inline: inlineProp } as ViewWidgetProps); 生成这两部分信息后，View.vue会将这两部分挂载到页面上，这两部分从代码中可以看出，主要靠 fetchVNodeSlots,createCustomWidget两个函数， export function createCustomWidget( widget: string, props: CustomWidgetProps ): RenderWidget | undefined public static fetchVNodeSlots(dsl: DslDefinition | undefined, supportedSlotNames?: string[]):…

  liji2

  2025年3月19日

  342000