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

6.4 国际化之多语言

史, 昂 • • Oinone 7天入门到精通 • 2513 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

相关推荐

  • 应用审计 Oinone 7天入门到精通

    应用审计

    1. 整体介绍 应用审计是基于模型字段记录用户操作留痕记录，通过定义审计规则，平台基于审计规则订阅的字段记录形成日志。平台名词概念： 应用日志：针对已订阅的审计规则记录用户操作信息，是用户在各应用中操作行为留痕记录。 审计规则：业务审计中，数据变化订阅记录的规则。 操作入口：应用中心——业务审计应用。 2. 审计规则 审计规则是指定义审计过程订阅数据变化的信息，根据模型、订阅到具体字段内容变化形成应用日志。如订阅销售订单的备注，销售订单S20231001888，订单备注【尽快发货】，备注修改为【需易碎品包装】，审计规则为：销售订单模型，订阅【备注】。 操作包括：新增、编辑、删除。 2.1. 新增 新增时，定义审计规则名称，选择需要审计的模型，指定需要订阅的字段信息，同时可以指定关联关系的字段。 需要注意：每个模型仅限定义单条审计规则。 2.2. 编辑 编辑同新增操作，不做赘述。 2.3. 删除 删除规则后，平台将不再监听对应数据的变更日志，请慎重删除。 3. 应用日志 应用日志是针对已订阅的审计规则记录用户操作信息。记录操作用户、IP、登录设备、位置、订阅的字段变化内容。 应用日志详情 4. 业务表达 4.1. 展示效果 表格-行操作—日志记录 详情—日志记录 4.2. 操作步骤 Step1：在应用中心，需要维护业务应用依赖业务审计应用； 操作入口：应用中心，找到业务应用——编辑，依赖模块选择业务审计。 Step2：配置审计规则； 操作入口：业务审计应用——审计规则——新增规则。 Step2：界面设计器配置日志记录； 操作入口：界面设计器，找到需要配置的页面——模型组件，将动作区的日志记录拖动到页面中。

    史, 昂's avatar 史, 昂
    2024年1月20日
    1.5K00
  • 数据编码 Oinone 7天入门到精通

    数据编码

    1. 什么是数据编码 当模型中的字段数据需要有一定的编码规定，可以在模型中设计模型或字段的数据编码。 编码预览：实时展示规则设置后的编码。 2. 编码前/后缀 编码前缀：必须以字母开头，且仅支持数字或字母，最多8个字符。 编码后缀：必须以字母开头，且仅支持数字或字母，最多8个字符。 3. 格式化日期 开关默认关闭，即数据编码中不包含日期。开关打开后，默认的日期格式为“年年年年月月日日”，也可以切换成“年年月月日日、年年月月、年年年年、年年”。 序列归零周期：与格式化日期选择有关，若选择为“年年年年月月日日”，则可选“年、月、日”，选择为“年年年年”，则只可选“年”数据编码序列会按照设置的这个周期归零。 4. 编码序列 编码方式：可选择连续序列或非连续序列，选择会影响后续包含哪些设置。 序列长度：序列包含多少位数字，可以设置1 – 18之间的整数。 序列起始值：数据编码序列的起始值，默认值为3。 当编码方式设置为非连续序列时，展示其余两个配置项。 步长类型：默认值为“自定义步长”，也可以设置成“1 – 10之间随机步长”。 步长：当选择“自定义步长”时，设置的步长即为真实步长。当选择“1 – 10之间随机步长”时，实际步长为1 – 设置值之间的随机整数。

    史, 昂's avatar 史, 昂
    2024年6月20日
    2.3K00
  • 4.1.19 框架之网关协议-后端占位符 Oinone 7天入门到精通

    4.1.19 框架之网关协议-后端占位符

    在我们日常开发中会有碰到一些特殊场景，需要由前端来传一些如“当前用户Id”、“当前用户code”诸如此类只有后端才知道值的参数，那么后端占位符就是来解决类似问题的。如前端传${currentUserId}，后端会自动替换为当前用户Id。 Step1 后端定义占位符 我们新建一个UserPlaceHolder继承AbstractPlaceHolderParser，用namespace来定义一个“currentUserId”的占位符，其对应值由value()决定为“PamirsSession.getUserId().toString()”，active要为真才有效，priority为优先级 package pro.shushi.pamirs.demo.core.placeholder; import org.springframework.stereotype.Component; import pro.shushi.pamirs.meta.api.session.PamirsSession; import pro.shushi.pamirs.user.api.AbstractPlaceHolderParser; @Component public class UserPlaceHolder extends AbstractPlaceHolderParser { @Override protected String value() { return PamirsSession.getUserId().toString(); } @Override public Integer priority() { return 10; } @Override public Boolean active() { return Boolean.TRUE; } @Override public String namespace() { return "currentUserId"; } } 图4-1-19-1 后端定义占位符 Step2 前端使用后端占位符 我们经常在o2m和m2m中会设置domain来过滤数据，这里案例就是在field中设置来过滤条件，domain="createUid == $#{currentUserId}"，注意这里用的是$#{currentUserId} 而不是${currentUserId}，这是前端为了区分真正变量和后端占位符，提交的时候会把#过滤掉提交。修改宠物达人表格视图的Template中search部分 <template slot="search" cols="4"> <field data="name" label="达人"/> <field data="petTalentSex" multi="true" label="达人性别"/> <field data="creater" /> <!– <field data="petShops" label="宠物商店" domain="createUid == ${activeRecord.creater.id}"/>–> <field data="petShops" label="宠物商店" domain="createUid == $#{currentUserId}"/> <field data="dataStatus" label="数据状态" multi="true"> <options> <option name="DRAFT" displayName="草稿" value="DRAFT" state="ACTIVE"/> <option name="NOT_ENABLED" displayName="未启用" value="NOT_ENABLED" state="ACTIVE"/> <option name="ENABLED" displayName="已启用" value="ENABLED" state="ACTIVE"/> <option name="DISABLED" displayName="已禁用" value="DISABLED" state="ACTIVE"/> </options> </field> <field data="createDate" label="创建时间"/> <field data="unStore" /> </template> 图4-1-19-2 前端使用后端占位符 Step3 重启看效果 请求上都带上了createUid==${currentUserId} 图4-1-19-3 示例效果

    史, 昂's avatar 史, 昂
    2024年5月23日
    2.2K00

  • 3.3 Oinone以模型为驱动

    模型（model）：Oinone一切从模型出发，是数据及对行为的载体： 是对所需要描述的实体进行必要的简化，并用适当的变现形式或规则把它的主要特征描述出来所得到的系统模仿品。模型由元信息、字段、数据管理器和自定义函数构成； 符合面向对象设计原则包括：封装、继承、多态。 本章会带大家快速而全方位地认识Oinone的模型。会从以下几个维度去对模型展开详细介绍。 构建第一个Model 模型的类型 模型的数据管理器 模型的继承 模型编码生成器 枚举与数据字典 字段序列化方式 字段类型之基础与复合 字段类型之关系与引用

    史, 昂's avatar 史, 昂
    Oinone 7天入门到精通 2024年5月23日
    1.6K00
  • 3.1.1 环境准备（Mac版） Oinone 7天入门到精通

    3.1.1 环境准备（Mac版）

    工欲善其事，必先利其器。 在进行学习前，大家务必先检查环境。为了降低大家环境准备难度，基础环境全程用安装包无脑模式进行环境配置，安装请从附件下载（提供mac版本安装包，其他操作系统请自行网上下载与安装）。 后端相关 基础环境准备 安装 jdk 1.8 （下载地址见书籍【附件一】） 安装 mysql 8.0.26 （下载地址见书籍【附件一】） 安装mysql，并配置环境变量详见本文中的【环境变量设置】部分 如果mysql启动失败则，在命令行加执行以下命令 Shell mysqld –initalize-insecure sudo chmod -R a+rwx /usr/local/mysql/data/ 图3-1-1 mysql启动失败需执行的命令 安装 idea社区版 （官方下载链接见书籍【附件一】） 根据不同版本下载不同的idea插件 (联系Oinone官方客服) b. 点击Preferences菜单（快捷键 comand+,） c. 选择Plugins，进入插件管理页面，接下来按图操作就可以了 d. 图3-1-3 插件管理页面操作示意 e. 选择.zip文件，不需要解压 如果安装了Lombok，请禁用 idea的Java Complier，不然java反射获取方法入参名会变成arg*，导致元数据默认取值出错。或者pom中加入Complier插件，此方法为正解，不然上线也会有问题，我们学习的工程都会选用mvn插件方式 图3-1-4 界面操作示意图 图3-1-5 界面操作示意图 图3-1-6 界面操作示意图 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <configuration> <compilerArgument>-parameters</compilerArgument> <source>${maven.compiler.source}</source> <target>${maven.compiler.source}</target> <encoding>${project.build.sourceEncoding}</encoding> </configuration> </plugin> 图3-1-7 pom文件代码 安装 dataGrip 最新版本的 过期就去删“ ~/Library/Application\ Support/JetBrains/DataGrip202xxxx”相关的目录，无限期试用，或者安装其他mysql GUI 工具 安装 git 2.2.0（下载地址见书籍【附件一】） 安装 GraphQL的客户端工具 Insomnia 第一次使用可以参考3.2.1【构建第一个Module】一文中在模块启动后如何用该工具验证后端启动成功，更多使用技巧自行百度，Insomnia.Core-2022.4.2.dmg.txt(186.9 MB)（下载地址见书籍【附件一】）,下载文件后修改文件名去除.txt后缀 安装 maven ，并配置环境变量（下载地址见书籍【附件一】） 配置mvn的settings，下载附件settings-open.xml，并重命名为settings.xml,建议直接放在~/.m2/下面。下载地址见oinone开源社区群公告，也可以联系oinone合作伙伴或服务人员 把settings.xml拷贝一份到maven安装目录conf目录下 环境变量设置 vi ~/.bash_profile ，并执行 source ～/.bash_profile ##按实际情况设置 export PATH=$PATH:/usr/local/mysql/bin export PATH=$PATH:/usr/local/mysql/support-files export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_0221.jdk/Contents/Home ##替换掉${mavenHome}，为你的实际maven的安装路径 export M2_HOME=${mavenHome} export PATH=$PATH:$M2_HOME/bin 图3-1-8 环境变量设置 查看主机名 #查看主机名 echo $HOSTNAME 图3-1-9 查看主机名 根据主机名，配置/etc/hosts文件。此步如果没有配置，可能导致mac机器在启动模块时出现dubbo超时,从而导致系统启动巨慢，记得把oinonedeMacBook-Pro.local换成自己的主机名 #oinonedeMacBook-Pro.local 需要换成自己对应的主机名，自己的主机名用 echo $HOSMNAME 127.0.0.1 oinonedeMacBook-Pro.local ::1 oinonedeMacBook-Pro.local 图3-1-10 配置/etc/hosts文件 必备中间件安装脚本（rocketmq、zk、redis） zk 下载并解压（下载地址见书籍【附件一】） vi ～/.bash_profile ，追加以下两行，并执行 source ～/.bash_profile #### 替换掉${basePath}，为你的实际安装路径 export ZOOKEEPER_HOME=${basePath}/apache-zookeeper-3.5.8-bin export PATH=$PATH:$ZOOKEEPER_HOME/bin 图3-1-11 配置zk环境变量 启动zk ##启动 zkServer.sh start ##停止 zkServer.sh stop 图3-1-12 启停zk rocketmq （下载地址见书籍【附件一】） vi ～/.bash_profile ，追加以下两行，并执行 source ～/.bash_profile #### 替换掉${basePath}，为你的实际安装路径 export ROECET_MQ_HOME=${basePath}/rocketmq-all-4.7.1-bin-release export PATH=$PATH:$ROECET_MQ_HOME:$ROECET_MQ_HOME/bin 图3-1-13 配置rocketmq环境变量 到bin目录下修改配置文件 runserver.sh 和 runbroker.sh ##注释掉下面一行 ##choose_gc_log_directory ##修改java启动所需内存，按自己实际情况改，1g或者512m JAVA_OPT = "${JAVA_OPT} -server -Xms1g -Xmx1g -Xmn1g -XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=320m" 图3-1-14 bin目录下修改配置文件 启停rocketmq ##启动 nameserver nohup…

    史, 昂's avatar 史, 昂
    2024年5月23日
    2.6K00

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：支持其他的国家的语言，需要在资源里面创建，如果有其他的疑问，也可以群内联系我们哈