SpringBoot整合Thymeleaf完成页面布局

最新推荐文章于 2024-07-22 08:30:00 发布

习惯了想你

最新推荐文章于 2024-07-22 08:30:00 发布

阅读量2.4k

点赞数

分类专栏： Front Spring 文章标签： front

本文链接：https://blog.csdn.net/Q748893892/article/details/90297589

版权

Spring 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Front

2 篇文章 0 订阅

订阅专栏

文章目录

Springboot中的配置
配置页面布局
通用引入

以前一直用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>

习惯了想你

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot整合Thymeleaf完成页面布局

文章目录Springboot中的配置配置页面布局以前一直用velocity做前端页面的展示，最近用Springboot项目后，看大家都推荐使用Thymeleaf，遂想尝试一下于是就遇到了以下踩到的坑，其实最麻烦的是把开源的AdminLTE剥离出来，我只需要一个菜单栏，其他无用的东西先剔除。费了很大的力气剥离出去后，如何使用在thymeleaf上面又是个问题。折腾了一天后，终于完成了，深深的舒...
复制链接

扫一扫

专栏目录