相关推荐

• Oinone 7天入门到精通

  2.2 互联网架构作为最佳实践为何失效

  如果把互联网架构比作社会主义，Oinone就是也要做有中国特色的社会主义，才能符合国情。 随着业务和生态的发展，企业对效率、性能、体验和智能化等方面的要求越来越高，但很多企业的系统面临着严重的系统架构落后和系统间割裂等问题，这些问题导致原有系统在业务发展下面临着效率和性能的双重挑战。与此同时，互联网平台的技术水平远远领先于传统企业系统，但是是否可以直接将互联网架构照搬到企业数字化转型中呢？显然，这是不合适的，因为互联网架构在企业数字化转型中面临着许多水土不服的问题。本章节将结合互联网中台架构的发展，分析这些问题的原因。 借鉴互联网中台理念 我们要先看互联网架构的发展，是如何一步步到今天提的中台架构概念的，每一步又解决了什么具体问题，我们以阿里架构变迁史为例来看下（如下图2-2所示）： 图2-2 阿里架构变迁史 在2009年，淘宝上线了五彩石项目，这标志着淘宝从单体应用向服务化应用的时代迈出了一步。那么，淘宝为什么要开发五彩石项目呢？因为当时淘宝面临两个非常严峻的问题，一个是性能问题，数据库连接不足，数据库成为了瓶颈；另一个是效率问题，当时淘宝有百余个研发人员，但核心系统只有一套测试、预发、线上环境，导致研发需求排队等待。在开始五彩石项目之前，淘宝还做了千岛湖项目，用来验证服务化架构的可行性，将用户中心独立出来。随后，淘宝开启了五彩石项目，目标是通过增加人力来提升效率，通过增加机器来提升性能。 随着淘宝的业务发展，他们又面临了一个问题：各个服务之间有很多重复的建设，效率低下。为了解决这个问题，淘宝开始从服务化转向平台化，并创立了“共享业务事业部”，将重复建设的公共业务分配给这个事业部，以避免成本浪费。这些公共业务包括商品平台、交易平台和结算平台等。平台化的目标是规避服务化没有规划导致的重复建设问题。 但是随着业务的快速发展，淘宝变成了一个拥有几十个事业部的巨型企业，而这带来了新的问题：效率问题。例如，如果需要在一个业务线上做出改动，需要与十几个平台进行沟通，这是非常低效的。同时，对于一个平台来说，需要面对来自不同事业部的需求，这需要平台研发人员具备理解和抽象所有业务线需求的能力，这让平台研发人员感觉回到了单体应用时代，所有的需求都要排队，即使增加人力也无法提高效率。这个问题主要表现在交易平台上。 为了解决这个问题，淘宝提出了中台的概念，中台是在一套规范下建立的，让具有专业技能的团队自主决策业务系统发展的平台。中台的目标是弱化平台的业务特性，提供通用能力。简而言之，就是将“共享业务”中的“业务”两个字去掉，只提供通用能力的平台 我们将每个阶段的核心目标总结为一句话： 从单体到服务：通过增加人员和机器来提高效率和性能； 从服务化到平台化：解决服务化阶段因缺乏规划而导致的重复建设问题； 平台化到中台化：在一套规范下，让各业务团队自行决定业务系统发展，适用于多个业务线或多个场景应用的独立发展。 类似地，在企业数字化转型过程中，也面临着类似的问题： 随着企业业务在线化，对系统性能和稳定性提出了更高的要求，但由于内部系统之间的割裂，导致很多重复建设。因此，我们需要进行服务化和平台化； 没有一个供应商能够解决企业所有的商业场景问题，所以需要多个供应商共同参与。我们可以将供应商类比为各业务线，在一套规范下让供应商或业务线自行决定业务系统的发展。 然而，阿里的中台架构方案并不能直接照搬到企业中。因为阿里的中台架构采用了平台共建模式，即让业务线基于平台设计的规范共同开发。这本质上还是平台主导模式，对企业来说历史包袱较大。在企业中，让不同背景的研发一起共建交易或商品平台是非常复杂的事情。平台化已经足够复杂，再加上共建会导致企业架构的负载过重，这对企业来说就不再是赋能，而是“内耗”。 互联网中台架构在企业实践中遇到的问题 在1.3《Oinone的生态思考》一文中，《与中台的渊源》部分提到，在阿里云为企业提供数字化项目时，客户经常会对以下三个问题提出质疑，这些问题非常突出： 1我们听说你们具备敏捷响应能力，但为什么改动需求如此缓慢？不仅所需时间更长，而且成本更高？ 2我们听说你们有能力中心，但为什么当我们引入新供应商或开发新场景时，前期建立的能力中心无法支持我们？ 3我们听说你们的性能很好，但为什么我们需要投入更多的物理资源来支持项目？ 在探讨互联网架构的适用性时，我想提出以下两个问题： 1企业应用程序的性能问题是否与互联网平台公司遇到的性能问题相同？ 2企业应用程序的开发效率问题是否与互联网平台公司遇到的效率问题相同？ 通过比较企业和互联网之间的差异，我们可以了解水土不服的核心原因。 企业 互联网 企业IT组织能力无法与数字化转型的速度匹配，缺乏足够的人才支持。为了提高开发效率，企业需要寻找工具和技术来降低开发难度，同时提高个人开发效率 互联网企业拥有众多优秀的人才，需要解决团队协作和知识共享的问题，即协同开发的效率。 企业无法制定并主导技术规范，这导致了能力复用的不足。为了提高效率和减少开发成本，企业需要建立统一的技术规范和标准，以便能力复用和组织协同。 互联网企业可以自定义技术规范，因此能力复用更易于保障。 企业往往当前业务量相对小，期望数字化建设能打动业务发展，对业务发展的预期比较高，所以企业的诉求是即满足当下成本效应又能兼顾未来对发展预期 互联网企业起步时的系统目标负载就高，通常会忽略资源起步门槛的问题，当然也可以通过自动扩容、云计算等方式来解决初期的负载问题。 表2-1从企业与互联网的对比，看水土不服的核心原因 我们可以看到企业和互联网架构在很多方面存在着不同的需求和问题。因此，在提供数字化服务时，Oinone需要注意与企业的组织能力进行匹配，并根据企业自身的特性来提供在线化的服务能力。这就像在社会主义制度下需要有中国特色一样，Oinone也需要有适合中国企业的特色。

  史, 昂

  2024年5月23日

  2.1K000
• Oinone 7天入门到精通

  7.3.1 去除资源上传大小限制

  场景说明 全员营销标准软件产品对于视频上传限制为35M,该大小适合管理短视频类的素材。该软件产品的使用方为营销部门，营销部门不仅管理短视频素材，也负责管理电商商品的视频素材、公司团建的素材等，且不少素材的内存都远大于35M。 业务需求：将全员营销中的内容中心扩展成营销部门的内容统一管理中心，管理营销部门工作范围内的所有内容素材，且不受35M的限制。 实战训练 新增一个资源管理页面，替换原来的资源管理，并构建新的上传行为。 Step1 通过界面设计器，设计出必要管理页面 进入界面设计器，应用选择全员营销，模型通过搜索【素材】选择【Gemini素材】，点击添加页面下的直接创建 设置页面标题、模型（自动带上可切换）、业务类型（运营管理后续会扩展其他类型）、视图类型（表格）后点击确认按钮进入【内容中心-新素材管理】设计页面 进入页面设计器，对【内容中心-新素材管理】表格页面进行设计（更多细节介绍，请参考界面设计产品使用手册） a. 左侧为物料区：分为组件、模型。 ⅰ. 【组件】选项卡下为通用物料区，我们可以为页面增加对应布局、字段（如同在模型设计器增加字段）、动作、数据、多媒体等等 ⅱ. 【模型】选项卡下为页面对应模型的自定义字段、系统字段、以及模型已有动作 b. 中间是设计区域 c. 右侧为属性面板，在设计区域选择中组件会显示对应组件的可配置参数 在左侧【模型】选项卡下，分别把系统字段中的【素材名称】、【素材链接】、【素材来源】、【素材类型】、【更新时间】、【创建时间】等字段拖入设计区域的表格区 设置字段在表格中的展示组件，在设计区域切换【素材链接】展示组件为【超链接】 设置字段在表格中的展示组件的属性，在设计区域选中【素材名称】，在右侧属性面板中设置【标题】为【内容名称】 设置字段在表格中的展示组件的属性，在设计区域选中【创建时间】，在右侧属性面板中设置【标题】为【上传时间】 在左侧【模型】选项卡下，把动作分类下的提交类型【下载】和【删除】动作拖入中间设计区的动作区，并选择【删除】按钮，在右侧属性面板中设置【按钮样式】为【次要按钮】 在左侧【组件】选项卡下，把动作分类下的【跳转动作】拖入中间设计区的动作区，并在右侧属性面板中设置动作名称为【上传素材】，数据控制类型为【不进行数据处理】，打开方式为【弹窗打开】，【弹出内容】为【创建新页面】，【弹窗模型】通过搜索【素材】选择【Gemini素材代理-上传】，并点击保存 设计区选中【上传素材】按钮，点击【打开弹窗】设计【素材上传】的操作页面，此时会发现左侧【模型】选项卡下的当前模型切换成了【Gemini素材代理-上传】 a. 分别把系统字段中的【上传素材链接列表】拖入【Gemini素材代理-上传】的弹窗页面设计区。 b. 选中【上传素材链接列表】切换展示组件为【文件上传】 c. 选中【上传素材链接列表】并在右侧属性面板中 ⅰ. 设置【校验】分组下，设置【最大上传文件体积】为空，即不设置 ⅱ. 设置【校验】分组下，设置【限制上传文件类型】为打开，并勾选【图片】和【视频】 ⅲ. 设置【交互】分组下的宽度属性为【1】 在左侧【模型】选项卡下，把动作分类下的提交类型【上传素材】动作拖入中间设计区的动作区 在左侧【组件】选项卡下，把动作分类下的【客户端动作】类型拖入中间设计区的动作区，选中并在右侧属性面板中设置【动作名称】为返回，设置【客户端行为】为【关闭弹窗】，点击【保存】按钮来完成动作的基础设置 选中【返回】按钮、并在右侧属性面板中设置【按钮样式】为【次要按钮】 关闭弹窗返回主模型设计区 点击右上角【显示母版】进入页面最终展示形式，点击添加菜单项，并在输入框中输入【新内容中心】 点击菜单右侧设置图标，选择【绑定已有页面】，进行菜单与页面的绑定操作 在绑定页面中，模型选择【Gemini素材】，视图选择【内容中心-新素材管理】，点击确认按钮提交 最后别忘了点击右上角【发布】按钮对【内容中心-新素材管理】表格页面进行发布，回到界面设计器首页查看刚刚建好的表格页面 Step2 测试完成以后隐藏原【内容中心】菜单 进入【界面设计器】管理页面，通过点击【设计图标】进入任一页面的设计页面 点击右上角【显示母版】进入页面最终展示形式，找菜单【内容中心】点击菜单右侧设置图标，选择【隐藏菜单】，因为【内容中心】菜单是标准产品自带菜单，只能进行隐藏操作，无法进行如绑定页面和调整菜单顺序 Step3 回到全员营销应用，刷新页面体验效果 整个实战训练就到此结束，更多细节请参阅具体的产品使用手册

  史, 昂

  2024年5月23日

  1.3K001
• Oinone 7天入门到精通

  报表

  1. 业务场景 报表不局限于表格的样式，还能以各式各样的图表形式展现各项汇总数据 这有利于管理者更为直观地了解公司的经营情况，便于后续进行分析，提高对公司的管理水平。 2. 操作流程 1）进入数据可视化，进入报表tab，维护分组信息； 2）在二级分组名称后点击“+”【添加报表】，对报表进行编辑设计； 3）创建完成后可以【编辑】报表标题、备注； 4）需要通过【选择图表、创建图表】完善报表内容； 5）完善后可以点击【发布】报表，则报表此时可以被引用； 6）如果报表有更新，则可以点击【更新发布】，使业务系统引用对报表变为最新的报表信息； 7）如果报表数据不再可以公开使用，则需要通过【隐藏】功能将报表的引用权限收起，此时数据大屏、前端业务系统均不可再引用该报表，但不影响已被引用的报表； 8）隐藏后可以【取消隐藏】，报表恢复隐藏前的状态和功能，可以被引用。 3. 操作流程图解 3.1 创建分组 1）操作流程：创建分组 2）操作路径：数据可视化-报表-创建分组 3）点击搜索框后的「+」创建一级分组，输入一级分组名称后，点击一级分组后的「+」创建二级分组，输入二级分组名称后，此时分组创建完成，可以在二级分组下创建报表 3.2 编辑分组名称 1）操作流程：选择分组-编辑分组名称 2）操作路径：数据可视化-报表-编辑分组名称 3）鼠标移动至需要修改的分组上，点击出现的「编辑图标」，可以修改分组名称，修改后分组名称实时更新 3.3 删除分组 1）操作流程：选择分组-删除分组 2）操作路径：数据可视化-报表-删除分组 3）鼠标移动至需要删除的分组上，当分组下无报表时出现「删除图标」，可以点击图标后删除分组，删除一级分组时对应所有的二级分组也会被删除，删除后消失，只要分组下没有报表的分组才能直接删除成功 3.4 创建报表 1）操作流程：选择二级分组-创建报表 2）操作路径：数据可视化-报表-二级分组-创建报表 3）鼠标移动至需要创建报表的二级分组上，出现「+」，点击图标后=需要填写报表标题； a. 报表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； 4）创建后可以选择报表需要展示的图表 3.5 删除报表 1）操作流程：选择报表-删除报表 2）操作路径：数据可视化-报表-二级分组-报表名称-删除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，才展示报表菜单名称后的删除图标 4）删除报表后报表消失 3.6 选择图表 1）操作流程：选择报表-为报表选择图表 2）操作路径：数据可视化-报表-二级分组-报表名称-选择图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【选择图表】，弹出“选择图表”弹窗，对该报表需要展示的图表进行选择 a. 需要选择图表的一级分组后才能选择图表； b. 可以多选图表，选择的图表只能是已选一级分组下的未隐藏的未被选择的图表；选择一个二级分组时，默认该二级分组下的图表会全部被选中，图表会按照选中的顺序展示在报表列表； 4）选择图表后，报表信息保持展示图表的最新效果；如果图表更新了，但是报表没有发布最新，则报表在前端展示的仍为最近发布的版本； 5）如果图表中存在超过一行的图内筛选项，则在报表处原始的图表尺寸只能查看一行图内筛选项，需要根据图表在报表处的等比拖动效果展示更多的图内筛选项 3.7 创建图表 1）操作流程：选择报表-创建图表 2）操作路径：数据可视化-报表-二级分组-创建图表 3）选择单个未发布或者已发布但没有被隐藏的报表，点击【创建图表】，弹出“创建图表”弹窗，需要填写图表标题、模型、方法； a. 图表标题：最大支持20个字，支持汉字、数字、大小写字母、-；同个一级分组下不允许重复； b. 模型：需要选择来源数据对应的模型； c. 方法：选择模型后需要选择方法，方法是用来提取模型数据的逻辑； 4）选择成功后进入图表设计页面，创建图表保存后返回，返回到当前报表页面，新创建的图表展示在报表的第一个位置 3.8 拖拽图表 1）操作流程：选择报表-拖拽图表 2) 操作路径：数据可视化-报表-二级分组-报表名称-拖拽图表 3）所有的报表均可拖拽图表，拖拽时需要选择图表，可以上下左右等比拖动，图表的内容也会根据拖动的比例进行缩放，展示全部的被遮挡图表内容 4）拖拽后实时生效，报表信息保持展示最新效果 3.9 移除图表 1）操作流程：选择报表-移除图表 2）操作路径：数据可视化-报表-二级分组-报表名称-移除图表 3）未发布或者已发布但没有被隐藏的报表，并且没被前端或者数据大屏引用，此时可以针对不需要的图表进行移除 4）选择移除后不展示在报表中，不影响原图表 5）报表移除图表后实时更新，更新发布后，前端可以展示最新的报表信息，如果未发布，则仅数据大屏可展示最新的报表信息，前端仍为最近发布的报表 3.10 设置报表筛选项 1）操作流程：选择报表-设置报表筛选项 2）操作路径：数据可视化-报表-二级分组-报表名称-更多-报表筛选项-添加 3）添加时选择筛选项字段的类型，关联每个图表对应的字段，一个图表只能关联一个 4）关联后可以按关联字段查询图表数据 3.11 发布 1）操作流程：选择报表-发布报表 2）操作路径：数据可视化-图表-二级分组-报表-发布 3）选择单个未发布且没有被隐藏的报表，点击【发布】按钮，报表发布后可以被前端引用，报表状态变为已发布，展示最近发布时间； 4）如果报表发布后有更新内容，会展示的更新类型：更新报表信息/更新图表内容/选择图表/移除图表 3.12 查看最近一次发布的版本 1）操作流程：选择报表-查看最近一次发布的版本 2）操作路径：数据可视化-报表-二级分组-报表名称-查看最近一次发布的版本 3）当报表发布后有更新，在最近发布时间左侧展示【查看】，在最近发布时间下展示更新的类型，点击查看可以查看最近发布的版 3.13 更新发布 1）操作流程：选择报表-更新发布报表 2）操作路径：数据可视化-报表-二级分组-报表名称-更新发布报表 3）选择单个已发布且没有被隐藏的报表，并且该报表在上次发布后有所更新，可以点击【更新发布】按钮，将最新的报表内容发布至业务系统，业务系统引用的报表为最新内容； 4）如果更新了内容，但未点击更新发布，则前端业务系统查看的报表仍为最近发布的报表 3.14 隐藏 1）操作流程：选择报表-隐藏报表 2）操作路径：数据可视化-报表-二级分组-报表名称-隐藏报表 3）报表默认不隐藏，可以切换是否隐藏=是 a. 未发布的报表，较隐藏前，不可以操作【发布】，可以【取消隐藏】； b. 已发布的图表，较隐藏前，只能操作【导出图片、导出excel、取消隐藏】； c. 隐藏后的报表不可以被引用，但不影响已经被引用的数据 3.15 取消隐藏 1) 操作流程：选择报表-取消隐藏报表 2) 操作路径：数据可视化-报表-二级分组-报表名称-取消隐藏报表 3) 隐藏后的报表可以取消隐藏，切换是否隐藏=否，取消隐藏后，报表恢复隐藏前的状态和功能，可以被引用 3.16 查看引用 1）流程：选择报表-查看被哪些页面引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-查看引用 3）选择具体的报表，查看当前报表被引用的所有信息 3.17 不允许别人编辑 1）流程：选择报表-不允许别人编辑 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人编辑 3）选择自己创建的报表，对报表是否允许其他人编辑进行设置；如果设置为不允许，则其他人无法编辑报表 3.18 不允许别人引用 1）流程：选择图表-更多-不允许别人引用 2）操作路径：数据可视化-报表-二级分组-报表-更多-不允许别人引用 3）选择自己创建的报表，对报表是否允许他人引用进行设置；如果设置为不允许，则其他人无法引用到该报表 3.19 导出图片 1) 操作流程：选择报表-导出图片 2) 操作路径：数据可视化-报表-二级分组-报表名称-导出图片 3) 选择报表后，点击【导出图片】按钮可以将当前报表导出为图片 3.20 导出EXCEL 1）操作流程：选择报表-导出EXCEL 2）操作路径：数据可视化-报表-二级分组-报表名称-报表导出EXCEL 3）选择报表后，点击【导出EXCEL】按钮可以将当前报表导出为EXCEL

  史, 昂

  2024年6月20日

  2.3K000
• Oinone 7天入门到精通

  3.3.10 字段类型之关系描述的特殊场景

  在3.3.9【字段类型之关系与引用】一文中已经描述了各种关系字段的常规写法，还有一些特殊场景如：关系映射中存在常量，或者M2M中间表是大于两个字段构成。 举例说明关系字段-高级用法 场景描述 PetTalent模型增加talentType字段，PetItem与PetTalent的多对多关系增加talentType（达人类型），PetItemRelPetTalent 中间表维护petItemId、petTalentId以及talentType，PetDogItem和PetCatItem分别重写petTalents 字段，关系中增加常量描述。示意图如下 实际操作步骤： Step1 新增 TalentTypeEnum package pro.shushi.pamirs.demo.api.enumeration; import pro.shushi.pamirs.meta.annotation.Dict; import pro.shushi.pamirs.meta.common.enmu.BaseEnum; @Dict(dictionary = TalentTypeEnum.DICTIONARY,displayName = "达人类型") public class TalentTypeEnum extends BaseEnum<TalentTypeEnum,Integer> { public static final String DICTIONARY ="demo.TalentTypeEnum"; public final static TalentTypeEnum DOG =create("DOG",1,"狗达人","狗达人"); public final static TalentTypeEnum CAT =create("CAT",2,"猫达人","猫达人"); } Step2 PetTalent模型增加talentType字段 package pro.shushi.pamirs.demo.api.model; import pro.shushi.pamirs.demo.api.enumeration.TalentTypeEnum; import pro.shushi.pamirs.meta.annotation.Field; import pro.shushi.pamirs.meta.annotation.Model; @Model.model(PetTalent.MODEL_MODEL) @Model(displayName = "宠物达人",summary="宠物达人",labelFields ={"name"}) public class PetTalent extends AbstractDemoIdModel{ public static final String MODEL_MODEL="demo.PetTalent"; @Field(displayName = "达人") private String name; @Field(displayName = "达人类型") private TalentTypeEnum talentType; } Step3 修改PetItem的petTalents字段，在关系描述中增加talentType（达人类型） @Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId","talentType"},through = "PetItemRelPetTalent") @Field.Relation(relationFields = {"id"}, referenceFields = {"id","talentType"}) @Field(displayName = "推荐达人",summary = "推荐该商品的达人们") private List<PetTalent> petTalents; Step4 PetDogItem增加petTalents字段，重写父类PetItem的关系描述 talentType配置为常量，填入枚举的值 增加domain描述用户页面选择的时候自动过滤出特定类型的达人，RSQL用枚举的name @Field.many2many(relationFields = {"petItemId"},referenceFields = {"petTalentId","talentType"},through = "PetItemRelPetTalent") @Field.Relation(relationFields = {"id"}, referenceFields = {"id","talentType"}) @Field(displayName = "推荐达人",summary = "推荐该商品的达人们") private List<PetTalent> petTalents; Step5 PetCatItem增加petTalents字段，重写父类PetItem的关系描述 talentType配置为常量，填入枚举的值 增加domain描述用户页面选择的时候自动过滤出特定类型的达人，RSQL用枚举的name @Field(displayName = "推荐达人") @Field.many2many( through = "PetItemRelPetTalent", relationFields = {"petItemId"}, referenceFields = {"petTalentId","talentType"} ) @Field.Relation(relationFields = {"id"}, referenceFields = {"id", "#2#"}, domain = " talentType == CAT") private List<PetTalent> petTalents; Step6 清除中间表demo_core_pet_item_rel_pet_talent的数据记录 清除PetItem与PetTalent的多对多中间表demo_core_pet_item_rel_pet_talent的数据记录 Step7 重启看效果 修改达人记录，选择不同达人类型 PetItem、PetCatItem、PetDogItem不同的交互页面

  史, 昂

  2024年5月23日

  1.8K000
• Oinone 7天入门到精通

  3.5.7.6 自定义字段

  字段是什么 字段的基本概念 定义：字段通常指的是数据的一个单独项，它可以是一个文本框、下拉菜单、复选框等，用于在用户界面上收集或展示数据。 用途：在表单中，字段用于收集用户输入；在表格或列表中，字段用于显示数据。 类型：字段可以有不同的类型，如文本、数字、日期等，这些类型通常由数据模型定义。 Oinone框架中的字段 在Oinone框架中，字段的设计和实现遵循以下原则： 后端模型驱动：前端的字段直接由后端的数据模型决定。这意味着后端定义了哪些数据应该展示，以及如何展示。 减少前后端联调：由于字段的定义和行为是由后端控制的，前后端的联调需求大大减少。前端开发者主要关注于如何呈现这些字段，而后端则负责数据的逻辑和结构。 灵活性与规范性：虽然Oinone推荐所有场景都遵循后端模型驱动字段的原则，以保持前后端的一致性和减少沟通成本，但它也为高度定制化的前端页面提供了灵活性。 元数据使用：Oinone可能还使用元数据来进一步定义字段的行为，例如它们是否可见、如何验证用户输入等。 结合前后端 在使用Oinone时，理解前后端如何合作来定义和展示字段是很重要的。这种方法不仅提高了开发效率，而且有助于确保数据的一致性和应用程序的可维护性。同时，对于那些需要特定定制或特殊处理的场景，开发团队能够灵活地适应这些需求，在遵守总体架构原则的同时进行一些特定的调整和优化。 作用场景 在Oinone框架中，字段扮演着连接后端数据模型和前端用户界面的重要角色。其作用场景包括但不限于以下几点： 业务组件的核心： Oinone集成了AntdDesignVue的全部UI组件，将它们转化为业务组件。这些业务组件以字段的形式存在，使得前端开发变得简单高效。开发人员可以直接使用这些现成的业务组件来构建用户界面，大大减少了开发工作量。 无代码开发支持： 字段的设计使得Oinone支持无代码开发。开发者可以通过拖拉拽的方式在前端快速构建界面，而后端模型的定义直接决定了这些界面的生成。这种模式简化了传统的前端开发流程，提升了开发效率。 个性化定制： 虽然标准的UI组件可以满足大部分需求，但复杂多变的业务场景往往需要更多个性化的处理。在Oinone中，开发者可以根据具体业务需求和公司的UI指南，定义专门针对特定行业或客户的定制化字段和组件。 与无代码平台的结合： Oinone允许将个性化的字段和组件与无代码平台相结合。这意味着即使在进行个性化定制时，也能保持使用无代码工具的便利性，实现更灵活、更高效的前端开发。 适应多维度业务需求： 由于字段在Oinone中的灵活性和可定制性，它们能够适应多维度的业务需求，无论是从UI设计、用户体验还是业务逻辑的角度，字段都能提供合适的解决方案 自定义字段 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./field： 图3-5-7-24 自定义字段工程目录示例 示例代码 创建自定义字段组件： 使用Vue框架创建一个新的组件（例如 CustomStringFieldVue），并定义其模板、脚本和样式。 在模板中定义字段的HTML结构。 在脚本中使用 defineComponent 来定义Vue组件。 字段类的定义： 导入必要的模块，如 FormFieldWidget, ModelFieldType, SPI, ViewType 等。 使用 @SPI.ClassFactory 装饰器来注册自定义字段。 在类内部初始化并设置组件。 SPI注册参数解释： viewType: 指定视图类型，如表单视图或搜索视图。 widget: 可以指定组件名称。 ttype: 字段的业务类型，例如字符串、数字等。 multi: 指明字段是否支持多值。 model: 定义字段所属的模型。 viewName: 指定视图名称。 name: 定义所属字段的名称。 import {FormFieldWidget, ModelFieldType, SPI, ViewType} from '@kunlun/dependencies'; import CustomStringFieldVue from './CustomStringField.vue'; @SPI.ClassFactory( FormFieldWidget.Token({ viewType: [ViewType.Form, ViewType.Search], ttype: ModelFieldType.String }) ) export class CustomStringField extends FormFieldWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomStringFieldVue); return this; } } 图3-5-7-24 自定义字段组件(TS)示例 <template> <div class="custom-string-filed-wrapper"> 字段组件 </div> </template> <script lang="ts"> import { defineComponent } from 'vue' export default defineComponent({ inheritAttrs: false, name: 'CustomStringFieldVue' }) </script> <style lang="scss"> .custom-string-filed-wrapper { } </style> 图3-5-7-24 自定义字段组件(Vue)示例 效果 图3-5-7-24 自定义字段效果示例

  史, 昂

  2024年5月23日

  2.4K000