Thymeleaf入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了Thymeleaf入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Thymeleaf是前端开发模板，springboot默认支持。前端模板用法大多数是类似的jsp、thymeleaf、vue.js都有while\for\if\switch等使用，页面组件化等。

1.前端模板区别

jsp是前后端完全不分离的，jsp页面写一堆Java逻辑。
thymeleaf好处是html改造方便，可以独立预览。vue.js是完全前后端分离的。

2.快速入门

(1)新建springboot项目

# 关闭Thymeleaf的缓存 spring.thymeleaf.cache=false

(可忽略)可以开启热部署，maven，引入devtool，配置SpringbootApplication,Running Application

Update Policies ,选择 Update resources

准备index.html

th:text ="${name}"

创建Controller

@GetMapping("/index")

String index(Model model){
model.setAttribute("name","html");

return "index"
}

3.Thymeleaf语法

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
</head>
<body>
    <!--通过${}来获取model中的变量，是ognl表达式-->
    <p th:text="${name}">测试</p>
    <!--字符串拼接-->
    <p th:text="|测试-${name}|"></p>
    <!--对象,星号选择-->
    <ul th:object="${user}">
        <li th:text="*{title}"></li>
        <li th:text="*{name}"></li>
        <li th:text="*{age}"></li>
        <!--if判断-->
        <li th:if="*{isVip}=='1'" th:text="*{isVip}"></li>
        <!--追加css-->
        <li th:styleappend="*{isVip}=='1' ? 'margin-top:50px' : _"></li>
        <li th:classappend="*{isVip}=='1' ? 'css_test' : _"></li>
    </ul>

    <style>
    .css_test{
        margin-top:50px;
        background-color: red;
    }
    </style>

    <!--内联js-->
    <script th:inline="javascript">
        var name =/*[[${user.name}]]*/ '李四';
        console.log(name);
    </script>

    <!--内嵌变量 dates,${#dates.format(date, 'dd/MMM/yyyy HH:mm')}-->

    <!--组件-->
    <div th:replace="include::body"></div>

</body>
</html>

运行效果

Thymeleaf入门,html5

3.引入静态文件
th:href="@{/blog/yummy-jekyll/plugins/jquery/dist/jquery.min.js}"
@表示static路径
假设html在templates目录下，
<link href="../static/blog/..."

th:href 与 href 的区别
href始终从端口开始作为根路径，如8080/channel/page/add
th:href会寻找项目路径作为根路径，如8080/dx/channel/page/add
4.定义组件及使用
th:fragment="header(title,keywords)" header是组件名称，后面是传递参数

使用方式： html页面::组件名称（参数）
th:replace="blog/yummy-jekyll/header::header('首页','My Blog')" 文章来源地址https://www.toymoban.com/news/detail-615247.html

到了这里，关于Thymeleaf入门的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！