Thymeleaf
Thymeleaf常用标签
有点像小程序和vue.js
语法
https://blog.csdn.net/weixin_45636641/article/details/108249715
${…}来获取model中的变量，访问上下文中所有变量
#{…}来获取内置对象的值，配置文件中的值可通过这个获取
@{…} 链接
*{…}在循环中可使用该表达式表示当前循环的对象
实例测试
目录结构
引入动态数据
依赖引入
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
全局配置文件
spring.thymeleaf.cache=false # 是否启用缓存
spring.thymeleaf.encoding=UTF-8 # 模板编码
spring.thymeleaf.mode=HTML # 模板模式
spring.thymeleaf.prefix=classpath:/templates/ # 模板路径,路径默认从resources开始
spring.thymeleaf.suffix=.html # 模板后缀
前端页面效果
前端的 html 建于 templates 文件（模板文件夹）下，其余的css、js、images等文件建与static（静态资源文件夹）文件下
前端代码
html
用了 Bootstrap框架，比较简单就不多写了，可以去菜鸟教程学下，很简单的
https://www.runoob.com/bootstrap/bootstrap-tutorial.html
注意代码中 $、# 、@ 的使用区别
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- href 中的路径都是默认从 static 开始的 -->
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/login.css}" rel="stylesheet">
</head>
<body>
<form class="sign">
<img class="img-circle img" th:src="@{/login/images/hr.jpg}">
<h2>请登录</h2>
<div class="form-group">
<input type="text" class="form-control user" placeholder="请输入用户名">
</div>
<div class="form-group">
<input type="password" class="form-control user" placeholder="请输入密码">
</div>
<button class="btn btn-primary btn-block user" type="submit">登录</button>
<p class="text-center year">
@
<span th:text="${currentYear}">2018</span>
-
<span th:text="${currentYear}+1">2019</span>
</p>
<a class="lang"> 中文 </a>
<a class="lang"> English </a>
</form>
</body>
</html>
login.css
（我已经很久没有敲前端了，敲的时候太费劲了，所以css都用的是比较简单的东西)
.img{
width: 140px;
height: 140px;
}
.sign{
margin: 60px auto;
/*background: #2b542c;*/
width: 800px;
height: 835px;
text-align: center;
}
.user{
width: 35%;
display: inline;
font-size: 18px;
height: 40px;
}
.year{
margin-top: 30px;
}
.lang{
margin-top: 30px;
margin-left: 20px;
font-size: 15px;
}
控制类
编写一个控制类用于访问页面和编写页面动态数据
package com.zknu.inter.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import java.util.Calendar;
@Controller
public class LoginController {
@GetMapping("/login") // 访问路径
public String getYear(Model model){
model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR)); // 获取当前年份
return "login"; // 将值返回到login.html的路径
// 与配置文件中的 prefix 相接 /templates/login
}
}
注意！
控制类中的返回值其实是一个路径，要与 全局配置文件中的 prefix 相接，如果 prefix 写的是 /templates 那返回值就要写 /login
启动项目（运行启动类），访问 localhost:8080/login
发现静态页面中的2018-2019已被 控制类中的year代替，实现了动态数据的显示
国际化
实现页面中英文的切换
在resources下创建 i18n文件夹 ，用于存放多语言国家化文件。
国际化文件名命必须按照“ 文件前缀_语言代码_国家代码.properties”
默认的语言配置文件是 XXX.properties，因此，XXX.properties文件是必须要有的，后续再根据需要添加国家化文件。
eg.
拥有中英文两种语言的页面需有三个配置文件：
xxx.properties 、xxx_en_US.properties、xxx_zh_CN.properties
国家化文件是会被Spring用组的形式自动管理的
建完之后长这样：
遗留问题：
在建 zh_CN文件时，不管用哪种方法建都不会被组管理，其他的语言都可以被统一管理，中文繁体也可以被管理，只有 中文简体不可以，不知道是为什么，有没有人可以解答一下下。
国家化文件内容
login.properties、login_zh.properties:
login.tip = 请登录
login.username = 请输入用户名
login.password = 请输入密码
login.button = 登录
login_en_US.properties:
login.tip = Please sign in
login.username = username
login.password = password
login.button = Sign in
属性与前端页面相对应
国际化后的前端
注意 @、$、# 的使用
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登录</title>
<link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/login/css/login.css}" rel="stylesheet">
</head>
<body>
<form class="sign">
<img class="img-circle img" th:src="@{/login/images/hr.jpg}">
<h2 th:text="#{login.tip}">请登录</h2>
<div class="form-group">
<input type="text" class="form-control user" th:placeholder="#{login.username}">
</div>
<div class="form-group">
<input type="password" class="form-control user" th:placeholder="#{login.password}">
</div>
<button class="btn btn-primary btn-block user" type="submit" th:text="#{login.button}">登录</button>
<p class="text-center year">
@
<span th:text="${currentYear}">2018</span>
-
<span th:text="${currentYear}+1">2019</span>
</p>
<a class="lang" th:href="@{/login(lang='zh_CN')}"> 中文 </a>
<a class="lang" th:href="@{/login(lang='en_US')}"> English </a>
<!-- href 中的 (lang=XXX) 是thymeleaf的传参方式，如同 PHP 用 ? 传参一样-->
</form>
</body>
</html>
定制解析器
用解析器完成国际化语言的展示。
在config包中建自定义配置类 MyLocalResovel，重写 LocaleResolver 接口中的 resolveLocale 方法
package com.zknu.inter.config;
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 MyLocalResovel implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest httpServletRequest) {
String lang = httpServletRequest.getParameter("lang");
// 获取地址栏中传的参数
String header = httpServletRequest.getHeader("Accept-Language");
Locale locale = null;
if(!StringUtils.isEmpty(lang)){
String[] split = lang.split("_");
locale = new Locale(split[0],split[1]);
}
else {
String[] splits = header.split(",");
String[] split = splits[0].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 MyLocalResovel();
}
}
逐句分析下重写的 resolveLocale 方法
Locale 表示一个地区，每一个Locale都代表这一个特定的地区
String lang = httpServletRequest.getParameter("lang");
获取到传递的参数值
eg. lang = en_US
String header = httpServletRequest.getHeader("Accept-Language");
获得请求头自动传递的参数
eg. header = zh-CN,zh;q=0.9
// lang = en_US
if(!StringUtils.isEmpty(lang)){
String[] split = lang.split("_");
// split= {en，US}
locale = new Locale(split[0],split[1]);
}
StringUtils 是String 类型操作方法的补充，比原生String操作字符串更安全。
如果 lang 不为空，用 _ 截取字符串
new Locale(split[0],split[1]) 创建了一个语言为 en 国家是 US 的对象
// header = zh-CN,zh;q=0.9
else {
String[] splits = header.split(",");
// splits = {zh-CN,zh}
String[] split = splits[0].split("-");
// split = {zh,CN}
locale = new Locale(split[0],split[1]);
}
lang字符串为空 ，即没有进行手动传参，则根据浏览器的设置选择默认语言。
返回一个 语言为 zh 国家为 CN 的对象。
总感觉这篇写的有点乱，是因为写到一半我出去玩的原因吗？？？？？