完整代码地址在结尾!!
第一步,在pom.xml加入依赖,如下
<!-- web依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- thymeleaf依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- 简化w3c标准开发依赖 -->
<dependency>
<groupId>net.sourceforge.nekohtml</groupId>
<artifactId>nekohtml</artifactId>
</dependency>
第二步,配置application.yml,如下
spring:
thymeleaf:
cache: false # 关闭thymeleaf缓存,开发时使用,否则没有实时画面
check-template-location: true # 检查模板是否存在,然后再呈现
enabled: true # 启用MVC Thymeleaf视图分辨率
encoding: utf-8
mode: HTML # 指定模板编码
prefix: classpath:/templates # 设置thymeleaf路径默认为src/main/resources/templates
servlet:
content-type: text/html # Content-Type值
suffix: .html # 构建URL时附加查看名称的后缀.
server:
port: 8082
servlet:
context-path: /templates # 在构建URL时的前缀
第三步,在src/main/resources目录下创建templates文件夹,用于放html文件,并创建index.html
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<span>访问 Model:</span><span th:text="${model}"></span>
</div>
<div>
<span>访问列表</span>
<table>
<thead>
<tr>
<th>id:</th>
<th>姓名:</th>
<th>年龄:</th>
<th>性别:</th>
</tr>
</thead>
<tbody>
<tr th:each="t : ${list}">
<td th:text="${t.id}"></td>
<td th:text="${t.name}"></td>
<td th:text="${t.age}"></td>
<td th:text="${t.sex}"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
常用th属性:
th:text:文本替换;
th:utext:支持html的文本替换。
th:value:属性赋值
th:each:遍历循环元素
th:if:判断条件,类似的还有th:unless,th:switch,th:case
th:insert:代码块引入,类似的还有th:replace,th:include,常用于公共代码块提取的场景
th:fragment:定义代码块,方便被th:insert引用
th:object:声明变量,一般和*{}一起配合使用,达到偷懒的效果。
th:attr:设置标签属性,多个属性可以用逗号分隔
第四步,分别创建类Test,iTestService,TestServiceImpl,TestController用于测试
Test
import lombok.Data;
import java.io.Serializable;
/**
* @Description:
* @Author: luoyu
* @Date: 2020/4/12 下午1:24
* @Version: 1.0.0
*/
@Data
public class Test implements Serializable {
private String id;
private String name;
private int age;
private String sex;
}
iTestService
import com.luoyu.thymeleaf.entity.Test;
import java.util.List;
/**
* @Description:
* @Author: luoyu
* @Date: 2020/4/12 下午1:23
* @Version: 1.0.0
*/
public interface iTestService {
/**
* @Author: luoyu
* @Description: 随机返回一组数据用于展示
* @Date: 2020/5/10 4:43 下午
* @Return: java.util.List<com.jinhaoxun.thymeleaf.pojo.Test>
* @Throws:
*/
List<Test> getTest();
}
TestServiceImpl
import com.luoyu.thymeleaf.entity.Test;
import com.luoyu.thymeleaf.service.iTestService;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
/**
* @Description:
* @Author: luoyu
* @Date: 2020/4/12 下午1:27
* @Version: 1.0.0
*/
@Service
public class TestServiceImpl implements iTestService {
/**
* @Author: luoyu
* @Description: 随机返回一组数据用于展示
* @Date: 2020/5/10 4:43 下午
* @Return: java.util.List<com.jinhaoxun.thymeleaf.pojo.Test>
* @Throws:
*/
@Override
public List<Test> getTest() {
List<Test> testList = new ArrayList<>();
Random random = new Random();
int count = random.nextInt(30);
for (int i = 0; i < count; i++) {
Test test = new Test();
if(i%3 == 0){
test.setId("123");
test.setName("李白");
test.setAge(18);
test.setSex("男");
}else if(i%3 == 1){
test.setId("456");
test.setName("韩信");
test.setAge(20);
test.setSex("男");
}else {
test.setId("789");
test.setName("露娜");
test.setAge(16);
test.setSex("女");
}
testList.add(test);
}
return testList;
}
}
TestController
import com.luoyu.thymeleaf.entity.Test;
import com.luoyu.thymeleaf.service.iTestService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import java.util.List;
/**
* @Description:
* @Author: luoyu
* @Date: 2020/4/11 下午8:17
* @Version: 1.0.0
*/
@RestController
@RequestMapping("/test")
public class TestController {
@Autowired
private iTestService iTestService;
@GetMapping("/getlist")
public ModelAndView index(){
ModelAndView mv = new ModelAndView();
List<Test> testList = iTestService.getTest();
mv.addObject("list", testList);
mv.addObject("model", "测试一下模块名");
mv.setViewName("/index.html");
return mv;
}
}
第四步,启动项目,访问:http://localhost:8082/templates/test/getlist,端口号根据配置文件application.yml里面的端口号进行修改,刷新可以随机请求到不同的数据,文中只列举了简单的交互方式,还有各种复杂好玩的方式,有需要的可以自行百度了解
注:此工程包含多个module,本文所用代码均在thymeleaf-demo模块下