7.10.2 操作步骤
①给公共的代码片段起个名字
使用th:fragment来给这个片段命名：
样例代码如下：
<div th:fragment="abc"id="header">公共头部信息</div>
我给上述公共的代码片段命名为abc
②在其他页面根据名字引用
有三种写法，但实现的最终效果都相同
a. th:replace
效果：将引入标签整体替换目标标签
特点：它不会保留页面自身的标签
样例代码如下：
<div th:replace="base::abc"id="ahcden "></div>
它使用了 th:replace 属性来替换当前标签，其值为 base::abc 表示使用名为 abc 的模板作为替换内容。其中 base 是模板的前缀或命名空间，通常与模板所在的文件夹或包名相关联。此外，这个标签也有一个 id 属性，其值为 “ahcden”。
用通俗的话来讲，找存放公共代码片段的页面（base.html），在页面里找名称为abc的公共代码片段，将公共代码片段所在的标签替换使用th:replace的标签
b. th:insert
效果：将引入标签插入到目标标签内
特点：它会保留页面自身的标签
样例代码如下：
<div th:insert="base::abc"id="aheader"></div>
找存放公共代码片段的页面（base.html），在页面里找名称为abc的公共代码片段，将公共代码片段所在的标签引入到使用th:replace的标签内
c. th:include
效果： 将引入标签内容插入到目标标签内
特点：它会去掉片段外层标记，同时保留页面自身标记
样例代码如下：
<div th:include="base::abc"id="aheader"></div>
找存放公共代码片段的页面（base.html），在页面里找名称为abc的公共代码片段，将公共代码片段所在的标签，去掉外层的标签，将内容引入到使用th:replace的标签内
7.10.3 综合案例
案例需求：创建四个html(a,b,c,abc)，其中abc.html放前三个html都要用到的公共代码片段，剩余三个html的内容自定义。三个html均需在首页（index.html）通过超链接访问对应的servlet，再由各自对应的servlet穿给thymeleaf渲染对应的html文件，最后响应给客户端
1.创建三个html（a，b和c）对应的servlet（AServlet，BServlet和CServlet），并在web-xml中设置对应Servlet的访问路径
代码演示如下：
//在web-xml中设置对应Servlet的访问路径 <!-- 设置访问AServlet的路径 /a --> <servlet> <servlet-name>AServlet</servlet-name> <servlet-class>Servlet.AServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>AServlet</servlet-name> <url-pattern>/a</url-pattern> </servlet-mapping> <!-- 设置访问BServlet的路径 /b --> <servlet> <servlet-name>BServlet</servlet-name> <servlet-class>Servlet.BServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>BServlet</servlet-name> <url-pattern>/b</url-pattern> </servlet-mapping> <!-- 设置访问CServlet的路径 /c --> <servlet> <servlet-name>CServlet</servlet-name> <servlet-class>Servlet.CServlet</servlet-class> </servlet> <servlet-mapping> <servlet-name>CServlet</servlet-name> <url-pattern>/c</url-pattern> </servlet-mapping>
//创建a.html对应的AServlet import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class AServlet extends ViewBaseServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.processTemplate("a",request,response); } }
//创建b.html对应的BServlet import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class BServlet extends ViewBaseServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.processTemplate("b",request,response); } }
//创建c.html对应的CServlet import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; public class CServlet extends ViewBaseServlet { protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.processTemplate("c",request,response); } }
2.在首页（index.html）中设立访问AServlet，BServlet，CServlet的超链接，并创建abc，a，b和c.html
//在index.html中设立访问AServlet，BServlet，CServlet的超链接 <a href="a">访问AServlet</a><br> <a href="b">访问BServlet</a><br> <a href="c">访问CServlet</a>
//创建abc.html,它存放的是a，b和c.html都要用的公共代码片段 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <base th:href="@{/}"> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:fragment="base" id="header">公共头部信息</div> </body> </html>
//创建a.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <base th:href="@{/}"> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:include="abc::base" id="aheader"></div> <h1>a</h1> </body> </html>
//创建b.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <base th:href="@{/}"> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:include="abc::base" id="bheader"></div> <h1>b</h1> </body> </html>
//创建c.html <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <base th:href="@{/}"> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div th:include="abc::base" id="cheader"></div> <h1>c</h1> </body> </html>
3.测试代码
