SpringBoot加载静态资源

清疚 2022-06-04 08:06 359阅读 0赞

在SpringBoot中加载静态资源和在普通的web应用中不太一样。默认情况下，Spring Boot从classpath下一个叫/static（/public，/resources或/META-INF/resources）的文件夹或从ServletContext根目录提供静态内容。下面我们来写个例子看一下就会一目了然了：首先看一下项目的目录结构：

![Center][]

我们在resources下面的templates目录下建一个home.html的文件，完整目录为：src/main/resources/templates/home.html。内容如下：

\[html\]  [view plain][]  [copy][view plain]

1.  <!DOCTYPE HTML>  
2.  <html xmlns:th="http://www.thymeleaf.org">  
3.  <head>  
4.      <meta charset="utf-8"/>  
5.      <title>ConanZhang的首页</title>  
6.  </head>  
7.  <body>  
8.  我是首页：  
9.    
10. </body>  
11. </html>

如果我们想要访问home.html应该怎么做呢？我们先来看第一种方式：

1、我们在web.controller这个包下面建一个Controller类：ThymeleafTestController.代码内容如下：

\[java\]  [view plain][]  [copy][view plain]

1.  package com.zkn.learnspringboot.web.controller;  
2.    
3.  import org.springframework.stereotype.Controller;  
4.  import org.springframework.web.bind.annotation.RequestMapping;  
5.    
6.  /\*\* 
7.   \* Created by wb-zhangkenan on 2016/11/30. 
8.   \*/  
9.  @Controller  
10. @RequestMapping("thymeleaf")  
11. public class ThymeleafTestController \{  
12.   
13.     @RequestMapping("home")  
14.     public String getHome()\{  
15.   
16.         return "home";  
17.     \}  
18. \}

写到这里你一定非常眼熟，这不就是SpringMVC的写法吗？没错就是SpringMVC的写法：下面我们来访问一下：http://localhost:8003/thymeleaf/home。结果如图所示：

![Center 1][]

因为SpringBoot集成了Thymeleaf，所以它会默认查找resources下面的templates这个目录下的文件。templates这个目录的名字不要写错了。接着我又有了这样的需求，假设我想在我的home.html中引入一些其他的静态资源文件，比如我想在home.html中引入一张图片：那我们应该怎么做呢？

首先，我们需要在resources下面建一个static或者public的目录，你不建立目录也行，直接放到resources下面，接着我们再建立一个image的目录，最终的目录结构如图所示：

![Center 2][]  
我们在image这个目录下放入一张图片，然后我们在home.html中引入一下这张图片，最终的代码如下：

\[html\]  [view plain][]  [copy][view plain]

1.  <!DOCTYPE HTML>  
2.  <html xmlns:th="http://www.thymeleaf.org">  
3.  <head>WebMvcConfigurerAdapter  
4.      <meta charset="utf-8"/>  
5.      <title>ConanZhang的首页</title>  
6.  </head>  
7.      <body>  
8.  我是首页：  
9.      <image th:src="@\{/image/267862-1212151Z12099.jpg\}" width="100px" height="50px" />  
10.     </body>  
11. </html>

看到上面的写法你可能会有些奇怪，th:src和@\{\}这都是什么鬼。其实这是Thymeleaf的语法。@\{\}是引入外部资源用的。下面我们再来访问一下，结果如下图所示： ![Center 3][]

这样我们就访问到了image目录下的图片了。

可能会有人说难道我只能放到static、public或者直接放到resources下面吗？我换个目录就不行了吗？那当然不是这样的，下面我们来换另外一种写法：

在我现在的这个项目中前台是用react-redux写的，后台SpringBoot只是用来提供接口的，我只需要一个首页来把编译后的react-redux引入到项目中就可以了，如果我想直接访问这个首页那我应该怎么做呢？SpringMVC为我们提供了这样的一个类：WebMvcConfigurerAdapter。我们就是借助于这个类来实现我们需要的功能的。我们写一个类来继承这个类，代码如下：

\[java\]  [view plain][]  [copy][view plain]

1.  package com.zkn.learnspringboot.config;  
2.    
3.  import org.springframework.context.annotation.Configuration;  
4.  import org.springframework.util.ResourceUtils;  
5.  import org.springframework.web.servlet.config.annotation.EnableWebMvc;  
6.  import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;  
7.  import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  
8.    
9.  /\*\* 
10.  \* Created by wb-zhangkenan on 2016/11/30. 
11.  \*/  
12. @EnableWebMvc  
13. @Configuration  
14. public class WebConfig extends WebMvcConfigurerAdapter \{  
15.   
16.     @Override  
17.     public void addResourceHandlers(ResourceHandlerRegistry registry) \{  
18.   
19.         registry.addResourceHandler("/templates/\*\*").addResourceLocations(ResourceUtils.CLASSPATH\_URL\_PREFIX+"/templates/",ResourceUtils.CLASSPATH\_URL\_PREFIX+"/image/");  
20.         super.addResourceHandlers(registry);  
21.     \}  
22.       
23. \}

我们重写了addResourceHandlers这个方法来重新注册了一个资源处理器。接着我们在来访问一下看看：http://localhost:8003/templates/home.html。结果如下图所示：

![Center 4][]

注意了这里我们是直接访问的home.html这个文件。和我们预期的效果是一样的。接着可能会有人说：如果我也想在home.html中引入静态资源要怎么办呢？比如说上面的那个例子，我要引入一个一张图片。也简单，那我们就再注册一个资源处理器就OK了。java代码如下：

\[java\]  [view plain][]  [copy][view plain]

1.  package com.zkn.learnspringboot.config;  
2.    
3.  import org.springframework.context.annotation.Configuration;  
4.  import org.springframework.util.ResourceUtils;  
5.  import org.springframework.web.servlet.config.annotation.EnableWebMvc;  
6.  import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;  
7.  import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;  
8.    
9.  /\*\* 
10.  \* Created by wb-zhangkenan on 2016/11/30. 
11.  \*/  
12. @EnableWebMvc  
13. @Configuration  
14. public class WebConfig extends WebMvcConfigurerAdapter \{  
15.   
16.     @Override  
17.     public void addResourceHandlers(ResourceHandlerRegistry registry) \{  
18.   
19.         registry.addResourceHandler("/templates/\*\*").addResourceLocations(ResourceUtils.CLASSPATH\_URL\_PREFIX+"/templates/");  
20.         registry.addResourceHandler("/static/\*\*").addResourceLocations(ResourceUtils.CLASSPATH\_URL\_PREFIX+"/static/");  
21.         super.addResourceHandlers(registry);  
22.     \}  
23.   
24. \}

home.html中的内容如下所示：

\[java\]  [view plain][]  [copy][view plain]

1.  <!DOCTYPE HTML>  
2.  <html xmlns:th="http://www.thymeleaf.org">  
3.  <head>  
4.      <meta charset="utf-8"/>  
5.      <title>ConanZhang的首页</title>  
6.  </head>  
7.      <body>  
8.  我是首页：  
9.      <image src="/static/image/267862-1212151Z12099.jpg" width="100px" height="50px" />  
10.     </body>  
11. </html>

接着我们再访问以下看看什么效果：http://localhost:8003/templates/home.html

![Center 5][]

和之前的效果是一模一样的吧？

WebMvcConfigurerAdapter这个类可以说是SpringMVC的java的config，它可以代替我们之前在xml中进行的一系列配置。关于WebMvcConfigurerAdapter更多的介绍请看spring-framework-reference 543页22.16 Configuring Spring MVC这章的内容。

前几天在网上找了一个SpringBoot的中文开发指南，有需要的请点击[这里][Link 1]下载吧。

这篇文章的完整版代码请从githup上下载，地址如下：https://github.com/zhangconan/LearnSpringBoot

原文网址：[http://blog.csdn.net/zknxx/article/details/53414955][http_blog.csdn.net_zknxx_article_details_53414955]

[Center]: /images/20220604/f7ab0fc88d8a415bba1e0a25d182c749.png
[view plain]: http://blog.csdn.net/zknxx/article/details/53414955#
[Center 1]: /images/20220604/88e7163c9846471ba3902ad7e4e8df8e.png
[Center 2]: /images/20220604/8bae73baa8b84400ac9ae3cc91586c2c.png
[Center 3]: /images/20220604/309c415930894d7a81ada8bd7092330d.png
[Center 4]: /images/20220604/983a0b93e28940d4b9f421c3ce2ce25b.png
[Center 5]: /images/20220604/9620fe76592c4b39a24abbcdefd9b6b2.png
[Link 1]: http://download.csdn.net/detail/zknxx/9697854
[http_blog.csdn.net_zknxx_article_details_53414955]: http://blog.csdn.net/zknxx/article/details/53414955