springboot为啦简化项目的开发,提供啦试视图技术,主要推荐整合 模板引擎技术,实现前端页面的动态化内容。本章对springboot的视图技术进行介绍,并用springboot整合常用的Thymeleaf模板引擎,进行视图页面的实现。
4.1 springboot支持的视图技术
前端模板引擎的出现,减少啦前端人员开发的麻烦。springboot支持的模板引擎如下:
springboot不太支持常用的jsp模板,应为存在一些限制。
上面对springboot至此的模板引擎进行啦简单的介绍,接下来介绍常用的Thymeleaf模板引擎,并完成与springboot框架的整合实现。
4.2 Thymeleaf基本语法
它是现基于服务器段的java模板引擎技术,他有丰富的标签语言,函数和表达式。本节将针对Thymeleaf模板技术进行介绍
4.2.1 常用标签
Thymeleaf标签能动态的替换静态内容,动态显示页面内容,
案例:
<!DOCTYPE html>
<!-- xmlns:th="http://www.thymeleaf.org"用于引入引擎 -->
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Document</title>
</head>
<body><!-- th是thymeleaf提供的标签, --><p th:text="#hello">欢迎进入thymeleaf世界</p>
</body>
</html>
下面介绍thymeleaf的常用标签:
关于更多的大家自己查询:Thymeleaf 教程 | 範宗雲
上面不是标准的html5的页面开发,在html5规范不允许使用th:*属性,如果想要thymeleaf模板进行纯html5开发,可以用:data-th-*属性替换th:*属性。
在开发中没有对应属性的快捷键,会比较麻烦,我们只需要引入thymeleaf标签的形式就可以啦。
4.2.2 标准表达式
这几个是最常用的简单语法表达式,还有其他种类的表达式大家可以看官方文档学习。
1.变量表达式:
${。。。}主要用于获取上下文的变量。
//动态获取p标签的内容 ,如果项目启动啦或者上下文有message变量,
//则标签显示的是message变量,反之显示p标签里面的默认内容
<p data-th-text="${message}">Welcome to BeiJing!</p>
thymeleaf为变量的所在域提供啦内置对象,如下:
假设在页面中动态获取当前国家信息:
<span data-th-text="${#locale.country}">Welcome to BeiJing!</span>
当项目启动时,会根据浏览器语言设置来识别当前用户所在国家信息,实现动态替换。
2.选择变量表达式
用法与变量表达式类似,用于从 被选定对象中获取属性值,如果没有选定对象,就和变量表达式一样。
3.消息表达式
4.连接表达式
用于页面跳转或者资源引入:
5.片段表达式
用来标记片段移动到模板中的方法。
这就是简单的thymeleaf模板的基本语法,详细请看官方文档。
下面介绍基本使用:
4.3 thymeleaf基本使用
4.3.1 thymeleaf模板基本配置
1.在springboot中引入thymeleaf依赖:
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
在全局配置文件中配置相关信息:
#是否添加thymeleaf缓存,开发过程中通常会关闭缓存,确保数据能够及时响应
spring.thymeleaf.cache= true
#模板编码
spring.thymeleaf.encoding= UTF-8
#应用于模板的模板模式
spring.thymeleaf.mode= HTML5
#指定thymeleaf模板页面的存放路径
spring.thymeleaf.prefix= classpath:/resources/templates/
#指定thymeleaf模板页面的名称后缀
spring.thymeleaf.suffix= .html
4.3.2 静态资源访问
这里也就是讲解静态资源的路径,以及在哪里寻找静态资源。
这里就讲解啦对前端开发需要使用到的静态资源自动化配置进行啦分析
4.4 使用thymeleaf完成数据的页面展示
这里重点讲解springboot与thymeleaf的整合
1.在springboot项目中引入thymeleaf依赖
2.编写全局配置文件,不过这里需要关闭缓存,
#是否添加thymeleaf缓存,开发过程中通常会关闭缓存,确保数据能够及时响应
spring.thymeleaf.cache= flse
3.创建web控制器类
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 {/*** 获取并封装当前年份跳转到登录页login.html* @param model* @return*/@GetMapping("/toLoginPage")public String toLoginPage(Model model){
//向模块中添加信息model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));return "login";}
}
}
4.创建模板页面并引入静态资源文件
<!DOCTYPE html>
<!--导入thymeleaf模板-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><title>用户登录界面</title>
<!-- 引入外联的静态样式文件--><link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet"><link th:href="@{/login/css/signin.css}" rel="stylesheet"></head>
<body class="text-center">
<!-- 用户登录form表单 -->
<form class="form-signin">
<!-- 引入图片--><img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72"><h1 class="h3 mb-3 font-weight-normal">请登录</h1><input type="text" class="form-control"placeholder="用户名" required="" autofocus=""><input type="password" class="form-control"placeholder="密码" required=""><div class="checkbox mb-3"><label><input type="checkbox" value="remember-me"> 记住我</label></div><button class="btn btn-lg btn-primary btn-block" type="submit">登录</button><!-- 引入啦后台动态传递过来的当前年份的信息,也就是控制器类中的model.addAttribute("currentYear", Calendar.getInstance().get(Calendar.YEAR));这个传递的--><p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p>
</form>
</body>
</html>
做完这些就基本完成啦springboot与thymeleaf的联合。运行项目然后输入网址进行对应的访问就可以啦。
在这里我遇见啦一些问题:
Error resolving template [login], template might not exist or might not be accessible by any of the configured Template Resolvers
好像是因为配置的原因。只需要把配置项弄成案例的样子就好啦
效果如图所示:
4.5 使用thymeleaf配置国际化页面
我们在4.4案例基础上配置国际化页面
1.编写多语言国际化文件以及配置文件
配置目录:
第一个配置文件的代码:
login.tip=\u8BF7\u767B\u5F55
login.username=\u7528\u6237\u540D
login.password=\u5BC6\u7801
login.rememberme=\u8BB0\u4F4F\u6211
login.button=\u767B\u5F55
第二个配置文件的代码:
login.tip=Please sign in
login.username=Username
login.password=Password
login.rememberme=Remember me
login.button=Login
第三个配置文件的代码
login.tip=\u8BF7\u767B\u5F55
login.username=\u7528\u6237\u540D
login.password=\u5BC6\u7801
login.rememberme=\u8BB0\u4F4F\u6211
login.button=\u767B\u5F55
其他语言国际化文件的名称必须严格按照:文件前缀名_语言代码_国家代码.properties 形式命名。
2.编写配置文件(为啦让springboot扫描到对应的文件)
spring.messages.basename=i18n.login
这个的意思就是:il8n表示相对项目类路径resouce的位置,login表示那些文件的前缀,也就是以login为前缀的问价都扫描进去。
3.定制区域信息解析器
进行上面的配置后,就可以正式在 前端页面 中 结合thymeleaf模板 的属性 进行国际化语言 设置和展示啦。这种方式默认使用请求头中的语言信息自动进行语言切换。如果需要项目会有手动语言切换的功能,这就需要定制区域解析器啦。
区域解析器的相关代码如下:
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.lang.Nullable;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;import java.util.Locale;/*** @Classname MyLocalResovel* @Description 自定义区域信息解析器配置类* @Date 2019-3-1 17:24* @Created by CrazyStone*/
@Configuration
public class MyLocalResovel implements LocaleResolver {// 自定义区域解析方式@Overridepublic Locale resolveLocale(HttpServletRequest httpServletRequest) {// 获取页面手动切换传递的语言参数lString l = httpServletRequest.getParameter("l");// 获取请求头自动传递的语言参数Accept-LanguageString header = httpServletRequest.getHeader("Accept-Language");Locale locale=null;// 如果手动切换参数不为空,就根据手动参数进行语言切换,否则默认根据请求头信息切换if(!StringUtils.isEmpty(l)){
// l.split("_");根据 _ 字符来拆分l中的字符串String[] split = l.split("_");locale=new Locale(split[0],split[1]);}else {// Accept-Language: en-US,en;q=0.9,zh-CN;q=0.8,zh;q=0.7String[] splits = header.split(",");String[] split = splits[0].split("-");locale=new Locale(split[0],split[1]);}return locale;}@Overridepublic void setLocale(HttpServletRequest httpServletRequest, @NullableHttpServletResponse httpServletResponse, @Nullable Locale locale) {}// 将自定义的MyLocalResovel类重新注册为一个类型LocaleResolver的Bean组件@Beanpublic LocaleResolver localeResolver(){return new MyLocalResovel();}
}
在该类实现LocaleResovel接口,并且重写该接口的resolveLocale()方法 解析自定义语言。使用@Bean注解将当前配置类注册成spring容器 中的一个组件,这样子是为啦覆盖默认的LocaleResovel组件。在重写的方法中,可以根据不同的需求 切换 语言信息 从而获取请求的参数,请求参数不为空,才可以进行切换。
4.页面国际化的使用,在html页面中使用
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no"><title>用户登录界面</title><link th:href="@{/login/css/bootstrap.min.css}" rel="stylesheet"><link th:href="@{/login/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<!-- 用户登录form表单 -->
<form class="form-signin"><img class="mb-4" th:src="@{/login/img/login.jpg}" width="72" height="72">
<!-- 配置文件中的对应属性,进行标签内容的国际化展示,我个人认为是获取配置文件中的属性,然后把标签的内容进行对应语言的翻译--><h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">请登录</h1><!-- 配置文件中的对应属性,进行标签内容的国际化展示,我个人认为是获取配置文件中的属性,然后把标签的内容进行对应语言的翻译--><input type="text" class="form-control"th:placeholder="#{login.username}" required="" autofocus=""><!-- 配置文件中的对应属性,进行标签内容的国际化展示,我个人认为是获取配置文件中的属性,然后把标签的内容进行对应语言的翻译--><input type="password" class="form-control"th:placeholder="#{login.password}" required=""><div class="checkbox mb-3"><label>
<!-- 在这里 input 使用login.rememberme进行配置,在标签外进行设置。动态获取配置文件中的属性--><input type="checkbox" value="remember-me"> [[#{login.rememberme}]]</label></div><button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.button}">登录</button><p class="mt-5 mb-3 text-muted">© <span th:text="${currentYear}">2018</span>-<span th:text="${currentYear}+1">2019</span></p><!-- 在页面中通过添加这两个标签,动态的更改l的值,从而实现更改语言--><a class="btn btn-sm" th:href="@{/toLoginPage(l='zh_CN')}">中文</a><a class="btn btn-sm" th:href="@{/toLoginPage(l='en_US')}">English</a>
</form>
</body>
</html>
如果出现访问的登录页面出现啦乱码是因为idea的编码用的是gbk,需要修改对应的编码格式就可以啦。
这里就介绍完啦thymeleaf模板与springboot的结合使用啦。
希望通过本章的学习,大家可以在实际开发中灵活运用springboot与thymeleaf模板进行视图页面开发。
课后习题:
这个是第三章的习题答案
大家自行定制任务完成本章节的目标。