导读

由于项目需要，需要搞下页面国际化语言处理（中英文切换），这里写了个demo，来完成中英文切换，这里只是一个登录页面，如果做到全网站，类同。

使用

1、新建一个SpringBoot项目

image.png

InterPageController跳转页面：

  1. import org.springframework.stereotype.Controller;
  2. import org.springframework.web.bind.annotation.RequestMapping;
  4. import java.util.Map;
  6. @Controller
  7. @RequestMapping("/inter")
  8. public class InterPageController {
  10.     @RequestMapping("/login")
  11.     public String interPage(Map<String, Object> map) {
  12.         return "interPage";
  13.     }
  14. }

2、新建一个登录页面

我这里登录页面起名叫interPage.html。页面样式如下：
image.png

3、修改application.properties

SpringBoot默认国际化文件为：classpath:message.properties。 如果放在其它文件夹中，则需要在application.properties配置属性spring.messages.basename属性。我这里是新建了i18n文件夹来存放。

  1. #表示放在classpath的i18n文件夹，文件前缀为laguage  
  2. spring.messages.basename=i18n.laguage

对应的yml配置：

  1. spring:
  2.   application:
  3.       name: inter
  4.   messages:
  5.     basename: i18n.laguage

4、添加国际化语言文件

laguage.properties：默认(首次进入)

  1. laguage.user.name=邮箱
  2. laguage.user.password=密码
  3. laguage.user.remember=记住我
  4. laguage.user.btn=登录

laguage_zh_CN.properties：

  1. laguage.user.name=邮箱
  2. laguage.user.password=密码
  3. laguage.user.remember=记住我
  4. laguage.user.btn=登录

laguage_en_US.properties：

  1. laguage.user.name=Email
  2. laguage.user.password=Password
  3. laguage.user.remember=Remember me
  4. laguage.user.btn=Sign In

5、自定义国际化语言解析器

  1. import org.apache.commons.lang3.StringUtils;
  2. import org.springframework.web.servlet.LocaleResolver;
  4. import javax.servlet.http.HttpServletRequest;
  5. import javax.servlet.http.HttpServletResponse;
  6. import javax.servlet.http.HttpSession;
  7. import java.util.Locale;
  9. /**
  10.  * 国际化语言解析器(自定义)
  11.  */
  12. public class MyLocaleResolver implements LocaleResolver {
  14.     private static final String I18N_LANGUAGE = "i18n_language";
  15.     private static final String I18N_LANGUAGE_SESSION = "i18n_language_session";
  17.     @Override
  18.     public Locale resolveLocale(HttpServletRequest req) {
  19.         String i18n_language = req.getParameter(I18N_LANGUAGE);
  20.         Locale locale = Locale.getDefault();
  21.         if (!StringUtils.isEmpty(i18n_language)) {
  22.             String[] language = i18n_language.split("_");
  23.             locale = new Locale(language[0], language[1]);
  25.             //将国际化语言保存到session
  26.             HttpSession session = req.getSession();
  27.             session.setAttribute(I18N_LANGUAGE_SESSION, locale);
  28.         } else {
  29.             //如果没有带国际化参数，则判断session有没有保存，有保存，则使用保存的，也就是之前设置的，避免之后的请求不带国际化参数造成语言显示不对
  30.             HttpSession session = req.getSession();
  31.             Locale localeInSession = (Locale) session.getAttribute(I18N_LANGUAGE_SESSION);
  32.             if (localeInSession != null) {
  33.                 locale = localeInSession;
  34.             }
  35.         }
  36.         return locale;
  37.     }
  39.     @Override
  40.     public void setLocale(HttpServletRequest req, HttpServletResponse res, Locale locale) {
  42.     }
  43. }

6、将配置放到容器中

  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.servlet.LocaleResolver;
  4. import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
  5. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
  7. @Configuration
  8. public class MyMvcConfig implements WebMvcConfigurer {
  9.     @Override
  10.     public void addViewControllers(ViewControllerRegistry registry) {
  11.         registry.addViewController("/inter/login").setViewName("interPage.html");
  12.     }
  14.     /**
  15.      * 添加区域信息解析器
  16.      * @return
  17.      */
  18.     @Bean
  19.     public LocaleResolver localeResolver(){
  20.         return new MyLocaleResolver();
  21.     }
  22. }

7、页面样式修改

interPage.html：

  1. <!DOCTYPE html>
  2. <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>国际化页面</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
  8.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  9.           integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  11.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  12.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
  13.             integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  14.             crossorigin="anonymous"></script>
  15. </head>
  16. <body>
  17. <div class="container">
  18.     <!--导航-->
  19.     <nav class="navbar navbar-inverse">
  20.         <div class="container-fluid">
  21.             <!-- Brand and toggle get grouped for better mobile display -->
  22.             <div class="navbar-header">
  23.                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
  24.                         data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
  25.                     <span class="sr-only">Toggle navigation</span>
  26.                     <span class="icon-bar"></span>
  27.                     <span class="icon-bar"></span>
  28.                     <span class="icon-bar"></span>
  29.                 </button>
  30.                 <a class="navbar-brand" href="#">Brand</a>
  31.             </div>
  33.         </div><!-- /.container-fluid -->
  34.     </nav>
  35.     <!--登录-->
  36.     <form class="form-horizontal">
  37.         <div class="form-group">
  38.             <span for="inputEmail3" class="col-sm-2 control-label" th:text="#{laguage.user.name}"></span>
  39.             <div class="col-sm-10">
  40.                 <input type="email" class="form-control" id="inputEmail3" th:placeholder="'请输入'+ #{laguage.user.name}">
  41.             </div>
  42.         </div>
  43.         <div class="form-group">
  44.             <span for="inputPassword3" class="col-sm-2 control-label" th:text="#{laguage.user.password}"></span>
  45.             <div class="col-sm-10">
  46.                 <input type="password" class="form-control" id="inputPassword3"
  47.                        th:placeholder="#{laguage.user.password}">
  48.             </div>
  49.         </div>
  50.         <div class="form-group">
  51.             <div class="col-sm-offset-2 col-sm-10">
  52.                 <div class="checkbox">
  53.                     <label>
  54.                         <input type="checkbox"> <span th:text="#{laguage.user.remember}"></span>
  55.                     </label>
  56.                 </div>
  57.             </div>
  58.         </div>
  59.         <div class="form-group">
  60.             <div class="col-sm-offset-2 col-sm-10">
  61.                 <button type="submit" class="btn btn-primary" th:text="#{laguage.user.btn}">Sign in</button>
  62.             </div>
  63.         </div>
  64.         <a type="submit" class="btn btn-success" th:href="@{/inter/login(i18n_language=zh_CN)}">中文</a>
  65.         <a type="submit" class="btn btn-info" th:href="@{/inter/login(i18n_language=en_US)}">English</a>
  66.     </form>
  67. </div>
  68. </body>
  69. </html>

8、样例展示

  • 首页：由于带缓存，所以有可能是英文也有可能是中文，第一次默认进入的是中文界面。

image.png
image.png

  • 英文页面：

image.png

  • 中文页面：

image.png

9、项目目录

image.png

注意

1、页面乱码

image.png
解决办法：
修改Application.properties文件，添加spring.messages.encoding=gbk

  1. spring:
  2.   application:
  3.       name: inter
  4.   messages:
  5.     basename: i18n.laguage
  6.         encoding: gbk #选择合适的编码格式

最终成果：

image.png

2、拦截器配置

拦截器配置一定要与前台页面相对应，不然容易出现错误。

END

搞定~