springboot:thymeleaf (1) 和adminlte的结合

标签（空格分隔）： springboot thymeleaf adminlte 前端后台 html渲染模板库 layout

spring boot:用adminlte做前端中提到过thymeleaf可以结合adminlte一起使用，本文做点简单的介绍

架构原理

这里不对thymeleaf本身的实现做说明，重点放在应用，只结合它在springmvc架构中的位置做点解释（关于springmvc的说明请参考我的 springboot : 深入浅出spring mvc）

springmvc architecture

thymeleaf就是上图中的一种view的实现，它可以把model中的东西渲染到html中（前提是html使用了thymeleaf的标签）

简单的例子

添加依赖
pom.xml中添加以下依赖

        <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>

如果使用springboot 2以上，并且要用thymeleaf的layout（有人说layout是thymeleaf最重要的功能）功能，必须手工添加thymeleaf-layout-dialect依赖（很多教程都忽略了这点）

添加模板
把基于adminlte的layout（layout.html, 参考 spring boot:用adminlte做前端）放到src\main\resources\templates 文件夹,
修改两行代码

<html>改成<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<div class="content-wrapper">改成
<div class="content-wrapper" layout:fragment="contentWrapper">

这样adminlte的layout就成为了thymeleaf的一个layout了

添加一个测试html
test.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorate="layout">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body class="hold-transition skin-blue sidebar-mini">
    <div layout:fragment="contentWrapper">

        <section class="content">
            <h4>Hello World</h4>
        </section>

    </div>

</body>
</html>

其中关键的代码有两行

layout:decorate="layout"

这行代码告诉thymeleaf，渲染test.html的时候要用模板layout(src\main\resources\templates下面的layout.html文件)进行渲染

<div layout:fragment="contentWrapper">

这行代码告诉thymeleaf，把<div layout:fragment="contentWrapper">中的内容要替换掉layout"layout:fragment="contentWrapper" 部分的内容

准备好这些之后启动spring boot，请求 test.html，就能看到结果中明显多出layout.html中的一些东西，也就是说请求的是test.html，但是获得的是test.html+layout.html的东西。

本文使用我另外的文章老程序员的一点套路之开源学习里面介绍的方法进行学习

最后编辑于：2018.09.09 15:07:49