Thymeleaf使用遇到的坑

最近换了一家新公司，项目中需要使用thymeleaf模板引擎。原来项目中都没用过，所以我得自己一点点研究。

以下是使用过程中遇到的一些坑：

1. @{} 引用URL

一开始后台中使用Context 实现类，页面如下：

<img src="D:\项目资料\0010023908775727_b.jpg"
         th:attr="src=@{${imgPath}},title=#{logo},alt=#{logo}" />

 

但是执行的时候却遇到下面的异常：

2017-11-16 09:50:55.302 ERROR 4780 --- [nio-8080-exec-5] org.thymeleaf.TemplateEngine             : [THYMELEAF][http-nio-8080-exec-5] Exception processing template "examp
le": Link base "" cannot be context relative (/) or page relative unless you implement the org.thymeleaf.context.IWebContext interface (context is of class: org.thymeleaf.context.Context) (example:14)

 

原来thymeleaf提供了两个实现IContext的具体实现类，分别是： 

org.thymeleaf.context.Context（extends AbstractContext implements IContext）
org.thymeleaf.context.WebContext (extends AbstractContext implements IWebContext extends IContext)

 

要使用相对定位，必须指定一个实现IWebcontext接口的对象，IWebcontext对象可以传入request,response,servletContext参数，可以用来地位应用程序的根路径

 

后台代码

WebContext context = new WebContext(request,response,request.getServletContext());
        context.setVariable("imgPath","D:"+ File.separator+"test"+File.separator+"0017031042011883_b.jpg");
        context.setVariable("logo", "这是一张图片");

//渲染模板
FileWriter write = null;
try {
    write = new FileWriter("result.html");
} catch (IOException e) {
    e.printStackTrace();
}
templateEngine.process("example", context, write);

 

 

2. theamleaf中的onclick事件不能单纯的通过 onclick="${变量}" 来实现，而要通过下面这种方式来操作并传值，已验证

<img data-th-onClick="'javascript:bindStaticUrl(\''+${变量}+''")'"></img>

　　

 3. 如果想在thymeleaf模板引擎中使用JS，则需要使用这个语法： th:inline="javascript"

eg:

<script th:inline="javascript">  
	var message = [[${banners.allBanners}]];  
	console.log("********************************"); 
	console.log(message);  
</script>  

　　

生成页面如下：

 

<script>  
    var message = [{"dataType":"a"},{"dataType":"b"}];  
    console.log("********************************");  
    console.log(message)
</script>  

　　

【待续】