Spring Boot 学习笔记--整合Thymeleaf
编程爱好者联盟 2017-03-01
1.新建Spring Boot项目
添加spring-boot-starter-thymeleaf依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency> 2.添加静态文件
根据spring boot默认规则，脚本和样式默认都放在src/main/resources/static下，我这里引入的metro-bootstrap-master（一个开源的模板）
结构如图所示：
3.演示html页面
根据spring boot默认规则，页面放置在src/main/resources/templates下，也可以在application.properties自定义路径。
######################################################## ###THYMELEAF (ThymeleafAutoConfiguration) ######################################################## #spring.thymeleaf.prefix=classpath:/templates/ #spring.thymeleaf.suffix=.html #spring.thymeleaf.mode=HTML5 #spring.thymeleaf.encoding=UTF-8 #spring.thymeleaf.content-type=text/html # set to false for hot refresh spring.thymeleaf.cache=false
具体html代码如下：
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link th:href="@{css/metro-bootstrap.min.css}" rel="stylesheet"/>
<link th:href="@{css/font-awesome.min.css}" rel="stylesheet"/>
<link th:href="@{css/docs.css}" rel="stylesheet"/>
</head>
<body>
<div class="grid">
<div class="row col-md-12">
<div class="tile tile-clouds col-md-3 col-xs-12" >
<h1 th:text="${s[0]}"></h1>
</div>
<div class="tile tile-emerald col-md-3 col-xs-12" >
<h1 th:text="${s[1]}"></h1>
</div>
<div class="tile tile-turquoise col-md-3 col-xs-12" >
<h1 th:text="${s[2]}"></h1>
</div>
<div class="tile tile-amethyst col-md-3 col-xs-12" >
<h1 th:text="${s[3]}"></h1>
</div>
</div>
</div>
</body>
<script th:src="@{js/jQuery/jquery.min.js}"></script>
<script th:src="@{js/bootstrap/bootstrap.min.js}"></script>
<script th:src="@{js/metro-docs.js}"></script>
<script th:inline="javascript">
var s = [[${s}]];
console.log(s);
</script>
</html> 4.视图和数据
新建一个controller，新建一个数组返回数据，代码如下：
package com.haq.web;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/")
public class SampleController {
@RequestMapping("/index")
public String index(Model model){
String[] s = {"我是1","我是2","我是3","我是4"};
model.addAttribute("s",s);
return "index";
}
} 5.运行
启动spring boot，返回http://127.0.0.1:8080/index,效果如图所示：
后记：欢迎大家交流学习，有问题还望多多指教，O(∩_∩)O谢谢。
相关推荐
丽丽 0喜欢 / 0评论 2020-10-30
visionzheng 0喜欢 / 0评论 2020-04-20
86384798 0喜欢 / 0评论 2020-04-07
85291545 0喜欢 / 0评论 2020-03-26
东哥笔记 0喜欢 / 0评论 2020-02-29
goodyatou 0喜欢 / 0评论 2020-01-29
GechangLiu 0喜欢 / 0评论 2020-01-26
ffujbcf 0喜欢 / 0评论 2019-12-05
空间数据库是 0喜欢 / 0评论 2019-11-18
yangjinpingc 0喜欢 / 0评论 2018-05-20
MicroBoy 0喜欢 / 0评论 2017-03-30
努力的zhiyi 0喜欢 / 0评论 2017-01-17
姜依涛 0喜欢 / 0评论 2019-06-27
jackuseradmin 0喜欢 / 0评论 2019-06-27
newstudent0 0喜欢 / 0评论 2019-06-27
LeeEmmmm 0喜欢 / 0评论 2019-06-21
wangjie 0喜欢 / 0评论 2018-09-25
hanyueqi 0喜欢 / 0评论 2017-06-14
稀土 0喜欢 / 0评论 2018-05-11
BitTigerio 0喜欢 / 0评论 2018-05-08
出版圈郭志敏 0喜欢 / 0评论 2018-02-26
人丑就该多读书 0喜欢 / 0评论 2017-12-09
莫道寻常 0喜欢 / 0评论 2017-12-09
无人机中的城堡 0喜欢 / 0评论 2017-11-29
软件设计 0喜欢 / 0评论 2017-04-09