庄卓然

相关推荐

• Oinone 7天入门到精通

  3.5.2.1 整体介绍

  虽然我们有小眼睛可以让用户自定义展示字段和排序喜好，以及通过权限控制行、列展示，但在我们日常业务开发中还是会对页面进行调整，以满足业务方的对交互友好和便捷性的要求。本节会在如何自定义之前我们先介绍页面结构与逻辑，再带小伙伴一起完成自定义view的Template和Layout，以及整个母版的Template和Layout 页面的构成讲解 页面交互拓扑图 页面交互拓扑图 图3-5-2-1 页面交互拓扑图 注：页面逻辑交互拓扑图说明 模块作为主切换入口 模块决定菜单列表 菜单切换触发点击action 前端根据Mask、View进行渲染， a. Mask是母版是确定了主题、非主内容分发区域所使用组件和主内容分发区域联动方式的页面模板。全局、应用、视图动作、视图都可以通过mask属性指定母版 bMask和View都是有layout定义和template定义合并而成，系统会提供默认母版，以及为每种视图提供默认layout c. layout与template通过插槽进行匹配 Action根据不同类型做出不同访问后端服务、url跳转、页面路由、发起客户端动作等 Aciton路由可以指定Mask、视图组件的layout、template a. 当layout没有指定的时候则用系统默认的 b. 当template没有指定的时候，且视图组件相同类型有多条记录时，根据优先级选取 Mask和视图组件的layout优先级（视图组件>视图动作 > 应用 > 全局） 默认母版以及各类视图组件 母版布局 默认母版基础布局base-layout <mask layout="default"> <header slot="header"/> <container slot="main" name="main"> <sidebar slot="sidebar"/> <container slot="content"/> </container> <footer slot="footer"/> </mask> 图3-5-2-2 默认母版基础布局base-layout 母版template <mask layout="default"> <mask name="defaultMask"> <template slot="header"> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </template> <template slot="sidebar"> <element widget="navMenu"/> </template> <template slot="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </template> </mask> 图3-5-2-3 母版template 注： 上例中因为名称为main的插槽不需要设置更多的属性，所以在template中缺省了main插槽的template标签。 最终可执行视图 <mask name="defaultMask"> <header> <container name="appBar"> <element widget="logo"/> <element widget="appFinder"/> </container> <container name="operationBar"> <element widget="notification"/> <element widget="dividerVertical"/> <element widget="languages"/> </container> <element widget="userProfile"/> </header> <container name="main"> <sidebar name="sidebar"> <element widget="navMenu"/> </sidebar> <container name="content"> <element widget="breadcrumb"/> <element widget="mainView"/> </container> </container> <footer/> </mask> 图3-5-2-4 最终可执行视图 表格视图布局 默认表格视图基础布局base-layout <view type="table"> <view type="search"> <element widget="search" slot="search"> <xslot name="fields" slotSupport="field" /> </element> </view> <pack widget="fieldset"> <element widget="actionBar" slot="actions" slotSupport="action" /> <element widget="table" slot="table"> <xslot name="fields" slotSupport="field" /> <element widget="actionsColumn" slot="actionsColumn"> <xslot name="rowActions" slotSupport="action" /> </element> </element> </pack> </view> 图3-5-2-5 默认表格视图基础布局base-layout 注：table标签的子标签为column组件，如果field填充到元数据插槽fields没有column组件将自动包裹column组件。 表格视图template <view type="table" model="xxx" name="tableViewExample">…

  史, 昂

  2024年5月23日

  1.1K000
• Oinone 7天入门到精通

  企业个性化配置

  平台除了帮助企业快速解决业务需求外，还提供了企业文化、风格个性化能力，本章节详细介绍个性化配置。包括：登陆页配置、企业形象配置、系统风格配置。 系统配置 配置入口 配置入口：右上角登陆账号——系统配置——全局配置——登陆页配置、企业形象配置、系统风格配置。 登陆页配置 用户自定义登陆页的主题，一共有六个主题可选择，分别为： 图一：左侧是图片，右侧是登录输入框，Logo在左上角； 图二：右左侧是图片，右侧是登录输入框，Logo在左上角； 图三：底图是图片，登录输入框浮在页面左侧，Logo在左上角； 图四：底图是图片，登录输入框浮在页面中间，Logo在左上角； 图五：底图是图片，登录输入框浮在页面右侧，Logo在左上角； 图六：底图是图片，登录输入框浮在页面中间，Logo在登录框上方。 页面背景 上传登录页背景，支持上传jpg、png格式的图片或mp4、mov、avi格式视频。尺寸建议为1920*1080px，文件大小不超过50MB。 登录页logo：指配置登录页左上角的logo图标。 预览：配置后可在右侧电脑中点击全屏预览效果。 配置示例 企业形象配置 企业形象配置：可设置企业信息、业务应用导航栏logo、浏览器logo，设置完成之后，点击发布之后设置生效。 系统风格配置 系统风格配置，可设置主题（浅色、深色）、尺寸（大、中、小），配置后可全屏预览，发布后即可更换成对应的风格。 下载代码可进行自定义风格。

  史, 昂

  2024年6月20日

  981000
• 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日

  899000

• 4.1 后端高级特性

  了解oinone的基础入门基本上可以胜任业务代码的开发，但对于构建一个完善的应用，作为技术专家或者架构需要考虑的方面还有很多，这章期望能给到您解答构建应用的所有所需知识，让您能成为那个可以带领小伙伴飞的人

  史, 昂

  Oinone 7天入门到精通 2024年5月23日

  749000
• Oinone 7天入门到精通

  3.3.4 模型的继承

  在我们的很多项目中，客户都是有个性化需求的，就像我们不能找到两件一模一样的东西，何况是企业的经营与管理思路，多少都会有差异。常规的方式只能去修改标准产品的逻辑来适配客户的需求。导致后续标品维护非常困难。而在介绍完这节以后是不是让你更加清晰认知到我们2.4.2【oinone独特性之每一个需求都可以是一个模块】一文中所表达的特性带来的好处呢？ 一、继承方式 继承方式可以分为五种： 抽象基类ABSTRACT，只保存不希望为每个子模型重复键入的信息的模型，抽象基类模型不生成数据表存储数据，只供其他模型继承模型可继承域使用，抽象基类可以继承抽象基类。 扩展继承EXTENDS，子模型与父模型的数据表相同，子模型继承父模型的字段与函数。存储模型之间的继承默认为扩展继承。 多表继承MULTI_TABLE，父模型不变，子模型获得父模型的可继承域生成新的模型；父子模型不同表，子模型会建立与父模型的一对一关联关系字段（而不是交叉表），使用主键关联，同时子模型会通过一对一关联关系引用父模型的所有字段。多表继承父模型需要使用@Model.MultiTable来标识，子模型需要使用@Model.MultiTableInherited来标识。 代理继承PROXY，为原始模型创建代理，可以增删改查代理模型的实体数据，就像使用原始（非代理）模型一样。不同之处在于代理继承并不关注更改字段，可以更改代理中的元信息、函数和动作，而无需更改原始内容。一个代理模型必须仅能继承一个非抽象模型类。一个代理模型可以继承任意数量的没有定义任何模型字段的抽象模型类。一个代理模型也可以继承任意数量继承相同父类的代理模型。 临时继承TRANSIENT，将父模型作为传输模型使用，并可以添加传输字段。 二、继承约束 通用约束 对于扩展继承，查询的时候，父模型只能查询到父模型字段的数据，子模型可以查询出父模型及子模型的字段数据（因为派生关系所以子模型复刻了一份父模型的字段到子模型中）。 系统不会为抽象基类创建实际的数据库表，它们也没有默认的数据管理器，不能被实例化也无法直接保存，它们就是用来被继承的。抽象基类完全就是用来保存子模型们共有的内容部分，达到重用的目的。当它们被继承时，它们的字段会全部复制到子模型中。 系统不支持非jar包依赖模型的继承。 多表继承具有阻断效应，子模型无法继承多表继承父模型的存储父模型的字段，需要使用@Model.Advanced注解的inherited属性显示声明继承父模型的父模型。但是可以继承多表继承父模型的抽象父模型的字段。 可以使用@Model.Advanced的unInheritedFields和unInheritedFunctions属性设置不从父类继承的字段和函数。 跨模块继承约束 如果模型间的继承是跨模块继承，应该与模型所属模块建立依赖关系；如果模块间有互斥关系，则不允许建立模块依赖关系，同理模型间也不允许存在继承关系。 跨模块代理继承，对代理模型的非inJvm函数调用将使用远程调用方式；跨模块扩展（同表）继承将使用本地调用方式，如果是数据管理器函数，将直连数据源。 模型类型与继承约束 抽象模型可继承：抽象模型（Abstract） 临时模型可继承：抽象模型（Abstract）、传输模型（Transient） 存储模型可继承：抽象模型（Abstract）、存储模型（Store）、存储模型（多表，Multi-table Store），不可继承多个Store或Multi-table Store 多表存储模型（父）可继承：同扩展继承 多表存储模型（子）在继承单个Multi-table Store后可继承：抽象模型（Abstract）、存储模型（Store），不可继承多个Store 代理模型可继承： 抽象模型（Abstract），须搭配继承Store、Multi-table Store或Proxy 存储模型（Store），不可继承多个Store或Multi-table Store 存储模型（多表，Multi-table Store），不可继承多个Store或Multi-table Store 代理模型（Proxy），可继承多个Proxy，但多个父Proxy须继承自同一个Store或Multi-table Store，且不能再继承其他Store或Multi-table Store 同名字段以模型自身字段为有效配置，若模型自身不存在该字段，继承字段以第一个加载的字段为有效配置，所以在多重继承的情况下，未避免继承同名父模型字段的不确定性，在自身模型配置同名字段来确定生效配置。 三、继承的使用场景 模型的继承可以继承父模型的元信息、字段、数据管理器和函数 抽象基类 解决公用字段问题 扩展继承 解决开放封闭原则、跨模块扩展等问题 多表继承 解决多型派生类字段差异问题和前端多存储模型组合外观问题 代理继承 解决同一模型在不同场景下的多态问题（一表多态） 临时继承 解决使用现有模型进行数据传输问题 举例，前端多存储模型组合外观问题可通过多表继承的子模型，并一对一关联到关联模型，同时使用排除继承字段去掉不需要继承的字段。子模型通过默认模型管理器提供查询功能给前端，默认查询会查询子模型数据列表并在列表行内根据一对一关系查出关联模型数据合并，关联模型数据展现形态在行内是平铺还是折叠，在详情是分组还是选项卡可以自定义view进行配置 扩展继承 父子同表，模型在所有场景都有一致化的表现，意味着原模型被扩展成了新模型，父子模型的表名一致，模型编码不同，可覆盖父模型的模型管理器、数据排序规则、函数 多表继承 父子多表，父子间有隐式一对一关系，即父子模型都增加了一对一关联关系字段，同时父模型的字段被引用到子模型，且引用字段为只读字段，意味着子模型不可以直接更改父模型的字段值，子模型不继承父模型的模型管理器、数据排序规则、函数，子模型拥有自己的默认模型管理器、数据排序规则、函数。多表继承具有阻断效应，子模型无法自动多表继承父模型的存储父模型，需要显式声明多表继承父模型的存储父模型。 代理继承 代理模型继承并可覆盖父模型的模型管理器、数据排序规则、函数，同时可以使用排除继承字段和函数来达到不同场景不同视觉交互的效果。 图3-3-4-1 继承的使用场景 四、抽象基类（举例） 参考前文中3.3.2【模型的类型】一文中关于抽象模型的介绍 五、多表继承（举例） 场景设计如下 图3-3-4-2 多表继承设计场景 Step1 新建宠物品种、宠狗品种和萌猫品种模型 新建宠物品种模型，用@Model.MultiTable(typeField = "kind")，申明为可多表继承父类，typeField指定为kind字段 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.IdModel; @Model.MultiTable(typeField = "kind") @Model.model(PetType.MODEL_MODEL) @Model(displayName="品种",labelFields = {"name"}) public class PetType extends IdModel { public static final String MODEL_MODEL="demo.PetType"; @Field(displayName = "品种名") private String name; @Field(displayName = "宠物分类") private String kind; } 图3-3-4-3 多表继承示例代码 新建宠狗品种模型，用@Model.MultiTableInherited(type = PetDogType.KIND_DOG)，申明以多表继承模式继承PetType，覆盖kind字段(用defaultValue设置默认值，用invisible = true设置为前端不展示)，更多模块元数据以及模型字段元数据配置详见4.1.6【模型之元数据详解】一文 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.MultiTableInherited(type = PetDogType.KIND_DOG) @Model.model(PetDogType.MODEL_MODEL) @Model(displayName="宠狗品种",labelFields = {"name"}) public class PetDogType extends PetType { public static final String MODEL_MODEL="demo.PetDogType"; public static final String KIND_DOG="DOG"; @Field(displayName = "宠物分类",defaultValue = PetDogType.KIND_DOG,invisible = true) private String kind; } 图3-3-4-4 多表继承示例代码 新建萌猫品种模型，用@Model.MultiTableInherited(type = PetCatType.KIND_CAT)，申明以多表继承模式继承PetType，覆盖kind字段(用defaultValue设置默认值，用invisible = true设置为前端不展示)，并新增一个CatShapeEnum枚举类型的字段shape package pro.shushi.pamirs.demo.api.enumeration; import pro.shushi.pamirs.meta.annotation.Dict; import pro.shushi.pamirs.meta.common.enmu.BaseEnum; @Dict(dictionary = CatShapeEnum.DICTIONARY,displayName = "萌猫体型") public class CatShapeEnum extends BaseEnum<CatShapeEnum,Integer>…

  史, 昂

  2024年5月23日

  1.3K001