nation - Page 7 - Oinone社区

代码实践

如何使用位运算的数据字典

场景举例日常有很多项目，数据库中都有表示“多选状态标识”的字段。在这里用我们项目中的一个例子进行说明一下：示例一：表示某个商家是否支持多种会员卡打折（如有金卡、银卡、其他卡等），项目中的以往的做法是：在每条商家记录中为每种会员卡建立一个标志位字段。如图：用多字段来表示“多选标识”存在一定的缺点：首先这种设置方式很明显不符合数据库设计第一范式，增加了数据冗余和存储空间。再者，当业务发生变化时，不利于灵活调整。比如，增加了一种新的会员卡类型时，需要在数据表中增加一个新的字段，以适应需求的变化。 – 改进设计：标签位flag设计二进制的“位”本来就有表示状态的作用。可以用各个位来分别表示不同种类的会员卡打折支持：这样，“MEMBERCARD”字段仍采用整型。当某个商家支持金卡打折时，则保存“1（0001）”，支持银卡时，则保存“2（0010）”，两种都支持，则保存“3（0011）”。其他类似。表结构如图：我们在编写SQL语句时，只需要通过“位”的与运算，就能简单的查询出想要数据。通过这样的处理方式既节省存储空间，查询时又简单方便。 //查询支持金卡打折的商家信息： select * from factory where MEMBERCARD & b'0001'; // 或者： select * from factory where MEMBERCARD & 1; // 查询支持银卡打折的商家信息： select * from factory where MEMBERCARD & b'0010'; // 或者： select * from factory where MEMBERCARD & 2; 二进制( 位运算)枚举可以通过@Dict注解设置数据字典的bit属性或者实现BitEnum接口来标识该枚举值为2的次幂。二进制枚举最大的区别在于值的序列化和反序列化方式是不一样的。位运算的枚举定义示例 import pro.shushi.pamirs.meta.annotation.Dict; import pro.shushi.pamirs.meta.common.enmu.BitEnum; @Dict(dictionary = ClientTypeEnum.DICTIONARY, displayName = "客户端类型枚举", summary = "客户端类型枚举") public enum ClientTypeEnum implements BitEnum { PC(1L, "PC端", "PC端"), MOBILE(1L << 1, "移动端", "移动端"), ; public static final String DICTIONARY = "base.ClientTypeEnum"; private final Long value; private final String displayName; private final String help; ClientTypeEnum(Long value, String displayName, String help) { this.value = value; this.displayName = displayName; this.help = help; } @Override public Long value() { return value; } @Override public String displayName() { return displayName; } @Override public String help() { return help; } } 使用方法示例 API: addTo 和 removeFrom List<ClientTypeEnum> clientTypes = module.getClientTypes(); // addTo ClientTypeEnum.PC.addTo(clientTypes); // removeFrom ClientTypeEnum.PC.removeFrom(clientTypes); 在查询条件中的使用 List<Menu> moduleMenus = new Menu().queryListByWrapper(menuPage, LoaderUtils.authQuery(wrapper).eq(Menu::getClientTypes, ClientTypeEnum.PC));

nation

2023年11月24日

2.2K000

后端

自定义数据权限拦截处理

业务场景公司给员工对哪些模块有访问权限，这个时候就需要在员工访问模块表的时候做数据过滤，解决方案我们可以通过平台提供的数据过滤占位符解决这个问题，新建一条数据行权限，过滤语句条件是占位符，再编写占位符的解析逻辑 1.初始化权限基础数据 package pro.shushi.pamirs.demo.core.init; import com.google.common.collect.Lists; import org.springframework.core.annotation.Order; import org.springframework.stereotype.Component; import pro.shushi.pamirs.auth.api.constants.AuthConstants; import pro.shushi.pamirs.auth.api.enmu.AuthGroupTypeEnum; import pro.shushi.pamirs.auth.api.enmu.PermissionDataSourceEnum; import pro.shushi.pamirs.auth.api.enmu.PermissionTypeEnum; import pro.shushi.pamirs.auth.api.model.AuthGroup; import pro.shushi.pamirs.auth.api.model.AuthRole; import pro.shushi.pamirs.auth.api.model.ResourcePermission; import pro.shushi.pamirs.boot.base.model.UeModule; import pro.shushi.pamirs.boot.common.api.command.AppLifecycleCommand; import pro.shushi.pamirs.boot.common.api.init.InstallDataInit; import pro.shushi.pamirs.boot.common.api.init.UpgradeDataInit; import pro.shushi.pamirs.demo.api.DemoModule; import pro.shushi.pamirs.demo.core.placeholder.EmployeeModulePlaceholder; import pro.shushi.pamirs.framework.common.utils.ObjectUtils; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.domain.module.ModuleDefinition; import java.util.Collections; import java.util.List; @Slf4j @Component @Order(0) public class DemoModuleBizInit implements InstallDataInit, UpgradeDataInit { @Override public List<String> modules() { return Collections.singletonList(DemoModule.MODULE_MODULE); } @Override public int priority() { return 0; } @Override public boolean init(AppLifecycleCommand command, String version) { this.initAuth(); return true; } @Override public boolean upgrade(AppLifecycleCommand command, String version, String existVersion) { this.initAuth(); return true; } private void initAuth() { AuthGroup authGroup = new AuthGroup(); authGroup.setName("测试权限组") .setDisplayName("测试权限组") .setType(AuthGroupTypeEnum.RUNTIME) .setActive(true); authGroup.createOrUpdate(); AuthRole authRole = new AuthRole(); authRole.setCode("TEST_ROLE_1") .setName("测试角色") .setRoleTypeCode(AuthConstants.ROLE_SYSTEM_TYPE_CODE) .setPermissionDataSource(PermissionDataSourceEnum.CUSTOM) .setActive(true); authRole.createOrUpdate(); authRole.setGroups(Lists.newArrayList(authGroup)); authRole.fieldSave(AuthRole::getGroups); ResourcePermission authPermission = new ResourcePermission(); authPermission.setName("测试模块权限过滤") .setDomainExp(EmployeeModulePlaceholder.PLACEHOLDER) .setModel(ModuleDefinition.MODEL_MODEL) .setPermRead(true) .setPermRun(true) .setPermissionType(PermissionTypeEnum.ROW) .setPermissionDataSource(PermissionDataSourceEnum.CUSTOM) .setCanShow(true) .setActive(true); ResourcePermission authPermission2 = ObjectUtils.clone(authPermission); authPermission2.setName("测试ue模块权限过滤").setModel(UeModule.MODEL_MODEL); authGroup.setPermissions(Lists.newArrayList(authPermission, authPermission2)); authGroup.fieldSave(AuthGroup::getPermissions); } } 这里演示的module表比较特殊，需要同时设置ModuleDefinition和UeModule这2个模型做数据过滤 2.编写占位符拦截替换逻辑 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class EmployeeModulePlaceholder extends AbstractPlaceHolderParser { public static final String PLACEHOLDER = "${employeeModulePlaceholder}"; protected String value() { // TODO…

nation

2023年11月24日

1.3K000

后端

如何自定义Excel导入功能

介绍在平台提供的默认导入功能无法满足业务需求的时候，我们可以自定义导入功能，以满足业务中个性化的需求。功能示例下面以导入文件的时候加入发布人的字段作为示例讲解。继承平台的导入任务模型，加上需要在导入的弹窗视图需要展示的字段 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.file.api.model.ExcelImportTask; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(DemoItemImportTask.MODEL_MODEL) @Model(displayName = "商品-Excel导入任务") public class DemoItemImportTask extends ExcelImportTask { public static final String MODEL_MODEL = "demo.DemoItemImportTask"; // 自定义显示的字段 @Field.String @Field(displayName = "发布人") private String publishUserName; } 编写自定义导入弹窗视图的数据初始化方法和导入提交的action package pro.shushi.pamirs.demo.core.action; import org.springframework.stereotype.Component; import pro.shushi.pamirs.boot.base.resource.PamirsFile; import pro.shushi.pamirs.demo.api.model.DemoItemImportTask; import pro.shushi.pamirs.file.api.action.ExcelImportTaskAction; import pro.shushi.pamirs.file.api.config.FileProperties; import pro.shushi.pamirs.file.api.model.ExcelWorkbookDefinition; import pro.shushi.pamirs.file.api.service.ExcelFileService; import pro.shushi.pamirs.meta.annotation.Action; import pro.shushi.pamirs.meta.annotation.Function; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.annotation.fun.extern.Slf4j; import pro.shushi.pamirs.meta.enmu.ActionContextTypeEnum; import pro.shushi.pamirs.meta.enmu.FunctionOpenEnum; import pro.shushi.pamirs.meta.enmu.FunctionTypeEnum; import pro.shushi.pamirs.meta.enmu.ViewTypeEnum; @Slf4j @Component @Model.model(DemoItemImportTask.MODEL_MODEL) public class DemoItemExcelImportTaskAction extends ExcelImportTaskAction { public DemoItemExcelImportTaskAction(FileProperties fileProperties, ExcelFileService excelFileService) { super(fileProperties, excelFileService); } @Action(displayName = "导入", contextType = ActionContextTypeEnum.CONTEXT_FREE, bindingType = {ViewTypeEnum.TABLE}) public DemoItemImportTask createImportTask(DemoItemImportTask data) { if (data.getWorkbookDefinitionId() != null) { ExcelWorkbookDefinition workbookDefinition = new ExcelWorkbookDefinition(); workbookDefinition.setId(data.getWorkbookDefinitionId()); data.setWorkbookDefinition(workbookDefinition); } Object fileId = data.get_d().get("fileId"); if (fileId != null) { PamirsFile pamirsFile = new PamirsFile().queryById(Long.valueOf(fileId.toString())); data.setFile(pamirsFile); } super.createImportTask(data); return data; } /** * @param data * @return */ @Function(openLevel = FunctionOpenEnum.API) @Function.Advanced(type = FunctionTypeEnum.QUERY) public DemoItemImportTask construct(DemoItemImportTask data) { data.construct(); return data; } } 编写导入的单行数据处理逻辑，此处可以拿到导入弹窗内自定义的字段提交的值，然后根据这些值处理自定义逻辑，此处演示代码就是将导入后的商品的发布人都设置为自定义导入视图填的发布人信息 package pro.shushi.pamirs.demo.core.excel.extPoint; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Component; import pro.shushi.pamirs.demo.api.model.DemoItem; import pro.shushi.pamirs.demo.api.model.DemoItemImportTask; import pro.shushi.pamirs.demo.api.service.DemoItemService; import pro.shushi.pamirs.file.api.context.ExcelImportContext; import pro.shushi.pamirs.file.api.extpoint.AbstractExcelImportDataExtPointImpl; import pro.shushi.pamirs.file.api.extpoint.ExcelImportDataExtPoint;…

nation

2023年11月22日

1.6K001

自定义组件之手动渲染弹出层（v4）

阅读之前你应该：了解自定义组件相关内容。自定义组件之手动渲染基础（v4）弹出层组件我们内置了两个弹出层组件，弹窗(Dialog)和抽屉(Drawer)，以下所有内容全部围绕弹窗(Dialog)进行描述，抽屉相关内容与弹窗完全一致。下面这个对照表格可以帮助你区分两个弹出层组件的异同：弹出层相关功能弹窗(Dialog) 抽屉(Drawer) API方法 Dialog#create Drawer#create 内置组件 DialogWidget DrawerWidget 内置插槽 header, default, footer header, default, footer 渲染弹出层的方式我们提供了三种渲染弹出层组件的方式，根据不同的情况使用不同的方式可以让实现变得更简单。使用Dialog#createAPI方法创建弹窗：一般用于简单场景，动作区无法进行自定义。使用DSL渲染能力创建弹窗调用ActionWidget#click方法打开弹窗（适用于自动渲染场景）使用createWidget创建DialogWidget并打开弹窗（适用于手动渲染场景）使用第三方组件创建弹窗：一般用于弹窗需要自定义的场景中，性能最优，可用于任何场景。使用Dialog#createAPI方法创建弹窗以下是一个自定义组件的完整示例，其使用ViewCache#compule方法获取视图。 view.ts export const template = `<view> <field data="id" invisible="true" /> <field data="code" label="编码" /> <field data="name" label="名称" /> </view>`; ManualDemoWidget.ts import { BaseElementWidget, createRuntimeContextForWidget, Dialog, FormWidget, MessageHub, RuntimeView, SPI, ViewCache, ViewType, Widget } from '@kunlun/dependencies'; import ManualDemo from './ManualDemo.vue'; import { template } from './view'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'ManualDemo' })) export class ManualDemoWidget extends BaseElementWidget { public initialize(props) { super.initialize(props); this.setComponent(ManualDemo); return this; } @Widget.Method() public async openPopup() { // 获取运行时视图 const view = await this.fetchViewByCompile(); if (!view) { console.error('Invalid view'); return; } // 创建运行时上下文 const runtimeContext = createRuntimeContextForWidget(view); const runtimeContextHandle = runtimeContext.handle; // 获取初始化数据 const formData = await runtimeContext.getInitialValue(); // 创建弹窗 const dialogWidget = Dialog.create(); // 设置弹窗属性 dialogWidget.setTitle('这是一个演示弹窗'); // 创建所需组件 dialogWidget.createWidget(FormWidget, undefined, { metadataHandle: runtimeContextHandle, rootHandle: runtimeContextHandle, dataSource: formData, activeRecords: formData, template: runtimeContext.viewTemplate, inline: true }); dialogWidget.on('ok', () => { MessageHub.info('click ok'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); dialogWidget.on('cancel', () => { MessageHub.info('click cancel'); // 关闭弹窗 dialogWidget.onVisibleChange(false); }); // 打开弹窗…

nation

前端 2023年11月1日

1.4K000

【前端】低无一体部署常见问题

如何检查上传的SDK是否有效？ 1. 在任意页面刷新后，查看是否发起【查询SDK组件】的请求。 2. 在返回的js和css列表中是否能找到在界面设计器上传的js和css文件。 3. 检查浏览器的Console中是否有组件相关报错。 4. 检查sdk中是否包含了启动工程未加入的包依赖。启动工程包依赖：main.ts VueOioProvider( { dependencies: { vue: import('vue'), lodashEs: import('lodash-es'), antDesignVue: import('ant-design-vue'), elementPlusIconsVue: import('@element-plus/icons-vue'), elementPlus: import('element-plus'), kunlunDependencies: import('@kunlun/dependencies'), kunlunVueUiAntd: import('@kunlun/vue-ui-antd'), kunlunVueUiEl: import('@kunlun/vue-ui-el') } } ); SDK依赖：rollup.config.ts const globals = { vue: 'vue', 'lodash-es': 'lodashEs', 'ant-design-vue': 'antDesignVue', '@element-plus/icons-vue': 'elementPlusIconsVue', 'element-plus': 'elementPlus', '@kunlun/dependencies': 'kunlunDependencies', '@kunlun/vue-ui-antd': 'kunlunVueUiAntd', '@kunlun/vue-ui-el': 'kunlunVueUiEl', '@kunlun/mobile-dependencies': 'kunlunMobileDependencies', '@kunlun/vue-ui-mobile-vant': 'kunlunVueUiMobileVant' }; 上述两个文件配置的依赖和对应名称必须匹配才能在sdk上传后正常运行，否则会出现内存变量无法共享的问题。当未发起【查询SDK组件】的请求时如何处理？ 1. 在任意页面刷新后，查看manifest.js加载路径。业务工程通常为：http://${host}:${port}/manifest.js 设计器镜像中通常为：http://${host}:${port}/config/manifest.js 2. 若未正确加载manifest.js，则在dist目录中根据请求路径添加manifest.js文件。此文件称为运行时配置文件，可点击查看参考文档。 runtimeConfigResolve({ plugins: { usingRemote: true } });

nation

低无一体 2023年11月1日

2.8K000

【前端】工程结构最佳实践（v4）

阅读之前你应该：了解node与npm相关内容了解lerna包管理工具的相关内容官方文档了解git仓库的相关内容了解rollup的相关内容工程结构包示例 Vue项目结构包下载工程结构详解工程结构 ├── packages │ ├── kunlun-boot │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── main.ts │ │ │ └── shim-vue.d.ts │ │ ├── tsconfig.json │ │ └── vue.config.js │ ├── kunlun-module-demo │ │ ├── scripts │ │ │ ├── postpublish.js │ │ │ └── prepublish-only.js │ │ ├── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── index.ts │ │ ├── package.json │ │ ├── rollup.config.js │ │ └── tsconfig.json │ └── kunlun-modules-demo │ ├── scripts │ │ ├── build.config.js │ │ ├── postpublish.js │ │ └── prepublish-only.js │ ├── packages │ │ ├── module-demo1 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ └── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── module-demo2 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ …

nation

前端 2023年11月1日

1.6K000

后端

【DM】后端部署使用Dameng数据库（达梦）

达梦数据库配置驱动配置达梦数据库的服务端版本和驱动版本需要匹配，建议使用服务端安装时提供的jdbc驱动，不要使用官方maven仓库中的驱动。报错表 xx 中不能同时包含聚集 KEY 和大字段，建表的时候就指定非聚集主键。SELECT * FROM V$DM_INI WHERE PARA_NAME = ‘PK_WITH_CLUSTER’;SP_SET_PARA_VALUE(1,’PK_WITH_CLUSTER’,0) Maven配置 DM8（目前maven仓库最新版本） <dm.version>8.1.2.192</dm.version> <dependency> <groupId>com.dameng</groupId> <artifactId>DmJdbcDriver18</artifactId> <version>${dm.version}</version> </dependency> PS: 8.1.3.12版本驱动需要手动上传到nexus仓库使用，本文包含该版本相关内容。 Maven配置 DM7 <dm7.version>7.6.1.120</dm7.version> <dependency> <groupId>com.dameng</groupId> <artifactId>Dm7JdbcDriver18</artifactId> <version>${dm7.version}</version> </dependency> PS: 7.6.1.120版本驱动需要手动上传到nexus仓库使用，本文包含该版本相关内容。离线驱动下载 Dm7JdbcDriver18-7.6.1.120.jarDmJdbcDriver18-8.1.3.12.jar JDBC连接配置 pamirs: datasource: base: type: com.alibaba.druid.pool.DruidDataSource driverClassName: dm.jdbc.driver.DmDriver # url: jdbc:dm://127.0.0.1:5236/BASE?clobAsString=true&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql url: jdbc:dm://127.0.0.1:5236?schema=BASE&clobAsString=true&columnNameUpperCase=false&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql username: xxxxxx password: xxxxxx initialSize: 5 maxActive: 200 minIdle: 5 maxWait: 60000 timeBetweenEvictionRunsMillis: 60000 testWhileIdle: true testOnBorrow: false testOnReturn: false poolPreparedStatements: true asyncInit: true validConnectionCheckerClassName: com.alibaba.druid.pool.vendor.OracleValidConnectionChecker validationQuery: SELECT 1 FROM DUAL 连接url配置点击查看官方文档：DM JDBC 编程指南连接串1 jdbc:dm://127.0.0.1:5236?schema=BASE&clobAsString=true&columnNameUpperCase=false&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql PS：schema参数在低版本驱动区分大小写，高版本驱动不再区分大小写，为了避免错误，统一使用全大写。columnNameUpperCase参数与官方介绍不一致，为了避免错误，需要显式指定。连接串2 jdbc:dm://127.0.0.1:5236/BASE?clobAsString=true&useUnicode=true&characterEncoding=utf8&compatibleMode=mysql PS：可能是未来更高版本中使用的连接串形式。达梦数据库在不同驱动版本下需要使用不同的连接串进行处理，具体可参考下表：（使用错误的连接串将无法正常启动） Dm7JdbcDriver18版本 Build-Time 使用的连接串类型是否支持指定schema schema是否区分大小写是否可用不可用原因 7.6.0.165 2019.06.04 1 否是否不支持LocalDateTime类型 7.6.1.120（建议） 2022.09.14 1 是是是 – DmJdbcDriver18版本 Build-Time 使用的连接串类型是否支持指定schema schema是否区分大小写是否可用不可用原因 8.1.2.192 2023.01.12 1 是否是 – 8.1.3.12（建议） 2023.04.17 2 是否是 – 方言配置 pamirs方言配置 pamirs: dialect: ds: base: type: DM version: 8 majorVersion: 8 pamirs: type: DM version: 8 majorVersion: 8 数据库版本 type version majorVersion 7-20220916 DM 7 20220916 8-20230418 DM 8 8 schedule方言配置 pamirs: event: schedule: dialect: type: DM version: 8 majorVersion: 8 type version majorVersion…

nation

2023年11月1日

15.0K000

【前端】移动端工程结构最佳实践（v4/v5）

阅读之前你应该：了解node与npm相关内容了解lerna包管理工具的相关内容官方文档了解git仓库的相关内容了解rollup的相关内容工程结构包示例 Vue项目结构包下载-v4.7.xVue项目结构包下载-v5.2.x 工程结构详解工程结构 ├── packages │ ├── kunlun-mobile-boot │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ └── index.html │ │ ├── src │ │ │ ├── main.ts │ │ │ └── shim-vue.d.ts │ │ ├── tsconfig.json │ │ └── vue.config.js │ ├── kunlun-module-mobile-demo │ │ ├── scripts │ │ │ ├── postpublish.js │ │ │ └── prepublish-only.js │ │ ├── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── index.ts │ │ ├── package.json │ │ ├── rollup.config.js │ │ └── tsconfig.json │ └── kunlun-modules-mobile-demo │ ├── scripts │ │ ├── build.config.js │ │ ├── postpublish.js │ │ └── prepublish-only.js │ ├── packages │ │ ├── module-demo1 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ └── src │ │ │ ├── index.ts │ │ │ └── shim-vue.d.ts │ │ ├── module-demo2 │ │ │ ├── index.ts │ │ │ ├── package.json │ │ │ ├── rollup.config.js │ │ │ …

nation

前端 2023年11月1日

2.1K000

【前端】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日

1.3K000

Oinone FAQ

【界面设计器】组件开发常见问题

如何获取当前页面中的全部可用字段？在Class Component(ts)中使用以下代码获取当前设计组件实例 “` tsimport { WidgetInstance } from '@kunlun/ui-designer-dependencies'; @Widget.Reactive()@Widget.Inject()protected currentInstance: WidgetInstance | undefined;“` PS：这里使用了@kunlun/ui-designer-dependencies依赖包中的类型定义，但没有使用函数，因此这个导入是可以正常执行的。在Vue组件中使用以下代码获取可选字段列表 “` tsimport { WidgetInstance } from '@kunlun/ui-designer-dependencies'; // props add currentInstance defineprops: { currentInstance: { type: Object as PropType<WidgetInstance> }} // setup using currentInstance get fieldsconst fields = computed(() => { return Array.from(props.currentInstance?.root?.fieldCollection.values() || []).map((v) => { return { label: v.element?.widgetData?.displayName, value: v.element?.name }; });});“` PS：这里的v.element?.widgetData?.displayName获取的是字段的元数据显示名称，如果需要获取字段输入的标题可以使用v.element?.properties?.label。为什么需要选择当前页面中的字段？页面在发起请求时，会根据当前视图中的字段查询最小结果集，不在页面中的字段无法被正确获取。可以将用到的字段拖放至视图中，并使用【隐藏】属性进行隐藏即可。列内容超过当前表格行高该怎么办？在界面设计器中选中表格组件，可以为表格设置指定的行高。在界面设计器的属性面板组件中，如何获取当前字段所在模型的模型编码？ “` tsinterface InternalMetadata { model?: string;} @Widget.Reactive()protected get currentModel(): string | undefined { return (this.formData._metadata as InternalMetadata)?.model;}“` 在界面设计器的属性面板组件中，如何获取关联关系字段的关联模型的模型编码？ “` tsinterface InternalMetadata { modelReferences?: { model?: string; };} @Widget.Reactive()protected get referenceModel(): string | undefined { return (this.formData._metadata as InternalMetadata)?.modelReferences?.model;}“` 如何理解关联关系字段中的【透出字段(选项字段列表)】属性？正如我们现在已知的，页面发起查询请求时，将根据页面中的元数据获取最小结果集，不在页面中的字段并不包含在结果集中。这样虽然使得我们可以最小化的控制结果集的大小。但对于关联关系类型的字段来说，我们也面临了一个无法回避的问题：对于【表格】、【表单】等这些组件，我们可以通过拖放字段的方式直接将字段展示在页面中，因此对于这些可被设计的组件而言无需其他过多的配置即可正常使用。但对于【下拉单选】、【下拉多选】等这些组件而言，我们无法在页面中直接定义关联关系字段的元数据。我们在解决这一问题上也同样做了很多，比如当你在【下拉单选】中设置【选项标题】时，选项标题中的字段会被自动透出到页面中，在发起请求时也就能正常获取这些字段了。特殊的是，如果某些字段只是在逻辑上被使用的，但又不能将其通过【选项标题】展示给用户的时候，我们必须使用一个属性来定义这些字段，使得我们的业务逻辑可以正常运行。因此，我们设计了【透出字段】来解决这一问题。为什么在属性面板中的【选项字段列表】是【透出字段】呢？正如我们在业务开发过程中，服务端的模型定义的显示名称和在界面设计器中的字段标题可以是不一致的。由于服务端模型定义的字段API名称为optionFields，其中文直译是【选项字段列表】，但我们在产品设计时，希望这一属性可以被用户理解，因此在页面上展示的时候使用了【透出字段】作为标题呈现给用户。在界面设计器中如何配置【透出字段(选项字段列表)】？ optionFields在配置时使用的是字段的API名称，在关联关系属性定义时，允许使用.分隔的方式定义关联关系字段的关联属性。如：[‘code’, ‘name’, ‘user.code’, ‘user.name’]。其中user字段为多对一(M2O)的关联关系字段，其中有两个字段code和name。与之对应的GQL响应结构为： query { xxxxxxQuery { queryPage(xxxxxx) { content { code name user { code name } } } } } 在界面设计器的属性面板组件中，如何通过代码方式设置【透出字段(选项字段列表)】？ @Widget.Method() public setOptionFields(optionFields: string[]) { this.formData.optionFields = optionFields; } 如何在字段中使用mountedCallChaining提供mountedProcess方法？ @Widget.Reactive() @Widget.Inject() protected mountedCallChaining: CallChaining | undefined; protected mountedProcess() {} protected mounted() { super.mounted(); this.mountedCallChaining?.hook(this.path, async () => { await this.mountedProcess(); }); } protected unmounted() { super.unmounted(); this.mountedCallChaining?.unhook(this.path); }

nation

2023年11月1日

1.9K000