问题描述
在公共模板框架文件layout.html头部引入css和js文件,在不同的Controller中提示css和js文件找不到。
问题解决
主要是文件相对路径和绝对路径的问题。
thyemleaf的th:href=“@{...}”标签路径如果用“/”开头的,则路径最终为当前项目下的路径;如果不是用“/”开头的即相对路径,则路径最终以当前访问的Controller路径的相对路
径。
例如:
项目名admin_test
相对路径:<link th:href="@{css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
在http://localhost:8080/admin_test/merchant下访问相对路径http://localhost:8080/admin_test/css/bootstrap.min.css(正确路径)
在http://localhost:8080/admin_test/merchant/input下访问相对路径http://localhost:8080/admin_test/merchant/css/bootstrap.min.css(错误路径)
绝对路径:<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
在http://localhost:8080/admin_test/merchant下访问绝对路径http://localhost:8080/admin_test/css/bootstrap.min.css(正确路径)
在http://localhost:8080/admin_test/merchant/input下访问绝对路径http://localhost:8080/admin_test/css/bootstrap.min.css(正确路径)
结论
在公共框架文件中引入文件,用“/”开头的绝对路径,保证文件引用的是基于项目名下的。