[JavaScript知识库]解决thymeleaf 和layui 的 [[ ]] 冲突

问题描述：

springboot项目的web页面采用layui的模板，结果在使用thymeleaf渲染时报错

2021-10-03 23:27:26.168 ERROR 1068 --- [nio-8080-exec-1] o.a.c.c.C.[.[.[/].[dispatcherServlet]    : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed; nested exception is org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/table.html]")] with root cause

org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "

看了一下页面报错关键代码如下：

<script>
    layui.use(['form', 'table'], function () {
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'username', width: 80, title: '用户名'},
                {field: 'sex', width: 80, title: '性别', sort: true}
            ]]
       });
</script>

错误原因：

layui和thymeleaf都对 [[ 表达式 ]] 有自己的定义，所以此处thymeleaf将 js函数中layui的部分拿去解析，但是解析不来，所以报错

解决方法：

• 在两个左中括号中间加空格 [ [ 表达式 ]]
• 第一个和第二个空格之间换行即可

<script>
    layui.use(['form', 'table'], function () {
            cols: [
            	[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'username', width: 80, title: '用户名'},
                {field: 'sex', width: 80, title: '性别', sort: true}
            ]]
       });
</script>

原因：layui对[[]] 定义比较宽松，而thymeleaf定义相对严格，因此以上两种方式会让thymeleaf认为这不再是表达式从而不进行解析