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
注意代码中 $、# 、@ 的使用区别
<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>请登录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}">2018span>
-
<span th:text="${currentYear}+1">2019span>
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”
语言代码 和 国家代码:
https://blog.csdn.net/asty9000/article/details/81294846?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
默认的语言配置文件是 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
属性与前端页面相对应
国际化后的前端
注意 @、$、# 的使用
<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}">2018span>
-
<span th:text="${currentYear}+1">2019span>
p>
<a class="lang" th:href="@{/login(lang='zh_CN')}"> 中文 a>
<a class="lang" th:href="@{/login(lang='en_US')}"> English a>
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");
获取到传递的参数值
String header = httpServletRequest.getHeader("Accept-Language");
获得请求头自动传递的参数
// 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 的对象。
总感觉这篇写的有点乱,是因为写到一半我出去玩的原因吗?????