@
spring boot + thymeleaf
1、创建好一个spring boot 项目
创建过程我就不写了，这里有例子
spring boot 代码实例
2、引入Thymeleaf依赖
在pom.xml添加
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>2.3.0.RELEASE</version>
</dependency>
3、application.yml
在yml配置文件添加一下信息
spring:
thymeleaf:
enabled: true #开启thymeleaf视图解析
encoding: utf-8
prefix: classpath:/templates/thymeleaf/
suffix: .html
cache: false
mode: HTML #严格的HTML语法模式
4、创建html
在 templates/thymeleaf下创建 index.html 和 list.html
index.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html>
<head>
<meta charset="UTF-8">
<title>Spring Boot Demo</title>
</head>
<body>
<div>
<h1 style="text-align: center;margin-top: 50px">Spring Boot Demo</h1>
<h2 style="text-align: center" th:text="'请求返回时间：'+${#dates.format(date,'yyyy-MM-dd hh:mm:ss')}">现在时间</h2>
<h2 style="text-align: center" th:text="|内置对象时间：${#dates.format(#dates.createNow(),'yyyy-MM-dd hh:mm:ss')}">内置对象时间</h2>
<h2 style="text-align: center" th:text="${#numbers.formatDecimal(100.123456,0,2)}"></h2>
<h2 style="text-align: center" th:text="${#numbers.formatDecimal(1.123456,3,1)}"></h2>
<h2 style="text-align: center" th:with="cur='自定义变量调用'">
<span th:text="${cur}"></span>
</h2>
<h2 style="text-align: center" th:attr="pname=0,gname=1">自定义属性，看标签内的属性</h2>
<div style="display: table;margin: 0 auto;">
<a href="/json">请求JSON数据</a>    
<a href="/list">请求JSON数据</a>
</div>
</div>
</body>
<script th:inline="javascript">
console.log(/*[[${#dates.format(date,'yyyy-MM-dd hh:mm:ss')}]]*/);
</script>
</html>
list.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>List Data</title>
</head>
<body>
<div>
<h1 style="text-align: center" >List Data</h1>
<h2 style="text-align: center" th:text="|url参数offset:${#httpServletRequest.getParameter('offset')}"></h2>
<h2 style="text-align: center" th:text="|数据量:${#lists.size(list)}"></h2>
<form action="/list" method="get" style="display: table;margin: 0 auto">
<input type="number" name="offset" style=" 100px" th:value="${start}">
<input type="number" name="limit" style=" 100px" th:value="${end}">
<input type="submit" value="筛选数据">
</form>
<table style="margin: 0 auto;border: 1px solid blueviolet;text-align: center" border="1px">
<tr>
<th width="100px">id</th>
<th width="100px">col1</th>
<th width="100px">col2</th>
</tr>
<tr th:each="e:${list}">
<td th:text="${e.id}"></td>
<td th:text="${e.col1}"></td>
<td th:text="${e.col2}"></td>
</tr>
</table>
</div>
</body>
</html>
5、Controller
基本条件创建好后添加测试
@RequestMapping("")
public String test1(Model model) {
model.addAttribute("date", new Date());
return "index";
}
@RequestMapping("/json")
@ResponseBody
public Table1 test2() {
Table1 table1 = new Table1();
table1.setId(201245445);
table1.setCol1(18);
table1.setCol2("返回文本");
return table1;
}
@RequestMapping("list")
public ModelAndView test3(@RequestParam(defaultValue = "0", value = "offset") int start, @RequestParam(defaultValue = "1000", value = "limit") int end) {
ModelAndView model = new ModelAndView();
model.setViewName("list");
model.addObject("start", start);
model.addObject("end", end);
model.addObject("list", table1Service.getData(start-1, limit));
return model;
}