模块(module):是按业务领域划分和管理的最小单元，是一组功能、界面的集合。
带大家快速认识下如何构建一个oinone的模块并启动它。我会从以下几个维度去介绍模块的构建与启动方式、模块详解。让大家直观且全方位地了解oinone的模块所包含的内容
构建第一个Module
启动前端工程
应用中心
Oinone社区 作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9227.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
在3.5.3【Action的类型】一文中，我们介绍Action的几种类型，以及组合动作。 通用配置 配置项 可选值 默认值 作用 name 动作名称 label 显示名称 icon 图标 type primary defaultlink primary 按钮类型样式，支持主要样式、次要样式以及链接样式。 bizStyle defaultsuccesswarningdangerinfo default 按钮业务样式，支持成功（green）、警告（yellow）、危险（red）、信息（grey）四种样式。 invisible truefalse condition false 展示规则，有简单的true/false显隐，也支持复杂的表达式 disabled truefalse condition 根据动作上下文类型进行自动推断 是否禁用自动推断规则：当上下文类型为【单行】时，相当于使用表达式LIST_COUNT(context.activeRecords) != 1当上下文类型为【多行】时，相当于使用表达式LIST_COUNT(context.activeRecords) <= 1当上下文类型为【单行或多行】时，相当于使用表达式LIST_COUNT(context.activeRecords) == 0 disabledTitle string 根据动作上下文类型进行自动推断 禁用悬浮提示 表3-5-6-12 动作通用配置 二次确认配置 二次确认框默认支持两种模式，对话框和气泡框； 对话框 图3-5-6-51 对话框提示 气泡框 图3-5-6-52 气泡框警告 配置项 配置项 可选值 默认值 作用 备注 confirm string 二次确认提示文字 配置后开启二次确认 confirmType POPPER（气泡提示框） MODAL（对话框） POPPER 确认框类型 confirmPosition TM（按钮上方） BM（按钮下方） LM（按钮左侧） RM（按钮右侧） BM 确认框位置 气泡框该配置生效 enterText 确定 确定按钮文字 cancelText 取消 取消按钮文字 表3-5-6-13 配置项 弹出层动作配置（窗口动作ViewAction） 目前平台对于弹出层支持了两种展示形式。弹窗（modal/dialog）和抽屉（drawer） 支持两种配置方式【内嵌视图配置】和【引用已有页面】，内嵌视图配置优先于引用已有页面。 内嵌视图配置 该配置对于弹窗和抽屉均适用。 <action name="窗口动作名称" label="创建"> <view model="模型编码" type="form"> <template slot="form" widget="form"> <field data="id" invisible="true" /> <field data="code" label="编码" widget="Input" /> <field data="name" label="名称" widget="Input" /> </template> <template slot="footer"> <action name="$$internal_DialogCancel" label="关闭" type="default" /> <action name="create" label="确定" /> </template> </view> </action> 图3-5-6-53 内嵌视图配置 引用已有页面配置 该配置对于弹窗和抽屉均适用。 <view model="模型编码" type="form"> <template slot="form" widget="form"> <field data="id" invisible="true" /> <field data="code" label="编码" widget="Input" /> <field data="name" label="名称" widget="Input" /> </template> <template slot="footer"> <action name="$$internal_DialogCancel" label="关闭" type="default" /> <action name="create" label="确定" /> </template> </view> 图3-5-6-54 引用已有页面示例 <action name="窗口动作名称" label="创建" resViewName="$viewName$" /> 图3-5-6-55 引用已有页面 弹窗 当窗口动作的路由方式（target）为dialog时，内嵌视图/引用页面将以弹窗形式展示在页面上。 配置项 配置项 可选值 默认值 作用 title…
一、基础环境说明 内容 是否必须 说明 后端基础环境 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的差异。 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
页面是什么 在Oinone前端体系中，页面是一个核心概念，它代表着终端用户所看到的当前视图。这个视图可以有多种形式，主要取决于页面是如何定义和构建的。在深入理解页面之前，我们需要了解两个关键的功能：自定义布局 和 自定义母版。 作用场景 自定义布局 提供了布局调整的强大功能，但在某些情况下，它可能无法完全满足特定的需求。这时，自定义页面就显得尤为重要。自定义页面是对 自定义布局 的补充，允许开发者从更深层次自由地控制和设计用户界面。 当标准布局无法实现所需的视觉效果或功能时，自定义页面提供了更高的灵活性。开发者可以通过自定义页面来实现独特的布局设计，添加特定的交互元素，或者整合复杂的业务逻辑，以创造独特且丰富的用户体验。 自定义页面 自定义视图组件允许开发者定义和使用特定于业务需求的视图布局。下面是一个具体的示例，展示了如何定义、注册和使用通过 setComponent 结合 TypeScript 和 Vue 的自定义视图组件。 示例工程目录 以下是需关注的工程目录示例，main.ts更新导入./view： 图3-5-7-48 自定义页面工程目录示例 1. 定义 TypeScript 组件 首先，我们定义了一个名为 CustomViewWidget 的 TypeScript 组件，并在该组件中通过 setComponent 结合 Vue 单文件组件。 import { BaseElementWidget, BaseElementViewWidget, SPI, ViewWidget } from '@kunlun/dependencies'; import CustomViewVue from './CustomView.vue'; @SPI.ClassFactory(BaseElementWidget.Token({ widget: 'CustomViewWidget' })) export class CustomViewWidget extends BaseElementViewWidget { public initialize(props) { super.initialize(props); this.setComponent(CustomViewVue); return this; } } 图3-5-7-49 定义TypeScript组件代码示例 2. Vue 单文件组件 其次，我们创建了对应的 Vue 单文件组件 CustomView.vue，用于展示自定义视图的具体内容。 <template> <div class="custom-view-wrapper"> <h1>自定义视图</h1> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ inheritAttrs: false, name: 'ViewComponentVue' }); </script> <style lang="scss"> .custom-view-wrapper {} </style> 图3-5-7-50 定义Vue组件代码示例 3. 注册自定义视图布局 接下来，我们使用 registerLayout 函数注册了一个表格视图布局，并在其中引入了通过 setComponent 结合的自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; export const registerCustomView = () => { registerLayout( ` <view type="TABLE"> <element widget="CustomViewWidget" /> </view> `, { viewType: ViewType.Table, moduleName: 'resource', model: 'resource.ResourceCountryGroup' } ); }; registerCustomView(); 图3-5-7-51 注册自定义视图布局代码示例 效果 图3-5-7-52 自定义页面效果示例 4. 自定义视图在表格中的应用 当我们注册了自定义视图后，它就可以在表格视图中被使用。在表格视图的布局中，我们通过 标签将自定义视图嵌套在表格中，从而覆盖了表格的默认布局 5. 入参一致性 值得强调的是，registerLayout 函数和自定义布局的规则是一致的，这意味着开发者可以在自定义布局中使用与 registerLayout 相同的入参规则，从而实现更加灵活和统一的视图布局设计 与内置组件结合 1. 注册视图元素布局 首先，我们使用 registerLayout 函数注册了一个表格视图的布局。这个布局包含了搜索框、操作栏、以及一个自定义视图组件。 import { registerLayout, ViewType } from "@kunlun/dependencies"; import { CustomViewWidget } from…
