SpringBoot 快速支援國際化i18n
阿新 • • 發佈：2020-07-23
只需體驗三分鐘 就會愛上這款國際化！
學習目標
- 快速學會如何在工程中支援國際化語言。
快速查閱
專題閱讀：《SpringBoot 佈道系列》
原始碼下載：springboot-locale-i18n
— Hey Man，Don't forget to Star or Fork . —
專案結構：
使用教程
一、後臺國際化
1、配置國際化引數
預設解析器：LocaleResolver 用於設定當前會話的預設的國際化語言。
預設攔截器：LocaleChangeInterceptor 指定切換國際化語言的引數名。例如?lang=zh_CN 表示讀取國際化檔案messages_zh_CN.properties
/**
* 配置國際化語言
*/
@Configuration
public class LocaleConfig {
/**
* 預設解析器 其中locale表示預設語言
*/
@Bean
public LocaleResolver localeResolver() {
SessionLocaleResolver localeResolver = new SessionLocaleResolver();
localeResolver.setDefaultLocale(Locale.US);
return localeResolver;
}
/**
* 預設攔截器 其中lang表示切換語言的引數名
*/
@Bean
public WebMvcConfigurer localeInterceptor() {
return new WebMvcConfigurer() {
@Override
public void addInterceptors(InterceptorRegistry registry) {
LocaleChangeInterceptor localeInterceptor = new LocaleChangeInterceptor();
localeInterceptor.setParamName("lang");
registry.addInterceptor(localeInterceptor);
}
};
}
}
2、新增國際化檔案
首先在配置檔案 application.yml 填寫國際化檔案的相對路徑，表示讀取classpath:/static/i18n/messages_language_country.properties 。例如：
spring:
messages:
basename: static/i18n/messages #相對路徑 開頭請勿新增斜槓
然後在 classpath:/static/i18n 目錄中新增如下國際化檔案：
預設檔案：messages.properties
#這裡填寫預設翻譯，內容可以留空，但檔案必須存在。
美式英語：messages_en_US.properties
#這裡填寫英語翻譯。
user.title=User Login
user.welcome=Welcome
user.username=Username
user.password=Password
user.login=Sign In
中文簡體：messages_zh_CN.properties
#這裡填寫中文翻譯
user.title=使用者登陸
user.welcome=歡迎
user.username=登陸使用者
user.password=登陸密碼
user.login=登陸
中文繁體：messages_zh_TW.properties
#這裡填寫繁體翻譯
user.title=使用者登陸
user.welcome=歡迎
user.username=登陸使用者
user.password=登陸密碼
user.login=登陸
3、程式碼國際化
通過工具類的靜態方法MessageUtils.get("user.title") 快速獲取當前國際化的翻譯值。
/**
* 國際化工具類
*/
@Component
public class MessageUtils{
private static MessageSource messageSource;
public MessageUtils(MessageSource messageSource) {
FastLocale.messageSource = messageSource;
}
/**
* 獲取單個國際化翻譯值
*/
public static String get(String msgKey) {
try {
return messageSource.getMessage(msgKey, null, LocaleContextHolder.getLocale());
} catch (Exception e) {
return msgKey;
}
}
二、頁面國際化
首先在pom檔案引入Thymeleaf和Web依賴，然後在頁面中只需通過th:xx="#{x.label}"即可獲取對應的國際化翻譯值。
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
例如：
<title th:text="#{user.title}">使用者登陸</title>
三、JS國際化
首先在pom檔案引入jQuery、jquery-properties-i18n等依賴，然後在初始化後即可通過JS函式獲取對應國際化檔案的內容。
<dependency><!--webjars版本定位器 用於省略版本號-->
<groupId>org.webjars</groupId>
<artifactId>webjars-locator-core</artifactId>
</dependency>
<dependency><!--jQuery前端依賴-->
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
<dependency><!--jQuery國際化外掛-->
<groupId>org.webjars.bower</groupId>
<artifactId>jquery-i18n-properties</artifactId>
<version>1.2.7</version>
</dependency>
例如：為了提高可用性 這裡提供了獲取當前國際化語言和獲取國際化翻譯的方法。
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title th:text="#{user.title}">使用者登陸</title>
<script th:src="@{/webjars/jquery/jquery.min.js}"></script>
<script th:src="@{/webjars/jquery-i18n-properties/jquery.i18n.properties.min.js}"></script>
<script th:inline="javascript">
//獲取應用路徑
var ROOT = [[${#servletContext.contextPath}]];
//獲取預設語言
var LANG_COUNTRY = [[${#locale.language+'_'+#locale.country}]];
//初始化i18n外掛
$.i18n.properties({
path: ROOT + '/i18n/',//這裡表示訪問路徑
name: 'messages',//檔名開頭
language: LANG_COUNTRY,//檔名語言 例如en_US
mode: 'both'//預設值
});
//初始化i18n函式
function i18n(msgKey) {
try {
return $.i18n.prop(msgKey);
} catch (e) {
return msgKey;
}
}
//獲取國際化翻譯值
console.log(i18n('user.title'));
console.log(i18n('User Login'));
</script>
</head>
<body>
<div class="logo_box">
<select id="locale">
<option value="zh_CN">中文簡體</option>
<option value="zh_TW">中文繁體</option>
<option value="en_US">English</option>
</select>
<h3 th:text="#{user.welcome}">歡迎登陸</h3>
<form>
<div class="input_outer">
<span class="u_user"></span>
<input id="username" name="username" class="text" type="text" th:placeholder="#{user.username}">
</div>
<div class="input_outer">
<span class="us_uer"></span>
<input id="password"