序篇

相关推荐

• Oinone 7天入门到精通

  4.2.6 框架之网络请求-拦截器

  在整个http的链路中，异常错误对前端来说尤为重要，他作用在很多不同的场景，通用的比如500, 502等; 一个好的软件通常需要在不同的错误场景中做不同的事情。当用户cookie失效时，希望能自动跳转到登录页；当用户权限发生变更时，希望能跳转到一个友好的提示页；那么如何满足这些个性化的诉求呢？接下来让我们一起了解oinone前端网络请求-拦截器。 一、入口 在src目录下main.ts中可以看到VueOioProvider，这是系统功能提供者的注册入口 图4-2-6-1 VueOioProvider import interceptor from './middleware/network-interceptor'; VueOioProvider( { http: { callback: interceptor } }, [] ); 图4-2-6-2 拦截器的申明入口 二、middleware 在项目初始化时使用CLI构建初始化前端工程，在src/middleware有拦截器的默认实现： 图4-2-6-3 在src/middleware有拦截器的默认实现 三、interceptor interceptor在请求返回后触发，interceptor有两个回调函数，error和next error参数 graphQLErrors 处理业务异常 networkError 处理网络异常 next extensions 后端返回扩展参数 const interceptor: RequestHandler = (operation, forward) => { return forward(operation).subscribe({ error: ({ graphQLErrors, networkError }) => { console.log(graphQLErrors, networkError); // 默认实现 => interceptor error }, next: ({ extensions }) => { console.log(extensions); // 默认实现 => interceptor next }, }); }; 图4-2-6-4 后端返回扩展参数 四、interceptor error // 定义错误提示等级 const DEFAULT_MESSAGE_LEVEL = ILevel.ERROR; // 错误提示等级 对应提示的报错 const MESSAGE_LEVEL_MAP = { [ILevel.ERROR]: [ILevel.ERROR], [ILevel.WARN]: [ILevel.ERROR, ILevel.WARN], [ILevel.INFO]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO], [ILevel.SUCCESS]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS], [ILevel.DEBUG]: [ILevel.ERROR, ILevel.WARN, ILevel.INFO, ILevel.SUCCESS, ILevel.DEBUG] }; // 错误提示通用函数 const notificationMsg = (type: string = 'error', tip: string = '错误', desc: string = '') => { notification[type]({ message: tip, description: desc }); }; // 根据错误等级 返回错误提示和类型 const getMsgInfoByLevel = (level: ILevel) => { let notificationType = 'info'; let notificationText = translate('kunlun.common.info'); switch (level) { case ILevel.DEBUG: notificationType = 'info'; notificationText = translate('kunlun.common.debug'); break; case ILevel.INFO: notificationType = 'info'; notificationText = translate('kunlun.common.info'); break;…

  史, 昂

  2024年5月23日

  1.7K000
• Oinone 7天入门到精通

  4.1.3 模块之生命周期

  了解oinone的启动生命周期过程，对于理解oinone或者开发高级功能都有非常大的帮助 一、生命周期大图 图4-1-3-1 生命周期大图 二、平台扩展说明 平台节点通过SPI机制进行扩展，本书籍暂不展开，更多详情请见可关注数式Oinone公众号中的Oinone内核揭秘系列文章。 三、业务扩展说明 接口 说明 使用场景 LifecycleBeginAllInit 系统进入生命周期前置逻辑注：不能有任何数据库操作 系统级别的信息收集上报 LifecycleCompletedAllInit 系统生命周期完结后置逻辑 系统级别的信息收集上报、生命周期过程中的数据或上下文清理 LifecycleBeginInit 模块进入生命周期前置逻辑注：不能有任何数据库操作 预留，能做的事情比较少 LifecycleCompletedInit 模块生命周期完结后置逻辑 本模块需等待其他模块初始化完毕以后进行初始化的逻辑。比如：1.集成模块的初始化2.权限缓存的初始化…… MetaDataEditor 元数据编辑注：不能有任何数据库操作 这个在第3章Oinone的基础入门中已经多次提及，核心场景是向系统主动注册如Action、Menu、View等元数据 ExtendBuildInit 系统构建前置处理逻辑 预留，能做的事情比较少，做一些跟模块无关的事情 ExtendAfterBuilderInit 系统构建后置处理逻辑 预留，能做的事情比较少，做一些跟模块无关的事情 InstallDataInit 模块在初次安装时的初始化逻辑 根据模块启动指令来进行选择执行逻辑，一般用于初始化业务数据。应用启动参数与指令转化逻辑详见4.1.2【模块之启动指令】一文 UpgradeDataInit 模块在升级时的初始化逻辑注：根据启动指令来执行，是否执行一次业务自己控制 ReloadDataInit 模块在重启时的初始化逻辑注：根据启动指令来执行，是否执行一次业务自己控制 表4-1-3-1 业务拓展说明 四、常用生命周期举例 Install\Upgrade\Reload的业务初始化(举例) Step1 新建DemoModuleBizInit DemoModuleBizInit实现InstallDataInit, UpgradeDataInit, ReloadDataInit a. InstallDataInit 对应 init b. UpgradeDataInit 对应 upgrade c. ReloadDataInit 对应 reload modules方法代表改初始化类与哪些模块匹配，以模块编码为准 priority 执行优先级 package pro.shushi.pamirs.demo.core.init; import org.springframework.stereotype.Component; 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.ReloadDataInit; import pro.shushi.pamirs.boot.common.api.init.UpgradeDataInit; import pro.shushi.pamirs.demo.api.DemoModule; import pro.shushi.pamirs.demo.api.enumeration.DemoExpEnumerate; import pro.shushi.pamirs.meta.common.exception.PamirsException; import java.util.Collections; import java.util.List; @Component public class DemoModuleBizInit implements InstallDataInit, UpgradeDataInit, ReloadDataInit { @Override public boolean init(AppLifecycleCommand command, String version) { throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR).appendMsg("DemoModuleBizInit: install").errThrow(); //安装指令执行逻辑 // return Boolean.TRUE; } @Override public boolean reload(AppLifecycleCommand command, String version) { throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR).appendMsg("DemoModuleBizInit: reload").errThrow(); //重启指令执行逻辑 // return Boolean.TRUE; } @Override public boolean upgrade(AppLifecycleCommand command, String version, String existVersion) { throw PamirsException.construct(DemoExpEnumerate.SYSTEM_ERROR).appendMsg("DemoModuleBizInit: upgrade").errThrow(); //升级指令执行逻辑 // return Boolean.TRUE; } @Override public List<String> modules() { return Collections.singletonList(DemoModule.MODULE_MODULE); } @Override public int priority() { return 0; } } 图4-1-3-2 新建DemoModuleBizInit Step2 重启看效果 启动指令为-Plifecycle=INSTALL，转化指令为 install为AUTO；upgrade为FORCE 因为DemoModule我们已经执行过好多次了，所以会进入upgrade逻辑。系统重启的效果跟我们预期的结果一致，确实执行了DemoModuleBizInit的upgrade方法 图4-1-3-3 系统重启执行DemoModuleBizInit的upgrade方法 MetaDataEditor 回顾使用情况 最早在3.3.2【模型的类型】一文中介绍“传输模型”时，初始化ViewAction窗口动作时使用到，这里不过多介绍。下面主要介绍下InitializationUtil的工具类包含方法。 注：模块上报元数据只能通过注解或者实现MetaDataEditor接口并使用InitializationUtil工具来进行，更建议用注解方式

  史, 昂

  2024年5月23日

  1.7K000
• Oinone 7天入门到精通

  4.1.18 框架之网关协议-Variables变量

  我们在应用开发过程有一种特殊情况在后端逻辑编写的时候需要知道请求的发起入口，平台利用GQL协议中的Variables属性来传递信息，本文就介绍如何获取。 一、前端附带额外变量 属性名 类型 说明 scene String 菜单入口 表4-1-18-1 前端附带额外变量 图4-1-18-1 variables信息中的scene 二、后端如何接收variables信息 通过PamirsSession.getRequestVariables()可以得到PamirsRequestVariables对象。 三、第一个variable（举例） Step1 修改PetTalentAction，获取得到前端传递的Variables package pro.shushi.pamirs.demo.core.action; ……类引用 @Model.model(PetTalent.MODEL_MODEL) @Component public class PetTalentAction { ……其他代码 @Function.Advanced(type= FunctionTypeEnum.QUERY) @Function.fun(FunctionConstants.queryPage) @Function(openLevel = {FunctionOpenEnum.API}) public Pagination<PetTalent> queryPage(Pagination<PetTalent> page, IWrapper<PetTalent> queryWrapper){ String scene = (String)PamirsSession.getRequestVariables().getVariables().get("scene"); System.out.println("scene: "+ scene); ……其他代码 } ……其他代码 } 图4-1-18-2 修改PetTalentAction Step2 重启验证 点击宠物达人不同菜单入口，查看效果 图4-1-18-3 示例效果（一） 图4-1-18-4 示例效果（二）

  史, 昂

  2024年5月23日

  1.9K000
• Oinone 7天入门到精通

  图表

  1. 业务场景 进入数据可视化后，默认处于图表列表页面，点击报表/数据大屏图标则可切换至对应列表；支持从模型获取数据后，过滤数据后创建可视化图表，维护的图表信息可以被报表、数据大屏、以及业务系统引用。 2. 操作流程 1）进入数据可视化，进入图表tab，维护分组信息； 2）在二级分组名称后点击“+”【添加图表】，对图表进行编辑设计； 3）创建完成后可以【编辑】图表； 4）图表完善后，可以点击【发布】图表，则图表此时可以被引用； 5）如果图表有更新，则可以点击【更新发布】，使业务系统引用对图表变为最新的图表信息； 6）如果图表数据不再可以公开使用，则需要通过【隐藏】功能将图表的引用权限收起，此时报表、数据大屏、前端业务系统均不可再引用该图表，但不影响已被引用的图表； 7）隐藏后可以【取消隐藏】，图表恢复隐藏前的状态和功能，可以被引用。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-图表-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建图表 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-图表-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-图表-删除分组 3）鼠标移动至需要删除的分组上，当分组下无图表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只有分组下没有图表的分组才能直接删除成功 3.4 创建图表 1）操作流程：选择二级分组-创建图表 2）操作路径：数据可视化-图表-二级分组-创建图表 3）鼠标移动至需要创建图表的二级分组上，出现「+」，点击图标后弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b模型：需要选择来源数据对应的模型； c方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进入图表设计页面 3.5 编辑图表 1）操作流程：选择图表-编辑图表 2）操作路径：数据可视化-图表-二级分组-图表-编辑图表 3）只能编辑未发布或者已发布但没有被隐藏的图表，且存在三种编辑情况 a第一种：点击图表标题后的编辑图标，仅能编辑图表标题； b第二种：点击图表中的图表标题、图表副标题、图表描述后的编辑图标，可以直接编辑图表标题、图表副标题、图表描述； c第三种：点击【编辑】按钮，进入图表设计页面，带出已有的数据字段、样式、图表内容，编辑时的规则与创建时一致，编辑后可以点击保存进行更新，如果未保存直接返回，则编辑无效； 4）编辑后实时生效，图表信息保持展示最新效果 3.6 删除图表 1）操作流程：选择图表-删除图表 2）操作路径：数据可视化-图表-二级分组-图表-删除图表 3）未发布或者已发布但没有被隐藏的图表，并且没被前端或者报表引用，才展示图表菜单名称后的删除图标 4）删除后图表消失 3.7 复制 1）操作流程：选择图表-复制图表 2）操作路径：数据可视化-图表-二级分组-图表-复制图表 3）点击【复制】按钮，复制成功，名称为copy of 原图表标题，展示在原图表分组的最后一个 3.8 发布 1）操作流程：选择图表-发布图表 2）操作路径：数据可视化-图表-二级分组-图表-发布 3）选择单个未发布且没有被隐藏的图表，点击【发布】按钮，图表发布后可以被前端引用，图表状态变为已发布，展示最近发布时间； 4）如果图表发布后有更新内容，会展示的更新类型：更新图表信息/更新图表内容 3.9 查看最近一次发布的版本 1）操作流程：选择图表-查看最近一次发布的版本 2）操作路径：数据可视化-图表-二级分组-图表-查看最近一次发布的版本 3）当图表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版本 3.10 更新发布 1）操作流程：选择图表-更新发布图表 2）操作路径：数据可视化-图表-二级分组-图表-更新发布图表 3）选择单个已发布且没有被隐藏的图表，并且该图表在上次发布后有所更新，可以点击【更新发布】按钮，将最新的图表内容发布至业务系统，业务系统引用的图表为最新内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的图表仍为最近发布的图表 3.11 隐藏 1）操作流程：选择图表-隐藏图表 2）操作路径：数据可视化-图表-二级分组-图表-隐藏图表 3）图表默认不隐藏，点击图表左侧的是否隐藏可以切换，切换是否隐藏=是 a未发布的图表，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b已发布的图表，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； 4）隐藏后的图表不可以被引用，但不影响已经被引用的数据 3.12 取消隐藏 1）操作流程：选择图表-取消隐藏图表 2）操作路径：数据可视化-图表-二级分组-图表-取消隐藏图表 3）隐藏后的图表可以取消隐藏，切换是否隐藏=否，取消隐藏后，图表恢复隐藏前的状态和功能，可以被引用 3.13 查看引用 1）流程：选择图表-查看被哪些报表/数据大屏/页面引用 2）操作路径：数据可视化-图表-二级分组-图表-更多-查看引用 3）选择具体的图表，查看当前图表被引用的所有信息 3.14 不允许别人编辑 1）流程：选择图表-不允许别人编辑 2）操作路径：数据可视化-图表-二级分组-图表-更多-不允许别人编辑 3）选择自己创建的图表，对图表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑图表 3.15 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-图表-二级分组-图表-更多-不允许别人引用 3）选择自己创建的图表，对图表是否允许他人引用进行设置；如果设置为不允许，则其他人无法在报表、数据大屏、界面设计器引用到该图表 3.16 导出图片 1）操作流程：选择图表-导出图片 2）操作路径：数据可视化-图表-二级分组-图表-图表导出图片 3）选择图表后，点击【导出图片】按钮可以将当前图表导出为图片 3.17 导出EXCEL 1）操作流程：选择图表-导出EXCEL 2）操作路径：数据可视化-图表-二级分组-图表-图表导出EXCEL 3）选择图表后，点击【导出EXCEL】按钮可以将当前图表导出为EXCEL 4. 图表设计页面 4.1 修改模型、方法 1）操作流程：创建图表-进入图表设计页面 2）操作路径：数据可视化-图表-二级分组-图表-创建图表 3）在“创建图表”弹窗中选择了模型和方法后，可以在进入图表设计页面修改 4）图表设计页面，点击模型后的设置图标后，右侧弹出弹窗，可以修改模型和获取模型数据的方法，需要注意的是：修改模型后，图表信息会清空 4.2 维度 1）操作流程：创建图表-进入图表设计页面 2）操作路径：数据可视化-图表-二级分组-图表-创建图表 3）维度字段：布尔、文本、枚举、日期时间、年份、日期、时间、用户ID、手机号、邮箱 4.2.1 维度的添加 1）图表设计页面，点击维度后的「+」，右侧弹出弹窗，展示所有的维度字段，可以选择对应的字段进行分析 a拖动字段进入维度列表 b点击字段，则字段进入维度列表 2）不同的图表支持的维度个数不同，当维度字段个数已达上限后不可再添加；此时拖动新字段到旧字段上后，新字段会代替旧字段进行数据分析，且会保留相同的样式 4.2.2 维度的删除 1）维度选择后，鼠标放到维度字段上，显示「删除图标」 2）点击则字段删除成功，维度字段的效果消失 4.2.3 修改维度展示名称 1）维度选择后，鼠标放到维度字段上，显示「设置图标」 2）点击后下方弹出「修改展示名称」的设置选项，点击后右侧出现修改展示名称的弹窗，可以进行修改，在输入框下方可以查看原字段名称 4.3 数值 1）操作流程：创建图表-进入图表设计页面 2）操作路径：数据可视化-图表-二级分组-图表-创建图表 3）数值字段：整数、浮点数、金额、（连续的日期时间、年份、日期、时间） 4.3.1 数值的添加 1）图表设计页面，点击数值后的「+」，右侧弹出弹窗，展示所有的数值字段，可以选择对应的字段进行分析 a拖动字段进入数值列表 b点击字段，则字段进入数值列表 2）不同的图表支持的数值个数不同，当数值字段个数已达上限后不可再添加；此时拖动新字段到旧字段上后，新字段会代替旧字段进行数据分析，且会保留相同的样式 3）拖入的数值字段中，可以同时拖入整数、浮点数、金额；但是拖入字段类型=年份/日期时间/日期/时间后，不可以拖入其他字段类型的数值字段 4）饼图、漏斗图不可以在数值列表中拖入字段类型=年份/日期时间/日期/时间的字段 4.3.2 数值的删除 1）数值选择后，鼠标放到数值字段上，显示「删除图标」 2）点击则字段删除成功，数值字段的效果消失 4.3.3 修改数值展示名称 1）维度选择后，鼠标放到数值字段上，显示「设置图标」 2）点击后下方弹出可以设置的选项，点击「修改展示名称」选项，点击后右侧出现修改展示名称的弹窗，可以进行修改，在输入框下方可以查看原字段名称 4.3.4 修改数值聚合方式 1）维度选择后，鼠标放到数值字段上，显示「设置图标」 2）点击后下方弹出可以设置的选项，点击「聚合方式」选项，点击后右侧出现修改展示名称的弹窗，可以进行修改 3）默认是求和，可以修改为「无处理、最小值、最大值、平均值、计数」 a求和：将维度值对应的所有数值进行加和 b无处理：取维度值对应数值中的最近一条不为空的值 c最小值：取维度值对应数值中的最小值 d最大值：取维度值对应数值中的最大值 e平均值：取维度值对应数值的平均值 f计数：计算维度值对应的数值个数 4）修改后实时更新图表信息，会影响辅助线取数值字段时的值 4.3.5 修改数值数据格式 1）维度选择后，鼠标放到数值字段上，显示「设置图标」 2）点击后下方弹出可以设置的选项，点击「数据格式」选项，点击后右侧出现修改数据格式的弹窗，可以进行修改 3）可以设置字段的数据类型、单位；…

  史, 昂

  2024年6月20日

  1.8K000
• Oinone 7天入门到精通

  3.5.6.3 布局的配置

  布局是将页面拆分成一个一个的小单元，按照上下中左右进行排列。 前沿 在前端领域中，布局可以分为三大块「Float、Flex、Grid 」，Float可以说的上是上古时期的布局了，如今市面还是很少见的，除了一些古老的网站。 目前，平台主要支持通过配置XML上面的cols和span来进行布局。平台也同样支持自由布局，合理的使用row、col、containers和container四个布局容器相关组件，将可以实现各种类型的布局样式，换句话说，平台实现的自由布局功能是Flex和Grid的结合体。 这里主要是讲解Flex和Grid布局，以及目前新的模板布局实现的思路。 Flex布局 Flex布局采用的是一维布局，那么什么是一维布局呢，所谓的一维布局就是只有一个方向、没有体积、面积，比如一条直线。它适合做局部布局，就像我们原来的顶部菜单、面包屑导航，以及现在的主视图字段配置。 图3-5-6-19 Flex布局示意 图3-5-6-20 Flex布局示意 图3-5-6-21 Flex布局示意 从上图可以看看出，Flex布局只能在X、Y轴进行转换，它无法对上下左右四个方向同时处理，因为它没“面积”的概念。所以它最适合做局部布局。 优点 图3-5-6-22 Flex兼容性 Flex的兼容性，可以看得出来，目前主流的浏览器都支持该属性。所以Flex兼容性强，如果你想对局部做布局处理，Flex是最好选择。 缺陷 刚刚也提到了，用户想要的布局是千奇百怪的，如果他想要的布局在现有的功能中无法实现怎么办？让用户放弃？还是说服他使用现在的布局。 Grid布局 Grid布局系统采用的是二维布局，二维布局有四个方向：上、下、左、右，它只有面积没有体积，比如一张纸、网格。 Grid布局 <div id="grid-container-one"> <div class="one-1">Grid Item 1</div> <div>Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div class="one-6">Grid Item 6</div> </div> <div id="grid-container-two"> <div class="tow-1">Grid Item 1</div> <div class="tow-2">Grid Item 2</div> <div>Grid Item 3</div> <div>Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> </div> <div id="grid-container-three"> <div>Grid Item 1</div> <div>Grid Item 2</div> <div class="grid">Grid Item 3</div> <div class="grid-column">Grid Item 4</div> <div>Grid Item 5</div> <div>Grid Item 6</div> <div>Grid Item 7</div> <div class="grid-column">Grid Item 8</div> </div> HTML CSSResult Skip Results Iframe EDIT ON * { box-sizing: border-box; padding: 0; margin: 0; line-height: 1.5; font-weight: bold; text-align: center; } #grid-container-one{ background-color: black; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 50px); gap: 10px; border: solid black 2px; margin-bottom: 20px; color: salmon; } #grid-container-one div { border: solid white 2px; padding: 10px; } #grid-container-one .one-1 { grid-area: span 1/span 3; text-aligin: center } #grid-container-one .one-6 { grid-column: 3 /4; } #grid-container-two{ background-color: CADETBLUE; display: grid; grid-template-columns: 15% repeat(2, 1fr);…

  史, 昂

  2024年5月23日

  1.6K000