第八篇：Spring Boot整合Thymeleaf

继承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

第八篇：Spring Boot整合Thymeleaf_入门试炼04相关推荐

第七篇：Spring Boot整合Thymeleaf_入门试炼03
基本语法实战案例01 在ThymeleafController中添加此方法 @RequestMapping("/show5")public String showInfo5(Mod ...
第七篇：Spring Boot整合Thymeleaf_入门试炼02
Thymeleaf 语法详解: 变量输出与字符串操作变量输出与字符串操作 th:text 在页面中输出值变量输出与字符串操作 th:value 可以将一个值放入到input标签的value中判断 ...
第七篇：Spring Boot 整合_Thymeleaf 入门试炼 QuickStart
1.1 添加依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId> ...
Elasticsearch实战篇——Spring Boot整合ElasticSearch
2019独角兽企业重金招聘Python工程师标准>>> 当前Spring Boot很是流行,包括我自己,也是在用Spring Boot集成其他框架进行项目开发,所以这一节,我们一起来 ...
ElasticSearch实战篇 - Spring Boot 整合 ElasticSearch
点击上方 Java后端,选择设为星标优质文章,及时送达作者:冯文议链接:segmentfault.com/a/1190000018625101 当前Spring Boot很是流行,包括我自己, ...
Spring Boot整合Redis以及Redis的原理
Redis的原理及知识 Redis简介 redis是一个key-value.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合). ...
spring boot整合SpringSecurity-03 自定义报错信息
spring boot整合SpringSecurity 目录 spring boot整合SpringSecurity-01入门 spring boot整合SpringSecurity-02 基于Ser ...
MongoDB简单入门篇及其Spring Boot整合
参考视频 ① MongoDB简介简介 MongoDB是为快速开发互联网Web应用而设计的数据库系统 MongoDB的设计目标是极简.灵活. 作为Web应用栈的一部分 MongoDB是No SQL数据 ...
spring boot(一)：入门篇
构建微服务:Spring boot 入门篇什么是spring boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框 ...

第八篇：Spring Boot整合Thymeleaf_入门试炼04

第八篇：Spring Boot整合Thymeleaf_入门试炼04相关推荐

最新文章

热门文章