Spring Boot 学习笔记 13 : Thymeleaf th:onclick 解析异常

  为了引入 Thymeleaf 与 Spring Security 整合的依赖，将项目中 Thymeleaf 的版本从 3.0.0 升级到 3.0.11。使用的 SpringBoot 版本是 1.5.6 发布版。

  在这里列出 Thymeleaf 相关依赖如下，需要注意的是在 <properties> 标签中需指明依赖的版本。

	<properties>
		<java.version>1.8</java.version>
		<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
		<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
		<thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
		<thymeleaf-layout-dialect.version>2.1.0</thymeleaf-layout-dialect.version>
		<thymeleaf-extras-springsecurity4.version>3.0.2.RELEASE</thymeleaf-extras-springsecurity4.version>
	</properties>
	
	<dependency>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-thymeleaf</artifactId>
	</dependency>
	<dependency>
		<groupId>net.sourceforge.nekohtml</groupId>
		<artifactId>nekohtml</artifactId>
	</dependency>
	<dependency>
		<groupId>org.thymeleaf.extras</groupId>
		<artifactId>thymeleaf-extras-springsecurity4</artifactId>
		<version>3.0.2.RELEASE</version>
	</dependency>
	<dependency>
		<groupId>org.thymeleaf.extras</groupId>
		<artifactId>thymeleaf-extras-java8time</artifactId>
		<version>3.0.1.RELEASE</version>
	</dependency>

  在运行项目后，浏览部分页面时服务器抛出如下异常：

2019-02-13 17:35:04.205 ERROR 13876 --- [nio-8081-exec-9] org.thymeleaf.TemplateEngine             : [THYMELEAF][http-nio-8081-exec-9] Exception processing template "websocket/list": An error happened during template parsing (template: "class path resource [templates/websocket/list.html]")

org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/websocket/list.html]")
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:241)
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parseStandalone(AbstractMarkupTemplateParser.java:100)
	at org.thymeleaf.engine.TemplateManager.parseAndProcess(TemplateManager.java:666)
	...
Caused by: org.attoparser.ParseException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler. (template: "websocket/list" - line 183, col 33)
	at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
	at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
	... 87 common frames omitted
Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Only variable expressions returning numbers or booleans are allowed in this context, any other datatypes are not trusted in the context of this expression, including Strings or any other object that could be rendered as a text literal. A typical case is HTML attributes for event handlers (e.g. "onload"), in which textual data from variables should better be output to "data-*" attributes and then read from the event handler. (template: "websocket/list" - line 183, col 33)
	at org.thymeleaf.standard.expression.VariableExpression.executeVariableExpression(VariableExpression.java:181)
	at org.thymeleaf.standard.expression.SimpleExpression.executeSimple(SimpleExpression.java:66)
	at org.thymeleaf.standard.expression.Expression.execute(Expression.java:109)
	...

  根据抛出的异常定位到对应 Html 页面 183 行处，发现是 Thymeleaf 的 th:onclick 标签，结合异常信息判断是 ${socketMessage.uuid} 表达式解析失败导致。

	<button class="btn-warning"
	th:onclick="'javascript:showMessage(\'' + ${socketMessage.uuid} + '\',\'' + ${dataPage.number + 1} + '\');'">
		<i class="fa fa-eye"></i> 查看
	</button>

  而没有抛出异常的页面中 th:onclick 标签如下：

<button class="btn-warning"
	th:if="${storageMaterial.status.name() eq 'LOADED'}"
	th:onclick="'javascript:editMaterial(\'' + ${storageMaterial.id} + '\',\'' + ${dataPage.number + 1} + '\');'">
	<i class="fa fa-edit"></i> 修改
</button>

  确实如异常信息描述的，socketMessage.uuid 这样 string 类型的变量不能在上下文中进行解析，而 storageMaterial.id，dataPage.number + 1 这样 number 类型的变量可以。在网上搜索一些解决方法并进行尝试后将错误页面的 th:onclick 部分替换如下：

<button class="btn-warning"
	th:onclick="showMessage([[${socketMessage.uuid}]], [[${dataPage.number + 1}]])">
	<i class="fa fa-eye"></i> 查看
</button>

参考文章：

thymeleaf 的 th:onclick，慢慢采坑