# 国际化

# 概述

国际化(internationalization,因在i和n之间共有18个字母,所以国际化也称为i18n) 在项目中主要实现的功能就是按照指定的语言让服务端返回相应语言的内容。本篇从代码层面和页面操作两个方面进行国际化功能的介绍。
支持版本:2.5.0 以上

# 代码

# 前端国际化

前端国际化也叫页面国际化,来维护页面元素及其不同语种的翻译信息。实现平台页面所见元素多语种间的切换展示。维护详见页面国际化
页面元素分为公共元素和业务元素,公共元素即所有页面共有的元素比如:查询重置新增修改删除等按钮元素或编码名称等等label元素。
业务元素则为登录页页面元素和具体菜单页面的私有元素信息。
在维护页面元素时,确认其所属分类,将对应元素维护至对应分类中,编码为该元素的原值,显示值是所选择语言的对应翻译值。
维护完成后,在开启国际化功能的情况下,打开任意页面会调用get-elements接口,接口返回值为原值对应语言的翻译值。

接口展示

前端代码中仅将页面元素的值替换成如下格式,这样在后端返回的数组中,才能将原值和其翻译值进行匹配显示。

<hos-button>{{ $t("新增") }}</hos-button>
<hos-button>{{ $t("删除") }}</hos-button>

# 后端国际化

# 数据国际化

数据国际化用来维护业务数据中某些字段在不同语言环境展示不同的翻译值。依赖于表结构管理模块,配置需要做翻译的业务表及字段。 国际化功能的启停在 yml 文件中进行配置。该功能为辅助用途,使用百度翻译api,需要注册开发者账号,使用appId和秘钥。 详见https://api.fanyi.baidu.com/api/trans/product/desktop?req=developer (opens new window),
注意:百度翻译api注册账号完成后,请将翻译服务激活。如下图所示

shili-img.png

hos:
  i18n:
    baiduAppId:         ### 自动翻译API接口账号
    baiduSecurityKey:   ### 自动翻译API接口密码
    isOpen:             ### 国际化功能启停配置。true-开启国际化功能;false-关闭国际化功能
    isShowSource:       ### 国际化功能开启状态下,数据翻译值不存在时是否显示为原值。true-显示原值;false-显示查到的值

后端代码的开发参考开发进阶中代码开发部分

# 静态数据国际化

静态数据国际化是用来维护一些静态数据在不同语言环境展示的翻译值。静态数据分为四类,对这四类数据的维护和代码开发详见下表

分类 用途 编码命名规则 备注
日志类 维护日志信息 编码为日志原值 需要在代码中进行取值赋值
常量类 维护自定义常量信息 编码为自定义常量的类名_各个常量的属性名(例:OrgGlobalConstant_condition) 需要在代码中进行取值赋值
枚举类 维护自定义枚举信息 编码为自定义枚举的类名_各个枚举的code(例:ChannelTypeEnum_mail) 需要在代码中进行取值赋值
提示信息 维护系统提示信息 编码为系统-模块-功能-异常信息序号四部分组成的序列号(例:100-001-001-001) 维护即可生效,后端代码中做了统一拦截

(特别提醒:1.提示信息除了表中描述的外,实体类使用字段校验时,其中的message信息,也需要维护到提示信息中,编码为message信息原值。 2.提示信息也可支持不统一拦截,进行自定义配置翻译,构造时根据属性 isIntercept 进行判断。详见下方示例)

代码开发时,可使用 I18nUtil 工具类提供的方法进行取值赋值的操作。

# 枚举常量

// 在类BussinessLogEnum中定义一个枚举
INSERT("insert","新增"),

String transNameEnum =  I18nUtil.mapStaticTrans(BussinessLogEnum.class, 
                                BussinessLogEnum.INSERT.getCode(),true);

// 在类ConfigMsgConstant中定义一个常量                                
public static final String TEST = "这是一个测试常量";

String transNameConstant = HosI18nUtil.mapStaticTrans(ConfigMsgConstant.class,"TEST",true);
                             

在静态数据国际化的枚举和常量菜单分别按上表中的规则维护数据。

shili-img16.png

shili-img17.png

在不同的语言环境会取到对应的值。(下图仅展示能取到不同语言的值,具体用途根据开发需要。)

shili-img18.png

shili-img19.png

# 实体类入参校验

  1. 给name字段增加注解进行校验判断(只适应于validation-api插件)。
@NotBlank(message = "参数名称不为空")
@Length(min = 1,max = 75,message="配置名称最大长度为75")
private String name;
  1. 在静态数据国际化的提示信息菜单中维护校验的message信息。

shili-img1.png

shili-img2.png

  1. 如若校验不通过,在不同语言下返回的数据如下。

shili-img3.png

shili-img4.png

# Exception

  1. 不传 isIntercept ,默认为 true。统一拦截进行翻译。
throw new BaseCommonBusinessException("0000001",导入失败!");

  1. 在静态数据国际化的提示信息菜单中维护数据信息。

shili-img5.png

  1. 在不同语言环境下返回的数据如下。

shili-img6.png

shili-img7.png

  1. 传入 isIntercept ,为 false,不走统一拦截,自行翻译处理。对于拼接的提示信息这种形式最为适用。
throw new BaseCommonBusinessException("0000001",
HosI18nUtil.mapStaticTrans("导入失败!") + 3 + HosI18nUtil.mapStaticTrans("条数据未导入"),false);

  1. 在静态数据国际化的提示信息菜单中维护数据信息。

shili-img8.png

shili-img9.png

  1. 在不同语言环境下返回的数据如下。

shili-img10.png

shili-img11.png

# Response

  1. 不传 isIntercept ,默认为 true。统一拦截进行翻译。
return BaseResponse.error("11001","id 不能为空");
  1. 在静态数据国际化的提示信息菜单中维护数据信息。

shili-img12.png

  1. 在不同语言环境下返回的数据如下。

shili-img13.png

shili-img14.png

  1. 传入 isIntercept ,为 false,不走统一拦截,自行翻译处理。
return BaseResponse.error("11001",HosI18nUtil.mapStaticTrans("id 不能为空"),false);

  1. 在静态数据国际化的提示信息菜单中维护数据信息。

shili-img15.png

  1. 在不同语言环境下返回的数据如下。

shili-img13.png

shili-img14.png

# 页面操作

# 语言管理

语言管理用来维护需要做国际化的语言信息。例如常见的中文(zh)、英文(en)等。

主要功能包含:语言的新增编辑查询删除导入导出

【菜单路径:】国际化管理–>语言管理

# 1 新增语言

点击新增按钮,填写相应信息,点击保存

新增语言

属性信息说明

属性名     属性说明
语种 语言名称,提前在字典中预置的,选择之后会带着对应的编码
排序 排序值。
是否默认 是否为系统默认使用语言。
是否启用 是否启用,停用后使用不显示

# 2 编辑语言

点击表格行操作列编辑按钮,打开相应的详细信息,编辑后,点击保存即可。

编辑语言

属性信息详细配置参见新增语言

# 3 查询语言

支持对编码名称的模糊检索,表格分页展示。

查询语言

# 4 删除语言

支持单个删除及批量删除。单个删除可使用表格行操作列删除按钮。批量删除勾选表格第一列后,点击表格上方删除按钮即可。

删除语言

# 5 导入语言

在表格上方点击导入按钮,打开导入弹框进行如下操作:1、下载excel模板;2、填充文件数据;3、选择导入方式;4、下一步后选择第二步准备好的文件即可

导入语言

# 6 导出语言

在表格上方点击导出按钮,可见三种导出方式,按需选择一种后。可打开导出列选择配置页面。对需要用到的数据进行勾选并导出即可。

导出语言

导出语言

# 表结构管理

表结构管理的的页面操作详见开发进阶的表结构管理

# 页面国际化

主要功能包含:页面元素的新增编辑查询删除翻译导入导出在线翻译

【菜单路径:】国际化管理–>页面国际化
左侧页面树支持新增页面,可根据实际需要添加相应的页面,在对应页面中维护本页面的页面元素。

# 1 左侧页面树新增页面

点击新增按钮,打开新增页面的弹窗,输入页面的编码,页面名称,选择是否需要与菜单进行关联,如果需要与菜单进行关联, 选择导航菜单,关联菜单和上级页面,如果不需要和菜单关联,选择页面编码即可。输入排序和备注。
当点击某个页面后再点击新增,则会将当前页面默认带入作为上级页面。

新增导航菜单

新增页面编码

# 2 左侧页面树修改页面

修改左侧树时,对公共元素不支持修改。
首先点击需要修改的页面, 点击修改按钮,打开修改弹窗,修改完成后点击保存即可。

编辑页面编码

# 3 左侧页面树删除页面

删除左侧树时,对公共元素不支持删除。
首先点击需要删除的页面, 点击删除按钮,如果当前菜单有下级菜单,会提示当前节点有下级菜单,不能删除, 如果没有下级菜单,删除时会同时删除该页面下维护的所有元素信息,如果确认点击删除即可。

删除页面编码

# 4 新增页面元素

首先点击左侧元素分类树的叶子节点。再点击新增按钮,否则会有提示信息不能打开。填写表单属性信息后,点击保存即可完成新增。

新增页面元素

属性信息说明

属性名     属性说明
语言 选择语言
编码 元素编码,模块名+编码全局唯一
显示值 对应语言的翻译值
是否启用 是否启用,停用后使用不显示

# 5 编辑页面元素

点击表格行操作列编辑按钮,打开相应的详细信息,编辑后,点击保存即可。注意:显示值的信息由表格页查询的语言翻译值为准。保存也为该语言的翻译值。

编辑页面元素

属性信息详细配置参见新增页面元素

# 6 查询页面元素

支持下拉选择语言,查询对应语言的元素翻译值信息。也同时支持对编码翻译值的模糊检索,表格分页展示。

查询页面元素

# 7 删除页面元素

支持单个删除及批量删除。单个删除可使用表格行操作列删除按钮。批量删除勾选表格第一列后,点击表格上方删除按钮即可。

删除页面元素

# 8 手动翻译

支持对单个元素信息的手动翻译。点击表格行操作列手动翻译按钮,打开翻译弹窗,翻译各语言的显示值。

翻译

# 9 导入页面元素

在表格上方点击导入按钮,打开导入弹框进行如下操作:1、下载excel模板;2、填充文件数据;3、选择导入方式;4、下一步后选择第二步准备好的文件即可

导入页面元素

# 10 导出页面元素

在表格上方点击导出按钮,可见三种导出方式,按需选择一种后。可打开导出列选择配置页面。对需要用到的数据进行勾选并导出即可。

导出页面元素

导出页面元素

# 11 自动翻译

首先点击左侧元素分类树的叶子模块节点,在表格上方点击自动翻译按钮,(在弹框中选择翻译范围:包括所选数据的翻译和当前模块的翻译、来源语言和目标语言,进行自动翻译)对查询选择语言进行在线翻译。 (自动翻译调用接口的api账号和密码需要在后端 yml 文件中进行配置。该功能为辅助用途,使用百度翻译api,需要注册开发者账号,使用appId和秘钥。详见https://api.fanyi.baidu.com/api/trans/product/desktop?req=developer。实际业务场景请专业人士进行翻译。)

在线翻译

# 12 历史数据导入

首先点击左侧元素分类树的叶子模块节点,在表格上方点击历史数据导入按钮,打开输入弹框。输入历史json字符串数据即可。

历史数据导入

# 数据国际化

主要功能包含:数据国际化的查询翻译历史数据生成在线翻译导入导出

【菜单路径:】国际化管理–>数据国际化

# 1 查询

页面分为左右两部分,左侧为需要做国际化的表,支持表名检索。点击行数据后,右侧对应展示该表的相关字段业务数据表格。

右侧支持下拉选择语言,下拉选择字段(注:字段的排序依据表维护字段时的排序),查询对应的业务值列表信息。也同时支持对翻译值的模糊检索,表格分页展示。

查询数据国际化

# 2 手动翻译

支持对单个业务值信息的手动翻译。点击表格行操作列手动翻译按钮,打开翻译弹窗,翻译各语言的显示值。

翻译

# 3 历史数据生成

使用场景:在历史业务数据产生后,才维护了该表的某些字段需要做国际化。此时,需要生成数据国际化默认语言数据。点击历史数据生成按钮即可。生成成功后该模块表格的翻译语言数量不再为0。

历史数据生成

# 4 自动翻译

在点击了左侧的表对象后,右侧选择查询语言及字段,并在表格上方点击自动翻译按钮,弹框中选择:翻译范围和目标语言。即可对原值进行自动翻译。 (自动翻译调用接口的api账号和密码需要在后端 yml 文件中进行配置。该功能为辅助用途,使用百度翻译api,需要注册开发者账号,使用appId和秘钥。详见https://api.fanyi.baidu.com/api/trans/product/desktop?req=developer。实际业务场景请专业人士进行翻译。)

在线翻译

# 5 导入

在表格上方点击导入按钮,打开导入弹框进行如下操作:1、下载excel模板;2、填充文件数据;3、选择导入方式;4、下一步后选择第二步准备好的文件即可

导入

# 6 导出

在表格上方点击导出按钮,可见三种导出方式,按需选择一种后。可打开导出列选择配置页面。对需要用到的数据进行勾选并导出即可。

导出

导出

# 静态数据国际化

主要功能有:静态数据的新增编辑查询删除手动翻译自动翻译导入导出

【菜单路径:】国际化管理–>静态数据国际化

# 1.新增静态数据

首先点击左侧元素分类树的叶子节点。再点击新增按钮,否则会有提示信息不能打开。填写表单属性信息后,点击保存即可完成新增。

新增

属性信息说明

属性名     属性说明
语言 选择语言
编码 元素编码,全局唯一
显示值 对应语言的翻译值
是否启用 是否启用,停用后使用不显示

# 2.编辑静态数据

点击表格行操作列编辑按钮,打开相应的详细信息,编辑后,点击保存即可。注意:显示值的信息由表格页查询的语言翻译值为准。保存也为该语言的翻译值。

编辑

# 3.查询静态数据

支持下拉选择语言,查询对应语言的元素翻译值信息。也同时支持对编码翻译值的模糊检索,表格分页展示。

查询

# 4.删除静态数据

支持单个删除及批量删除。单个删除可使用表格行操作列删除按钮。批量删除勾选表格第一列后,点击表格上方删除按钮即可。

删除

# 5.手动翻译静态数据

支持对单条数据的手动翻译。点击表格行操作列手动翻译按钮,打开翻译弹窗,翻译各语言的显示值。

手动翻译

# 6.自动翻译静态数据

首先点击左侧元素分类树的叶子模块节点,在表格上方点击自动翻译按钮,在弹窗中选择翻译范围:翻译所选数据和翻译当前模块所有数据、来源语言和目标语言,进行自动翻译。 (自动翻译调用接口的api账号和密码需要在后端 yml 文件中进行配置。该功能为辅助用途,使用百度翻译api,需要注册开发者账号,使用appId和秘钥。详见https://api.fanyi.baidu.com/api/trans/product/desktop?req=developer。实际业务场景请专业人士进行翻译。)

自动翻译

# 7.导入静态数据

在表格上方点击导入按钮,打开导入弹框进行如下操作:1、下载excel模板;2、填充文件数据;3、选择导入方式;4、下一步后选择第二步准备好的文件即可

导入

# 8.导出静态数据

在表格上方点击导出按钮,可见三种导出方式,按需选择一种后。可打开导出列选择配置页面。对需要用到的数据进行勾选并导出即可。

导出

导出