springboot项目中thymeleaf布局应用

thymeleaf

thymeleaf是springboot推荐使用的模板引擎之一,其官网地址为:https://www.thymeleaf.org

thymeleaf-layout-dialect

thymeleaf-layout-dialect是thymeleaf布局框架,可以抽取公共的header,footer,left等html元素和公共的 css,js文件。开发人员只需专注具体的body内容,大大减少了代码冗余,使代码简洁明了,层次清晰。其项目的github地址为:https://github.com/ultraq/thymeleaf-layout-dialect

整合

以springboot项目为例,整合开发thymeleaf布局。

maven坐标:

<!-- thymeleaf -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- thymeleaf布局 -->
<dependency>
    <groupId>nz.net.ultraq.thymeleaf</groupId>
    <artifactId>thymeleaf-layout-dialect</artifactId>
    <version>2.3.0</version>
</dependency>

编写layout页面

一个典型的layout页面代码如下,为了页面美观,我这里选择了引入了vue + element-ui。

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">skindream</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="/static/assets/css/index.css"/>
    <link rel="stylesheet" href="/static/framework/element-ui/element.css"/>
    <link rel="stylesheet" href="/static/plugins/nprogress/nprogress.css"/>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu mode="horizontal" text-color="#202124" active-text-color="#409eff">
                <el-menu-item :index="1"><a href="/">skindream</a></el-menu-item>
                <el-menu-item :index="2"><a href="/movies">影视</a></el-menu-item>
                <el-menu-item :index="3"><a href="/animation">动画</a></el-menu-item>
                <el-menu-item :index="4"><a href="/music">音乐</a></el-menu-item>
                <el-menu-item :index="5"><a href="/game">游戏</a></el-menu-item>
                <el-menu-item :index="6"><a href="/article">文章</a></el-menu-item>
            </el-menu>
            <el-menu mode="horizontal">
                <el-menu-item index="1"><a href="/login">登录</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <!-- 这里可以被其他页面替换 -->
            <div layout:fragment="content"></div>
        </el-main>
        <footer>
            <el-footer>@skindream</el-footer>
        </footer>
    </el-container>
</div>
<script src="/static/framework/vue/vue.min.js"></script>
<script src="/static/framework/element-ui/element.js"></script>
<script src="/static/plugins/nprogress/nprogress.js"></script>
<script>
    NProgress.start();
    NProgress.done();
    new Vue({
        el'#app'
    })
</script>
</body>
</html>

访问这个layout页面,页面效果如下:

83cIit.png

编写content页面

现在编写content页面替换掉中间的空白内容,动画animation.html代码如下:

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorate="/commons/layout">
<head>
    <title>动画</title>
    <!-- 这里可以引入该页面独有的css文件 -->
    <link rel="stylesheet" href="/static/assets/css/animation.css"/>
</head>
<body>
<div layout:fragment="content">
    <p>这是动画</p>
</div>
<!-- 这里可以引入该页面独有的js文件 -->
<script src="/static/assets/js/animation.js"></script>
</body>
</html>

其中需要注意的是layout:decorate="/commons/layout"需要指定到layout.html所在的位置,layout:fragment="content"content名称对应的是layout.html<div layout:fragment="content"></div>的名称。

定义一个controller,代码如下:

package pers.skindream.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
@RequestMapping("animation")
public class AnimationController {

    @GetMapping
    public String toAnimation() {
        return "views/animation";
    }

}

访问http://localhost:7001/animation,页面效果如下:

83RwZQ.png

title-pattern

layout中有这样一段代码:

<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">skindream</title>

$LAYOUT_TITLE - $CONTENT_TITLE表示页面title由两部分组成,layout页面中的title - content页面中的title。我这里表现的就是skindream - 动画

页面参数传递

改造animation.html,代码如下:

<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="/commons/layout" th:with="dio='我不做人了,JOJO!'">

<head>
    <title>动画</title>
    <!-- 这里可以引入该页面独有的css文件 -->
    <link rel="stylesheet" href="/static/assets/css/animation.css"/>
</head>
<body>
<div layout:fragment="content">
    <p>这是动画</p>
</div>
<!-- 这里可以引入该页面独有的js文件 -->
<script src="/static/assets/js/animation.js"></script>
</body>
</html>

我这里运用thymeleaf提高的标签th:withlayout.html页面传递了一个参数dio改造layout.html接收传递过来的参数,代码如下:

<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">skindream</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="/static/assets/css/index.css"/>
    <link rel="stylesheet" href="/static/framework/element-ui/element.css"/>
    <link rel="stylesheet" href="/static/plugins/nprogress/nprogress.css"/>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-menu mode="horizontal" text-color="#202124" active-text-color="#409eff">
                <el-menu-item :index="1"><a href="/">skindream</a></el-menu-item>
                <el-menu-item :index="2"><a href="/movies">影视</a></el-menu-item>
                <el-menu-item :index="3"><a href="/animation">动画</a></el-menu-item>
                <el-menu-item :index="4"><a href="/music">音乐</a></el-menu-item>
                <el-menu-item :index="5"><a href="/game">游戏</a></el-menu-item>
                <el-menu-item :index="6"><a href="/article">文章</a></el-menu-item>
            </el-menu>
            <el-menu mode="horizontal">
                <el-menu-item index="1"><a href="/login">登录</a></el-menu-item>
            </el-menu>
        </el-header>
        <el-main>
            <!-- 这里可以被其他页面替换 -->
            <div layout:fragment="content"></div>
        </el-main>
        <footer>
            <el-footer>@skindream - <span th:text="${dio}"></span></el-footer>
        </footer>
    </el-container>
</div>
<script src="/static/framework/vue/vue.min.js"></script>
<script src="/static/framework/element-ui/element.js"></script>
<script src="/static/plugins/nprogress/nprogress.js"></script>
<script>
    NProgress.start();
    NProgress.done();
    new Vue({
        el'#app'
    })
</script>
</body>
</html>

其中

<el-footer>@skindream - <span th:text="${dio}"></span></el-footer>

用于接收参数

再次访问http://localhost:7001/animation,页面效果如下:

834iy6.png

总结

以上就是thymeleaf布局的简单应用,纵观下来确实起到了开头所说的开发人员只需专注具体的body内容,大大减少了代码冗余,使代码简洁明了,层次清晰的作用。

posted @ 2020-03-15 18:04  丶沉梦昂志丶  阅读(1506)  评论(0编辑  收藏  举报