最近在网上找了一个有关账单管理的 spring boot 项目, 其中有一部分是涉及显示国际化信息的, 即将页面上的中英文进行转换. 因为在这之前这部分内容没有接触过, 所以在这记录下过程.
中文效果图如下所示:
英文效果图如下所示:
从上面两幅图可以看出在切换中英文时有五个部分的内容发送改变. 分别是: 用户名 (Username), 密码 (Password), 记住我 (Remember Me), 登录 (Sign), 重置 (REST).
第一部分, 先在 resources 目录下新建一个 I18N 文件夹, 并在该文件夹下新建一个 Resource Bundle. 如下图所示:
并在跳出的弹框内写入以下信息:
点击 "OK" 后就会在 I18N 目录下生成 3 个后缀名为 ".properties" 的文件. 如下所示:
第二部分, 分别在这三个文件中填入相应信息.
login.properties 表示默认显示的信息. login.password,login.remember,login.reset,login.submit,login.username 是自己设置的 key 值, 用于在 html 中显示. 后面的是将要显示的内容.
login.password = 密码
login.remember = 记住我
login.reset = 重置
login.submit = 登录
login.username = 用户名
- login_en_US.properties
- login.password=Password
- login.remember=Remember Me
- login.reset=REST
- login.submit=Sign
- login.username=Username
- login_zh_CN.properties
login.password = 密码
login.remember = 记住我
login.reset = 重置
login.submit = 登录
login.username = 用户名
第三部分, 在 HTML 相应位置填入 key 值, 并在点击 "中文" 或 "English" 发出不同请求信息.
注意: 在这个项目中使用的模板是 thymeleaf, 因此需要现在开始的 HTML 标签内引入该模板的标签.
根据 thymeleaf 的文档
显示国际化信息时用到的 "#{}" 而不是 "${}".
由于这个 "记住我" 是 < input > 单标签的没有标签体, 根据 thymeleaf 文档发现需要使用 "[[#{}]]" 或 "[(#{})]" 行内表达式.
当点击 "中文" 时附带请求信息 "zh_CN", 点击英文时附带请求信息 "en_US".
login.HTML 代码如下所示:
- <!DOCTYPE HTML>
- <HTML xmlns:th="http://www.thymeleaf.org">
- <head lang="en" th:replace="main/public :: #public_head">
- </head>
- <body class="login_bg">
- <section class="loginBox">
- <header class="loginHeader">
- <h1>
- 轻舟万里账单管理系统
- </h1>
- </header>
- <section class="loginCont">
- <!--<div style="color:red; margin-left: 130px"> 用户名错误!</div>-->
- <form class="loginForm" action="../main/index.html">
- <div class="inputbox">
- <label for="user" th:text="#{login.username}">
- Username
- </label>
- <input id="user" type="text" name="username" required/>
- </div>
- <div class="inputbox">
- <label for="mima" th:text="#{login.password}">
- Password
- </label>
- <input id="mima" type="password" name="password" required/>
- </div>
- <div class="subBtn">
- <input type="checkbox">
- [[#{login.remember}]]
- </div>
- <br/>
- <div class="subBtn">
- <input type="submit" th:value="#{login.submit}" value="Sign" />
- <input type="reset" th:value="#{login.reset}" value="Reset" />
- </div>
- <br/>
- <div style="margin-left: 100px;">
- <a href="#" th:href="@{/index.html(l='zh_CN')}">
- 中文
- </a>
- <a href="" th:href="@{/index.html(l='en_US')}">
- English
- </a>
- </div>
- </form>
- </section>
- </section>
- </body>
- </HTML>
login.HTML
第四部分, 设置区域解析器
在页面上显示中文还是英文是由请求信息头中 "accept-language" 的决定的, 默认是中文. 我们只要将点击所附带的请求信息传递给 "accept-language" 就会使页面的中英文改变.
spring boot 中有一个 webMvcAutoConfiguration 类, 提供了本地区域解析器. 如下图所示:
该本地区域解析器上有个注解 @ConditionalOnMissingBean 表示如果容器中没有这个 bean, 就将这个 bean 放到容器中, 如果有就使用已经存在的.
从下面的代码片段中可以看到有一个请求头本地区域解析器 AcceptHeaderLocaleResolver 实现了 LocaleResolver 接口.
因此我们可以在 component 包下新建一个自定义区域解析器 MyLocaleResolver, 该类需要实现接口 LocaleResolver, 重写方法, 根据请求的参数构造一个 Local 返回.
- package club.nipengfei.springboot.component;
- import org.springframework.Web.servlet.LocaleResolver;
- import org.thymeleaf.util.StringUtils;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- import java.util.Locale;
- /**
- * 自定义区域解析器
- */
- public class MyLocaleResolver implements LocaleResolver {
- @Override
- public Locale resolveLocale(HttpServletRequest httpServletRequest) {
- // 获取自定义请求头信息
- String l = httpServletRequest.getParameter("l");
- // 获取系统默认的区域信息
- Locale locale = Locale.getDefault();
- if (!StringUtils.isEmpty(l)){
- String[] split = l.split("_");
- // 接收第一个参数为语言代码, 第二个参数为国家代码
- locale = new Locale(split[0],split[1]);
- }
- return locale;
- }
- @Override
- public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
- }
- }
将其添加到容器中, 在 config 包下新建一个 MySpringMvcConfigure, 在该类的 localeResolver 方法中返回 LocaleResolver, 注意使用注解 @Bean. 代码如下所示:
- package club.nipengfei.springboot.config;
- import club.nipengfei.springboot.component.MyLocaleResolver;
- import org.springframework.context.annotation.Bean;
- import org.springframework.context.annotation.Configuration;
- import org.springframework.Web.servlet.LocaleResolver;
- import org.springframework.Web.servlet.config.annotation.ViewControllerRegistry;
- import org.springframework.Web.servlet.config.annotation.WebMvcConfigurer;
- @Configuration
- public class MySpringMvcConfigure {
- @Bean
- public WebMvcConfigurer webMvcConfigurer(){
- return new WebMvcConfigurer() {
- // 添加视图控制器
- @Override
- public void addViewControllers(ViewControllerRegistry registry) {
- registry.addViewController("/").setViewName("/main/login");
- registry.addViewController("/index.html").setViewName("/main/login");
- }
- };
- }
- // 区域解析器
- @Bean
- public LocaleResolver localeResolver(){
- return new MyLocaleResolver();
- }
- }
第五部分, 在这过程中遇到的问题.
中英文显示乱码, 解决方法是修改 properties 文件编码, 改为 UTF-8. 参考: 解决 IntelliJ IDEA 中 I18N 国际化 中文乱码问题.
无法访问到 login 页面, 因为 login.HTML 页面在 template/main 目录下. 解决方法是添加视图控制器.
来源: https://www.cnblogs.com/qzwl/p/12068835.html