以前一直用velocity做前端页面的展示,最近用Springboot项目后,看大家都推荐使用Thymeleaf,遂想尝试一下
于是就遇到了以下踩到的坑,其实最麻烦的是把开源的AdminLTE剥离出来,我只需要一个菜单栏,其他无用的东西先剔除。
费了很大的力气剥离出去后,如何使用在thymeleaf上面又是个问题。折腾了一天后,终于完成了,深深的舒了一口气。
因为领导要求做一个平台出来,我现在没有任何的手脚架。光写后台的话,看不出来项目的进度,领导会任务没有效果。有前端能展示就会很有说服力。不然ppt有什么用。
Springboot中的配置
在pom中引入thymeleaf的坐标文件,因为已经继承了springboot-parent,所以就不用在写版本号了
<!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
在application.properties中配置使用thymeleaf,指定thymeleaf的路径在classpath:/templates/下
#thymeleaf start
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.cache=false
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8
#thymeleaf end
配置页面布局
在templates下建立一个layout文件夹,下面创建几个文件header,left,footer
header.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>header</title>
</head>
<body>
<header th:fragment="header" class="main-header">
我是页面头部
</header>
</body>
</html>
left.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>left</title>
</head>
<body>
<left th:fragment="left">
我是左边侧栏
</left>
</body>
</html>
footer.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"></meta>
<title>footer</title>
</head>
<body>
<footer th:fragment="footer" class="main-footer">
我是页面脚部
</footer>
</body>
</html>
整体页面,引入header,left,footer,
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<meta charset="utf-8">
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<div th:replace="layout/header :: header"></div>
<div th:replace="layout/left :: left"></div>
<div layout:fragment="content" class="content-wrapper">
在这里写入要展示的代码
</div>
<div th:replace="layout/footer :: footer"></div>
</div>
</body>
</html>
把要展示的内容放在content的div中,每个页面都要按照模板来写。其实也很麻烦的。
通用引入
建立一个通用的head页面,把各个页面共用部门的js,css引入
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<meta charset="utf-8">
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="/static/bower_components/bootstrap/css/bootstrap.min.css">
<!-- jQuery 3 -->
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<!-- AdminLTE App -->
<script src="/static/dist/js/adminlte.min.js"></script>
</head>
在需要引入的页面把head页面引入,同时还可以添加其他的引入
核心是你用了<th:block>标签,它会把引入的内容放到当前位置,而且不包含自己的标签名
<th:block th:include="layout/header :: header"></th:block>
完整示例
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<title>AdminLTE 2 | Dashboard</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<th:block th:include="layout/header :: header"></th:block>
<!-- Bootstrap 3.3.7 -->
<script src="/static/bower_components/bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/bower_components/fastclick/lib/fastclick.js"></script>
</head>