SpringBoot Thymeleaf 基于HTM

SpringBoot Thymeleaf 基于HTML5的现代模板引擎

文地址：https://www.jianshu.com/p/8dc48fa74e7e
作者：yizhiwazi

序言：
Thymeleaf 是Java服务端的模板引擎，与传统的JSP不同，前者可以使用浏览器直接打开，因为可以忽略掉拓展属性，相当于打开原生页面，给前端人员也带来一定的便利。如果你已经厌倦了JSP+JSTL的组合，Thymeleaf或许是个不错的选择！本工程传送门：SpringBoot-Web-Thymeleaf

学习目标

简单三步！快速学会使用Thymealf的常用模板。

快速查阅

源码下载：SpringBoot-Web-Thymeleaf

专题阅读：《SpringBoot 布道系列》

开始使用

1.引入依赖

SpringBoot默认提供了Thymeleaf的Starter，只需简单引入依赖即可。

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>

目前默认版本是2.1，如果想升级版本到3.0，可以这样修改。

 <properties>
 <thymeleaf.version>3.0.7.RELEASE</thymeleaf.version>
 <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
 </properties>

为了方便开发，项目案例采用了热部署工具dev-tools ，这样我们在修改页面之后，IDEA会自动加载，从而达到实现热更新的效果。

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-devtools</artifactId>
 <scope>runtime</scope>
 </dependency>

注：由于IDEA默认关闭了热部署，需要做一些设置才能使其生效。解决方法：首先按住Ctrl+Shift+Alt+/ 然后进入 Registry （或者双击Shift搜索Registry...），然后勾选compiler.automake.allow.when.app.running 即可。另外，Build->Compiler 也要勾选上Build Project automatically .

2. 添加相关配置

Thymeleaf默认开启了页面缓存，在开发的时候，应该关闭缓存。此外，通常我们还会指定页面的存放路径。（默认是classpath:/templates/）

application.yml 配置如下：
spring:
 thymeleaf:
 cache: false #关闭缓存
 prefix: classpath:/views/ #添加路径前缀

3.编写HTML

编写Thymeleaf和书写HTML5页面没有什么不同，最大的转变就是使用拓展属性（th:xx）去跟服务端进行数据交互，保留原始页面风格，也是Thymeleaf的推崇的风格。例如下面这个简单的案例，启动项目，我们发现页面跳转的是简书的连接，这一点也验证了Thymeleaf覆盖原生页面数据的极佳能力。

页面代码：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
 <title>Thymeleaf</title>
</head>
<body>
 <h2>欢迎使用Thymeleaf!!</h2>
 <a href="http://www.baidu.com" th:href="${info}">戳我有惊喜</a>
</body>
</html>

后端代码：

@Controller
public class UserController {

 @GetMapping("/")
 public String index(Model model) {
 model.addAttribute("info", "user/list");
 return "index";
 }

 @GetMapping("/user")
 public String hehe(Model model) {
 model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
 return "user";
 }

 @GetMapping("/user/list")
 public String userlist(Model model) {
 List<User> userList=new ArrayList<>();
 userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
 userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
 userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
 model.addAttribute("userList", userList);
 return "userList";
 }

}

现在我们尝试回填一个表单，展示单个用户信息。

<!-- 使用th:object 搭配*{} 可以省略对象名 -->
<form action="/" th:object="${user}" >
 <input type="hidden" name="userId" th:value="*{userId}" />
 <input type="text" name="username" th:value="*{username}" />
 <input type="text" name="password" th:value="*{password}" />
</form>

接下来，我们进入一个更复杂的案例，例如展示一个用户列表信息，
不需要编写新的标签，就可以完成对批量用户的遍历。

<h2>用户列表</h2>
<!--说明： th:each="obj,stat:${objects}" 分别代表单个实例,状态(可省略),待遍历对象-->
<div th:each="user:${userList}">
 <input type="hidden" name="userId" th:value="${user.userId}"/>
 用户姓名：<input type="text" name="password" th:value="${user.username}"/>
 登录密码：<input type="text" name="username" th:value="${user.password}"/>
</div>

好了，Thymeleaf简单介绍到这里

我自己是一名从事了多年开发的Java老程序员，辞职目前在做自己的Java私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的Java学习干货，从最基础的JavaSE到Spring各种框架都有整理，送给每一位Java小伙伴，想要获取的可以关注我的头条号并在后台私信我：Java，即可免费获取。

否知否网页设计源代码有6个页面组成，带css动画效果，留言表单。

如果有需要还可以增加js图片轮播及其他js效果。

网页设计效果图

知否知否首页HTML源代码

	<!DOCTYPE html>
	<!-- index.html -->
	<html lang="cn">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<meta name="renderer" content="webkit">
	<title>知否</title>
	<meta content="" name="keywords">
	<meta content="" name="description">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	</head>
	<body>
	<div class="header">
	<div class="headercon clearfloat"> <a href="index.html">知否知否</a>
	<p>知否知否应是绿肥红瘦</p>
	</div>
	</div>
	<div class="headernav">
	<ul>
	<li class="active"><a href="index.html">首页</a></li>
	<li><a href="jianjie.html">剧情简介</a></li>
	<li><a href="list.html">角色介绍</a></li>
	<li><a href="juqing.html">分集剧情</a></li>
	<li><a href="pingjia.html">影视评价</a></li>
	<li><a href="liuyan.html">给我留言</a></li>
	</ul>
	</div>
	<div class="banner"> <img src="images/banner.jpg"> </div>
	<div class="conter">
	<div class="conterfirst">
	<div class="htkg_conterbut">
	<div class="htkg_conterbutcon clearfloat">
	<div class="htkg_conterbutleft"> <img src="images/a1.jpg" alt=""> </div>
	<div class="htkg_conterbutright">
	<div class="htkg_conterbutrightcon">
	<h5>知否知否应是绿肥红瘦</h5>
	<p>《知否知否应是绿肥红瘦》是由侯鸿亮担任制片人，张开宙执导，曾璐、吴桐编剧，赵丽颖、冯绍峰领衔主演，朱一龙、施诗、张佳宁、曹翠芬、刘钧、刘琳、高露、王仁君、李依晓、王鹤润、张晓谦、李洪涛主演，王一楠、陈瑾、张棪琰、邓莎特别出演的古代社会家庭题材剧 </p>
	<a href="jianjie.html"></a> </div>
	</div>
	<div class="htkg_conterbutlast">
	<div class="htkg_conterbutlastcon">
	<p>该剧于2018年12月25日在湖南卫视金鹰独播剧场首播，并在爱奇艺、腾讯视频、优酷视频、YouTube同步播出</p>
	<p>2019年5月，入围第25届上海电视节白玉兰奖最佳中国电视剧。 [3]2020年2月，入选国家广播电视总局推荐的《2019中国电视剧选集》 [4]。10月18日，获得第30届中国电视金鹰奖优秀电视剧奖</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="htkg_list">
	<div class="htkg_listcon">
	<ul class="clearfloat">
	<li> <a href="#"> <img src="images/htkg3.png" alt=""> </a> </li>
	<li> <a href="#"> <img src="images/htkg1.png" alt=""> </a> </li>
	<li> <a href="#"> <img src="images/htkg2.png" alt=""> </a> </li>
	</ul>
	</div>
	</div>
	<div class="introducecon">
	<div class="newxqtitle">
	<h5>播出信息</h5>
	</div>
	<div class="newxqcon" deep="3">
	<h6>幕后花絮</h6>
	<p>两位编剧曾璐、吴桐与导演张开宙都是《战长沙》的原班制作团队 [32]。</p>
	<p> 原著作者关心则乱在男主官宣前3个月就发博文暗示过男主是冯绍峰，并在官宣后承认自己早就猜到 [33]。</p>
	<p> 该剧夜戏全部采用蜡烛打光，力求呈现真实自然的古代生活画面 [34]。</p>
	<p> 有一场从五米高台跳入湖中的戏，赵丽颖在冬天自己亲自跳下水拍摄</p>
	<h6>剧本创作</h6>
	<p> 《知否知否应是绿肥红瘦》剧本是由曾璐和吴桐两位编剧共同创作，而两位编剧及导演张开宙正是《战长沙》的原班制作团队
	</p>
	<h6>拍摄过程</h6>
	<p>2017年4月，电视剧《知否知否应是绿肥红瘦》进入前期筹备阶段[16]。</p>

	<p>2017年9月6日，电视剧《知否知否应是绿肥红瘦》在横店开机，并在当天公布了王氏和盛华兰的扮演者[9]。</p>

	<p>2018年3月19日，剧组在十九峰景区重阳宫开始为期三天的拍摄。4月1日，历时208天的拍摄，该剧全剧正式杀青</p>
	<h6>早期宣传</h6>
	<p>2017年3月13日，正午阳光影业携其出品电视剧《知否知否应是绿肥红瘦》赴港参加第21届香港国际影视展，并在展览会上公布了第二张概念海报和制作团队 [43]。5月28日，剧方首次公布主演名单，女主角盛明兰由赵丽颖出演 [11]。6月20日，剧方公布男主角顾廷烨由冯绍峰出演 [44]。8月8日，该剧公布了9位主演名单，并宣布前期筹备工作接近尾声，剧集于9月初开机 [20]。10月13日，片方公布男女主演首款定妆海报 [45]；26日，开机一个多月后片方首次曝光90秒花絮 [46]。11月14日，片方公布了一组主要角色花絮照 [47]。 </p>
	<p> 2018年3月6日，《知否知否应是绿肥红瘦》片方发布首批人物剧照。3月20日，该剧制作出品方正午阳光携该剧参加香港国际影视展 [48]。3月25日，该剧登录春季北京电视节目交易会 [32]。4月26日，该剧发布“关雎”版片花，即正式发布的首版片花 [34]。12月20日，该剧发布片花，宣布定档与12月25日，并宣布除中国大陆地区外，中国香港地区、中国台湾地区、马来西亚及新加坡等国家和地区同步播出；24日，片方发布终极片花 [ </p>
	</div>
	</div>
	</div>
	<div class="footer">
	<div class="footerbut">
	<div class="footerbutup"> <span>版权所有：<strong>知否</strong></span> </div>
	</div>
	</div>
	<div>
	<object id="ClCache" click="sendMsg" host="" width="0" height="0">
	</object>
	</div>
	</body>
	</html>

整合营销服务商