国际化（前后端）

最新推荐文章于 2024-07-24 15:40:36 发布

纸飞机加油

最新推荐文章于 2024-07-24 15:40:36 发布

阅读量3.9k

点赞数 2

文章标签： spring angular 后端 chrome

本文链接：https://blog.csdn.net/joke123x/article/details/109152633

版权

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

要实现信息的国际化，就需要前后端的配置，由于自己是后端程序猿，这里主要专注于后端。对于前端以自己的理解写了一下，应该可能存在问题。上周末写了一半，突然发现自己理解的也不透彻，然后就放弃了，是的，我的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();
	}
...
}