7.1 设计器总览

相关推荐

• 蒋江伟

  企业数字化转型经过多年演进，其趋势价值已经毋庸置疑。近些年来，随着流媒体平台的崛起，对企业的营销方式、渠道建设方式甚至供应链都带来了新的挑战，我们可以清晰地感觉到世界每时每刻都在发生变化。在未来的企业竞争中，谁数字化走在前沿，谁就更能掌握主动权。数字化是为了满足业务的持续创新，只有持续创新才能更好的迎接未知变化。而过去很多企业的技术路径是一个采购型的发展路径，买来的ERP和CRM，升级都是各自管各自的，有一天推出一个新概念或者业务发生新需求，又去采购另外一家企业的ERP和CRM，整个替换掉了，烟囱式地迭代演进模式。企业不怕重复建设，怕的是不断重复建设，企业不怕系统延期上线，怕的是错过业务发展的机会窗口。 本书主要介绍了一种全新的数字化构建理念和技术落地方式——用低代码的方式一站式支撑企业的商业场景并能满足商业化持续创新，和其他低代码不同的是：既结合了中台架构，又兼顾了传统企业的IT发展水平，更符合企业数字化发展需求，持续保持企业竞争力，对各行业在做数字化选型的时候有很大的帮助。 很高兴看到阿里校友陈鹏程（本书作者）在这条路上发光发热，也把此书推荐给IT从业者、程序员以及爱好计算机应用软件的所有同学，希望对大家学习新型、更高效的系统构建方式有所启发。 阿里巴巴高级研究员 蒋江伟（小邪）

  史, 昂

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

  2.5K000
• 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
• Oinone 7天入门到精通

  1.5 Oinone与行业对比

  随着企业数字化转型的推进，软件公司获得了许多机会。尽管竞争日趋激烈，但由于需求旺盛，各种模式仍在不断涌现。因此，当前市场上存在各种各样的数字化转型解决方案，围绕企业的各个方面展开。每种解决方案都有其优点和缺点。本文将从定位、技术和产品等方面简单比较，帮助您从不同的视角了解Oinone的差异。 1.4.1 整体视角对比 一、与对标公司Odoo的对比 Odoo Oinone 定位 一站式全业务链管理平台：赋能企业信息化升级 一站式低代码商业支撑平台：赋能企业数字化升级 需求变化 关注单一企业的管理、流程、效率的提升 关注企业价值链的网络竞争，围绕外部协同、运营、数据、商业展开 技术更替 关注稳定、安全、功能丰富度 除了稳定、安全、功能丰富度以外，更强调需求响应速度、用户体验、系统承载极限与弹性扩展、智能化 表1-1 Oinone与对标公司Odoo的对比 二、与国内低代码或无代码公司对比 低代码或无代码公司 Oinone 定位 低代码开发工具：提供各类系统模版，基于模版快速搭建和个性化配置。但系统模版无法再升级 平台型SaaS：提供各类系统产品，产品安装后客户可以根据需求进行个性化调整，同时产品永远在线可升级 场景差异 只能支持企业内部人员使用，以完成部门级边缘系统为主，一般多为没有专业软件厂商支撑和强临时性特性 从内外部协同的商业场景出发，关注企业核心业务场景，适应【企业业务在线化后，所有的业务变化与创新都需要通过系统来触达上下游】的时代背景，以敏捷响应业务的变化与创新为目标 技术代差 单表支撑100万数据已是业内天花板 支撑单模型数据过亿，无单点瓶颈。封装互联网架构并且做到单体与分布式的灵活部署，为不同大小公司提供不同技术支撑 表1-2 Oinone与国内低代码/无代码公司对比 1.4.2 从技术角度对比 我们不会与其他无代码平台进行比较，因为它们不能解决业务复杂性的问题。相反，我们将重点介绍三种不同的低代码平台模式（如下图1-8所示）。 第一种模式是最基础的低代码平台，也被称为代码生成器。它通过预定义应用程序模板和必要的配置生成代码，简化了工程搭建并提供了一些基础逻辑。虽然在信息化时代内部流程标准化方面较为适合，但在数字化时代外部协同业务在线的情况下就不那么合适了。因为这种模式不能减少研发难度和提高效率，也无法体现敏捷迭代快速创新的优势。 第二种模式是经典的低代码平台，以元数据为基础，以模型为驱动。当无法满足需要时，通过特定方式将代码以插件的形式注入平台，作为低代码平台的内置逻辑，供设计器使用。它的优点在于降低了研发门槛，当无法满足需求时才需要编写代码。它可以实现企业内部的复杂流程和复杂逻辑，但其性能和工程管理存在局限性。性能问题使其不适合处理互联网化的在线业务，而工程管理问题则使其不适合处理快速变化的业务。这也是许多研发人员反对低代码的核心原因之一，因为研发人员变成了辅助角色，而软件工程是一门需要技术能力的学科，让没有技术能力的人主导是违反常理的。对于软件产品公司来说，产品需要迭代规划，需要多人协作，需要工程化管理。 第三种模式是oinone提出的基于互联网架构的低代码平台，它采用低无一体的设计。首先，oinone屏蔽了互联网架构带来的复杂性。其次，同样以元数据为基础，以模型为驱动，但是元数据的生成方式有两种：一种是使用无代码设计器（与经典低代码相同），另一种是通过代码来描述元数据。通过使用代码来描述元数据，可以无缝地与代码衔接，并在不改变研发习惯的情况下降低门槛、提高效率，并进行工程化管理。 最后总结来说：低无一体不仅仅是指两种模式的结合，还包括两种模式的融合应用方式。具体来说，这种融合应用方式可以分为两种情况： 当开发核心产品时，主要采用低代码开发，无代码设计器作为辅助。这种方式可以提高开发效率和代码质量，同时保证产品的快速迭代和升级。 当需要满足个性化或非产品支持的需求时，主要采用无代码设计器，低代码作为辅助。这种方式可以快速地满足客户需求，并且避免对产品的核心代码产生影响。 简单来说，低代码模式适用于产品的迭代升级，而无代码设计器则适用于满足个性化和非产品支撑的额外需求。低代码和无代码模式在整个软件生命周期中都有各自的价值，在不同场景下可以相互融合，发挥最大的优势。 图1-8 代码生成器、低代码平台与Oinone的优缺点对比 1.4.3 从产品角度对比 产品上的对比，从客户、场景满足度、再次销售三个方面来做简易的对比 一、Oinone vs 数字化软件服务商 客户 满足度 销售 Oinone 一站式商业智能软件，更高性价比、用户体验客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 满足企业核心业务需求，并联合伙伴一起满足企业所有需求，无需集成提供统一工作台、数据接口、底层协议，无论基于Oinone的开源框架还是增加其他应用都有很好的扩展性 支持OP+SaaS两种模式，收费方式不同：OP按买断方式进行，SaaS按效果付费跟账号数无关新的模块进行二次销售 数字化软件服务商 针对成熟的大型企业需投入巨大资源和成本客户范围：100亿～1000亿、1000亿以上 满足企业部分需求，无法输出技术标准，无法解决多供应商一起开发的问题，只能通过集成实现对接 OP模式进行销售，通过设置权限来进行来实现二次销售或无法进行二次销售 表1-3 Oinone vs 数字化软件服务商 二、Oinone vs 低代码或无代码行业 客户 满足度 销售 Oinone 一站式商业智能软件客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 从外部商业场景出发，强业务场景驱动，符合企业从信息化管理到业务创新的数字化转变的趋势。提供统一工作台、数据接口、底层协议，无论基于oinone的开源框架还是增加其他应用都有很好的扩展性 支持OP+SaaS两种模式，收费方式不同：OP按买断方式进行，SaaS按效果付费跟账号数无关新的模块进行二次销售 低代码或无代码公司 针对小微企业内部信息化管理诉求，以表单流程为主客户范围：5亿以下 满足企业部门级信息化的适应性需求，无法满足企业核心业务管理与业务创新诉求 按应用模块进行收费，新的模块进行二次销售 表1-4 Oinone vs 低代码或无代码行业 三、Oinone vs 国外对标公司Odoo 客户 满足度 销售 Oinone 一站式商业智能软件客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 从外部商业场景出发，强业务场景驱动，符合企业从信息化管理到业务创新的数字化转变的趋势。基线产品覆盖：采购、营销、服务、销售、交易等企业商业领域。主要涉及行业：零售品牌。其他领域或行业靠合作伙伴共建方式进行 支持OP+SaaS两种模式，收费方式不同：OP按买断方式进行，SaaS按效果付费跟账号数无关新的模块进行二次销售 Odoo 一站式企业管理软件客户范围：5000万~5亿、5亿～100亿、标杆：100亿～1000亿、1000亿以上 从企业内部管理需求出发，逐渐拥有互联网相关应用组件，但还是属于强内部管理、弱外部场景。基线产品覆盖：业务财务一体化、人财务、进销存。主要涉及行业：建造业。其他领域或行业靠合作伙伴共建方式进行 支持OP+SaaS两种模式，收费方式相同：按用户数+应用模块进行收费新的模块进行二次销售 表1-5 Oinone vs 国外对标公司Odoo

  史, 昂

  2024年5月23日

  1.9K200

• 3.1 环境搭建

  一、基础环境说明 内容 是否必须 说明 后端基础环境 JDK1.8 必须 java的基础运行环境, 要求高于1.8_221以上，低于这个版本需要覆盖jce (原因：https://www.cnblogs.com/jinloooong/p/10619353.html) Mysql 必须 8.0.26 版本以上需要注意点：修改：my.cnf (macOS ) / my.ini (windows)时区、大小写敏感设置lower_case_table_names = 2default-time-zone = ‘+08:00’ Idea 必须 需要注意点：1.禁用Lombok插件2.java Compiler 增加 -parameters(不然java反射获取方法入参名会变成arg*) 指令3.安装oinone插件 DB GUI 非必须 Datagrip、MySQLWorkbench、DBEaver 选其一 Insomnia 非必须 GraphQL测试工具 Git 必须 2.2.0以上 Maven 必须 3.6.3需要注意点：1配置mvn的settings文件下载地址见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员2把settings.xml拷贝一份到maven安装目录conf目录下 RocketMQ 必须 4.7.1以上 Redis 必须 5.0.2以上 Zookeeper 必须 3.5.8以上 前端基础环境 nvm 非必须 方便node的版本管理 nodejs 必须 版本要求为12.12.0注意事项：1.npm的源配置为http://nexus.shushi.pro/repository/kunlun/2.源的用户名、密码见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员 vue-cli 必须 vue脚手架工具 表3-1-1基础环境说明 其他：canal和Es的环境搭建见具体学习章节 二、基础知识准备 前端必备知识 vue3、typescript、graphql 后端必备知识 SpringBoot、MybatisPlus 表3-1-2基础知识准备 三、下载快速安装包 Mac版 Windows版 四、学习安装 推荐，虽然慢点对环境有比较深入的了解，对自身能力提升和日后排查问题都有好处。 mac见：3.1.1【环境准备（Mac版）】一文 windows见：3.1.2【环境准备（Windows版）】一文

  史, 昂

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

  2.5K001
• Oinone 7天入门到精通

  自定义组件

  1. 定义组件介绍 平台提供了大多数的通用组件，面对企业个性话需求、复杂的业务场景，我们也提供了自定义组件的能力，帮助企业更快实施业务需求。 自定义组件包含“组件画廊”“组件排序”“元件画廊”“元件属性设计”四个页面。 1.1 组件与元件 在介绍如何自定义组件前，需要先了解以下概念： 组件：页面设计的组件库中看到的是组件。每个组件都有自己的属性面板，通过属性、字段决定组件逻辑，而自定义组件就是需要构建出组件自身的属性信息，再结合业务配置组件的属性、使用组件。 一个组件在不同的业务类型、视图类型、单值/多值，其属性面板是不同的，不同业务类型、视图类型、单值/多值的组合我们成为元件，多种组合即为多个元件，所以一个组件包括多个元件。 元件：一个组件可以对应多个元件。在创建时明确元件所适用的字段业务类型、单/多值、视图类型，在画布中切换元件时，会结合当前组件的字段业务类型、单/多值、所在视图类型确定可以使用哪一个元件。 此处切换的也是元件。 示例：创建一个“下拉选”的组件，其中可以包含“下拉单选”“下拉多选”两个元件。“下拉选”组件从组件库中拖入时，设置单值时使用“下拉单选”元件，设置多值时使用“下拉多选”元件。 2. 组件管理 2.1 组件创建 在组件画廊页面，点击添加组件，在弹窗中完善信息创建组件。 2.2 组件操作 自定义组件支持“搜索、删除、作废、查看引用关系、管理元件、编辑、低无一体、排序”的操作。 搜索：默认搜索可见组件，可切换“全部、可用、废弃”搜索组件，也可使用组件名称搜索。 删除：若组件未被引用，则可以直接删除。 作废：组件作废后，不可在画布中展示，不可在组件切换时使用，但已使用的数据不影响。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当组件无引用关系时才支持删除。 管理元件：点击进入元件的管理页面。 编辑：可修改组件名称、组件图表、组件描述。 低无一体：比较复杂，在第5章中单独讲解。 排序：进入排序页，可拖动排序自定义组件。自定义组件会插在系统组件之后。可以点击“查看排序结果”选项页查看最终排序结果。排序同样会更新画布中的组件库顺序。 3. 元件管理 3.1 元件创建 在元件画廊页面，点击添加元件，在弹窗中完善信息创建一个元件。 3.2 元件操作 元件支持“删除、作废、查看引用关系、编辑、设计元件属性”的操作。 删除：若元件未被引用，则可以直接删除。 作废：元件作废后，不影响原来已使用的元件，无法新添加、使用该元件。 查看引用关系：可以查看存在引用关系的页面，支持点击跳转到对应页面的设计页面。仅当元件无引用关系时才支持删除。此处的引用关系数量会小于等于组件引用关系的数量。 编辑：可修改元件名称、支持视图类型、元件描述。 设计元件属性：比较复杂，将在第4章中单独讲解。 4. 设计元件属性 元件属性设计页面主要操作集中在这三部分，分别是①视图切换②属性面板设计区③复制功能 视图切换：元件创建时选择的支持视图类型，在①区域平铺可切换对应视图的属性面板进行设计。 属性面板设计区：可将组件拖入属性面板设计区进行设计，设计的是自定义组件的属性面板，左侧组件库和页面设计的组件库相同，仍然支持创建字段或使用模型字段，右侧进行元数据面板、属性面板设置。 复制功能：可将已设置好的属性面板复制到其他视图，提高设计效率。 5. 低无一体 低无一体简单讲就是组件代码上传，通过载入代码使组件在设计页面和实现页面可见和交互。 系统内置的属性不满足需求时，要用低无一体写代码，定制属性，比如从模型中拖拽设计就是内置的属性，从组件库中设置，就要配合低无一体，否则无效。 首次进入组件设计或组件中的元件变更时需要生成SDK。 生成结束后展示SDK生成时间，并且“下载模版工程”按钮可用。 点击下载模版工程，会自动下载模板工程。 在模版工程中编写前端代码。 根据实际需求上传JS、CSS文件后提交即可。

  史, 昂

  2024年6月20日

  1.6K000