继承parent父工程，新建一个子项目，名称为spring-boot-chapter-8
- 1、引入 thymeleaf 模板依赖
<!-- 引入 thymeleaf 模板依赖 --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency>
- application.yml添加配置信息
############################################################
# thymeleaf 静态资源配置
############################################################
spring:thymeleaf:prefix: classpath:/templates/suffix: .htmlmode: HTML5encoding: UTF-8servlet:content-type: text/htmlcache: false
#spring.thymeleaf.prefix:前缀
#spring.thymeleaf.suffix：后缀
#spring.thymeleaf.mode=HTML5：模板
#spring.thymeleaf.encoding：编码格式
#spring.thymeleaf.servlet.content-type
#spring.thymeleaf.cache：关闭缓存，即时刷新，上线生产数安静需要改为true
- 创建实体类User
@Data
public class User {private Long id;private String name;private String password;private String desc;private Integer age;private Date birthday;
}
- 新建ThymeleafController
@Controller
@RequestMapping("/th")
public class ThymeleafController {@RequestMapping("/index")public String index(ModelMap map) {map.addAttribute("name", "thymeleaf-imooc");return "thymeleaf/index";}@RequestMapping("center")public String center() {return "thymeleaf/center/center";}@RequestMapping("test")public String test(ModelMap map) {User u = new User();u.setName("superadmin");u.setAge(10);u.setPassword("123465");u.setBirthday(new Date());u.setDesc("<font color='green'><b>hello imooc</b></font>");map.addAttribute("user", u);User u1 = new User();u1.setAge(19);u1.setName("imooc");u1.setPassword("123456");u1.setBirthday(new Date());User u2 = new User();u2.setAge(17);u2.setName("LeeCX");u2.setPassword("123456");u2.setBirthday(new Date());List<User> userList = new ArrayList<>();userList.add(u);userList.add(u1);userList.add(u2);map.addAttribute("userList", userList);return "thymeleaf/test";}@PostMapping("postform")public String postform(User u) {System.out.println("姓名：" + u.getName());System.out.println("年龄：" + u.getAge());return "redirect:/th/test";}@RequestMapping("showerror")public String showerror(User u) {int a = 1 / 0;return "redirect:/th/test";}
}
新建接口类UserRepository
public interface UserRepository {/*** 保存或更新用户** @param user* @return*/User saveOrUpdateUser(User user);/*** 根据id删除用户** @param id*/void deleteUser(Long id);/*** 根据id查询用户** @param id*/User getUserById(Long id);/*** 查询用户列表*/Collection<User> listUsers();
}
- 新建接口实现类UserRepositoryImpl
@Repository
public class UserRepositoryImpl implements UserRepository {private static AtomicLong counter = new AtomicLong();//计数器 添加用户/次 +1private final ConcurrentMap<Long, User> userMap = new ConcurrentHashMap<Long, User>();@Overridepublic User saveOrUpdateUser(User user) {Long id = user.getId();if (id == null) {id = counter.incrementAndGet();user.setId(id);}this.userMap.put(id, user);//id 对应 userreturn user;}@Overridepublic void deleteUser(Long id) {this.userMap.remove(id);}@Overridepublic User getUserById(Long id) {return this.userMap.get(id);}@Overridepublic Collection<User> listUsers() {
// Collection<User> userList = this.userMap.values();return this.userMap.values();}
}
- 在resourcestemplates/目录下面新建thymeleaf目录： 新建index.html和test.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 lang="en"><meta charset="UTF-8" /><title></title>
</head>
<body>
Thymeleaf模板引擎
<h1 th:text="${name}">hello world~~~~~~~</h1>
</body>
</html>
- test.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 lang="en"><meta charset="UTF-8" /><title></title><!-- <script th:src="@{/static/js/test.js}"></script> --></head>
<body><div>用户姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/><br/>用户年龄：<input th:value="${user.age}"/><br/>用户生日：<input th:value="${user.birthday}"/><br/>用户生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/><br/>
</div><br/><div th:object="${user}">用户姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/><br/>用户年龄：<input th:value="*{age}"/><br/>用户生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/><br/>
</div><br/>text 与 utext ：<br/>
<span th:text="${user.desc}">abc</span>
<br/>
<span th:utext="${user.desc}">abc</span>
<br/>
<br/>URL:<br/>
<a href="" th:href="@{http://www.imooc.com}">网站地址</a>
<br/><br/>
<form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post"><input type="text" th:field="*{name}"/><input type="text" th:field="*{age}"/><input type="submit"/>
</form>
<br/><br/>
<div th:if="${user.age} == 18">十八岁的天空</div>
<div th:if="${user.age} gt 18">你老了</div>
<div th:if="${user.age} lt 18">你很年轻</div>
<div th:if="${user.age} ge 18">大于等于</div>
<div th:if="${user.age} le 18">小于等于</div>
<br/><br/>
<select><option >选择框</option><option th:selected="${user.name eq 'lee'}">lee</option><option th:selected="${user.name eq 'imooc'}">imooc</option><option th:selected="${user.name eq 'LeeCX'}">LeeCX</option>
</select>
<br/><br/>
<table><tr><th>姓名</th><th>年龄</th><th>年龄备注</th><th>生日</th></tr><tr th:each="person:${userList}"><td th:text="${person.name}"></td><td th:text="${person.age}"></td><td th:text="${person.age gt 18} ? 你老了 : 你很年轻">18岁</td><td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td></tr>
</table>
<br/><br/>
<div th:switch="${user.name}"><p th:case="'lee'">lee</p><p th:case="#{roles.manager}">普通管理员</p><p th:case="#{roles.superadmin}">超级管理员</p><p th:case="*">其他用户</p>
</div>
<br/></body>
</html>
- 在resourcestemplates/thymeleaf目录下新建center目录并在目录下：
新建index.html和test.html center.html内容如下：
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8" /><title></title>
</head>
<body>
Thymeleaf模板引擎
<h1>center page</h1>
</body>
</html>
- 启动项目，依次测试： GET请求
- 访问首页：http://localhost:8080/th/index
- 访问test页：http://localhost:8080/th/test
- 访问中心页：http://localhost:8080/th/center
http://localhost:8080/showerror
POST请求： - 访问post表单首页：http://localhost:8080/th/postform?name=hhhh&age=1
本文源码下载：
github地址：
https://github.com/gb-heima/Spring-Boot-Actual-Combat/tree/master/parent/spring-boot-chapter-8
