国际化支持

在我们开发WEB项目的时候，项目可能涉及到在国外部署或者应用，也有可能会有国外的用户对项目进行访问，那么在这种项目中，为客户展现的页面或者操作的信息就需要使用不同的语言，这就是我们所说的项目国际化。目前项目已经支持多语言国际化，接下来我们介绍如何使用。

关于国际化使用流程

1、修改I18nConfig设置默认语言，如默认中文： 

  1. // 默认语言，英文可以设置Locale.US
  2. slr.setDefaultLocale(Locale.SIMPLIFIED_CHINESE);

2、修改配置application.yml中的basename国际化文件，默认是i18n路径下messages文件（比如现在国际化文件是xx_zh_CN.properties、xx_en_US.properties，那么basename配置应为是i18n/xx

  1. spring:
  2.   # 资源信息
  3.   messages:
  4.     # 国际化资源文件路径
  5.     basename: static/i18n/messages

3、i18n目录文件下定义资源文件美式英语 messages_en_US.properties

  1. user.login.username=User name
  2. user.login.password=Password
  3. user.login.code=Security code
  4. user.login.remember=Remember me
  5. user.login.submit=Sign In

中文简体 messages_zh_CN.properties

  1. user.login.username=用户名
  2. user.login.password=密码
  3. user.login.code=验证码
  4. user.login.remember=记住我
  5. user.login.submit=登录

4、html使用国际化#{资源文件key}

  1. <form id="signupForm">
  2.     <h4 class="no-margins">登录：</h4>
  3.     <p class="m-t-md">你若不离不弃，我必生死相依</p>
  4.     <input type="text"     name="username" class="form-control uname"  th:placeholder="#{user.login.username}"   />
  5.     <input type="password" name="password" class="form-control pword"  th:placeholder="#{user.login.password}"   />
  6.     <div class="row m-t" th:if="${captchaEnabled==true}">
  7.         <div class="col-xs-6">
  8.             <input type="text" name="validateCode" class="form-control code" th:placeholder="#{user.login.code}" maxlength="5" autocomplete="off">
  9.         </div>
  10.         <div class="col-xs-6">
  11.             <a href="javascript:void(0);" title="点击更换验证码">
  12.                 <img th:src="@{captcha/captchaImage(type=${captchaType})}" class="imgcode" width="85%"/>
  13.             </a>
  14.         </div>
  15.     </div>
  16.     <div class="checkbox-custom" th:classappend="${captchaEnabled==false} ? 'm-t'">
  17.         <input type="checkbox" id="rememberme" name="rememberme"> <label for="rememberme" th:text="#{user.login.remember}">记住我</label>
  18.     </div>
  19.     <button class="btn btn-success btn-block" id="btnSubmit" data-loading="正在验证登录，请稍后..." th:text="#{user.login.submit}">登录</button>
  20. </form>

5、java代码使用MessageUtils获取国际化

MessageUtils.message("user.login.username")
MessageUtils.message("user.login.password")
MessageUtils.message("user.login.code")
MessageUtils.message("user.login.remember")
MessageUtils.message("user.login.submit")

6、js使用国际化首先在文件引入jquery-i18n-properties依赖，然后在初始化后即可通过JS函数获取对应国际化文件的内容。

<!--jQuery国际化插件-->
<script src="../static/js/jquery.i18n.properties.min.js" th:src="@{/js/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: 'map'//默认值
    });

    //初始化i18n函数
    function i18n(msgKey) {
        try {
            return $.i18n.prop(msgKey);
        } catch (e) {
            return msgKey;
        }
    }

    //获取国际化翻译值
    console.log(i18n('user.login.username'));
    console.log(i18n('user.login.password'));
    console.log(i18n('user.login.code'));
    console.log(i18n('user.login.remember'));
    console.log(i18n('user.login.submit'));
</script>

7、界面定义切换语言

<a href="?lang=en_US"> 英语 </a>  
<a href="?lang=zh_CN"> 中文 </a>