Thymeleaf通过fragment实现组件化，Java面试资料集合

<title>hello</title>

<link rel="stylesheet" th:href="@{app.css}">

<div th:replace="~{component::com1}"></div>



<!--保留原来的标签-->

<div th:insert="~{component::com2}"></div>



<!--只需要在公共组件添加一个 id 或 class 等只要css 能唯一定位到的属性即可   (此处以 id 为例)-->

<div th:insert="~{component::#com3}"></div>

**结果：**  

![在这里插入图片描述](https://img-blog.csdnimg.cn/20210410203931182.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0x6eTQxMDk5Mg==,size_16,color_FFFFFF,t_70)



> 注意：在调用fragment时是从Thymeleaf文件的根路径：src/main/resource/templates开始的，如果像读取子路径下的代码块应该配置相应的路径。



[]( )传递参数

-----------------------------------------------------------------



**定义：**

<p th:text="${onevar} + ' - ' + ${twovar}">...</p>

**使用：**

...

...

等价于

）

**案例：实现导航栏**



**新建一个模板布局 \_framents.html ：**

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title th:replace="${title}">模板布局</title>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">

<div class="ui container">

    <!--stackable:可堆叠,屏幕小的时候会堆叠到一块,用于适应移动端网页适配-->

    <div class="ui secondary stackable menu">

        <!--teal颜色header-->

        <h2 class="ui teal header item">导航栏</h2>

        <!--home icon:图标-->

        <a th:href="@{/page1}" class="teal m-item item" th:classappend="${n==1} ? 'active'"></i>第一页</a>

        <a th:href="@{/page2}" class="teal m-item item" th:classappend="${n==2} ? 'active'"></i>第二页</a>

        <a th:href="@{/page3}" class="teal m-item item" th:classappend="${n==3} ? 'active'"></i>第三页</a>



        <!--right:靠右-->

        <div class="right item m-mobile-hide">

            <!--可以加transparent:透明-->

            <div class="ui icon input ">

                <input type="text" placeholder="Search....">

                <i class="search link icon"></i>

            </div>

        </div>

    </div>



</div>

</br>

</br>

</br>

</br>

**新建三个页面：page1.html、page2.html、page3.html**

架构学习资料？

CodeChina开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频】

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！
4437848)]

[外链图片转存中…(img-oyiYY4mu-1630844437850)]

[外链图片转存中…(img-pUhjveMN-1630844437851)]

[外链图片转存中…(img-KQqNJUDM-1630844437853)]

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！