Thymeleaf Fragment Demo

最新推荐文章于 2023-12-07 11:57:53 发布
最新推荐文章于 2023-12-07 11:57:53 发布
阅读量280 收藏
点赞数
分类专栏： thymeleaf 文章标签： thymeleaf fragment
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liyanlei5858/article/details/80183471
版权

Controller：

@Controller
@RequestMapping("/")
public class IndexController {

    
    @RequestMapping("/frag")
    public String toFrag(Model model) {
        return "fragTest";
    }

}

templates/fragTest.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<!--
<head th:include="/frag/oneHeader :: head(~{::title},~{::link},~{::script})">
    <title>fragTest oneHeader</title>
    <link rel="stylesheet" th:href="@{/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
    <script th:src="@{/lib/jquery-3.3.1.min.js}"></script>
</head>
-->

<head th:include="/frag/twoHeader :: head(~{::title})">
    <title>fragTest twoHeader</title>
</head>



<body>

<!--
<div th:replace="/frag/header :: frag ('one', 'two')">...</div>
<div th:replace="/frag/header :: frag (onevar='good',twovar='morning')">...</div>
可以不按照参数定义的顺序
<div th:replace="/frag/header :: frag (twovar='man',onevar='woman')">...</div>
-->


<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">
            <div class="panel panel-default">
                <div class="" style="margin-top: 30px">
                    <h3 class="panel-title " style="color:red" th:text="${msg}">添加失败</h3>
                </div>
                <div class="panel-heading" style="margin-top: 30px">
                    <h3 class="panel-title">Login</h3>
                </div>
                <div class="panel-body">
                    <form th:action="@{'/user/saveOne'}" method="post" th:object="${user}">
                        <div class="form-group form-inline">
                            <label for="txtName" class="col-md-3 control-label"
                                   style="text-align: right;">用户名</label>
                            <div class="col-md-9">
                                <input name="name" type="text" class="col-md-9 form-control" id="txtName"
                                       placeholder="请输入用户名" th:field="*{name}"
                                       required="required" />
                            </div>
                        </div>
                        <div class="form-group form-inline" style="padding-top:45px">
                            <label for="txtPwd" class="col-sm-3 control-label"
                                   style="text-align: right;">密码</label>
                            <div class="col-md-9">
                                <input name="pwd" type="password" class="col-sm-9 form-control" id="txtPwd"
                                       placeholder="请输入密码" th:field="*{pwd}" />
                            </div>
                        </div>
                        <div class="form-group form-inline" style="padding-top:45px">
                            <label for="txtAge" class="col-sm-3 control-label"
                                   style="text-align: right;">年龄</label>
                            <div class="col-md-9">
                                <input name="age" type="text" class="col-sm-9 form-control" id="txtAge"
                                       placeholder="请输入年龄" th:field="*{age}" />
                            </div>
                        </div>
                        <div class="form-group form-inline" style="padding-top:45px">
                            <label for="txtSex" class="col-sm-3 control-label"
                                   style="text-align: right;">性别</label>
                            <div class="col-md-9">
                                <input name="sex" type="text" class="col-sm-9 form-control" id="txtSex"
                                       placeholder="请输入性别" th:field="*{sex}" />
                            </div>
                        </div>

                        <div class="form-group" style="padding-top:45px">
                            <div class="col-md-offset-3 col-md-5">
                                <button class="btn btn-primary btn-block" type="submit">添加</button>
                            </div>

                        </div>
                        <div class="alert alert-danger media" th:if="${errorMsg != null}" style="padding-top:45px">
                            <strong th:text="${errorMsg}"> </strong>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- common 的 定义好的 fotter模板引用  无参  -->
<!--<div class="container" th:replace="common :: footer"></div>-->

<script type="text/javascript">
    $(function() {

    });
</script>
</body>
</head>
</html>

templates/frag/oneHeader.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title,links,scripts)">
    <title th:replace="${title}">frag header</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <th:block th:replace="${links}" />
    <th:block th:replace="${scripts}" />
</head>

<body>
<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
</body>
</html>

templates/frag/twoHeader.html：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <title th:replace="${title}">frag header</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" th:href="@{/lib/bootstrap-3.3.7-dist/css/bootstrap.min.css}">
    <script th:src="@{/lib/jquery-3.3.1.min.js}"></script>
</head>
<body>
<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
</body>
</html>


馥钰
关注
专栏目录
springboot博客（5）Thymeleaf入门demo Thymeleaf与SpringBoot整合
阿休要努力
03-13 526
该篇为：慕课网基于Spring Boot技术栈博客系统企业级前后端实战第5章的学习笔记 今天第一次接触Thymeleaf，是在学习Spring boot中遇到的，Thymeleaf常在Spring boot中使用。接下来对Thymeleaf进行一个简单的介绍，然后通过一个小demo，进行与Springboot进行整合，用到的构建工具是Gradle。 目录 一）Thymeleaf 是个什么...
springboot 集成 thymeleaf及简单demo
leomoon
12-15 921
thymeleaf
org.thymeleaf.exceptions.TemplateInputException: Error resolving fragment: “~{index :: most_hits}“:
Theshy08的博客
11-25 1252
关于碎片问题： 犯了一个很愚蠢的错误符号错误，写篇文章来警示自己 碎片的名称不一样一个下滑线一个减号应该是手抽了，很蠢
Error resolving fragment: "~{_fragments :: 'head(~{::title}）'}"错误。
ch_eers的博客
03-20 3097
关于SpringBoot中thymeleaf模板中fragment的Error resolving fragment: "~{_fragments :: ‘head(~{::title}）’}"错误。 错误原因是pom.xml文件中的<thymeleaf.version>和<thymeleaf-layout-dialect.version>版本不一致导致，将两个的版本改为一...
th:include的使用
海涛高软
07-05 4309
th:include 和 th:replace 的区别
thymeleaf 动态更换内容( Error resolving template xxx, template might not exist or might not be ......)
qq_40913192的博客
09-24 1080
thymeleaf 动态更换内容（Error resolving template xxx, template might not exist or might not be ......错误解决的方法序言 错误解决的方法 th:replace="__${page_area}__" 加双下划线，是预处理表达式 序言 今天我用thymeleaf的时候需要实现一个功能，就是用th:fragmen...
thymeleaf中的fragment使用
jonathan的专栏
10-23 2万+
fragment介绍fragment类似于JSP的tag，在html中文件中，可以将多个地方出现的元素块用fragment包起来使用。fragment使用定义fragment所有的fragment可以写在一个文件里面，也可以单独存在，例如<footer th:fragment="copy"> the content of footer </footer> fragment的引用 th:i
spring-boot-thymeleaf DEMO
12-24
在 "spring-boot-thymeleaf DEMO" 中，我们将看到如何将 Spring Boot 和 Thymeleaf 整合到一起，构建一个动态网页应用。首先，你需要在项目中添加 Thymeleaf 的依赖，这通常在 `pom.xml` 或 `build.gradle` 文件中...
Thymeleaf语法详解
最新发布
m0_71106830的博客
12-07 1150
Thymeleaf 是一款流行的服务器端 Java 模板引擎，能够完美地集成到 Spring Framework 中，并且与 HTML、XML、JavaScript 等格式协同工作。通过 Thymeleaf 强大的模板功能和易于上手的语法，开发人员可以轻松实现动态内容的呈现和交互。本文将深入探讨 Thymeleaf 的常用语法，助你快速掌握这一工具的精髓。
thymeleaf没有自动渲染
qq_39728274的博客
09-10 1064
Thymeleaf使用 源码： 导入名称空间 <html lang="en" xmlns:th="http://www.thymeleaf.org"> 使用相关语法 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF‐8"> <title>Title</title&
thymeleaf中layout:fragment的使用和布局
sddaaa的博客
05-27 2万+
我是用的spring boot 直接的构建的  所有的都是HTML5方式使用的 注意版本和依赖thymeleaf中layout:fragment的使用layout.html是布局文件 就是最外面通用一个只要理解了谁引用了谁就好了=================decorator方式是整个布局文件替换 不是片段替换=================index.html引用layout.html后 ...
Error:(26, 117) 错误: 不兼容的类型: Fragment无法转换为NewsContentFragment 解决方法
Leyvi_Hsing的博客
01-02 9577
在用Android Studio 编写碎片程序的时候出现了以下错误： 图1 碎片程序如下：
Thymeleaf标签之th:include
六年鹿苑的博客
03-15 8468
本文链接：http://miss168.net/detail/science/631252567581528064/0/836681278072819712 需要引入公共head的页面代码： <head> <th:block th:include="/web/include :: header(${columnName})"></th:block> </head> 其中include第一个参数是组件页面地地（不含后缀，实际页面是/web/includ
th:block layout:fragment="content"
maqingbin8888的专栏
08-27 1689
页面A &lt;th:block layout:fragment="xxx"&gt;         aaaaaaaaaaaa &lt;/th:block&gt; 这个意思 就是将aaaa..这些内容 插入到 layouts/layout.html里的名为xxx的片断 这是layout.html里定义的片断...
thymeleaf替换HTML片段
叶遮沉阳的博客
03-13 3445
1. 描述： 后端生成一段html代码片段，动态添加到前端页面。 使用 th:utext 可实现html代码片段的替换。 2. 后端： model.addAttribute("htmlcontent","&lt;div&gt;HTML内容&lt;/div&gt;"); 3. 前端 &lt;div&gt; &lt;p th:utext="${htmlcontent}"&gt;co
Thymeleaf教程 （十二） 标签内，js中使用表达式
热门推荐
mygzs的专栏
09-26 9万+
表达式同样可以在标签内或者js中使用
thymeleaf fragment传值问题
09-15
对于Thymeleaf中的fragment传值问题，可以使用Thymeleaf的内置语法来传递值。在使用th:replace指令时，可以通过指定参数来传递值，例如： ``` (active='emps')" > ``` 在这个例子中，active参数被设置为'emps'，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值