文章目录
一、使用Thymeleaf配置国际化页面
1、创建Spring项目
2、添加依赖
- 热部署
- 网页
- 百里香叶模板
3、拷贝ThymeleafDemo部分内容
4、设置登录属性的语言
- 在i18n目录里创建login.properties
login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录
- 在i18n目录里创建login_zh_CN.properties
login.title = 用户登录
login.username = 输入用户名
login.password = 输入密码
login.rememberme = 记住我
login.button = 登录
#中文
- 在i18n目录里创建login_en_US.properties
login.title = User Login
login.username = Enter Username
login.password = Enter Password
login.rememberme = Remember Me
login.button = Login
#英文
5、全局配置文件
- 添加国际化文件基础名设置
6、定制区域信息解析器
- 创建一个用于定制国际化功能区域信息解析器的自定义配置类MyLocalResolver
- resolveLocale()方法进行自定义语言解析
- 最后使用@Bean注解将当前配置类注册成Spring容器
package net.zy.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;
//2021.5.26 自定义区域信息解析器
@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[] split = flag.split("_");
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
@Bean
public LocaleResolver localeResolver() {
return new MyLocaleResolver();
}
}
7、页面国际化功能使用
- 添加动态属性，用#从配置文件中获取数据
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
<meta charset="UTF-8">
<title>用户登录</title>
<!-- 集成Bootstrap-->
<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>
<!--分区占窗口一半宽度（水平方向按12个单位平分）、水平居中、顶边距30个像素-->
<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>
<!-- 设置上外边距为1个单位-->
<div class="mt-1">
<input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.username}" autofocus required>
</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>
8、整合效果测试
- 访问http://localhost:8080/toLoginPage
-
使用yam不会报错，本例使用properties
-
解决办法：修改项目的编码方式为UTF-8；修改全局配置文件中的中文乱码
-
运行结果
- 测试中英文
二、Thymeleaf复杂数据的展示
1、创建用户实体类
- 无参、有参构造方法
- get、set方法
- toString方法
2、创建用户控制器
package net.zy.lesson10.controller;
import net.zy.lesson10.bean.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import javax.servlet.http.HttpServletRequest;
import java.util.ArrayList;
import java.util.List;
@Controller
public class UserController {
@RequestMapping("/allUsers")
public String allUsers(HttpServletRequest request, Model model) {
model.addAttribute("users", getUsers());
return "allUsers"; // 模板页面文件名
}
//用户列表
private List<User> getUsers() {
List<User> users = new ArrayList<>();
users.add(new User(1, "李红玉", "女", 20));
users.add(new User(2, "肖雨涵", "男", 18));
users.add(new User(3, "唐忠刚", "男", 19));
users.add(new User(4, "郑小红", "女", 18));
users.add(new User(5, "陆文君", "女", 19));
return users;
}
}
3、创建显示全部用户信息模板页面
<!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-sm-12 col-md-8 col-xl-4 text-center m-auto border-warning border bg-light"
style="margin-top: 20px!important;">
<p class="text-success h4">查询到的用户信息</p>
<table class="table table-hover">
<tr class="row">
<th class="col-sm-3 col-md-3 col-xl-3 text-center">编号</th>
<th class="col-sm-3 col-md-3 col-xl-3 text-center">姓名</th>
<th class="col-sm-3 col-md-3 col-xl-3 text-center">性别</th>
<th class="col-sm-3 col-md-3 col-xl-3 text-center">年龄</th>
</tr>
<tr class="row" th:if="${users} ne null" th:each="user:${users}">
<td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.id}"></td>
<td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.name}"></td>
<td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.gender}"></td>
<td class="col-sm-3 col-md-3 col-xl-3 text-center" th:text="${user.age}"></td>
</tr>
</table>
</div>
</body>
</html>