在
SpringBoot中常用的页面模板有
JSP、Freemaker、Thymeleaf（推荐）
1、JSP
1.1、在SpringBoot中访问JSP文件
1、在pom.xml中添加
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
2、创建webapp目录下的test.jsp文件
test.jsp
3、在启动选项中配置
Working directory配置ModuleFileDir
Working directory
4、如果在
pom.xml中配置，则无须第三部设置
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
5、在application.yml下配置如下，即可实现热部署功能
spring:
mvc:
view:
prefix: / #代表放在resources目录下
suffix: .jsp
server:
servlet:
jsp:
init-parameters:
- developement: true
2、Thymeleaf
Thymeleaf是在SpringBoot中推荐使用的页面模板引擎，可以完全取代jsp，可以在没有服务器的环境下战书静态页面
2.1、Thymeleaf的创建
1、在pom.xml中添加依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
1、在application.yml中添加
spring:
thymeleaf:
encoding: UTF-8
prefix: classpath:/templates/ #前缀资源路径
suffix: .html #后缀资源扩展名
enabled: true
servlet:
content-type: text/html
2、参数传递，在Controller中添加如下
HttpServletRequest、Model都可以装配参数
@Controller
public class TestController {
@GetMapping("/testIndex")
public String testIndex(HttpServletRequest request) {
request.setAttribute("name", "SJ");
request.setAttribute("age", 18);
return "index";
}
}
3、resources下的文件目录结构
index.html
classpath:/templates/目录下的内容，默认只能通过转发访问可以通过
spring.resources.static-locations设置静态资源目录，可以直接通过URL访问4、
index.html文件内容
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><!--资源名称-->
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
This is index.html
<div th:text="${name}">div1</div> <!--取变量-->
<div th:text="${age}">div</div> <!--取变量-->
</body>
</html>
属性都是以th:开头
th:text设置的文本不会进行渲染，会覆盖标签中的默认内容
th:utext设置的文本会进行渲染，会覆盖标签中的默认内容
常量表达式
变量表达式（Variable）：${...}
选中变量表达式（Selection Variable）：*{...}
消息表达式（Message）：#{...}
链接表达式（Link URL）：@{...}
片段表达式（Fragment）：~{...}
2.2、Thymeleaf语法
2.2.1、注释
1、注释HTML
< !-- HTML注释 -->
2、解析器级别的注释（parser-level）
< !-- /* -->和< !-- */-->之间的任何内容
只有通过Thymeleaf解析器处理后，才会变成真正的注释
<!--/* -->
<div>多个防守打法</div>
<!--*/-->
3、原形注释（prototype-only）
作为静态页面打开时，是注释
经过Thymeleaf解析器处理后，它是正常标签，不是注释
<!--/*/
<div>原形注释</div>
/*/-->
2.2.2、字面量
1、字面量
<!--抛出异常-->
<div th:text="Hello World"></div>
<!--HelloWorld-->
<div th:text="HelloWorld"></div>
<!--Hello World-->
<div th:text="'Hello World'"></div>
<!--SJ Hello World-->
<div th:text="${name} + ' Hello World'"></div>
<!--${name} Hello World-->
<div th:text="'${name} Hello World'"></div>
<!--SJ Hello World-->
<div th:text="|${name} Hello World|"></div>
<!--true-->
<div th:text="${age} % 2 == 0"></div>
2、局部变量
<!-- isEven 和 myName 为局部变量，子标签优先查找父标签的变量-->
<div th:width="isEven=${age % 2 != 0 }, myName=${name}">
<!-- false-->
<div th:text="${isEven}"></div>
<!-- SJ class="odd"-->
<div th:text="${myName}" th:class="${isEven} ? 'even' : 'odd'"></div>
</div>
2.2.3、选中变量表达式
1、@AllArgsConstructor所有参数构造方法、@NoArgsConstructor无参构造方法
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Person {
private String name;
private Integer age;
}
2、将person对象传入到html中
@Controller
public class TestController {
@GetMapping("/selection")
public String selection(Model model) {
model.addAttribute("person", new Person("SJ", 10));
return "selection";
}
}
3、取出person对象中的属性值
<div th:text="${person.name}"></div>
<div th:object="${person}">
<div th:text="*{id}"></div>
<div th:text="${#object.name}"></div>
</div>
2.2.4、消息表达式
消息表达式可以国际化(internationalization, i18n)的功能
1、在application.yml中配置
spring:
messages:
# 关闭参考系统语言
fallback-to-system-locale: false
# 属性文件名称（默认是messages）
basename: i18n.messages
2、文件的命名格式为basename_语言代码_国家地区，参考
语言代码_国家地区
internationalization
3、调用方式
<!--切换浏览器的使用语言-->
<div th:text="#{login}"></div>
2.2.5、链接表达式
<!--ContextPath: url-->
<!--http://localhost:8080/url/selection-->
<a th:href="@{/selection}">selection</a>
<!--http://localhost:8080/selection-->
<a th:href="@{~/selection}">selection</a>
<hr>
<!--http://localhost:8080/url/i18n?age=18&name=sj-->
<a th:href="@{/i18n(age=18, name='sj')}"></a>
<!--http://baidu.com-->
<a th:href="@{//baidu.com)}"></a>
2.2.6、条件判断
<div th:if="${id > 10}">666</div>
<div th:unless="${id <= 10}">888</div>
<div th:switch="${name}">
<div th:case="'test'">div1</div>
<div th:case="${id}">div2</div>
<div th:case="*">div3</div>
</div>
2.2.7、遍历
<table>
<tr>
<th>row</th>
<th>id</th>
<th>name</th>
</tr>
<tr th:each="person, status : ${persons}">
<td th:text="${status.index}"></td>
<td th:text="${person.id}"></td>
<td th:text="${person.name}"></td>
</tr>
</table>
2.2.8、block，循环包裹div标签
<div>
<th:block th:each="person : ${persons}">
<div th:text="${person.id}"></div>
<div th:text="${person.name}"></div>
</th:block>
</div>
2.2.9、属性设置
<!--设置文本-->
<div>[[${name}]]</div>
<!--设置属性-->
<div th:attr="id='sj', class='aaa'"></div>
<div th:class="aaa" th:attrprepend="class='bbb'" th:attrappend="class=' ccc'"></div>
2.2.10、内置对象
1、基础对象
#ctx、#vars、#locale、#request：HttpServletRequest
#response：HttpServletResponse、
#session，session：HttpSession
#servletContext、application：ServletContext
对应的java代码
@Controller
public class TestController {
@GetMapping("/object")
public String object(HttpServletRequest request, HttpSession session) {
request.setAttribute("name", "request_sj");
session.setAttribute("name", "session_sj");
session.getServletContext().setAttribute("name", "ctx_sj");
return "object";
}
}
html中取值
<div th:text="${#request.getAttribute('name')}"></div>
<div th:text="${#session.getAttribute('name')}"></div>
<div th:text="${session.name}"></div>
<div th:text="${#servletContext.getAttribute('name')}"></div>
<div th:text="${application.name}"></div>
2、工具对象
#execInfo、#messages、#uris、#conversions
#dates、#calendars
#numbers、#strings、#objects、#bools
#arrays、#lists、#sets、#maps
#aggregates、#ids
2.3、视图映射
默认的情况下，SpringBoot会把index视图当做首页(classpath:/templates/index.html)
可以通过WebMvcConfigurer进行视图映射，简化Controller代码
@Configuration
public class SpringMVCConfig implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
// 首页
registry.addViewController("/").setViewName("login");
// 其他页面映射
registry.addViewController("/comment").setViewName("comment");
}
}
网友评论