String Boot-thymeleaf使用(四)
简介
Thymeleaf是面向Web和独立环境的现代服务器端Java模板引擎，能够处理HTML，XML，JavaScript，CSS甚至纯文本。，可以完全替代jsp，也是spring boot官方推荐的模版引擎
Thymeleaf优势
1.可以独立运行 前后端分离的时候 前端可以直接运行模版进行样式调整
2.不破坏html整体结构，更贴向html
3.可以使用模版实现JSTL、 OGNL表达式效果
Thymeleaf简单使用
1.引入pom依赖
<!--thymeleaf模版-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
properties配置 根据实际需要配置
# THYMELEAF (ThymeleafAutoConfiguration)
#开启模板缓存（默认值：true）
spring.thymeleaf.cache=false
#Check that the template exists before rendering it.
spring.thymeleaf.check-template=true
#检查模板位置是否正确（默认值:true）
spring.thymeleaf.check-template-location=true #开启MVC Thymeleaf视图解析（默认值：true）
spring.thymeleaf.enabled=true
#模板编码
spring.thymeleaf.encoding=UTF-8
#要被排除在解析之外的视图名称列表，用逗号分隔
#spring.thymeleaf.excluded-view-names=
#要运用于模板之上的模板模式。另见StandardTemplate-ModeHandlers(默认值：HTML5)
spring.thymeleaf.mode=HTML5
#在构建URL时添加到视图名称前的前缀（默认值：classpath:/templates/）
spring.thymeleaf.prefix=classpath:/templates/
#在构建URL时添加到视图名称后的后缀（默认值：.html）
spring.thymeleaf.suffix=.html
#Thymeleaf模板解析器在解析器链中的顺序。默认情况下，它排第一位。顺序从1开始，只有在定义了额外的TemplateResolver Bean时才需要设置这个属性。
#spring.thymeleaf.template-resolver-order=
#可解析的视图名称列表，用逗号分隔
#spring.thymeleaf.view-names=
2.新建一个Contorller
@Controller
public class HelloWordContorller {
@RequestMapping("/helloword")
public String helloWord(Model model){
List<StudentConfig> studentConfigList=new ArrayList<StudentConfig>();
for(int i=0;i<10;i++){
studentConfigList.add(new StudentConfig("小明"+i,i));
}
model.addAttribute("list",studentConfigList);
return "index";
}
}
3.再resource/template下面新建一个html页面
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
table td{
text-align: center;
}
</style>
</head>
<body>
<table style="width:100%">
<thead>
<tr>
<th>学生姓名</th>
<th>学生年龄</th>
</tr>
</thead>
<tbody>
<tr th:each="item : ${list}">
<td th:text="${item.name}">小明</td>
<td th:text="${item.age}">20</td>
</tr>
</tbody>
</table>
</body>
</html>
xmlns:th="http://www.thymeleaf.org" 将静态页面转换为动态的视图，需要进行动态处理的元素将使用“th:”前缀。
访问输出
thymeleaf模版引擎跟jsp比起来是否更易读。如果写jsp的话 里面有很多自定义标签 前端人员根本也无法阅读
还有就是模版是html是可以直接运行的
4.找到模版地址
打开
所以前端是可以直接根据模版进行样式调整
常用标签
遍历
<tr th:each="item : ${list}">
<td th:text="${item.name}">小明</td>
<td th:text="${item.age}">20</td>
</tr>
赋值
text赋值
<td th:text="${item.name}">小明</td>
<td th:text="${item.age}">20</td>
html赋值
<p th:utext="${htmlcontent}">conten</p>
value赋值
<input type="text" th:value="${user.name}" />
三元运算符
<td th:text="${item.sex==0?'男':'女'}">男</td>
if else
<div th:if="${islogin}">已登录</div>
<div th:unless="${islogin}"><a th:href="login.html">请登陆</a></div>
th:if是条件成立才渲染 ht:unless则是条件不成立才渲染
Switch
<div th:if="${islogin}">
<div th:switch="${role}">
<p th:case="'admin'">管理员</p>
<p th:case="teacher">老师</p>
<p th:case="*">普通用户</p>
</div>
</div>
<div th:unless="${islogin}"><a th:href="login.html">请登陆</a></div>
如果登陆判断 当前用户角色 *表示default
Url
th:src
<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:href
restful风格
<tr th:each="item : ${list}">
<td th:text="${item.name}">小明</td>
<td th:text="${item.age}">20</td>
<td th:text="${item.sex==0?'男':'女'}">男</td>
<td><a th:href="@{'/edit/'+${item.id}}">编辑</a></td>
</tr>
?参数传递
<tr th:each="item : ${list}">
<td th:text="${item.name}">小明</td>
<td th:text="${item.age}">20</td>
<td th:text="${item.sex==0?'男':'女'}">男</td>
<td><a th:href="@{/edit/info(id=${item.id})}">编辑1</a></td>
</tr>
?多参数传递
<a th:href="@{/edit/info(id=${item.id},age=${item.age})}">编辑1</a>
th:style
设置背景图片
<td><div th:style="'background:url('+@{${item.headPath}}+')'"></div></td>
内嵌变量
- dates ： java.util.Date的功能方法类。
- calendars : 类似#dates，面向java.util.Calendar
- numbers : 格式化数字的功能方法类
- strings : 字符串对象的功能类，contains,startWiths,prepending/appending等等。
- objects: 对objects的功能类操作。
- bools: 对布尔值求值的功能方法。
- arrays：对数组的功能类方法。
- lists: 对lists功能类方法
- sets
- maps
- ...
比如格式化日期
<div>系统时间:<label th:text="${#dates.format(new java.util.Date().getTime(), 'yyyy-MM-dd hh:mm:ss')}"></label></div>
根据需求查api吧 太多了
内联js
<script th:inline="javascript">
var username = /*[[${islogin}]]*/ 'Sebastian';
var size = /*[[${islogin}]]*/ 0;
</script>
注释表示通过模版引擎渲染 将注释后面的代码将取消渲染 渲染注释里面的模版代码。便于原型显示(直接打开html页面)
模版引擎渲染结果
直接html打开效果
使用th:inline="javascript"开启 [[....]]表示内联文本
js附加代码：
<script th:inline="javascript">
/*[+
var username = /*[[${islogin}]]*/ 'Sebastian';
var size = /*[[${islogin}]]*/ 0;
+]*/
</script>
/*[++]*/ 使用模版引擎渲染将正常渲染
模版引擎渲染结果
模版html直接打开结果
js移除代码
<script th:inline="javascript">
/*[- */
var username = /*[[${islogin}]]*/ 'Sebastian';
var size = /*[[${islogin}]]*/ 0;
/* -]*/
</script>
跟js添加代码一样 只是是相反 添加模版引擎渲染则渲染 普通html打开则渲染
使用thymeleaf布局
layout布局
引入pom依赖
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>
后台管理系统为例子 头部 底部 菜单栏都是固定的。
1.新建一个页面都把架构复制过去 然后改中间那一块内容
缺点：
会导致我们要修改整体风格每个页面都要改，比如随着时间的迭代页面会越来越多。
2.定义好骨架 然后每个部分引用对应的页面
头部引用头部的html 菜单引用菜单的html 底部引用底部的html
缺点：
页面排版要改动的时候 比如 菜单要放到右边 也会导致每个页面都要改动
3.使用模版页面
使用模版页定义好 整体框架，然后每个页面都来引用这个模版 将内容替换到指定位置
模版页定义公共的样式引入 还有整体风格
1。首先创建一个模版页面
layout.html
<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
} #nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
} #section {
width: 350px;
float: left;
padding: 10px;
} #footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div id="header">
头部
</div> <div id="nav">
菜单
</div> <div layout:fragment="content" id="section">
内容
</div> <div id="footer">
底部
</div>
</body>
</html>
定义命名空间：xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
要填充的区域：layout:fragment="content"
2.创建一个用户列表页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
layout:decorator="layout">
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<link href="userlist.css" rel="stylesheet" type="text/css">
<!--私有样式-->
<style type="text/css">
table td{
text-align: center;
}
</style>
</head> <body>
<div layout:fragment="content">用户列表</div> </body>
</html>
<script type="text/javascript" src="userlist.js"></script>
<script type="text/javascript">
$(function(){
alert('dd');
}) </script>
要填充模版页的位置：layout:fragment="content"
定义命名空间 xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout"
layout:decorator="layout"为模版页路径
效果
渲染后的html
<!DOCTYPE html>
<html lang="en">
<head>
<title>用户列表</title>
<meta charset="UTF-8">
<style type="text/css">
#header {
background-color: black;
color: white;
text-align: center;
padding: 5px;
} #nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 5px;
} #section {
width: 350px;
float: left;
padding: 10px;
} #footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 5px;
}
</style>
<meta charset="UTF-8">
<link href="userlist.css" rel="stylesheet" type="text/css">
<!--私有样式-->
<style type="text/css">
table td{
text-align: center;
}
</style>
</head>
<body>
<div id="header">
头部
</div> <div id="nav">
菜单
</div> <div id="section">用户列表</div> <div id="footer">
底部
</div>
</body>
</html>
<script type="text/javascript" src="userlist.js"></script>
<script type="text/javascript">
$(function(){
alert('dd');
}) </script>
可以发现 页面使用的css 和 script 都自动替换到模版页的 head 和底部
这个时候就算我们有上万个页面 页面风格要改变也就只需要改变模版页就行了
th:include 和 th:replace
创建一个广告页advertising.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>广告</title> </head>
<body>
<div id="advertisingContent" th:fragment="advertisingContent"> 我是广告
</div>
</body>
</html>
th:fragment="advertisingContent" 引用的时候会用到
页面引用advertisingContent内容
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>主页</title>
</head> <body>
<div >
<div>主页</div>
<div th:replace="advertising :: advertisingContent"></div>
</div> </body>
</html>
th:replace="advertising :: advertisingContent" 为把advertising(页面路径)advertisingContent为哪一块内容(省略则是整个页面)
传递参数
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<style type="text/css">
<!--自定义样式-->
</style>
</head>
<body>
<div id="advertisingContent" th:fragment="advertisingContent(name)"> 我是广告<label th:text="${name}"></label>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>主页</title> </head> <body>
<div >
<div>主页</div>
<div th:replace="advertising(name='测试传递参数')"></div>
</div> </body>
</html>
th:replacehe 和th:include用法一样
区别
th:include只引用chilren
th:replacehe 引用包含自身
String Boot-thymeleaf使用(四)的更多相关文章
- spring boot / cloud (十四) 微服务间远程服务调用的认证和鉴权的思考和设计,以及restFul风格的url匹配拦截方法
spring boot / cloud (十四) 微服务间远程服务调用的认证和鉴权的思考和设计,以及restFul风格的url匹配拦截方法 前言 本篇接着<spring boot / cloud ...
- spring boot + thymeleaf 3 国际化
在给spring boot 1.5.6 + thymeleaf 3进行国际化时,踩了一个坑(其实不止一个). 现象: 看到了吧, 就是取值的key, 后面被加了_en_US 或 _zh_CN, 以及前 ...
- spring boot + Thymeleaf开发web项目
"Spring boot非常适合Web应用程序开发.您可以轻松创建自包含的HTTP应用.web服务器采用嵌入式Tomcat,或者Jetty等.大多数情况下Web应用程序将使用 spring- ...
- Spring Boot 启动（四） EnvironmentPostProcessor
Spring Boot 启动(四) EnvironmentPostProcessor Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698. ...
- spring boot: thymeleaf模板引擎使用
spring boot: thymeleaf模板引擎使用 在pom.xml加入thymeleaf模板依赖 <!-- 添加thymeleaf的依赖 --> <dependency> ...
- Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档
0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...
- Spring Boot Thymeleaf 实现国际化
开发传统Java WEB工程时,我们可以使用JSP页面模板语言,但是在SpringBoot中已经不推荐使用了.SpringBoot支持如下页面模板语言 Thymeleaf FreeMarker Vel ...
- Spring Boot 2.X(四)：Spring Boot 自定义 Web MVC 配置
0.准备 Spring Boot 不仅提供了相当简单使用的自动配置功能,而且开放了非常自由灵活的配置类.Spring MVC 为我们提供了 WebMvcConfigurationSupport 类和一 ...
- spring boot + thymeleaf 乱码问题
spring boot + thymeleaf 乱码问题 hellotrms 发布于 2017/01/17 15:27 阅读 1K+ 收藏 0 答案 1 开发四年只会写业务代码,分布式高并发都不会还做 ...
- C# byte[]数组和string的互相转化 (四种方法)
C# byte[]数组和string的互相转化 (四种方法) 第一种 [csharp] view plain copy string str = System.Text.Encoding.UTF8.G ...
随机推荐
- 开发DataSnapserver
在上次的文章中讨论了怎样把传统的Delphi 主从架构应用程序逐渐转换为DataSnap JSONserver.在本篇文章中让我们正式讨论怎样使用Delphi XE开发DataSnap/REST ...
- 【POJ 3460】 Booksort
[题目链接] http://poj.org/problem?id=3460 [算法] IDA* 注意特判答案为0的情况 [代码] #include <algorithm> #include ...
- Wall(凸包)
http://poj.org/problem?id=1113 题意:给出一些点的坐标,和一个半径r,求出这些点围成的凸包的周长再加上一个半径为r的圆的周长. #include <stdio.h& ...
- linux更换阿里云的源的shell脚本
#!/bin/bash##########################################Function: update source#Usage: bash update_sour ...
- 8.19noip模拟题
2017 8.19 NOIP模拟赛 by coolyangzc 共3道题目,时间3小时 题目名 高级打字机 不等数列 经营与开发 源文件 type.cpp/c/pas num.cpp/c/pas ...
- bzoj2822[AHOI2012]树屋阶梯(卡特兰数)
2822: [AHOI2012]树屋阶梯 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 879 Solved: 513[Submit][Status] ...
- Docker容器的使用和连接
在上一篇文章<Docker从安装部署到Hello World>介绍了如何在CentOS7上安装Docker.这篇文章主要介绍一下Docker容器的使用和连接. vDocker 容器使用 1 ...
- Grafana+Zabbix+Prometheus 监控系统
环境说明 软件 版本 操作系统 IP地址 Grafana 5.4.3-1 Centos7.5 192.168.18.231 Prometheus 2.6.1 Centos7.5 192.168.18. ...
- CMake之CMakeLists.txt编写入门
自定义变量 主要有隐式定义和显式定义两种. 隐式定义的一个例子是PROJECT指令,它会隐式的定义< projectname >_BINARY_DIR和< projectname & ...
- A - High School: Become Human
Problem description Year 2118. Androids are in mass production for decades now, and they do all the ...