3.2.1 构建第一个Module

史, 昂 • 2024年5月23日 am9:55 • Oinone 7天入门到精通 • 阅读 2507

所有环境准备就绪，就让我们踏上oinone的奇妙之旅吧。先搞个demo模块【展示名为“oinone的Demo工程”，名称为“demoCore”，编码为“demo_core”】试试看，本节学习目的就是能把它启动起来，有个大概的认知。

一、后端工程脚手架

使用如下命令来利用项目脚手架生成启动工程：

新建archetype-project-generate.sh脚本，或者直接下载archetype-project-generate.sh

#!/bin/bash

# 项目生成脚手架
# 用于新项目的构建

# 脚手架使用目录
# 本地 local
# 本地脚手架信息存储路径 ~/.m2/repository/archetype-catalog.xml
archetypeCatalog=local

# 以下参数以pamirs-demo为例

# 新项目的groupId
groupId=pro.shushi.pamirs.demo

# 新项目的artifactId
artifactId=pamirs-demo

# 新项目的version
version=1.0.0-SNAPSHOT

# Java包名前缀
packagePrefix=pro.shushi

# Java包名后缀
packageSuffix=pamirs.demo

# 新项目的pamirs platform version
pamirsVersion=4.7.8

# Java类名称前缀
javaClassNamePrefix=Demo

# 项目名称 module.displayName
projectName=OinoneDemo

# 模块 MODULE_MODULE 常量
moduleModule=demo_core

# 模块 MODULE_NAME 常量
moduleName=DemoCore

# spring.application.name
applicationName=pamirs-demo

# tomcat server address
serverAddress=0.0.0.0

# tomcat server port
serverPort=8090

# redis host
redisHost=127.0.0.1

# redis port
redisPort=6379

# 数据库名
db=demo

# zookeeper connect string
zkConnectString=127.0.0.1:2181

# zookeeper rootPath
zkRootPath=/demo

mvn archetype:generate \
  -DinteractiveMode=false \
  -DarchetypeCatalog=${archetypeCatalog} \
  -DarchetypeGroupId=pro.shushi.pamirs.archetype \
  -DarchetypeArtifactId=pamirs-project-archetype \
  -DarchetypeVersion=${pamirsVersion} \
  -DgroupId=${groupId} \
  -DartifactId=${artifactId} \
  -Dversion=${version} \
  -DpamirsVersion=${pamirsVersion} \
  -Dpackage=${packagePrefix}.${packageSuffix} \
  -DpackagePrefix=${packagePrefix} \
  -DpackageSuffix=${packageSuffix} \
  -DjavaClassNamePrefix=${javaClassNamePrefix} \
  -DprojectName="${projectName}" \
  -DmoduleModule=${moduleModule} \
  -DmoduleName=${moduleName} \
  -DapplicationName=${applicationName} \
  -DserverAddress=${serverAddress} \
  -DserverPort=${serverPort} \
  -DredisHost=${redisHost} \
  -DredisPort=${redisPort} \
  -Ddb=${db} \
  -DzkConnectString=${zkConnectString} \
  -DzkRootPath=${zkRootPath}

图3-2-1-1 新建archetype-project-generate.sh脚本

Linux/Unix/Mac 需要执行以下命令添加执行权限

chmod +x archetype-project-generate.sh

图3-2-1-2 添加执行权限

根据脚本中的注释修改项目变量（demo工程可无需编辑）
执行脚本

./archetype-project-generate.sh

二、后端工程结构介绍

通过脚手架生成的demo工程是我们2.4.1【oinone独特性之单体与分布式的灵活切换】一文中介绍的单模块工程结构，属于入门级的一种，麻雀虽小五脏俱全，特别适合新手学习。

结构示意图（如下图3-2-4所示）

图3-2-1-4 结构示意图

工程结构说明

工程名	包名	说明
pamirs-demo-api		对外api包，如果有其他模块需要依赖demo模块，则可以在其pom中引入pamirs-demo-api包
	constant	常量的包路径
	enumeration	枚举类的包路径
	model	该领域核心模型的包路径
	service	该领域对外暴露接口api的包路径
	tmodel	存放该领域的非存储模型如：用于传输的临时模型
	DemoModule	该类是Demo模块的定义
pamirs-demo-boot		demo模块的启动类
	boot	启动类的包路径
	DemoApplication	Demo模块的应用启动类，遵循spring boot 规范
	resources/config/application-dev.yml	研发环境的yml配置文件，遵循spring boot 规范
	resources/bootstrap.yml	启动的yml配置文件，遵循spring boot 规范
pamirs-demo-core
	action	模型对外交互的行为的包路径
	init	模块初始化工作的包路径
	manager	manager是 service的一些公共逻辑，不会定义为独立的function的类
	service	service是对应api工程中service接口的实现类，是模型的function

表3-2-1-1 工程结构说明

三、pom.xml介绍

父pom的依赖管理

一个是启动包依赖
a. pamirs-boot里是有我们多种启动模式依赖包。教程只介绍标准启动模式
b. pamirs-base-standard

图3-2-1-5 父pom的依赖管理

pamirs-domo-api

一个标准java工程，可以看出只是依赖了，我们的pamirs-base-standard

图3-2-1-6 pamirs-domo-api

pamirs-demo-core

一个标准java工程，可以看出只是依赖了，我们的pamirs-demo-api

图3-2-1-7 pamirs-domo-core

pamirs-demo-boot

把启动的时候，需要启动的module（模块）对应的jar，进行依赖引入。这样就可以在我们的yml文件中进行启动module的配置

所需module（模块）对应的jar（如下图3-2-8所示）

图3-2-1-8 所需module（模块）对应的jar包依赖

yml文件基础配置，boot工程的yml配置详见4.1.1【模块之yml文件结构详解】一文

图3-2-1-9 yml文件

四、DemoModule的定义

到此我们一个oinone中的一个module对应的工程就介绍完了。到目前为止跟一般的spring boot的工程没有太多区别，就多做了一个DemoModule的定义，oinone的所有Module都继承自PamirsModule。

图3-2-1-10 DemoModule的定义

配置注解

通过@Module的name属性配置模块技术名称，前端与后端交互协议使用模块技术名称来定位模块。

通过@Module的displayName属性配置模块展示名称，在产品视觉交互层展现。

通过@Module的version属性配置模块版本，系统会比较版本号来决定模块是否需要进行升级。

通过@Module的priority属性配置模块优先级（数字越小，优先级越高），系统会根据优先级取优先级最高的应用设置的首页来作为整个平台的首页。

通过@Module的dependencies属性和exclusions属性来配置模块间的依赖互斥关系，值为模块编码数组。如果模块继承了另一模块的模型或者与另一模块的模型建立了关联关系，则需要为该模块的依赖模块列表配置另一模块的模块编码。

通过@Module.module配置模块编码，模块编码是模块在系统中的唯一标识。

通过@Module.Advanced的selfBuilt属性配置模块是否为平台自建模块。

通过@Module.Advanced的application属性配置模块是否为应用（具有视觉交互页面的模块）。模块切换组件只能查看到应用。

通过@UxHomepage注解配置首页。@UxHomepage注解的model属性指定跳转页面的模型编码，name属性指定跳转页面的视图动作，默认为列表页。如果配置首页为列表页且未定义ViewAction，系统会根据首页配置自动生成。

更多Module的详细元数据描述，详见4.1.4【模块元数据详解】一文

配置扫描路径

设置扫描模型配置的包路径：

使用packagePrefix方法来配置模块需要扫描模型配置的包路径
使用dependentPackagePrefix方法来配置依赖模块的模型配置的包路径；如果不配置，会默认根据依赖模块的配置扫描模型配置的包路径扫描依赖模型
不同模块包路径包含会导致模型加载模块出问题

命名规范

属性	默认取值规则	命名规范
module	无默认值开发人员定义规范示例： {项目名称}_{模块功能示意名称}	使用下划线命名法仅支持数字、大写或小写字母、下划线必须以字母开头不能以下划线结尾长度必须小于等于128个字符
name	无默认值	使用大驼峰命名法仅支持数字、字母必须以字母开头长度必须小于等于128个字符

表3-2-1-2 命名规范

五、DemoModule的启动

修改yml文件中数据源配置，数据库地址与密码修改为自己本地
配置license,否则启动会报错，获取授权文件请找官方客户

图3-2-1-11 license未配置

需要为启动或依赖模块配置扫描路径，配置扫描路径：pmairs是我们的oinone的基础包（必选），himalaya，tanggula是我们的业务模型基础包（可选），pro.shushi.pamirs.demo是我们测试项目包路径（必选，只不过它也在pamirs路径下，不填也不错)

图3-2-1-12 扫描逻辑配置

启动应用，我们会发现会报错。这个错误主要因为Oinone默认的是RELOAD（重启）模式，这种模式下只会从数据库中读取已安装模块并与yml文件中配置需要加载的模块对比。如果数据库中没有则会报没有安装过**模块，而我们是第一次启动，前面必然没有安装过模块，所以我们要把模式变为INSTALL，启动参数详见4.1.2【模块之启动指令】一文。如果整个平台第一次启动则回报 'base_sequence_config' doesn't exist

图3-2-1-13 启动应用的报错提示

把模式变为INSTALL再次启动

图3-2-1-14 把模式变为INSTALL再次启动

查看日志，看到对应启动字样才代表启动完成，而非Spring Boot的启动完成日志。我们的oinone的启动是在Spring Boot 启动完以后异步启动的

图3-2-1-15 启动成功日志

打开GraphQL客户端Insomnia看对应服务是否暴露

a. 创建一个demo项目

图3-2-1-16 Insomnia操作示意-创建一个新项目

图3-2-1-17 Insomnia操作示意-命名为demo

b. 为demo项目创建一个请求集合

图3-2-1-18 Insomnia操作示意-创建一个请求集合（第一步）

图3-2-1-19 Insomnia操作示意-创建一个请求集合（第二步）

图3-2-1-20 Insomnia操作示意-创建一个请求集合（第三步）

c. 创建一个请求 command+N

图3-2-1-21 Insomnia操作示意-创建一个请求

图3-2-1-22 Insomnia操作示意-选POST模式

图3-2-1-23 Insomnia操作示意-输入服务地址

图3-2-1-24 Insomnia操作示意-切换body结构为GQL

d. 检验结果，对应后端提供的服务已经有提示了

图3-2-1-25 Insomnia操作示意-检验结果

e. 查看schema 文档

图3-2-1-26 Insomnia操作示意-查看API文档

图3-2-1-27 Insomnia操作示意-查看API文档

图3-2-1-28 Insomnia操作示意-查看API文档

恭喜第一个oinone的模块已经启动完成，在下一文中我们通过页面来看看oinone的系统的庐山真面目。

Oinone社区作者：史, 昂原创文章，如若转载，请注明出处：https://doc.oinone.top/oio4/9228.html

访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验

Oinone 7天从入门到精通

史, 昂数式管理员

0 0

3.2.2 启动前端工程

上一篇 2024年5月23日 am9:54

3.2 Oinone以模块为组织

下一篇 2024年5月23日

3.5 Oinone以交互为外在

交互组件（UI Componment）：用组件化的方式统一管理：菜单、布局、视图用Action做衔接，来勾绘出模块的前端交互拓扑，描述所有可操作行为 oinone的页面路由串联规则是以菜单为导航，用Action做衔接，用View做展示，详见3.5.2.1View的【整体介绍】。本章节会重点介绍：如何定义菜单、视图、行为以及其初始化 xml配置：视图配置（包括字段联动）、字段配置、布局配置、动作配置前端组件自定义

史, 昂
Oinone 7天入门到精通 2024年5月23日
1.2K000
Oinone 7天入门到精通

4.2.7 框架之翻译工具

一、说明 Oinone目前的默认文案是中文，如果需要使用其他语言，Oinone也提供一系列的翻译能力。二、定义语言文件在src/local下新增一个名为zh_cn.ts文件: 图4-2-7-1 语言文件编辑zh_cn.ts文件，增加以下内容： const zhCN = { demo: { test: '这是测试' } } export default zhCN 图4-2-7-2 语言内容格式示意在mian.ts注册语言资源： import { LanguageType, registryLanguage} from '@kunlun/dependencies'; import Zh_cn from './local/zh_cn' registryLanguage(LanguageType['zh-CN'], Zh_cn); 图4-2-7-3 注册语言三、Vue模板使用 <template> <div class="petFormWrapper"> <form :model="formState" @finish="onFinish"> <a-form-item :label="translate('demo.test')" id="name" name="kind" :rules="[{ required: true, message: '请输入品种种类!', trigger: 'focus' }]"> <a-input v-model:value="formState.kind" @input="(e) => onNameChange(e, 'kind')" /> <span style="color: red">{{ getServiceError('kind') }}</span> </a-form-item> <a-form-item label="品种名" id="name" name="name" :rules="[{ required: true, message: '请输入品种名!', trigger: 'focus' }]"> <a-input v-model:value="formState.name" @input="(e) => onNameChange(e, 'name')" /> <span style="color: red">{{ getServiceError('name') }}</span> </a-form-item> </form> </div> </template> <script lang="ts"> import { defineComponent, reactive } from 'vue'; import { Form } from 'ant-design-vue'; export default defineComponent({ // 引入translate props: ['onChange', 'reloadData', 'serviceErrors', 'translate'], components: { Form }, setup(props) { const formState = reactive({ kind: '', name: '', }); const onFinish = () => { console.log(formState); }; const onNameChange = (event, name) => { props.onChange(name, event.target.value); }; const reloadData = async () => { await props.reloadData(); }; const getServiceError = (name: string) => { const error = props.serviceErrors.find(error => error.name === name);…

史, 昂
2024年5月23日
1.2K000
Oinone 7天入门到精通

6.3 数据审计（改）

在业务应用中我们经常需要为一些核心数据的变更做审计追踪，记录字段的前后变化、操作IP、操作人、操作地址等等。数据审计模块为此提供了支撑和统一管理。它在成熟的企业的核心业务系统中，需求是比较旺盛的。接下来我们开始学习下数据审计模块准备工作 pamirs-demo-core的pom文件中引入pamirs-data-audit-api包依赖 <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-data-audit-api</artifactId> </dependency> pamirs-demo-boot的pom文件中引入pamirs-data-audit-core和pamirs-third-party-map-core包依赖，数据审计会记录操作人的地址信息，所以也依赖了pamirs-third-party-map-core <dependency> <groupId>pro.shushi.pamirs.core</groupId> <artifactId>pamirs-data-audit-core</artifactId> </dependency> <dependency> <groupId>pro.shushi.pamirs.core.map</groupId> <artifactId>pamirs-third-party-map-core</artifactId> </dependency> pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加data_audit 和third_party_map，即在启动模块中增加data_audit和third_party_map模块 pamirs: boot: modules: – data_audit – tp_map 为third_party_map模块增加高德接口api，下面e439dda234467b07709f28b57f0a9bd5换成自己的key pamirs: eip: map: gd: key: e439dda234467b07709f28b57f0a9bd5 数据审计注解式（举例） Step1 新增PetTalentDataAudit数据审计定义类 package pro.shushi.pamirs.demo.core.init.audit; import pro.shushi.pamirs.data.audit.api.annotation.DataAudit; import pro.shushi.pamirs.demo.api.model.PetTalent; @DataAudit( model = PetTalent.MODEL_MODEL,//需要审计的模型 modelName = "宠物达人" ,//模型名称，默认模型对应的displayName //操作名称 optTypes = {PetTalentDataAudit.PETTALENT_CREATE,PetTalentDataAudit.PETTALENT_UDPATE}, fields={"nick","picList.id","picList.url","petShops.id","petShops.shopName"}//需要审计的字段,关系字段用"."连结 ) public class PetTalentDataAudit { public static final String PETTALENT_CREATE ="宠物达人创建"; public static final String PETTALENT_UDPATE ="宠物达人修改"; Step2 修改PetTalentAction的update方法做审计日志埋点:手工调用 OperationLogBuilder.newInstance().record()方法。需要注意的是这里需要把原有记录的数据值先查出来做对比 @Function.Advanced(type= FunctionTypeEnum.UPDATE) @Function.fun(FunctionConstants.update) @Function(openLevel = {FunctionOpenEnum.API}) public PetTalent update(PetTalent data){ //记录日志 OperationLogBuilder.newInstance(PetTalent.MODEL_MODEL, PetTalentDataAudit.PETTALENT_UDPATE).record(data.queryById().fieldQuery(PetTalent::getPicList).fieldQuery(PetTalent::getPetShops),data); PetTalent existPetTalent = new PetTalent().queryById(data.getId()); if(existPetTalent !=null){ existPetTalent.fieldQuery(PetTalent::getPicList); existPetTalent.fieldQuery(PetTalent::getPetShops); existPetTalent.relationDelete(PetTalent::getPicList); existPetTalent.relationDelete(PetTalent::getPetShops); } data.updateById(); data.fieldSave(PetTalent::getPicList); data.fieldSave(PetTalent::getPetShops); return data; } Step3 重启看效果修改宠物达人记录对应的字段，然后进入审计模块查看日志

史, 昂
2024年5月23日
1.2K000
Oinone 7天入门到精通

文件

文件应用下包含“导入/导出模版、导入任务、导出任务”三个菜单。其中导入/导出任务菜单比较常用。导入/导出模版当前版本会为租户的表格视图自动创建导出模版，此处可进行编辑、查看详情的操作。导入任务导入任务可以下载导入文档，点击详情可以查看该条记录的导入结果，任务信息分组中可以查看错误信息。导出任务和导入任务一致，导出任务菜单中可以下载导出文档，点击详情可以查看该条记录的导出结果，任务信息分组中可以查看错误信息。

史, 昂
2024年6月20日
1.1K000
Oinone 7天入门到精通

3.5.7.4 自定义页面

页面是什么在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…

史, 昂
2024年5月23日
1.6K000

登录后才能评论

3.2.1 构建第一个Module

一、后端工程脚手架

二、后端工程结构介绍

三、pom.xml介绍

pamirs-domo-api

pamirs-demo-core

pamirs-demo-boot

四、DemoModule的定义

配置注解

配置扫描路径

命名规范

五、DemoModule的启动

相关推荐

3.5 Oinone以交互为外在

4.2.7 框架之翻译工具

6.3 数据审计（改）

文件

3.5.7.4 自定义页面

Leave a Reply