3.2.1 构建第一个Module

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

一、后端工程脚手架

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

  1. 新建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脚本

  1. Linux/Unix/Mac 需要执行以下命令添加执行权限
chmod +x archetype-project-generate.sh

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

  1. 根据脚本中的注释修改项目变量(demo工程可无需编辑)
  2. 执行脚本
./archetype-project-generate.sh

二、后端工程结构介绍

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

  1. 结构示意图(如下图3-2-4所示)

3.2.1 构建第一个Module

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

  1. 工程结构说明
工程名 包名 说明
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的依赖管理

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

3.2.1 构建第一个Module

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

pamirs-domo-api

一个标准java工程,可以看出只是依赖了,我们的pamirs-base-standard
3.2.1 构建第一个Module

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

pamirs-demo-core

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

3.2.1 构建第一个Module

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

pamirs-demo-boot

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

  1. 所需module(模块)对应的jar(如下图3-2-8所示)

3.2.1 构建第一个Module

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

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

3.2.1 构建第一个Module

图3-2-1-9 yml文件

四、DemoModule的定义

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

3.2.1 构建第一个Module

图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的启动

  1. 修改yml文件中数据源配置,数据库地址与密码修改为自己本地

  2. 配置license,否则启动会报错,获取授权文件请找官方客户

3.2.1 构建第一个Module

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

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

3.2.1 构建第一个Module

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

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

3.2.1 构建第一个Module

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

  1. 把模式变为INSTALL再次启动

3.2.1 构建第一个Module

3.2.1 构建第一个Module

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

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

3.2.1 构建第一个Module

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

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

    a. 创建一个demo项目

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

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

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

c. 创建一个请求 command+N

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

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

3.2.1 构建第一个Module

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

e. 查看schema 文档

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

3.2.1 构建第一个Module

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

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

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

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

(0)
史, 昂的头像史, 昂数式管理员
上一篇 2024年5月23日 am9:54
下一篇 2024年5月23日

相关推荐

  • 4.2.8 自定义组件与设计器结合(新)

    界面设计器组件管理页面添加组件 进入组件的元件管理页面 点击“添加元件” 设计元件的属性 这里以是否“显示清除按钮”作为自定义属性从左侧拖入到中间设计区域,然后发布 点击“返回组件” 鼠标悬浮到卡片的更多按钮的图标,弹出下拉弹出“低无一体”的按钮 在弹窗内点击“生成SDK”的按钮 生成完成后,点击“下载模板工程” 解压模板工程kunlun-sdk.zip 解压后先查看README.MD,了解一下工程运行要点,可以先运行 npm i 安装依赖 再看kunlun-plugin目录下已经有生成好的组件对应的ts和vue文件 下面在vue文件内增加自定义代码,可以运行 npm run dev 在开发模式下调试看效果 <template> <div class="my-form-string-input"> <oio-input :value="realValue" @update:value="change" > <template #prepend>MyPrepend</template> </oio-input> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import { OioInput } from '@kunlun/vue-ui-antd'; export default defineComponent({ name: 'customField1', components: { OioInput }, props: { value: { type: String }, change: { type: Function }, }, setup(props) { const realValue = ref<string | null | undefined>(props.value); return { realValue }; } }); </script> <style lang="scss"> .my-form-string-input { border: 1px solid red; } </style> 确定改好代码后运行 npm run build,生成上传所需的js和css文件 可以看到 kunlun-plugin目录下多出了dist目录,我们需要的是 kunlun-plugin.umd.js 和 kunlun-plugin.css 这2个文件 再次回到组件的“低无一体”管理弹窗页面,上传上面生成的js和css文件,并点击“确定”保存,到这里我们的组件就新增完成了。 下面我们再到页面设计器的页面中使用上面设计的组件(这里的表单页面是提前准备好的,这里就不介绍如何新建表单页面了) 将左侧组件库拉直最底部,可以看到刚刚新建的组件,将其拖至中间设计区域,我们可以看到自定义组件的展示结果跟刚刚的代码是对应上的(ps: 如果样式未生效,请刷新页面查看,因为刚刚上传的js和css文件在页面初始加载的时候才会导入进来,刚刚上传的动作未导入新上传的代码文件),再次点击设计区域中的自定义组件,可以看到右侧属性设置面板也出现了元件设计时拖入的属性。 最后再去运行时的页面查看效果,与代码逻辑一致!

    2024年5月23日
    1.3K00
  • 3.5.7.2 自定义母版

    母版是什么 在业务系统中,母版是一种全局通用的组件,用于包裹每个页面的元素。这个概念类似于 PPT 中的母版,它定义了页面的整体结构、样式和布局,使得系统具有一致的外观和风格。 特点: 全局通用:母版是全局性的,适用于系统中的每个页面,确保一致性的用户体验。 包裹元素:母版包裹每个页面的元素,定义了整体的结构和布局。 外观一致性:通过统一的母版设计,系统达到外观和风格的一致性。 与 PPT 母版的类比: 在母版的概念上,与 PPT 中的母版类似,都是用于定义整体结构和样式,确保每个页面都具有一致的外观。 默认母版范围: 图3-5-7-20 默认母版范围 作用场景 在系统中,我们提供了多个纬度的母版,包括全局、应用和页面纬度。这样的设计允许根据不同的业务场景选择合适的母版纬度,以满足不同层次的定制需求。 母版纬度: 全局母版: 覆盖系统中所有页面,确保全局的一致性和统一的用户体验。 定义全局性的结构、样式和布局。 应用母版: 适用于特定应用或模块,定制化程度介于全局和页面之间。 允许在不同应用间实现一定的差异化。 页面母版: 面向具体页面,提供最大的定制化空间。 允许在不同页面中定义不同的结构和样式。 选择纬度: 业务场景决定:根据具体的业务场景和需求选择合适的母版纬度。 定制化需求:如果需要全局一致性,选择全局母版;如果在应用层面有特定需求,选择应用母版;如果需要最大的灵活性和定制化,选择页面母版。 参数说明: 在系统中,使用 registerMask 注册母版时,需要提供两个参数。第一个参数是母版的 XML,第二个参数用于控制母版的注册行为,包括 module、moduleName、model 和 actionName。 母版 XML(第一个参数): 提供母版的 XML 描述,定义了母版的结构和样式。 控制参数(第二个参数): module:指定模块的名称。 moduleName:指定模块的显示名称。 model:指定母版所属的模型。 actionName:指定母版的操作名称,可以是字符串或字符串数组。 全局母版 可以使用 registerMask 注册母版。当第二个参数为 {} 时,即代表注册全局母版。 示例工程目录 以下是需关注的工程目录示例,并确保导入导出依赖正确: 图3-5-7-21 全局纬度注册母版工程目录示例 示例代码 以下是一个示例代码: import { registerMask } from '@kunlun/dependencies'; /** * mask: 在做系统时,我们通常会把外层的布局(菜单、顶部导航)等抽出公共组件,公共组件会抽离全局通用。类似ppt母版的概念即为Mask * registerMask 第二个入参为{}即注册了全局得母版 * * 和默认母版相比移除右上角消息、语言切换、用户 * `<block> * <widget widget="notification" /> * <widget widget="divider" /> * <widget widget="language" /> * <widget widget="divider" /> * <widget widget="user" /> * </block>` */ const registerGlobalMask = () => { registerMask(` <mask> <multi-tabs /> <header> <widget widget="app-switcher" /> </header> <container> <sidebar> <widget widget="nav-menu" height="100%" /> </sidebar> <content> <breadcrumb /> <block width="100%"> <widget width="100%" widget="main-view" /> </block> </content> </container> </mask>`, {}); } registerGlobalMask(); 图3-5-7-22 全局纬度注册母版代码示例 复制这段代码执行下registerGlobalMask()试试看吧 效果 右上角消息、语言切换、用户被移除。 图3-5-7-23 全局纬度注册母版效果示例 应用母版 在系统中,可以使用 registerMask 注册母版。当第二个参数为 {moduleName: ‘resource’} 时,即注册了 resource(资源)应用的母版。 示例工程目录 以下是需关注的工程目录示例,更新导出./moduleMask: 图3-5-7-24 应用纬度注册母版工程目录示例 示例代码 以下是一个示例代码: /** * registerMask 第二个入参为{moduleName: 'resource'}即注册了resource(资源)应用的母版 * * resource来源: 通常是浏览器url上的module * * 和默认模版相比拿掉了菜单 * `<sidebar> * <widget widget="nav-menu" height="100%"…

    2024年5月23日
    1.4K00
  • 资源

    翻译应用是管理翻译规则的应用,以模型为基础、维护字段的翻译值,支持导入、导出 1. 操作步骤 Step1:导出所有翻译项; Step2:线下翻译; Step3:导入翻译项; Step4:刷新远程资源; Step5:页面右上角可切换语言,查看翻译效果。 2. 新增翻译 翻译是具体到模型字段,其中需要区分出是否字典; 源语言、目标语言,是在资源中维护的语言,可在资源中维护需要翻译的语言; 翻译项则是模型字段,默认翻译项为激活状态,关闭后维护的翻译项无效。 3. 导出、导入 不勾选导出:导出所有需要翻译的翻译项,包括模块、字段,源术语、翻译值等,其中如果已经翻译过的内容,会体现在翻译值中; 勾选导出:导出勾选模型的翻译项。 导入:导入翻译项,平台会根据模型拆分为多条数据。 4. 刷新远程资源 导入翻译项后,点击“刷新远程资源”按钮。 5. 查看翻译内容 页面右上角切换语言,查看翻译效果。

    2024年6月20日
    1.2K00
  • 6.5 权限体系(改)

    做好企业级软件,首先得过权限这一关 在企业的IT部门沟通中,权限是避免不了。自嘲下在我们刚出来创业时,为了收获客户对我们技术能力的信任,每每与跟客户沟通时都会说我们是阿里出来的,但在权限设计这个环节不那么灵验,反而被打上了不懂B端权限设计的标签,会问很多问题。我就很奇怪难道大厂就没有内部管理系统了?大厂只有C端交易,没有B端交易?但从侧面说明权限不简单还特别重要。做好企业级软件,首先得过权限这一关。 整体介绍 对于平台运行来说,权限是必须,但我们的auth模块不是必须的,auth模块只是我们提供的一种默认实现,客户可以根据平台的spi机制进行替换。auth模块利用了平台的Hook特性做到与业务无关,在我们开发上层应用的时,是不用感知它的存在的。 auth模块涉及:功能权限、数据权限 数据权限:行权限和列权限。备注:数据权限的控制只能用于【存储模型】 表级权限:表达的语义是:是否该表可读/写(修改和新增) 列权限:表达的语义是:是否该列可读/写(修改和新增) 行权限:表达的语义是:是否对该行可读/写(修改)/删除 功能权限:表达的语义是ServerAction/Function是否可执行/展示,viewAction是否可展示,菜单是否可以显示 范围说明: 配置多个权限项的时候,取并集 配置多个角色的时候,取并集 模型设计 产品体验 Step1 创建角色 通过App Finder 切换至【权限】应用,点击新增按钮创建一个名为oinone的角色 Step2 创建数据权限项 在【权限项列表】菜单,点击【创建】按钮新增一个名为【宠物达人数据权限项】,同时宠物达人的数据权限设置为只能查看性别为男的记录 配置说明: 名称: 代表该项配置的权限的名字(必填)(必须是全系统唯一) 权限模型: 选择需要拦截的数据所在的表,即为模型,可以搜索使用 描述:对该权限项的描述 权限条件的配置: 满足全部:对条件一和条件二要同时满足的数据才能被看见 满足任一:对条件一和条件二要任意满足的数据都能被看见 读权限:对该数据是否有读取的权限 写权限:对该数据是否有修改的权限 删除权限:对该条件内的数据是否有删除的权限 Step3 为角色配置权限 编辑oinone角色,只开通oinoneDemo工程应用 选中【数据权限】选项卡点击【添加】按钮,勾选宠物达人数据权限项点击【确定】按钮 整体点击保存,回到列表页记得点击【权限生效】按钮 Step4 新建用户绑定角色 切换到用户中心模块,点击【创建】按钮填写必要信息,并在角色选中oinone权限组。 退出admin用户,用oinone登陆,权限效果: 只能看见demo模块 oinone登陆只能看到性别为男的宠物达人记录 admin用户登陆 oinone用户登陆 因为宠物达人的页面没有把性别字段放出来,我们看下数据库数据 auth模块扩展 在日常项目开发中,难免会碰到一些针对权限管理的特殊需求,或是为提升性能做的特殊逻辑。接下来我给大家介绍auth模块扩展性。 权限全局配置 对所有权限角色都做限制,而且不想让用户感知,可以实现PermissionFunApi接口,API接口实现的配置方式【只能用于支持全局的数据权限配置】 实现接口PermissionFunApi 将实现托管给SpringAOP 接口的具体实现看下图的代码 package pro.shushi.pamirs.demo.core.service; import org.springframework.stereotype.Component; import pro.shushi.pamirs.auth.api.service.PermissionFunApi; import pro.shushi.pamirs.demo.api.model.PetTalent; @Component public class PetTalentPermissionFunApi implements PermissionFunApi { @Override public String permissionDomain(Object… args) { //获取当前组织中 return "name == '张学友'"; } @Override public String nameSpace() { return PetTalent.MODEL_MODEL; } } 不参与权限控制 如果某一接口不想做权限控制,则可以在启动工程的application-dev.yml文件中配置不需要权限过滤的接口 pamirs: auth: fun-filter: – namespace: demo.PetTalent fun: queryPage 换一个没有配置宠物达人权限的用户(除管理员以外)进入系统,则也可以看到数据。注意【权限全局控制】还是生效的 API 1. 获取当前用户对该模型的行权限 Result<String> result = CommonApiFactory.getApi(AuthApi.class).canReadAccessData("Model"); 返回值为 { 'data':"name=in=('hahaha')" 'success':true … } 用法 : 场景:前端发起的请求都会经过权限拦截,后端代码逻辑发起的数据请求都是不经过任何权限的过滤,但是某些特殊情况需要在后端代码逻辑发起的数据请求也带上权限过滤 入参:请求的模型 出参:Result 数据结构中data会存储一段字符串,该字符串为Rsql 将该Rsql追加到wrapper中 Result<String> result = CommonApiFactory.getApi(AuthApi.class).canReadAccessData("base.UeModule"); String data=result.getData(); QueryWrapper<UeModule> wrapper = Pops.query(); wrapper.setEntity(ueModule); if (!StringUtils.isBlank(data)) { wrapper.apply(data); }

    2024年5月23日
    1.3K00
  • 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.1K00

Leave a Reply

登录后才能评论