1. Oinone社区Home
  2. Oinone 7天入门到精通

6.4 国际化之多语言

史, 昂 • • Oinone 7天入门到精通 • 2047 views

多语言是国际化中大家最常面对的问题，我们需要对应用的页面结构元素进行翻译，也需要对系统内容进行翻译比如：菜单、数据字典等，甚至还会业务数据进行翻译。但不管什么翻译需求，我们在实现上基本可以归类为前端翻译和后端翻译。前端翻译顾名思义是在前端根据用户选择语言对内容进行翻译，反之就是后端翻译。本文会带着大家了解oinone的前端翻译与后端翻译

准备工作

pamirs-demo-boot的pom文件中引入pamirs-translate包依赖

<dependency>
    <groupId>pro.shushi.pamirs.core</groupId>
    <artifactId>pamirs-translate</artifactId>
</dependency>

pamirs-demo-boot的application-dev.yml文件中增加配置pamirs.boot.modules增加translate，即在启动模块中增加translate模块

pamirs:
    boot:
    modules:
        - translate

后端翻译（使用）

这里通过对菜单的翻译来带大家了解翻译模块

Step1 新增翻译记录

切换应用到translate模块，点击新增翻译。

  1. 选择新增翻译生效模块

  2. 选择翻译的模型为：菜单模型

  3. 源语言选择中文，目标选择English

  4. 添加翻译项目：

    1. 源术语为：商店

    2. 翻译值为：shop

    3. 状态为：激活

image.png

Step2 查看效果

应用切换到Demo模块，在右上角切换语言至英语

image.png

后端翻译（自定义模型的翻译）

在前面菜单的翻译中，似乎我们什么都没做就可以正常通过翻译模块完成多语言的切换了。是不是真如我们想象的一样，当然不是。是因为Menu模型的displayName字段加上@Field(translate = true)注解。

Step1 为PetType模型的name字段增加翻译注解

package pro.shushi.pamirs.demo.api.model;

import pro.shushi.pamirs.meta.annotation.Field;
import pro.shushi.pamirs.meta.annotation.Model;
import pro.shushi.pamirs.meta.base.IdModel;

@Model.MultiTable(typeField = "kind")
@Model.model(PetType.MODEL_MODEL)
@Model(displayName="品种",labelFields = {"name"})
public class PetType extends IdModel {

    public static final String MODEL_MODEL="demo.PetType";

    @Field(displayName = "品种名" , translate = true)
    private String name;

    @Field(displayName = "宠物分类")
    private String kind;
}

Step2 重启应用查看效果

  1. 切换应用到translate模块，点击新增翻译

image.png

  1. 切换应用到Demo模块，切换中英文，查看效果

image.png

前端翻译

还记得我们前端第一个自定义动作吗？会弹出“oinone第一个自定义Action，啥也没干”，我们要对它进行翻译。

Step1 修改前端DoNothingActionWidget.ts

  1. import translateValueByKey

  2. 提示语用translateValueByKey加上翻译 const confirmRs = executeConfirm(translateValueByKey(\'oinone第一个自定义Action，啥也没干\')||\'oinone第一个自定义Action，啥也没干\');

    前端更多翻译工具请见前端高级特性-框架之翻译工具

import {
  Action,
  ActionContextType,
  ActionWidget,
  executeConfirm,
  IClientAction,
  SPI,
  ViewType,
  Widget,
  translateValueByKey
} from '@kunlun/dependencies';

@SPI.ClassFactory(ActionWidget.Token({ name: 'demo.doNothing' }))
export class DoNothingActionWidget extends ActionWidget {
  @Widget.Method()
  public async clickAction() {
        const confirmRs =  executeConfirm(translateValueByKey('oinone第一个自定义Action，啥也没干')||'oinone第一个自定义Action，啥也没干');
    }
}

//定义动作元数据
Action.registerAction('*', {
  displayName: '啥也没干',
  name: 'demo.doNothing',
  id: 'demo.doNothing',
  contextType: ActionContextType.ContextFree,
  bindingType: [ViewType.Table]
} as IClientAction);

Step2 新增翻译记录

前端翻译的翻译记录对应的模型可以随意找一个放。但要注意几点：

  1. 不要找有字读配置translate = true的模型，因为会影响后端翻译性能。

  2. 最好统一到一个模型中，便于后续管理。这里大家可以自定义一个无有业务访问且本身无需要翻译的模型来挂载，避免性能损失

image.png

Step3 刷新远程资源生成前端语言文件

image.png

Step4 新增或修改.env

前端在项目根目录下新增或修改.env，可以参考.env.example文件。通过.env文件为前端配置oss文件路径，针对I18N_OSS_URL配置项。真实前端访问翻译语言文件的路径规则为：http://bucket.downloadUrl/mainDir/租户/translate/模块/语言文件。

  1. yaml文件中oss配置的文件路径：http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo/

  2. 租户/translate/模块/语言文件 前端会自动根据上下文组织

# 后端api配置
# API_BASE_URL=http://127.0.0.1:8090
# 下面是国际化语言的cdn配置，默认用当前请求链接下的路径: /pamirs/translate/${module}/i18n_${lang}.js
I18N_OSS_URL=http://pamirs.oss-cn-hangzhou.aliyuncs.com/upload/demo

Step5 重启前端应用看效果

对语言进行中英文切换，进入宠狗达人页面，点击【第一个自定义Action】，查看前端翻译效果

image.png

image.png

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

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

Like (0)
史, 昂's avatar史, 昂数式管理员
0 2
Previous 2024年5月23日 am8:10
Next 2024年5月23日 am8:12

相关推荐

  • 4.1.13 Action之校验

    在3.5.3【Action的类型】一文中有涉及到“ServerAction之校验”部分，本文介绍一个特殊的写法，当内置函数和表达式不够用的时候，怎么扩展。还是拿PetShopProxyAction举例，修改如下： package pro.shushi.pamirs.demo.core.action; ……引依赖类 @Model.model(PetShopProxy.MODEL_MODEL) @Component public class PetShopProxyAction extends DataStatusBehavior<PetShopProxy> { ……其他代码 // @Validation(ruleWithTips = { // @Validation.Rule(value = "!IS_BLANK(data.code)", error = "编码为必填项"), // @Validation.Rule(value = "LEN(data.shopName) < 128", error = "名称过长，不能超过128位"), // }) @Validation(check = "checkName") @Action(displayName = "启用") @Action.Advanced(rule="activeRecord.code !== undefined && !IS_BLANK(activeRecord.code)") public PetShopProxy dataStatusEnable(PetShopProxy data){ data = super.dataStatusEnable(data); data.updateById(); return data; } @Function public Boolean checkName(PetShopProxy data) { String field = "name"; String name = data.getShopName(); boolean success = true; if (StringUtils.isBlank(name)) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称为必填项")); success = false; } if (name.length() > 128) { PamirsSession.getMessageHub() .msg(Message.init() .setLevel(InformationLevelEnum.ERROR) .setField(field) .setMessage("名称过长，不能超过128位")); success = false; } return success; } ……其他代码 } 图4-1-13-1 PetShopProxyAction扩展配置 注： check属性指定了校验函数名称，命名空间必须与服务器动作一致。 校验函数的入参必须与服务器动作一致 使用PamirsSession#getMessageHub方法可通知前端错误的属性及需要展示的提示信息，允许多个。

    史, 昂's avatar 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.6K00

  • 李强

    我们常说“在今天所有的不确定性当中，数字化是最大的确定性”，数字化一定会全面改造所有的行业更是确定的。在菜鸟九年的探索中，我们最大的感受是“未来，任何一个物流企业都会是一个技术公司，真正拉开差距的是：技术与实体产业的结合有多深”。菜鸟“简单极致，贴地疾飞”的技术文化也深刻体现了这一点——好的技术要能解决实际问题。数字化并不是简单地上线一个或几个系统，这是一个贴近业务持续迭代的过程，伴随着这个过程，我相信会诞生非常多的创新技术。 在本书中我看到了工程思维在推进技术创新的缩影，把难的问题转化为简单的问题，用成熟实用的技术分而解之。高性能的微服务框架、CDM、元数据、低代码、无代码等，都是当下非常热门的技术课题，Oinone把这一切都有机地结合起来，形成了一种具备先进理念的全新一代软件产品，每一个特性都贴合企业数字化遇到的实际问题。Oinone的产品设计，把“大道至简，软件自造”贯穿始终，用最简单的方式，帮助企业驾驭数字化，相信会给企业带来不一样的体验。 就跟本书提到的“「企业视角由内部管理转向业务在线、生态在线(协同)带来一系列新的诉求」这一大背景下，以及云、端等新技术的发展，对研发人员的需求越来越大，同时要求越来越高，低代码平台是提升研发效率，降低研发成本的核心手段”，低代码已经不是需不需要的问题，而是怎么选的问题。菜鸟网络自身也在推进自有低代码开发平台，我们有幸邀请本书作者陈鹏程来到菜鸟网络进行了分享交流，收获非常大。如您正在选型低代码开发平台，向您推荐这本书，低无一体的Oinone肯定会打动您。 菜鸟网络CTO李强（在宽）

    史, 昂's avatar 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    2.0K00
  • 4.5.1 研发辅助之插件-结构性代码 Oinone 7天入门到精通

    4.5.1 研发辅助之插件-结构性代码

    研发辅助意在 消灭研发过程中的重复性工作提升研发效率，如结构性代码 提供生产示例性代码，如果根据模型生成导入导出、view自定义配置等经常性开发 一、插件安装 根据自身Idea版本下载插件并安装： 版本 插件 2023.1 pamirs-source-maker-1.0.0-2023.1.zip(2.4 MB) 2021.1 pamirs-source-maker-1.0.0-2021.1.zip(2.4 MB) 2021.2 pamirs-source-maker-1.0.0-2021.2.zip(2.4 MB) 2021.3 pamirs-source-maker-1.0.0-2021.3.zip(2.4 MB) 2022.1 pamirs-source-maker-1.0.0-2022.1.zip(2.4 MB) pamirs-source-maker-1.0.0-223-EAP-SNAPSHOT(2.4 MB) 表4-5-1-1 插件列表 二、研发辅助之配置式结构性代码生成器 我们在开发过程中为了日后代码易于维护和修改，往往会做工程性的职责划分。 除去模型外会有 代理模型和代理模型Action来负责前端交互 以面向接口的形式来定义函数，就会有api和实现类之分 如果项目有多端，那么如代理模型和代理模型Action又要为每一个端构建一份 在大型项目的初始阶段，我们需要手工重复做很多事情，特别麻烦。现在用oinone的研发辅助插件的结构性代码生成器，就可以避免前面的重复工作 插件执行的配置文件 <?xml version="1.0" encoding="utf-8" ?> <oinone> <makers> <!– 根据模型生成代理类、代理类的Action、Service、ServiceImpl –> <maker> <!– 选择模型所在位置 –> <modelPath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-api/src/main/java/pro/shushi/pamirs/second/api/model</modelPath> <!– 代理模型、代理模型Action生成相关配置信息 –> <proxyModules> <module> <!– 代理模型和代理模型Action的生成位置信息 –> <generatePath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-api/src/main/java/pro/shushi/pamirs/second/api</generatePath> <!– 代理模型和代理模型Action的模块前缀 –> <modulePrefix>second</modulePrefix> <!– 代理模型和代理模型Action的模块名，代理模型和代理模型Action类名为moduleName+模型名+"Proxy"+"Action" –> <moduleName>second</moduleName> <!– 代理模型和代理模型Action的包名,实际包名为 packageName+".proxy"或packageName+".action"–> <packageName>pro.shushi.pamirs.second.api</packageName> </module> </proxyModules> <!– 根据模型生成api，包括service（写方法）和queryService（读方法） –> <apiModule> <!– service和queryService的生成位置信息 –> <generatePath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-api/src/main/java/pro/shushi/pamirs/second/api</generatePath> <!– service和queryService的模块前缀 –> <modulePrefix>second</modulePrefix> <!– service和queryService的模块名 –> <moduleName>second</moduleName> <!– service和queryService的包名,实际包名为 packageName+".service" –> <packageName>pro.shushi.pamirs.second.api</packageName> </apiModule> <!– 根据模型生成api实现类，包括serviceImpl（写方法）和queryServiceImpl（读方法） –> <coreModule> <!– serviceImpl和queryServiceImpl的生成位置信息 –> <generatePath>/Users/oinone/Documents/oinone/demo/pamirs-second/pamirs-second-core/src/main/java/pro/shushi/pamirs/second/core</generatePath> <!– serviceImpl和queryServiceImpl的模块前缀 –> <modulePrefix>second</modulePrefix> <!– serviceImpl和queryServiceImpl的模块名 –> <moduleName>second</moduleName> <!– serviceImpl和queryServiceImpl的包名,实际包名为 packageName+".service" –> <packageName>pro.shushi.pamirs.second.core</packageName> </coreModule> </maker> </makers> </oinone> 图4-5-1-1 插件执行的配置文件 三、研发辅助之多模型结构性代码生成器 是配置式结构性代码生成器的补充，应对开发后期维护中新增模型的场景。它的不同点在于只要选择模型文件就可以，不需要专门编写xml文件。生成的文件默认就在模型所在路径下 Step1 菜单栏上找到oinone，并点击子菜单【多模型结构性代码生成器】 图4-5-1-2 多模型结构性代码生成操作步骤一 Step2 设置必要的信息 模型前缀 模型的所属模块 代理模型的模块 这三个信息分别用于构建 代理模型的MODEL_MODEL = 模型前缀.代理模型的模块.代理模型类名 服务的FUN_NAMESPACE = 模型前缀.代理模型的模块.服务类名 图4-5-1-3 多模型结构性代码生成操作步骤二 Step3 选择为哪些模型生成对应的结构性代码 图4-5-1-4 多模型结构性代码生成操作步骤三 Step4 代码在模型所在目录 生成的文件默认就在模型所在路径下，您可以手动拖动到对应的包路径当中去 图4-5-1-5 多模型结构性代码生成操作步骤四

    史, 昂's avatar 史, 昂
    2024年5月23日
    1.3K00
  • 页面 Oinone 7天入门到精通

    页面

    1. 页面介绍 页面是增删改查数据的入口，数据信息的填写、查看都需要通过页面来展示、交互。页面设计是界面设计器的功能之一，提供页面搭建功能，以实现数据的录入、查看/查询、搜索等等。 2. 页面列表 进入界面设计器，默认会打开以卡片形式管理页面的列表。 如图，页面卡片上可预览到的信息分别有页面标题、页面缩略图、视图类型、页面对应模型名称、页面描述。 「页面标题、页面描述」作用是通过文字定义页面的名称以及对页面进行详细描述。 「页面缩略图」是自行上传的图片，用于在页面列表通过图片预览当前页面的大致布局样式。若未上传，将显示系统默认的图片，点此查看缩略图上传。 「视图类型」通过业务角度（运营管理、官网门户、商城等，目前提供了运营管理一种业务类型）进行分类。运营管理中包括表单、表格、详情、画廊、树视图。 表单常应用于数据的创建、编辑页； 表格可理解为数据的列表查看页面，除了常规表格外，本版本支持树表、级联高级视图； 详情用于设计数据的详情页； 画廊是以卡片形式呈现内容； 树视图是包括树表、级联高级视图； 表格-树表、树视图-树表两者之间的区别：表格-树表的主模型是表格的模型，树视图-树表的主模型是树表的模型、左侧表格是展开的内容； 3. 添加页面 操作添加页面，首先需要选择添加方式。目前提供了1种添加页面方式：直接创建。 3.1 直接创建 直接创建时，弹框中填写页面的基本信息，填写完成后进入页面设计页。 4. 页面操作 4.1 设计页面 操作设计页面后直接进入该页面的设计页面，可对组件布局、交互、属性进行设置。 4.2 编辑 操作编辑弹出页面的基本信息弹框，可对当前页面的基本信息进行编辑修改。 可修改的基本信息包括页面标题、操作栏位置、页面分组、页面描述。 4.3 查看被引用的信息 4.3.1 什么是引用？ 页面与页面或页面与菜单之间的若存在交互则称为具有引用关系。 举例1：【页面A】中的一个「跳转动作」配置了跳转【页面B】，则称页面B被页面A引用，在页面B下可查看被引用信息。 举例2：比如【菜单1】绑定了【页面C】，则称页面C被菜单1引用，在页面C下可查看被引用信息。 4.3.2 查看的引用信息是什么？ 引用信息分别有“存在引用关系的视图”、“存在引用关系的菜单”。页面下操作查看被引用信息，是查看当前页面被引用情况，如上述举例1，页面B被引用，而页面A非被引用，所以只可以在页面B下查看到“存在引用关系的视图”。 4.4 隐藏/可见 对于暂时不使用的页面，可以进行隐藏（隐藏后可再设置可见）的操作。 4.4.1 隐藏/可见会有哪些影响？ 隐藏后该页面在跳转动作选择页面和菜单绑定页面时，不可见，已被使用的不受影响。再次操作可见后，即可选择到。 4.4.2 隐藏后的页面找不到了？ 若需要对隐藏的页面进行操作，但是在列表未查找到某个隐藏的页面，请切换「是否可见」筛选项，页面列表默认展示所有“可见”的页面，切换为“全部”或“隐藏”，即可找到隐藏的页面。 4.5 删除 对于不再使用且没有被引用信息的页面，可以将页面删除。页面删除后无法恢复，请谨慎操作，对于不确定是否要彻底删除的页面，建议先操作隐藏。 删除前请确保当前页面没有引用关系！ 5. 页面搜索 卡片上方是页面筛选和搜索区域，可通过应用、模型、业务类型、视图类型、自定义/系统、可见/隐藏等等筛选页面；搜索时仅支持使用页面名称进行搜索。同时筛选条件也具备记忆功能，即上一次在页面列表的筛选条件是哪些，再次进入页面列表，筛选条件默认为上次的条件。 其中自定义页面是所有人工添加的页面，系统页面为非人工添加的页面，由系统默认生成，只可用于查看，不可编辑、删除或设计。 6. 页面分组管理 6.1 页面分组 当页面过多时，可以自定义添加15个分组，将页面进行归类管理。默认展示全部分组，点击「全部」展开所有分组，点击分组进行分组下的页面查看或管理分组。 6.2 管理分组 展开分组后，点击「管理分组」，出现弹框，在弹框中可以修改分组名称、添加分组、删除分组。 6.2.1 添加分组 操作「+页面分组」，可以直接输入分组名称后回车以添加一个新分组，或快捷选择其他应用使用的分组。最多添加15个分组。 6.2.2 修改分组 双击分组标签，即可对已有分组进行名称的修改。若分组在其他应用也使用，则在其他应用内，该分组名称同步变化。 6.2.3 删除分组 若分组下有页面或分组有被其他应用使用，则分组无法删除。

    史, 昂's avatar 史, 昂
    2024年6月20日
    1.6K00
  • 开放平台 Oinone 7天入门到精通

    开放平台

    1. 开放介绍 开放平台是将 Oinone 平台内的能力向外开放，如开放商品信息查询接口、发货单查询接口等。 包括开放接口、三方应用管理。 2. 开放接口 管理开放接口信息，基本操作包括：新增、编辑、停用/启用。 2.1. 新增接口 定义API名称，选择业务域、关联模型，方法支持GET/POST/PUT/DELETE，配置接口参数、响应结果等信息。 2.2. 编辑接口 编辑需要填写的内容同新增，不做赘述。 2.3. 停用/启用 新增后为已启用，停用后，API将无法访问，请慎重使用；针对停用的API进行启用。 3. 应用管理 管理开放接口集成的外部应用，基本操作包括：新增、查看密钥、授权调整、停用/启用。 3.1. 新增应用 新增应用时，输入应用名称，选择数据传输加密算法AES密钥或RSA公钥，勾选授权的API接口。 3.2. 停用/启用 新增后为已启用，停用后，应用将无法访问授权的接口，请慎重使用；针对停用的应用可进行启用。 3.3. 查看密钥 点击【查看密钥】，弹窗展示当前 API Secret，支持复制。 3.4. 授权调整 指调整当前应用的授权的API 范围。

    史, 昂's avatar 史, 昂
    2024年6月20日
    2.1K00

Leave a Reply

Please Login to Comment

Comments(2)

  • xiao3's avatar
    xiao3 2024年11月25日 am10:43

    只支持英语吗？如何添加其他语种？

    • shao's avatar
      shao 2024年11月25日 pm5:24

      @xiao3：支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈