关于thymeleaf+layout布局的使用方式【纯转】

最近在做项目时候用到了 layout布局的方式,相对方便了很多,记录一下.这个layout的效果是可以把网页的相同部分提取出来,只需要更改核心不一样的地方就可以了.也就是更改后边我们会提到的`content`部分.

首先建立相同部分的html,这里我命名为layout.html,放在了`templates/layout'文件夹下,这个路径以后是会用到的,以下是我的layout的代码,比较粗糙.
但是应该会更好的帮助理解.
要提到几个重要的部分

xmlns:th="http://www.thymeleaf.org" 引入th
xmlns:layout="http://www.w3.org/1999/xhtml" 引入 thymeleaf
<div layout:fragment="content"></div> 你要将不同内容放置的位置

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.w3.org/1999/xhtml">
    <meta charset="UTF-8">
    <title>欢迎登录</title>
    <head>
        <style>

            h1 {
                color: yellowgreen;
            }

            table, th, td {
                border: 1px solid sandybrown;

            }

            th {
                background: sandybrown;
                color: cornsilk;
            }

            .row:after {
                content: "";
                clear: both;
                display: block;
            }

            [class*="col-"] {
                float: left;
                padding: 15px;
            }

            html {

                font-family: "Lucida Sans", sans-serif;
            }

            .header {
                background-color: #9933cc;
                color: #ffffff;
                padding: 15px;

            }

            .menu ul {
                list-style-type: none;
                margin: 0;
                padding: 0;

            }

            .menu li {
                padding: 8px;
                margin-bottom: 7px;
                background-color: #33b5e5;
                color: #ffffff;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            }

            .menu li:hover {
                background-color: #0099cc;
            }

            .aside {
                background-color: #33b5e5;
                padding: 15px;
                color: #ffffff;
                text-align: center;
                font-size: 14px;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            }

            .footer {
                background-color: #0099cc;
                color: #ffffff;
                text-align: center;
                font-size: 12px;
                padding: 15px;
            }

            .right {
                float: right;
            }

            .col-1 {
                width: 8.33%;
            }

            .col-2 {
                width: 16.66%;
            }

            .col-3 {
                width: 25%;
            }

            .col-4 {
                width: 33.33%;
            }

            .col-5 {
                width: 41.66%;
            }

            .col-6 {
                width: 50%;
            }

            .col-7 {
                width: 58.33%;
            }

            .col-8 {
                width: 66.66%;
            }

            .col-9 {
                width: 75%;
            }

            .col-10 {
                width: 83.33%;
            }

            .col-11 {
                width: 91.66%;
            }

            .col-12 {
                width: 100%;
            }

            @media only screen and (max-width: 768px) {
                /* For mobile phones: */
                [class*="col-"] {
                    width: 100%;
                }
            }


        </style>

    </head>

    <body>
        <center>
            <div class="header">
                <h2>User Information table</h2>
                <span th:text="${'Hi '+session.loginUser.username}">Hi, Admin</span>
            </div>

            <a th:href="@{/user/index}"></a>
            <div class="row">
                <div class="col-3 menu">
                    <ul>
                        <li>用户信息管理</li>
                        <li>学生信息管理</li>
                        <li>教师信息管理</li>
                        <li>课程信息管理</li>
                        <li>周边商品管理</li>
                    </ul>
                </div>


                <div class="col-5">
                //重点部分
                    <div layout:fragment="content"></div>
                </div>


                <div class="col-3 right">
                    <div class="aside">
                        <h2>What?</h2>
                        <p>Chania is a city on the island of Crete.</p>
                        <h2>Where?</h2>
                        <p>Crete is a Greek island in the Mediterranean Sea.</p>
                        <h2>How?</h2>
                        <p>You can reach Chania airport from all over Europe.</p>
                    </div>


                </div>

            </div>

        </center>

        <div class="footer">
            <p>Resize the browser window to see how the content respond to the resizing.@Design by
                <a href="www.baidu.com">empoloyeeeeee</a>
            </p>
        </div>
    </body>
</html>

然后建立新的html,这里我建立的是一个简单的添加用户的界面add.html,代码如下
要提到的几个重要的部分

xmlns:layout="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org
layout:decorator="layout/layout" 前边我们提到的路径,这个就是你layout.html文件的位置.
<div layout:fragment="content" > 设置div content 然后就可以将你需要更改的内容写在这个位置

<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml"  xmlns:th="http://www.thymeleaf.org"
      layout:decorator="layout/layout">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input[type="text"]:focus{

            background-color: grey;
        }

        input#userid {

            margin-left: 20px;
        }

        #add{

            padding: 10px 40px;
            border: 5px gray solid;
            box-shadow: 10px 10px 5px aquamarine;
            font-family: 华文行楷;
            font-size: 14px;
            border-radius: 20px;
        }

        input{

            padding: 10px;
        }


    </style>
</head>

<body>
<!--<div class="bs-example" layout:fragment="content">-->

<div layout:fragment="content" >
    <div id="add">
    <form action="#" th:action="@{/user/add}" th:object="${userList}" method="post">
        <label>id</label><input type="text" th:field="*{userid}" id="userid"/><br>
        <label>姓名</label><input type="text" th:field="*{username}"/><br>
        <label>密码</label><input type="text" th:field="*{password}"/><br>
        <label>昵称</label><input type="text" th:field="*{nickname}"/><br>
        <input type="submit" value="添加"/>
    </form>
    </div>
</div>
</div>
</body>
</html>

之前在写到这的时候就直接跑程序了 ,发现不好用,但是感觉写的没有问题 ,最后找到了问题所在,在meaven中没有配置thmeleaf,
所以在meaven中添加如下代码

   <dependency>
            <groupId>nz.net.ultraq.thymeleaf</groupId>
            <artifactId>thymeleaf-layout-dialect</artifactId>
            <version>2.2.2</version>
        </dependency>

controller中的写法我就不过多的叙述了配置好路径就可以测试一下了亲测是通的效果如图

image.png

参考自

作者：employeeeee
链接：https://www.jianshu.com/p/3b5ebc545a99
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

关于thymeleaf+layout布局的使用方式【纯转】

最近在做项目时候用到了 layout布局的方式,相对方便了很多,记录一下.这个layout的效果是可以把网页的相同部分提取出来,只需要更改核心不一样的地方就可以了.也就是更改后边我们会提到的content部分.

参考自

猜你喜欢

最近在做项目时候用到了 layout布局的方式,相对方便了很多,记录一下.这个layout的效果是可以把网页的相同部分提取出来,只需要更改核心不一样的地方就可以了.也就是更改后边我们会提到的`content`部分.