旅鸟

导航

12. thymeleaf中资源相对路径的解决

把博客部署到tomcat上后才发现因之前资源和链接的地址都是使用的相对路径,这样一来在tomcat上就各种找不到资源。从网上看了几种解决方式都挺麻烦的,且不是适配的,所以我根据thymeleaf的规则用下面的方式来解决:
1. 在js中通过:[[@{/}]], 可以获取当前的contextpath,所以就在每个页面中添加一个js函数,来获取contextpath,然后在js代码中要使用url的地方调用这个函数即可,如下:
function getContextPath(){
var context = [[@{/}]];
return context.substr(0, context.length-1);
}
调用时可以这样写:
$.ajax({
url:getContextPath()+"/articles/categories",
success:function(data){
$(".catagory .content ul").html("");
for(var i in data){
var content = '<li addr="' + getContextPath() + '/articles/category/' + data[i].id + '">' + data[i].name + '(' + data[i].count + ')</li>'
$(".catagory .content ul").append(content);
}
$(".catagory .content ul li").click(function(){
var addr = $(this).attr("addr");
window.location = addr;
});
}
});
这样写虽然会增加一些代码量,但是这种方式简单直观。
2. 在html标记中,可以通过@{/},来获取contextpath,然后结合th:attrprepend来给属性值添加前缀,使用方式如下:
<li class="item select" addr="home/" th:attrprepend="addr='@{/}'">首页</li>
或者通过这样使用:<img th:src="@{/images/lvniao.png}" height="128"/>
3. 在css中可以直接使用相对路径即可;
因为博客中使用了ueditor,但ueditor的配置是在自己的js中的,这样就只要使用硬编码了,其他如果不能通过上述方式解决的也只好硬编码解决。
通过这些天的努力,我的博客也就差不多写好了,下面是完成版的代码和数据库脚本下载地址:
https://pan.baidu.com/s/186W1VXLmSoLDMIuIJnRh1A zmk7
因为是初学java,所以有些地方对框架和工具的使用方式不对的就请见谅了,如果需要沟通的话,我的qq:645739665,欢迎喜欢折腾技术的小伙伴。

posted on 2018-05-18 15:50  旅鸟  阅读(524)  评论(0编辑  收藏  举报