SpringBoot整合Thymeleaf完成页面布局
文章目录
- Springboot中的配置
- 配置页面布局
- 通用引入
以前一直用velocity做前端页面的展示，最近用Springboot项目后，看大家都推荐使用Thymeleaf，遂想尝试一下
于是就遇到了以下踩到的坑，其实最麻烦的是把开源的AdminLTE剥离出来，我只需要一个菜单栏，其他无用的东西先剔除。
费了很大的力气剥离出去后，如何使用在thymeleaf上面又是个问题。折腾了一天后，终于完成了，深深的舒了一口气。
因为领导要求做一个平台出来，我现在没有任何的手脚架。光写后台的话，看不出来项目的进度，领导会任务没有效果。有前端能展示就会很有说服力。不然ppt有什么用。
Springboot中的配置
在pom中引入thymeleaf的坐标文件，因为已经继承了springboot-parent，所以就不用在写版本号了
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>nz.net.ultraq.thymeleafgroupId>
<artifactId>thymeleaf-layout-dialectartifactId>
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
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">meta>
<title>headertitle>
head>
<body>
<header th:fragment="header" class="main-header">
我是页面头部
header>
body>
html>
left.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">meta>
<title>lefttitle>
head>
<body>
<left th:fragment="left">
我是左边侧栏
left>
body>
html>
footer.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">meta>
<title>footertitle>
head>
<body>
<footer th:fragment="footer" class="main-footer">
我是页面脚部
footer>
body>
html>
整体页面，引入header,left,footer，
<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引入
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="header">
<meta charset="utf-8">
<link rel="stylesheet" href="/static/bower_components/bootstrap/css/bootstrap.min.css">
<script src="/static/bower_components/jquery/dist/jquery.min.js">script>
<script src="/static/dist/js/adminlte.min.js">script>
head>
在需要引入的页面把head页面引入，同时还可以添加其他的引入
核心是你用了
<th:block th:include="layout/header :: header">th:block>
完整示例
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
<title>AdminLTE 2 | Dashboardtitle>
<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>
<script src="/static/bower_components/bootstrap/js/bootstrap.min.js">script>
<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>
<script src="/static/bower_components/jquery-slimscroll/jquery.slimscroll.min.js">script>
<script src="/static/bower_components/fastclick/lib/fastclick.js">script>
head>