问题一
使用thymleaf时,在js代码中取后台返回的值时,通常使用[[]${返回名称}],当返回值是一个字符串的时候是没有问题的,但是如果返回值是一个对象,通过这种凡是取出来的是一个字符串,会导致对象中的值取不出来。
例如:返回的user是一个对象,可以这样取值:var user = [[${user}]];取值之后打印出来的数据看似没有问题,是一个json对象,但是如果想通过user.username取出这个字段的名字就会失败,因为user是一个字符串,是不能这样处置的。查了一个资料,没有找到thymleaf中可以在js中直接取出对象的方法,只能将user转成对象,如下:
var user =JSON.parse( [[${user}]]);
通过这种将字符串转成对象的方式,可以实现user.username的取值方式。
问题二
js中如果使用&&符或者在js中拼接路径的时候使用&时,thymleaf并不支持这些特殊符号。解决方案为如下:
<script th:inline="javascript">
/*<![CDATA[*/
if(usercode == "" || usercode==null){
redirectUrl = location.href + "&usercode=1";
}
/*]]>*/
</script>
如代码中所示,在加入/*<![CDATA[*/......... /*]]>*/这个标签后,就可以在js使用任何特殊字符了。
问题三
在jsp改造为html时,类似<c:if></c:if>标签包含的字段,遇到这种情况,如果用<span>,或者<div>等标签,可能会有自己不想要的样式,导致样式混乱。通常这时候可以使用一下thymleaf特有的标签<th:block></th:block>,这个标签是没有样式的,很多情况下都可以满足。
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count"></span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.csdn.net/qq_33732754"> <img src="https://profile.csdnimg.cn/6/0/B/3_qq_33732754" class="avatar_pic" username="qq_33732754"> <img src="https://g.csdnimg.cn/static/user-reg-year/2x/4.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.csdn.net/qq_33732754" data-report-click="{"mod":"popu_379"}" target="_blank">qq_33732754</a></span> </div> <div class="text"><span>发布了2 篇原创文章</span> · <span>获赞 0</span> · <span>访问量 1294</span></div> </div> <div class="right-message"> <a href="https://im.csdn.net/im/main.html?userName=qq_33732754" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div> </article>