5.8 Thymeleaf公共片段(标签)和内联JS · spring boot 2.x 技术参考文档

### 一、片段表达式(标签)`~{}` 使用方法：首先通过`th:fragment`定制片段，然后通过`th:replace`填写片段路径和片段名。例如：我们通常将项目里面经常重用的代码抽取为代码片段(标签) ~~~  <head th:fragment="static(version)"> <script th:src="@{/webjars/jquery/${version}/jquery.js}"></script> </head> ~~~ 然后在不同的页面引用该片段，达到代码重用的目的 ~~~  <div th:replace="~{common/head::static(1.12.4)}"></div> ~~~ 在实际使用中，我们往往使用更简洁的表达，去掉表达式外壳直接填写片段名。例如： ~~~  <div th:replace="common/head::static"></div> <div th:insert="common/head::static"></div> <div th:include="common/head::static"></div> ~~~ 关于thymeleaf th:replace th:include th:insert 的区别 * th:insert ：保留自己的主标签，保留th:fragment的主标签。 * th:replace ：不要自己的主标签，保留th:fragment的主标签。 * th:include ：保留自己的主标签，不要th:fragment的主标签。（官方3.0后不推荐） > 值得注意的是，使用替换路径`th:replace`开头请勿添加斜杠`/`，避免部署运行的时候出现路径报错。（因为默认拼接的路径为`spring.thymeleaf.prefix = classpath:/templates/`）片段表达式是Thymeleaf的特色之一，细粒度可以达到标签级别，这是JSP无法做到的。片段表达式拥有三种语法： * `~{ viewName } 表示引入完整页面` * `~{ viewName ::selector} 表示在指定页面寻找片段其中selector可为片段名、jquery选择器等`,即可以在一个heml页面内定义多个片段. * `~{ ::selector} 表示在当前页寻找` **举例操作辅助解释：** 先创建一个文件夹common，创建一个Form.html文件 ![](https://img.kancloud.cn/6b/0d/6b0d2375048e0390903c97ea341d21d5_354x145.png) 将原来html中form表单剪切进去 ![](https://img.kancloud.cn/b0/86/b086233eb1ca14720edec6731c2e1170_964x261.png) 修改为 ~~~ <form th:fragment="userForm(user)" id="userForm"> <input id="id" name="id" th:value="${user.id}"/> <input id="username" name="username" th:value="${user.username}"/> <input id="password" name="password" th:value="${user.password}"/> <input name="name" th:value="${'I am '+(user.username!=null?user.username:'NoBody')}"/> </form> ~~~ 原html页面表格处添加如下代码，实现form表格的复用 ~~~ <div th:replace="~{common/Form::userForm(${user})}"></div> <div th:insert="~{common/Form::userForm(${user})}"></div> ~~~ 实际情况表格引用和之前效果相同 ![](https://img.kancloud.cn/33/c4/33c4ee70a52348ac965fb7cb9dc4aa6c_828x190.png) replace、insert、includ的区别： replace是替换整个div标签， insert是将公共片段放入div标签内， includ是将form标签内的内容放入div标签内。大体含义如下图： ![](https://img.kancloud.cn/b0/68/b068c775ea3d945c75617d26c17e7ead_616x415.png) includ已经不推荐使用了 ![](https://img.kancloud.cn/ff/5a/ff5a80a597bd283b2197fd32f5982db1_404x121.png) ## 二、内联语法我们之前所讲的内容都是在html标签上使用的thymeleaf的语法，那么如果我们需要在html上使用上诉所讲的语法表达式，怎么做？答：标准格式为：`[[${xx}]]`，可以读取服务端变量，也可以调用内置对象的方法。例如获取用户变量和应用路径： ~~~ <script th:inline="javascript"> var user = [[${user}]]; var APP_PATH = [[${#request.getContextPath()}]]; var LANG_COUNTRY = [[${#locale.getLanguage()+'_'+#locale.getCountry()}]]; console.log(user.password); console.log(APP_PATH); console.log(LANG_COUNTRY); </script> ~~~ ![](https://img.kancloud.cn/d9/b8/d9b8ebdd4a9936cd9b03f5a0cccdfd98_397x139.png) 页面内容正常引用 ![](https://img.kancloud.cn/8b/00/8b00ded4eec13ff7096d422cdacf2686_716x256.png) log输出正常引用 ![](https://img.kancloud.cn/1f/e7/1fe707b75d5ca0c66047af5a58beb6f6_527x304.png) * 标签（代码片段）内引入的JS里面能使用内联表达式吗？答：不能！内联表达式仅在页面生效，因为`Thymeleaf`只负责解析一级视图，不能识别外部标签JS里面的表达式。 * JS引用模板变量时要左右加两个[]也就是[[${xx}]]