thymeleaf使用探索

时间：2024-05-18 15:41:38

这里写自定义目录标题

thymeleaf：

首先,我们先把application.yml配置好：

spring:
  mvc:
    #设定静态文件路径,js,css等
    static-path-pattern: /static/**

  # thymeleaf 静态资源配置
  thymeleaf:
    prefix: classpath:/templates/
    suffix: .html
    mode: HTML5
    encoding: UTF-8
    servlet:
      content-type: text/html
    #关闭缓存 即时刷新，上线环境推荐改成true
    cache: false

**一、**基本使用:
Control类如下,我们分别以静态页面和动态页面为例

@Controller
class WebControl {
	//静态页面请求
    @RequestMapping("/index0")
    fun index0(): String {
        return "thymeleaf/index0"
    }
}

结构布局:
thymeleaf使用探索
index0.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Thymeleaf
<h1>我是静态页面</h1>
</body>
</html>

thymeleaf使用探索
可以看到,直接访问到页面内容，这没什么好说的，最简单的一种。
下面我们来看基本引用

	//动态页面请求
    @RequestMapping("/index1")
    fun index1(map: ModelMap): String {
        map.addAttribute("name","我是动态页面")
        return "thymeleaf/index1"
    }

index1.html代码:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Thymeleaf
<h1 th:text="${name}">hell0 World</h1>
</body>
</html>

我们来访问一下页面
thymeleaf使用探索

**二、**对象引用:
我们先看Control中的内容:

@RequestMapping("/index2")
    fun index2(map: ModelMap): String {
        val queryAreaById = areaDao?.queryAreaById(1)
        map.addAttribute("area",queryAreaById)
        return "thymeleaf/index2"
    }

这里我们准备了两条数据:
thymeleaf使用探索
我们再来看看html的代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
thymeleaf对象引用
<div>
    <br/>位置名称:<input th:id="${area.areaName}" th:name="${area.areaName}" th:value="${area.areaName}"/>
    <br/>优先级:<input th:value="$area.priority"/>
    <br/> 更新日期:<input th:value="$area.lastEditTime"/>
</div>
</body>
</html>

运行一波:
thymeleaf使用探索
我累个擦嘞，咋回事，感觉没错呀

敲黑板了啊！！！！
注意注意注意：

**像area.priority这种对象引用一定要用${area.priority}格式括起来,$area.priority 和 {$area.priority}都不对**

更换后代码如下:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
thymeleaf对象引用
<div>
    <br/>位置名称:<input th:id="${area.areaName}" th:name="${area.areaName}" th:value="${area.areaName}"/>
    <br/>优先级:<input th:value="${area.priority}"/>
    <br/> 更新日期:<input th:value="${area.lastEditTime}"/>
</div>
</body>
</html>

运行
thymeleaf使用探索
恩，Nice!!
不过，，好像不对呀，这个日期我数据库里面好像不是这个格式的呀！！
不要急，这就引出我们第三个概念:

**三、**时间类型转换:
我们先使用老外的方式试一下

<br/>更新日期:<input th:value="${#dates.format(area.lastEditTime,'yyyy-MM-dd HH:mm:ss')}"/>

thymeleaf使用探索行是行了，好像哪里还不对

不错，时间不对！！数据库里面时间是2019年2月23日16点28分59秒，咋查询到了网页上面变成了24号还转点了？
没错！正是东8区没设置，说到这里，我也附上几段代码，毕竟互相学习嘛！！

这是原来的代码：

spring:
  datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://127.0.0.1:3306/ebox?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT&userSSL=false
      username: root
      password: 123456

修改后代码，注意:GMT后面不能直接使用“+”号

spring:
  datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://127.0.0.1:3306/ebox?useUnicode=true&characterEncoding=UTF-8&serverTimezone=GMT%2B8&userSSL=false
      username: root
      password: 123456

新版数据库驱动连接问题可参考：
https://blog.****.net/love20yh/article/details/80799610?utm_source=blogxgwz3

改完之后，重新运行:
thymeleaf使用探索完美！！

等等！！还是不够完美，还要优化！！
前面讲到：对象引用每一个都要area.XXX，好麻烦啊，能不能简单一点呢？
当然可以！！

废话不多说，上代码:

<div th:object="${area}">
    <br/>位置名称:<input th:id="*{areaName}" th:name="*{areaName}" th:value="*{areaName}"/>
    <br/>优先级:<input th:value="*{priority}"/>
    <br/> 更新日期:<input th:value="*{lastEditTime}"/>
    <br/>更新日期(规范显示):<input th:value="*{#dates.format(lastEditTime,'yyyy-MM-dd HH:mm:ss')}"/>
</div>

运行，完事！
thymeleaf使用探索
效果一样。是不是感觉简洁了很多？刀那符号也被换掉了,和基本类型几乎都快差不多了，恩，不错，要的就是这效果！！

什么？你说然而并没有？那好吧，萝卜白菜，各有所爱吧，反正我是比较喜欢！！

**四、**text与utext:
还是先从Control开始：

    @RequestMapping("/index3")
    fun index3(map: ModelMap): String {
        map.addAttribute("content","<font color='green'><b>Hello! 磊哥哥</b></font>")
        return "thymeleaf/index1"
    }

我们可以看到,这次我传给前端的是一串代码
再看一下前端代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Thymeleaf
<h1 th:text="${content}">hell0 World</h1>
<h1 th:utext="${content}">hell0 World</h1>
</body>
</html>

就是一个text和utext一个字母的区别
好，来看一下效果图:
thymeleaf使用探索从图片可以看出，text是将服务器的内容全部输出了，而utext则将服务器的内容转换后才输出。

**五、**URL:
我们知道,原始的html连接编码通常如下:

<a href="http://www.baidu.com">这是一个网址</a>

我们运行一下看看:
thymeleaf使用探索不出所料，还是这个样子
接下来我们来看一下thymeleaf是怎么加载网址的呢

<a th:href="@{http://www.baidu.com}">这是一个网址</a>

没错，它变复杂了，变复杂了，复杂了，杂了，了！！
我们运行一下看看
thymeleaf使用探索额呵，洗了佛，根本就没啥区别啊！！
没错，就是这么优秀！！

**六、引入静态资源文件css/js:
1、yml中配置不能丢：static-path-pattern: /static/
2、在static中建一个js文件夹，文件夹下建一个test.js文件
thymeleaf使用探索
test.js中代码：

alert("你好");

3、我们在html的head标签中引入js

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/static/js/test.js}"></script>
</head>

运行:
thymeleaf使用探索“redirect:/th/test”
**七、**条件判断th:if：
先看前端代码:

<form th:action="@{/login}" th:object="${area}" method="post" th:method="post">
    <input type="text" th:field="*{areaName}"/>
    <input type="submit" value="提交"/>
</form>

后端:

    @PostMapping("/login")
    fun login(area:Area):String{
        LogCat.log(TAG,area?.areaName!!)
        return "redirect:/index3"
    }

thymeleaf使用探索我们提交一下， 控制台输出如下:
thymeleaf使用探索
可以看到， th:field的值的效果是直接把id、name 和value结合起来了
thymeleaf使用探索

<div th:if="${area.priority} == 2">优先级高</div>
<div th:if="${area.priority} gt 1">大于</div>
<div th:if="${area.priority} lt 1">小于</div>
<div th:if="${area.priority} ge 1">大于等于</div>
<div th:if="${area.priority} le 1">小于等于</div>

**八、**th:unless 与th:if：

这个就不说了，和th:if刚好是相反的，自己可以试一下
下面我们来看一下选择框

html代码:

<select>
    <option>选择框</option>
    <option th:selected="${area.areaName eq '东苑'}">东家</option>
    <option th:selected="${area.areaName eq '北苑'}">北家</option>
</select>

运行效果：
thymeleaf使用探索

**九、**循环th:each:
先看一下html代码:

<table>
    <tr>
        <th>地区名称</th>
        <th>优先级</th>
        <th>优先级备注</th>
        <th>更新日期</th>
    </tr>
    <tr th:each="user:${areaList}">
        <td th:text="${user.areaName}"></td>
        <td th:text="${user.priority}"></td>
        <td th:text="${user.priority gt 1} ? 优先级高 : 优先级低">优先级不高不低</td>
        <td th:text="${#dates.format(user.lastEditTime,'yyyy-MM-dd HH:mm:ss')}"></td>
    </tr>
</table>

运行效果图:
thymeleaf使用探索

**十、**th:switch与th:case：
先看html代码:

<div th:switch="${area.areaName}">
    <p th:case="'北苑'">北家的</p>
    <p th:case="#{roles.manager}">普通管理员</p>
    <p th:case="#{roles.superadmin}">超级管理员</p>
    <p th:case="*">别人家的</p>
</div>

咦！！是不是有点懵逼？这个roles哪里来的？
不要急，下面要说的就是这个！！
首先配置:

spring:
  #配置i18n 资源文件,供thymeleaf读取
  messages:
    basename: i18n/messages
    cache-seconds: 3600
    encoding: UTF-8

然后：

你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
thymeleaf使用探索
哦！！！是不是有种恍然大悟的赶脚？我们再来看看这个文件里面都可以写什么？

#用户自定义权限
roles.manager=manager
roles.superadmin=superadmin

好了，本次分享就到这里了，都快转点了，后面写的有点潦草，将就着看吧，我也是菜鸟一枚，自己写着以后看的！！
好了，废话不多说，挂电话了，各位好梦，晚安！！

相关文章