Spring Boot:jsp的替代品thymeleaf简单使用

最近开始使用Spring Boot开发轻量级服务器应用,由于jsp和Spring Boot兼容并不好,打包成Jar文件部署后,jsp不能一起打包进Jar包,导致无法生效。官方推荐使用模板(freemarker、thymeleaf等)作为页面展示,经过对比我觉得thymeleaf会更好,所以选择了thymeleaf来代替jsp。

文件路径

thymeleaf默认的存放目录是resources/templates,css和js文件默认的存放路径是resources/static

├── build.gradle
├── settings.gradle
└── src
    ├── main
    │   ├── kotlin
    │   ├── resources
    │   │   ├── application.properties
    │   │   ├── static
    │   │   │   ├── css
    │   │   │   │   └── index.css
    │   │   │   └── js
    │   │   │       └── index.js
    │   │   └── templates
    │   │       └── index.html
    │   └── webapp

无需启动服务即可预览

thymeleaf文件的是以.html结尾的。相对.jsp有个非常大的好处就是可以直接浏览器打开预览效果,而不需要启动服务。

关联CSS、JS资源文件

需要添加<html lang="en" xmlns:th="http://www.thymeleaf.org">标明 th标签,添加css需要填写hrefth:href属性,href属性是为了能够在不启动服务的情况下预览html,也是默认值,th:href是为了使用时候替代href。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../static/css/index.css" th:href="@{~/css/index.css}">
    <script src="../static/js/index.js" th:src="@{~/js/index.js}"></script>
</head>
<body>
  <div th:text="${message}">Message</div>
</body>

基本用法

index.html

...
<body>
    <div th:text="${user.name}">Wiki</div>
    <a th:href="${user.link}">查看详情</a>
</body>

Controller类如下:

@Controller
class TestController {
    @RequestMapping("/index")
    fun index(map: MutableMap<String, Any>): String {
        map["user"] = User(1, "Wiki","/user?id=1")
        return "index"
    }
}

结果:

Wiki
查看详情

其中查看详情是超链接http://localhost:8080/user?id=1

if判断标签

<!--当user.age小于18输出未成年-->
<span th:if="${user.age < 18}">未成年</span>

日期格式化

<span th:text="${#dates.format(user.created,'yyyy-MM-dd HH:mm:ss')}"></span>

遍历标签

<table border="1">
    <tr>
        <th>ID</th>
        <th>NAME</th>
    </tr>
    <tr th:each="user : ${users}">
        <td th:text="${user.id}">id</td>
        <td th:text="${user.name}">name</td>
    </tr>
</table>
<div th:each="user: ${users}">
    <span th:text="${user.id}"></span>
    <span th:text="${user.name}"></span>
</div>

th:include标签

footer.html文件内容:

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copyright">
    © 2016 xxx
</div>
</body>
</html>

index.html内容:

<body>
<div th:include="footer :: copyright"></div>
</body>

输出session的参数

<div th:text="${session.user.name}"></div>

转义问题

当我们的代码js中的包含&&等代码,需要转义,请直接这样用:

<script th:inline="javascript">
<![CDATA[
      $(window).load(function(){  
         xxxx(其中包含了&&这种需要转义的字符)
    }); 
]]>
</script>

[[]] 标签

当我们输出的内容不是标签或者内容,同样可以用[[]]来输出我们要的结果。

<p th:inline="text">Hello, [[${session.user.name}]]!</p>

等价:

<p>Hello, <span th:text="${session.user.name}">Wiki</span>!</p>

在javascript使用

<script th:inline="javascript">
    var name = /*[[${user.name}]]*/ 'Wiki';
</script>

th:text和th:utext区别

当我们需要输出带有换行符\n的字符串的时候,通常我们希望

<h3 th:text="${message}"></h3>
<h3 th:utext="${message}"></h3>

map["message"] = "我<br>是<br>Wiki",输出的源码如下:

<h3>我&lt;br&gt;是&lt;br&gt;Wiki</h3>
<h3>我<br>是<br>Wiki</h3>

显示结果如下:

我<br>是<br>Wiki
我
是
Wiki

坑:

  1. 由于[[]]thymeleaf语法,我们在定义二维数据的时候必须[ []]这样写,可以避免被识别成thymeleaf语法。
  2. &&也属于thymeleaf语法,必须通过包围,避免被转义。
  3. 当需要输出<br>换行符时候要改用th:utext。

 



作者:ImWiki
链接:https://www.jianshu.com/p/810ace1aeeae
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值