我们所开发的系统软件,有时候需要服务于不同语言或者不同文字的人们。所以对于一个成熟且完备的系统来说,实现中文简体,中文繁体,英文等不同语言的任意切换,是一项必须的技能。所以,国际化就是十分必要了。
要实现信息的国际化,就需要前后端的配置,由于自己是后端程序猿,这里主要专注于后端。对于前端以自己的理解写了一下,应该可能存在问题。上周末写了一半,突然发现自己理解的也不透彻,然后就放弃了,是的,我的flag倒了。
一、前端国际化–Angular
单纯的前端实现国际化一般是将页面的按钮及输入框,提示信息等相关文字实现国际化。通过调用后端接口,可实现菜单树(数据库中),错误返回信息(properties中)等后端返回的内容,实现整体的国际化。
用户通过操作前端,实现语言的切换,一般设置一个单选的下拉框,用来选择语言,由于设计的语言种类较少,可以采用swich来选择自己需要的语言。
对于Angular,需要涉及到TranslateService
,SettingService
,StorageService
等,需要在TS,Json,HTML中修改来释宪案,具体的实现如下:
main.component.ts
//1 TS代码
Constructor(
private trans: TranslateService,
private storage: StorageService,
private settingService: SettingService
){}
//2选择语言
switchLanguage(type){
switch(type){
case 0:
this.trans.use('zh-Cn');
this.settingService.changeLang('zh_CN');
this.storage.set('language','zh-CN');
break;
case 1:
this.trans.use('zh-Cn');
this.settingService.changeLang('zh_CN');
this.storage.set('language','zh-CN');
break;
//可以继续写
}
//3
ngOnInit():void{
this.trans.use('zh-CN');
}
在assets下新增i18n,在i18n下创建所需的语言文件,如en-US.json,zh-CN.json等。
zh-CN.json
{
"main":{
"menu":"菜单"
}
}
main.component.html
//方式一
<span>{{'main.menu' | translate}}<span>
//方式二
<input placeholder="{{'main.menu' | translate}}">
二、后端国际化
2.1.Message信息国际化(错误提示及相关警告)
后端做国际化处理的一般是Messages,也就是后端API接口返回的正常/异常信息。前端调用API接口可以在请求头中写入自己需要的,对于接口调用正常的情况下我们一般返回的前端所需要的信息,对于接口调用异常时会返回异常信息Message。系统层面的国际化处理主要是对这些Messages进行国际化,使用多套properties配置文件将Message以键值对的形式配置在其中,对于不同的语言使用文件名区分,zh_CN.properties代表中文。在系统启动时将这些配置文件以Map的形式加载到内存中方便调用。
2.2、数据库中的信息国家化
一个简单的例子,就是我们的菜单,每个菜单项的信息存在我们的数据库中,我们需要在根据用户的角色及权限,来查询到当前角色下用户的操作菜单权限。这就需要我们动态的到数据库里面去查询。
但是我们存入数据库中的内容是固定且无法改变的,想要实现数据库中数据信息的国际化,就需要我们在设计数据库的时候,将所需语言的所需字段,都添加字段来存储数据,这样我们就可以根据条件来判断,根据语言的不同,来输出不同的菜单信息。如,menuTitleCN代表中文,menuTitleUS代表英文。
前端将要请求的语言信息,放在请求头里面,后端通过请求头获取信息,来判断用户需要何种语言。(也可以更改浏览器的配置信息来实现请求头的改变)更改浏览器的配置信息。
我们根据前端的请求头,来判断需要返回给前端哪种语言。具体实现如下:
public MenuTreeQueryRsp menuTreeQuery(MenuTreeQuery req,MenuService menuService,String language){
...
Tree rootNode = new Tree();
if(language.equalIgnoreCase(Language.zh_CN.id)){
rootNode.setTitle(menu.getMenuTitleCN();
}else if(language.equalIgnoreCase(Language.en_US.id)){
rootNode.setTitle(menu.getMenuTitleUS();
}
...
}
三、国际化的测试
3.1、PostMan测试工具测试
在Headers里面添加key值Accept-Language,value中写入自己需要的语言,一般都是简体中文zh-CN,繁体中文zh-TW,美式英语en-US等,根据自己的需求添加。
发送请求,即可查看不同语言的返回信息。
3.2、Google Chrome浏览器测试
打开设置—>在设置的搜索框中输入“语言”进行搜索—>点击右侧小图标将第一个语言的隐藏信息展开—>点击添加语言,输入所需要的语言,如英语,见下图—>勾选,添加—>通过点击小图标,将要测试的语言放在顶部,实现语言优先级的修改。
3.3前后端调通
最重要胡就是连接前后端接口,前后段调通后,就可以查看国际化的实现了。