thymeleaf的能用在什么地方_关于thymeleaf+layout布局的使用方式

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

首先建立相同部分的html,这里我命名为layout.html,放在了`templates/layout'文件夹下,这个路径以后是会用到的,以下是我的layout的代码,比较粗糙.

但是应该会更好的帮助理解.

要提到几个重要的部分

xmlns:layout="http://www.w3.org/1999/xhtml" 引入 thymeleaf

欢迎登录

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

}

}

User Information table

Hi, Admin

• 用户信息管理
• 学生信息管理
• 教师信息管理
• 课程信息管理
• 周边商品管理

//重点部分

What?

Chania is a city on the island of Crete.

Where?

Crete is a Greek island in the Mediterranean Sea.

How?

You can reach Chania airport from all over Europe.

Resize the browser window to see how the content respond to the resizing.@Design by

empoloyeeeeee

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

要提到的几个重要的部分

layout:decorator="layout/layout" 前边我们提到的路径,这个就是你layout.html文件的位置.

设置div content 然后就可以将你需要更改的内容写在这个位置

layout:decorator="layout/layout">

Title

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;

}

id

姓名

密码

昵称

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

所以在meaven中添加如下代码

nz.net.ultraq.thymeleaf

thymeleaf-layout-dialect

2.2.2

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

image.png