如何使在静态目录的子目录下的index.html文件可以不需要i

情景描述

• 希望一个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是一个目录而不是文件即可。

  @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