毕业设计-开发避坑指南！
第一坑 HTML相对路径和绝对路径 绝对是个天坑
Springboot默认的server.context-path是 '/' 也就是直接在localhost:8080/下访问项目，那么问题是最后上线项目还是打成war放在tomcat下。那就必须有一个context-path
那么假设以下三种情况
<link rel="stylesheet" href="/assets/css/app.css">
<script src="/assets/js/jquery.min.js"></script>
<a href="/index">返回首页</a>
如果刚开始开发没设server.context-path
后来再加了一个server.context-path = “/project”
那就刺激了，上面这些 src href的引用全部失败 错误代码404 a标签跳转出去也直接404
因为他们用的是 绝对路径
拼的逻辑是 http://localhost:8080/assets/js/jquery.min.js 或者 href 同理
默认都不带server.context-path玩
正确的应该是
http://localhost:8080/project/assets/js/jquery.min.js 或者 href 同理
那么这个时候很多同学就会想到用第二种方法引用 相对路径
(如果辣么容易就解决我就不会花时间写出来啦)
相对路径的2种写法 就举一个栗子 js的
<script src="assets/js/jquery.min.js"></script>
<script src="./assets/js/jquery.min.js"></script>
这两个意思完全一样
就是看他所在位置的url，原地不动接src
栗子：
比如现在在首页上
http://localhost:8080/project
里面的代码是<script src="assets/js/jquery.min.js"></script>
那么他就会去找http://localhost:8080/project/assets/js/jquery.min.js
看着没问题了 完美解决了
那么问题来了 如果我不在首页上呢
我在某个功能页面内 比如 我现在所在的是userinfo
后台在所有user相关的controller里都加了一个总的 @RequestMapping(value = "/user")
当前位置：http://localhost:8080/project/user/userinfo
使用相对路径 <script src="assets/js/jquery.min.js"></script>
实际引到的效果如下
http://localhost:8080/project/user/assets/js/jquery.min.js
正确的是
http://localhost:8080/project/assets/js/jquery.min.js
又会出现一波404之类的问题
包括那种a标签的跳转 ajax的url，如果用相对路径，都会中这招
显然不在首页上引用js，用相对路径就会多出一个/user 因为@RequestMapping(value = "/user")
那么总结一下 问题所在
- 首先我这次的需求来看哈，我必须设置server.context-path，因为我的80端口要放很多很多项目
- 然后我必须使用每个controller的RequestMapping，否则我以后区分权限管理就很头疼
- 第三个，我所有页面的共同部分，是提取出来的，所以分别给他们一人写一个引导路径，也不现实，必须一句话适应所有页面
1.相对路径 会按照当前所在的url拼路径
如果当前在首页，那完全没问题
如果当前在一个@RequestMapping(value = "/user")下
栗子： http://localhost:8080/project/user
那就炸了，因为我正确路径没有/user
2.绝对路径 会按照基本的http地址，直接拼绝对路径的地址 会跳过context-path
如果不嫌麻烦，也可以每个都写死
例如http://localhost:8080/project
用<script src="/project/assets/js/jquery.min.js"></script>
但是从此以后就再也不能修改访问地址context-path，否则要所有src 所有href全部修改，一夜回到解放前
那么重点来了
那么这其实不是一个新问题
以前jsp年代就有springMVC
就有这个烦恼
当时解决起来用的是JSP的办法 <%=request.getContextPath()%>
当然也有el表达式的 原理一样 就不赘述
这个<%=request.getContextPath()%> 出来的内容就是 http://localhost:8080/project 再加上 /assets/js/jquery.min.js 就可以写死正确路径
辣么，这些JSP的方案 都不太适用于现在的thymeleaf + html5
目前解决方法1 (推荐)
引用的地方 使用thymeleaf 获取ContextPath
栗子
<link rel="stylesheet" th:href="@{/assets/css/app.css}">
<script th:src="@{/assets/js/jquery.min.js}"></script>目前解决方法2
前面解决了引用的地方还是没解决a标签
原来的 a标签<a href="index">返回首页</a>
原来的 问题 : 这个a标签只能在首页使用，到了http://localhost:8080/project/user这种位置就会跳到http://localhost:8080/project/user/index就会404
我这次项目用的方案如下
//这里会改变所有a标签 如果需要保守方案 可以用class或者id来精确管理
var contextPath = "/project";
$('a').each(function(){
$(this).attr('href',contextPath + "/" + $(this).attr('href'));
});
