情景描述
- 希望一个html页面,这个页面命名
index.html
,所以我希望访问http://localhost:port
就可以访问到一个我这个页面 - 希望访问
ttp://localhost:port/home
就可以直接访问/static/home/index.html
这个页面就可以拿到。 - 但是第一种情况可以做到
- 第二种情况却始终不能成功
矛盾点
- 按照所学知识,访问的url定位到目录,该目录下的index.html文件就应该被返回。可是为什么在静态资源的根目录下的index.html正常可以返回,但是在子目录下的index.html却无法返回?
对于spring boot而言,放在静态资源的root目录下的index.html真的可以被访问吗?因为html中的所有其他css文件都是相对路径,会不会受到路径上升带来的影响?
- 对于spring boot而言,有固定的几个专门放静态资源的目录
,这个我在一篇文章中说过了。(src/main/resoucres/static/
、src/main/resoucres/public
、src/main/resoucres/resources/
) - 经过尝试发现,放在以上静态资源根目录下的
index.html
文件,通过http://localhost:port
就可以直接访问到。 - 但是有一个小点:使用url:
http://localhost:port/
和http://localhost:port
都可以拿到index.html的内容. - 打开浏览器的请求url发现当你不论请求url:
http://localhost:port/
和http://localhost:port
浏览器发送的请求路径都是:http://localhost:port/
- 因为路径都是slash结尾,因此相当于当前的路径就被导到静态资源的目录下了,因此也不会出现路径上升了一个目录。
那么url的末尾带不带/
有什么区别呢?
- 只是目录和文件的区别。
- 比如请求
http://localhost:8080/home
- 不加
/
:浏览器会认为home是一个文件,然后发送请求到服务器寻找home这个文件,当home这个文件不存在,然后会去寻找home目录下的默认文件返回 - 加上
/
:浏览器会认为home是一个目录,然后直接寻找home下的默认文件返回
- 不加
- 这样看来加上
/
可以提高查找效率。
但是对于spring boot静态资源目录的子目录中并没有配置默认文件,因此当你访问字母的url的时候会出现404,这时候该怎么办呢?
- 这时候可以采用手动配置的方式。手动写一个WebMvc的配置类。因此写一个继承自webMvcConfig的配置类,然后重写其中的一些方法即可。
@Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/home").setViewName("forward:/home/index.html"); } }
- 使用forward,浏览器不知道路径被修改。而是服务器自动做得。
- 使用这一种方式会导致:index.html中的其他文件如果是相对路径,就会找不到了。
- 原因:浏览器只知道他请求了/home,请求一旦到达服务器,就会直接被导向请求/home/index.html,然后返回资源。浏览器就会以为自己是从/home拿到的资源。
- 例子:当index.html中有
<img src="./images/a.jpg">
那么浏览器再请求这个资源的时候url变成http://localhost:port/images/a.jpg
。但是其实这个资源在static/home/images/a.jpg
。主要因为浏览器请求home的时候拿到了资源,会认为home是一文件。
因此进行资源相对路径的拼接的时候就会以跟做目录。 - 解决办法有两种
- 修改index.html中的资源路径,不再以
/home/
作为根目录,而是以/
作为根目录。 - 修改
registry.addViewController("/home").setViewName("forward:/home/index.html"); }
为registry.addViewController("/home/").setViewName("forward:/home/index.html"); }
home后面多加上一个/
让浏览器知道home是一个目录而不是文件即可。
- 修改index.html中的资源路径,不再以
@Configuration public class WebMvcConfig extends WebMvcConfigurerAdapter { @Override public void addViewControllers(ViewControllerRegistry registry) { registry.addViewController("/home").setViewName("redirect:/home/index.html"); } }
- 使用redirect,浏览器会首先收到请求
http://localhost:8080/home
返回的302response中的location为http://localhost:9977/home/index.html
然后再次请求location的路径返回302- 这种方式index.html中的资源路径没有任何的问题,但是就是多了一个302
- 而且url中还是会显示
http://localhost:9977/home/index.html
- 使用forward,浏览器不知道路径被修改。而是服务器自动做得。