一、使用Thymeleaf配置国际化页面
使用场景:不同国家使用不同的语言,此例对登录页面login.html进行中英两个语言国际化处理
(一)创建Spring Boot项目 - ThymeleafI18N
.将上一讲Thymeleaf中的登录控制器、Bootstrap、模板页面、应用属性文件拷贝到新项目
(二)编写多语言国际化配置文件
1、在resources下创建i18n目录
2、在i18n目录里创建login.properties
login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录
3、在i18n目录里创建login_zh_CN.properties
login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录
4、在i18n目录里创建login_en_US.properties
login.title = User Login
login.username = Enter Username
login.password = Enter Password
login.rememberme = Remember Me
login.button = Login
package net.hw.lesson10.resolver;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
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;
@Configuration
public class MyLocaleResolver implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
// 获取区域标识
String flag = httpServletRequest.getParameter("flag");
// 获取默认区域对象
Locale locale = Locale.getDefault();
// 判断区域标识是否为空
if (!StringUtils.isEmpty(flag)) {
// 对区域标识进行拆分处理
String[] splits = flag.split("_"); // 使用下划线切分字符串,返回一个字符串数组,如zh_CN --> ["zh", "CN"]
// 利用区域标识创建区域对象
locale = new Locale(splits[0], splits[1]);
}
// 返回区域对象
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
@Bean // 定义Bean组件,交给Spring容器管理
public LocaleResolver localeResolver() {
return new MyLocaleResolver();
}
}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<link th:href="@{/bootstrap-4.0.0/css/bootstrap.css}" rel="stylesheet">
<javascript th:src="@{/bootstrap-4.0.0/js/jquery-3.4.1.min.js}"></javascript>
<javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.bundle.js}"></javascript>
<javascript th:src="@{/bootstrap-4.0.0/js/bootstrap.js}"></javascript>
</head>
<body>
<div class="col-6 m-auto" style="margin-top:30px!important;">
<div class="text-center">
<span th:text="${currentYear}">今年</span> -
<span th:text="${currentYear} + 1">明年</span>
</div>
<div class="border border-info bg-light p-2" style="border-radius: 5px">
<form action="/login" method="post">
<h3 class="text-center" th:text="#{login.title}">用户登录</h3>
<div class="mt-1">
<input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.username}" required
autofocus>
</div>
<div class="mt-1">
<input type="password" id="password" name="password" class="form-control" th:placeholder="#{login.password}" required>
</div>
<div class="checkbox text-center">
<label>
<input class="form-check-input text-center" type="checkbox" id="remember-me">[[#{login.rememberme}]]
</label>
</div>
<div>
<button class="btn btn-lg btn-primary btn-block" id="login" type="submit" th:text="#{login.button}">登录</button>
</div>
<div class="text-center">
<a class="btn btn-sm" th:href="@{/toLoginPage(flag='zh_CN')}">中文</a>
<a class="btn btn-sm" th:href="@{/toLoginPage(flag='en_US')}">English</a>
</div>
</form>
</div>
</div>
</body>
</html>
(六)整合效果测试