最近在做项目时候用到了 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
