在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如图所示，有太多的js需要导入了， 所以我想搞个通用的。
比如在jsp中：可以定义一个
&script xxxx&/script&
&script xxxx&/script&
&script xxxx&/script&
&script xxxx&/script&
&script xxxx&/script&
&script xxxx&/script&
&link xxxx css样式/&
&link xxxx css样式/&
&link xxxx css样式/&
全是这种的一个 jsp，然后在index.jsp中 include 即可。
那么，这种情况在thymeleaf中该如何处理呢？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
在templates下新建个common.html：&!DOCTYPE html&&html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3"&
&meta charset="UTF-8"/&
&link th:href="@{/plugin/jquery-easyui-1.5.2/themes/icon.css}" rel="stylesheet"/&
&link th:href="@{/plugin/jquery-easyui-1.5.2/themes/default/easyui.css}" rel="stylesheet"/&
&script th:src="@{/plugin/jquery/jquery-3.2.1.js}"&&/script&
&/head&&/html&在其他页面使用：&head th:include="common"&
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
楼主解决了啊，同求答案
该答案已被忽略，原因：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：thymeleaf的初次使用（带参请求以及调用带参js方法） - tiger_张小虎 - 博客园
之前对于前端框架接触较少，第一次接触thymeleaf，虽说看起来并不复杂但我还是花费了好一会儿才弄懂。
话不多少下面就简单说一下我在项目中的应用。
首先是java代码 controller层 将需要在前端展示的信息放入model中：
@RequestMapping("getAll")
public String getAll(Model model){
List&ScheduleJob& list = scheduleJobService.getAllJob();
model.addAttribute("list", list);
return "sch/quartz/list";
之后便是在前端html页面的遍历
1 &tr th:each="job:${list}"&
&td th:text="${job.name }"&任务名&/td&
&td th:text="${job.group }"&任务组&/td&
&td th:text="${job.status }"&状态&/td&
&td th:text='${job.cronExpression }'&&/td&
&td th:text="${job.className }"&类名&/td&
&td th:text="${job.description }"&描述&/td&
&td&&a href="#" th:href="@{/quartz/pause(name=${job.name},group=${job.group})}"&暂停&/a&&/td&
&td&&a href="#" th:href="@{/quartz/resume(name=${job.name},group=${job.group})}"&恢复&/a&&/td&
&td&&a href="#" th:href="@{/quartz/run(name=${job.name},group=${job.group})}"&执行一次&/a&&/td&
&td&&a href="#" th:href="@{/quartz/delete(name=${job.name},group=${job.group})}"&删除&/a&&/td&
&td&&button id="edit" th:name="${job.name}" th:id="${job.group}" onclick="test(this)"&修改cron表达式&/button&&/td&
这里直接在&tr&标签中& 用 th:each 放入需要遍历的内容，以及定义变量名；在&td&标签中用th:text来展示内容。
在&a&标签中用 普通的href不能实现带参的接口请求，所以需要使用 th:href 的这种语法来实现带参的接口请求，参数用（）跟在后面就可以。
至于调用js的带参方法就需要用12行那种办法 将参数作为 th 标签的name或者id传入方法中，具体的js方法如下；
1 function test(obj){
var cron = $("#cron").val();
var name = $(obj).attr("name");
var group = $(obj).attr("id");
$.post("edit",{"name":name,"group":group,"cron":cron},function(){
alert("更新成功！！！");
window.location.reload();
这样就能实现js带参方法的调用，目前来说我所知道的可以实现的就是这种方式。
补充一点，前端遍历的实体类需要重写toString方法，并且必须是如下格式的：
1 @Override
public String toString() {
StringBuilder builder = new StringBuilder();
builder.append("{name:\"");
builder.append(name);
builder.append("\", group:\"");
builder.append(group);
builder.append("\", cronExpression:\"");
builder.append(cronExpression);
builder.append("\", status:\"");
builder.append(status);
builder.append("\", description:\"");
builder.append(description);
builder.append("\", className:\"");
builder.append(className);
builder.append("\"}");
return builder.toString();
这样才能在页面上成功遍历。
对于thymeleaf，目前我也就掌握了这些简单的使用。1.thymeleaf 标签获取 contextPath：
&script type=&text/javascript& th:inline=&javascript&&
/*&![CDATA[*/
contextPath = /*[[@{/}]]*/ '';
2、thymeleaf 循环标签
&tr th:each=&info:${list}&&
info 为循环变量，在循环中使用info点属性即可
3、thymeleaf &使用 href标签带参数:
&a class=&acicon& th:href=&@{/attendanceRecord/userAttendanceRecordListPage(userInfoId=${attendanceRecordDTO.userInfoId})}&&
4、thymeleaf &中将值传给 事件函数:
&a class=&acicon& &&img
th:src=&@{/img/common/listedit.png}& th:name=&${userInfo.userInfoId}& onclick=&editUserInfoPage(this)&/&&/a&
然后 $(this).attr('name');获取name的值 这个方法有点臃肿 不过能实现
5、循环给select 赋值：
name=&areaInfoId& class=&selectpicker& onchange=&setCity(this)&&
&option&请选择省&/option&
&option th:each=&areaInfo : ${areaInfos}& th:value=&${areaInfo.areaInfoId}& th:text=&${areaInfo.areaName}&&&/option&
6、给select动态选中：
&select name=&enableFlag& class=&selectpicker& onchange=&setAreaName()&&
&option value=&true& th:if=&${userInfo.enableFlag ==true}& th:selected=&selected&&是&/option&
&option value=&false& th:if=&${userInfo.enableFlag ==false}& th:selected=&selected&&否&/option&
&option value=&true& th:if=&${userInfo.enableFlag ==false}&&是&/option&
&option value=&false& th:if=&${userInfo.enableFlag ==true}&&否&/option&
7、路径信息：
&script type=&text/javascript& th:src=&@{/js/basis/jquery/jquery-1.10.2.min.js}&&&/script&
&link rel=&stylesheet& type=&text/css& th:href=&@{/style/basis/bootstrap/bootstrap3.min.css}&/&
8、字符串拼接：
&td th:text=&${info}+'str'&&&/td&
注意双引号是必须要有的
9、使用thymeleaf控制 单选框
&li class=&fl&&
&input type=&radio& name=&enableFlag&
th:checked=&${userInfo.enableFlag== true}& value=&true& style=&margin: 10px;&/&
&label class=&iRadioLable& style=&width:auto; max-width:auto;margin: 0&&是&/label&
&li class=&fl&&
&input type=&radio& name=&enableFlag& th:checked=&${userInfo.enableFlag==false}& value=&false& style=&margin: 10px&/&
&label class=&iRadioLable& style=&width:auto; max-width:auto;margin: 0&&否&/label&
10、thymeleaf中使用三目运算
&td th:text=&${imposeOccupyInfo.certificateCode== null} ? '-':${imposeOccupyInfo.certificateCode}&&&/td&
11、thymeleaf中动态控制class 样式
th:class=&${enterpriseInfo.creditGrade gt iterStat.index}?'start':''&&&/li&
12、thymeleaf中使用时间格式化
&td th:text=&${#dates.format(enterpriseInfo.insertTime,'yyyy-MM-dd')}&&&/td&
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40389次
排名：千里之外
原创：16篇
转载：29篇
(1)(5)(1)(3)(3)(1)(7)(1)(1)(22)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'SpringBoot+Thymeleaf实现html文件引入（类似include功能） - 简书
SpringBoot+Thymeleaf实现html文件引入（类似include功能）
由于对高大上的前端处理不太熟悉，想直接通过MVC的方式进行内容传递，因此选用了Thymeleaf模版处理向前端传值的问题。但是觉得很多PHP框架所实现的include模版的方式很不错，能够很好的实现头文件、导航、页尾等和主要内容的解耦，因此想通过使用Thymeleaf模版的同时，也能实现类似于include的功能。
思路和背景
觉得如果有精力，最好还是RESTFul的结构，然后前端采用angularjs之类的方式来处理可能更合理，由于不太懂前端，所以只是自己yy一下
言归正传，环境主要是采用了spring boot框架，外加Thymeleaf进行构建的。主要的思路就是通过使用Thymeleaf的"th:utext()"方式，在后端处理中，将预留的头文件、导航等通过ModelMap映射到实际的网页中。
首先配置一个可以运行的Spring boot+Thymeleaf项目，具体教程很多，就不啰嗦了。
然后采用了默认的目录配置，大致如下：resource
——（默认的静态文件目录）
templates ——（默认的Thymeleaf模版目录）
application.properties
2. 基本处理
之后的在模版文件中需要include到其它内容的部分采用th:utext()函数把相关部分标注出来，并且在controller中把相关内容加载到ModelMap中，大概是这个样子的模版文件部分：
&header class="am-topbar admin-header" th:utext="${headerContent}"&
&div class="am-topbar-brand"&
&strong&创澳商务&/strong& &small&交易者系统&/small&
后台处理部分：
@RequestMapping("/background")
private String backgroud(ModelMap map){
map.addAttribute("headerContent", "hello word!");
return "background";
3. 所见即所得的方式
因为经常可能需要修改模版文件（html）使得达到预期的效果，而Thymeleaf等框架最大的一个特典就是前端的设计和后端的实现可以得以分离 （因为直接使用的是html的文件，即使不需要服务器也能通过浏览器直接浏览设计好的模版文件），所以我们就希望能够引入的也是html文件，这也符合include功能的基本构思。所以在项目中引入了Jsoup包来解决遍历dom文件的问题。当然这个完全过程完全可以略过，直接用个txt或者json啥的
当然也可以选择其它广泛使用的dom遍历工具，只是在这里想安利一下这个jsoup这个包。jsoup的选择器语法和JQuery等前端工具的语法基本一致，对于习惯了JQuery的人真是一个福音……具体配置如下：加入maven依赖
&dependency&
&groupId&org.jsoup&/groupId&
&artifactId&jsoup&/artifactId&
&version&1.9.2&/version&
&/dependency&
采用selector获取element，得到内容
map.addAttribute("headerContent", doc.select("header").toString());
map.addAttribute("sideBarContent", doc.select("#admin-offcanvas").first().toString());
通过这么操作之后，就实现了可以通过html直接设计页面，之后通过后台程序include到前端页面了。
4. include头部引用
对于一般的导航部分（如div）等，只要进行进行了以上处理就ok了，但是既然是想实现include类似的功能，分离head中的各种引用就自然是必须的了。不然每次如果改了需要引用的css或者js都要重新每个文件都要修改，想想都头疼。
但是问题在于，在通过使用ModelMap引用头部link的时候，下面这种处理是得不到解析的。那么我们的css和js的引用自然就乱套了。
th:href="@{/css/main.css}"
解决的方案应该很多，我在处理的时候，主要是通过利用框架自身的特点，将所有的css文件都放在了static文件夹里面（spring boot默认存放的静态资源的地方），然后直接通过写死href值的方式来解决这一问题的（href="css/main.css"）。
当然我觉得应该可能还有更好的方案，也请大家指教一下~
5. static下面css文件可能不一致的问题
虽然我们解决了link和script等引入文件路径的问题，但是将href写死又引入了新一个问题，我们没有办法直接使用static下面的css文件，因为html文件都处于templates下面，而且如果我们想在templates下面新建跟多文件夹，虽然通过服务器能够正常引入到正确的css文件，但是不能直接通过浏览器进行页面的设计和编辑，也就是违反了我们之前提到的前端的设计和后端的实现分离的特点。
为了进一步解决这个问题，虽然可以简单的就在templates文件夹下面拷贝一份css文件（如果想新建更多子文件夹的，那每个文件夹下面都需要拷贝一份css文件），但是显然这个方案一点都不够优雅，而且可能会由于忘记同步css文件造成服务器显示和设计显示不一致的问题。
那么为了要优雅，不要污，我采用了一种新的方案，就是html文件中直接写入到static文件夹下css的href，而再服务器引入的时候，通过将static等前缀进行删除，来得到新的href的方式，保证了使用同一份css的同时，也可以分离前端的设计和后端的实现。而且由于路径中都含有static这个特征，直接使用substring功能真是爽翻了。具体实现如下：
public void getNavigation(Integer naviType,ModelMap map){
String fileUrl = templateU
switch(naviType){
//admin navigatioin
fileUrl = fileUrl + "header_admin.html";
//user navigation
fileUrl = fileUrl + "header_trader.html";
fileUrl = fileUrl + "header_trader.html";
InputStream input = this.getClass().getResourceAsStream(fileUrl);
Document doc = Jsoup.parse(input,"UTF-8","/");
map.addAttribute("headerContent", doc.select("header").toString());
map.addAttribute("sideBarContent", doc.select("#admin-offcanvas").first().toString());
map.addAttribute("footerContent", changeAttrAddress(doc.select("footer"),"script","src"));
map.addAttribute("headContent", changeAttrAddress(doc.select("head"),"link","href"));
} catch (IOException e) {
logger.error("error when using jsoup");
logger.error(e.getMessage());
map.addAttribute("headContent", "");
map.addAttribute("headerContent", "");
map.addAttribute("sideBarContent", "");
map.addAttribute("footerContent", "");
private String changeAttrAddress(Elements parentNode,String dealingNodeName,String attrName){
Elements elements = parentNode.select(dealingNodeName);
for(Element elment : elements){
String orignalAddress = elment.attr(attrName);
if(orignalAddress.isEmpty()){
orignalAddress = delInnerPath(orignalAddress);
elment.attr(attrName,orignalAddress);
return parentNode.toString();
private String delInnerPath(String address){
String keyWord = "static";
if(address.contains(keyWord)==false){
int position = address.indexOf(keyWord) + keyWord.length() + 1;
return address.substring(position);
注意要使用th:utext()函数，而非th:text()函数，原因你懂的~
处理路径时，如果使用了获取绝对路径的方式，可能会造成访问权限问题，在web项目中要慎重
大家可以根据自己的需求更改spring boot和Thymeleaf的文件目录，具体可以参考
区区简介怎么能表达我的个性！ (～￣▽￣)～