毕业设计-开发避坑指南!

 

第一坑 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")​

 

那么总结一下 问题所在

  1. 首先我这次的需求来看哈,我必须设置server.context-path,因为我的80端口要放很多很多项目
  2. 然后我必须使用每个controller的RequestMapping,否则我以后区分权限管理就很头疼
  3. 第三个,我所有页面的共同部分,是提取出来的,所以分别给他们一人写一个引导路径,也不现实,必须一句话适应所有页面

 

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'));
});    

 

送人玫瑰,手留余香
彩虹猫 banner.txt for Spring Boot
毕业设计-OA系统-开发日志