相关推荐

• Oinone 7天入门到精通

  2.4.1 Oinone独特性之单体与分布式的灵活切换

  企业数字化转型需要处理分布式带来的复杂性和成本问题。尽管这些问题令人望而却步，但分布式架构对于大部分企业仍然是必须的选择。如果一个低代码平台缺乏分布式能力，那么它的性能就无法满足客户的要求。相比之下，Oinone平台通过对部署的创新（如图2-6所示），成功实现了分布式架构的支持，而且能够按照客户的业务发展需求，灵活选择不同的部署模式，同时节约企业成本，提升创新效率。这一创新是Oinone平台与其他低代码平台的重要区别，能够满足客户预期发展并兼顾成本效益。 图2-6 传统部署方式VS Oinone部署方式 实现原理 要实现灵活部署的特性，必须满足两个基本要求： 开发过程中不需要过多关注分布式技术，就像开发单体应用一样简单。代码在运行时应该能够根据模块是否在运行容器中，来决定路由走本地还是远程。这样可以大大减少研发人员的工作量和技术复杂度。 研发与部署要分离，即"开发单体应用一样开发分布式应用，而部署形式由后期决定"。为此，我们的工程结构支持多种启动模式，并逐一介绍了针对不同场景的工程结构类型（如下图2-7所示）。这样可以让客户在后期根据业务发展情况和需求，选择最适合的部署模式，从而达到灵活部署的目的。 图2-7 Oinone工程结构梳理 在整个工程结构上，我们秉承了Spring Boot的规范，不会改变大家的工程习惯。而Oinone的部署能力则可以让我们更灵活地应对各种情况。现在，我们来逐一介绍几种常规的工程结构以及它们适用的场景： 单模块工程结构（常规操作） a. 这是非常标准的Spring Boot工程，适用于简单的应用场景开发以及入门学习。 多模块工程结构（常规操作） a. 这是非常标准的多Spring Boot工程，可以实现分布式独立启动，适用于常规的分布式应用场景开发。 多模块工程结构-独立boot工程模式 a. 这种工程结构在多模块工程的基础上，通过独立的boot工程来支撑多部署方式。适用于中大型分布式应用场景开发。 b. 然而，随着工程越来越多，我们也会面临一些问题： ⅰ研发：环境准备非常困难，每个模块都要单独启动，研发调试跟踪困难。 ⅱ部署：分布式的高可靠性保证需要每个模块至少有两个部署节点，但在模块较多的情况下，起步成本非常高。同时，企业初期业务不稳定且规模较小，使用多模块工程的第二种模式会增加问题排查难度和成本。 c. 此时，Oinone的多模块工程下的独立boot工程模式部署就可以发挥其灵活性，让研发和业务起步阶段可以选择all-in-one模式，等到业务发展到一定规模的时候，只需要把线上部署模式切换成模块独立部署，而研发还可以保留all-in-one模式的优势。 d. 值得注意的是，分分合合的部署模式在传统互联网架构和低代码或无代码平台上都是有代价的，但是Oinone却可以灵活适配，只需要在boot工程的yml文件中写入需要加载的模块就可以解决。此处我们仅介绍多模块加载配置，选择性忽略其他无关配置，具体配置（如下图2-8所示）。 pamirs: boot: init: true sync: true modules: – base – resource – sequence – user – auth – web tenants: – pamirs 图2-8 Oinone yml配置图大型多场景工程结构-独立boot工程模式： a. 在多模块工程结构基础上的加强版，增加CDM层设计，让不同场景即保持数据统一，又保持逻辑独立。这种工程结构特别适用于大型企业软件开发，其中涉及到多个场景的情况，例如B端和C端的应用，或者跨不同业务线的应用，能够保证数据的一致性，同时也能够保持逻辑独立，避免不同场景间的代码冲突。 b. 这种工程结构是我们Oinone支撑“企业级软件生态”的核心，我们可以把场景A当作我们官方应用，场景B当作其他第三方伙伴应用。在这个工程结构下，我们的客户可以定制化开发自己的应用，同时我们也可以通过这种模式来支持我们的伙伴们进行开发，实现多方共赢。 c. 基于独立boot工程模式，我们同样对应多种部署模式应对不同情况，并统一管理所有伙伴应用。这种工程结构的优点是扩展性好，可以支持不同规模的应用，并且可以根据需要进行快速扩展或缩小规模，具有很高的灵活性。 基于标准产品的二开工程结构，是指基于标准产品进行二次开发，满足客户特定需求的工程结构。这种模式下，Oinone提供标准产品，客户可以根据自己的需求进行二次开发，实现定制化需求，同时可以利用我们的模块化开发特性，将每一个需求作为一个模块进行开发和管理。这种工程结构的优点是能够快速满足客户特定需求，同时也具有很好的可维护性和可扩展性，因为每个需求都是一个独立的模块，可以方便地进行维护和扩展。在下一篇“Oinone独特性之每一个需求都是一个模块”文章中有详细介绍。

  史, 昂

  2024年5月23日

  1.7K000
• Oinone 7天入门到精通

  3.3.7 字段之序列化方式

  本文核心是带大家全面了解oinone的序列方式，包括支持的序列化类型、注意点、如果新增客户化序列化方式以及字段默认值的反序列化。 一、数据存储的序列化 (举例) 使用@Field注解的serialize属性来配置非字符串类型属性的序列化与反序列化方式，最终会以序列化后的字符串持久化到存储中。 ### Step1 新建PetItemDetail模型、并为PetItem添加两个字段 PetItemDetail继承TransientModel，增加两个字段，分别为备注和备注人 package pro.shushi.pamirs.demo.api.tmodel; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.base.TransientModel; import pro.shushi.pamirs.user.api.model.PamirsUser; @Model.model(PetItemDetail.MODEL_MODEL) @Model(displayName = "商品详情",summary = "商品详情",labelFields = {"remark"}) public class PetItemDetail extends TransientModel { public static final String MODEL_MODEL="demo.PetItemDetail"; @Field.String(min = "2",max = "20") @Field(displayName = "备注",required = true) private String remark; @Field(displayName = "备注人",required = true) private PamirsUser user; } 图3-3-7-1 PetItemDetail继承TransientModel 修改PetItem，增加两个字段petItemDetails类型为List和tags类型为List，并设置为不同的序列化方式，petItemDetails为JSON（缺省就是JSON，可不配），tags为COMMA。同时设置 @Field.Advanced(columnDefinition = varchar(1024))，防止序列化后存储过长 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.tmodel.PetItemDetail; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; import pro.shushi.pamirs.meta.enmu.NullableBoolEnum; import java.math.BigDecimal; import java.util.List; @Model.model(PetItem.MODEL_MODEL) @Model(displayName = "宠物商品",summary="宠物商品",labelFields = {"itemName"}) public class PetItem extends AbstractDemoCodeModel{ public static final String MODEL_MODEL="demo.PetItem"; @Field(displayName = "商品名称",required = true) private String itemName; @Field(displayName = "商品价格",required = true) private BigDecimal price; @Field(displayName = "店铺",required = true) @Field.Relation(relationFields = {"shopId"},referenceFields = {"id"}) private PetShop shop; @Field(displayName = "店铺Id",invisible = true) private Long shopId; @Field(displayName = "品种") @Field.many2one @Field.Relation(relationFields = {"typeId"},referenceFields = {"id"}) private PetType type; @Field(displayName = "品种类型",invisible = true) private Long typeId; @Field(displayName = "详情", serialize = Field.serialize.JSON, store = NullableBoolEnum.TRUE) @Field.Advanced(columnDefinition = "varchar(1024)") private List<PetItemDetail> petItemDetails; @Field(displayName = "商品标签",serialize = Field.serialize.COMMA,store = NullableBoolEnum.TRUE,multi = true) @Field.Advanced(columnDefinition = "varchar(1024)") private…

  史, 昂

  2024年5月23日

  1.3K000
• Oinone 7天入门到精通

  3.2.3 应用中心

  在App Finder 中点击应用中心可以进入oinone的应用中心，可以看到oinone平台所有应用列表、应用大屏、以及技术可视化。 一、应用列表 标准版本不支持在线安装，只能通过boot工程的yml文件来配置安装模块。在 www.oinone.top 官方SaaS平台客户可以在线管理应用生命周期如：安装、升级、卸载。同时针对已安装应用可以进行无代码设计（前提安装了设计器），针对应用类的模块则可进行收藏，收藏后会在App Finder中的我收藏的应用中出现。在应用列表中可以看到我们已经安装的应用以及模块，我们oinoneDemo工程也在其中。 图3-2-35 Oinone的应用列表 图3-2-36 应用收藏后会在App Finder的【我收藏的应用】中出现 二、应用大屏 但我们的测试应用没有设置应用类目，则无法在应用大屏中呈现。 图3-2-37 未设置应用类目则无法在应用大屏中呈现 三、技术可视化 在技术可视化页面，出展示已经安装模块的元数据，并进行分类呈现 图3-2-38 云数据分类呈现

  史, 昂

  2024年5月23日

  1.9K000
• Oinone 7天入门到精通

  4.1.19 框架之网关协议-后端占位符

  在我们日常开发中会有碰到一些特殊场景，需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数，那么后端占位符就是来解决类似问题的。如前端传${currentUserId}，后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser，用namespace来定义一个“currentUserId”的占位符，其对应值由value()决定为“PamirsSession.getUserId().toString()”，active要为真才有效，priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据，这里案例就是在field中设置来过滤条件，domain="createUid == $#{currentUserId}"，注意这里用的是$#{currentUserId} 而不是${currentUserId}，这是前端为了区分真正变量和后端占位符，提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

  史, 昂

  2024年5月23日

  1.6K000
• 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.4K000