国际化(前后端)

我们所开发的系统软件,有时候需要服务于不同语言或者不同文字的人们。所以对于一个成熟且完备的系统来说,实现中文简体,中文繁体,英文等不同语言的任意切换,是一项必须的技能。所以,国际化就是十分必要了。

要实现信息的国际化,就需要前后端的配置,由于自己是后端程序猿,这里主要专注于后端。对于前端以自己的理解写了一下,应该可能存在问题。上周末写了一半,突然发现自己理解的也不透彻,然后就放弃了,是的,我的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前后端调通
最重要胡就是连接前后端接口,前后段调通后,就可以查看国际化的实现了。

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值