阿里云-云小站(无限量代金券发放中)
【腾讯云】云服务器、云数据库、COS、CDN、短信等热卖云产品特惠抢购

SpringBoot 快速支持国际化i18n

75次阅读
没有评论

共计 4553 个字符,预计需要花费 12 分钟才能阅读完成。

SpringBoot 快速支持国际化 i18n

一、后台国际化

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="https://www.linuxprobe.com/@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="https://www.linuxprobe.com/@{/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" name="password" class="text" type="password" th:placeholder="#{user.password}">
        </div>
        <div class="mb2">
            <a class="act-but submit" th:text="#{user.login}"> 登录 </a>
        </div>
    </form>
</div>


<script th:inline="javascript">
    // 选中语言
    $("#locale").find('option[value="' + LANG_COUNTRY + '"]').attr('selected', true);

    // 切换语言
    $("#locale").change(function () {$.get(ROOT + '/?lang=' + $("#locale").val(), function () {location.reload();
        });
    });

</script>


</body>
</html>

关于 i18n 插件的更多配置项请查阅 jquery-properties-i18n 官方文档。

四、语言切换

很多新人配置好之后不懂得如何切换国际化语言,其实很简单,由于在前面已经配置了拦截器 LocaleChangeInterceptor,此时我们只需在任意请求中附上语言参数 lang 即可,当然也通过 AJAX 来快速切换。

例如:
默认英语:http://http://127.0.0.1:8080?lang=en_US
中文简体:http://http://127.0.0.1:8080?lang=zh_CN
中文繁体:http://http://127.0.0.1:8080?lang=zh_TW

阿里云 2 核 2G 服务器 3M 带宽 61 元 1 年,有高配

腾讯云新客低至 82 元 / 年,老客户 99 元 / 年

代金券:在阿里云专用满减优惠券

正文完
星哥玩云-微信公众号
post-qrcode
 0
星锅
版权声明:本站原创文章,由 星锅 于2024-07-25发表,共计4553字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
【腾讯云】推广者专属福利,新客户无门槛领取总价值高达2860元代金券,每种代金券限量500张,先到先得。
阿里云-最新活动爆款每日限量供应
评论(没有评论)
验证码
【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中