SpringBoot+Thymeleaf靜態資源的映射規則說明

Spring Boot中靜態資源的映射規則

Spring Boot中靜態資源主要包括兩部分:1、webjars資源,2、自定義的其他html、css、js資源,下面分別介紹兩種資源的映射規則。

1)、webjars資源

WebJars是將web前端資源(js,css等)打成jar包文件,然後借助Maven工具,以jar包形式對web前端資源進行統一依賴管理,保證這些Web資源版本唯一性。webjars導入對應的xml代碼可以在webjars的官網進行復制。

https://www.webjars.org/

在這裡插入圖片描述

SpringBoot對webjars資源的映射規則在WebMvcAutoConfiguration.java包裡面,代碼部分截圖如下所示:

public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");
    } else {
        Integer cachePeriod = this.resourceProperties.getCachePeriod();
        if (!registry.hasMappingForPattern("/webjars/**")) {
            this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{"/webjars/**"}).addResourceLocations(new String[]{"classpath:/META-INF/resources/webjars/"}).setCachePeriod(cachePeriod));
        }
        String staticPathPattern = this.mvcProperties.getStaticPathPattern();
        if (!registry.hasMappingForPattern(staticPathPattern)) {
            this.customizeResourceHandlerRegistration(registry.addResourceHandler(new String[]{staticPathPattern}).addResourceLocations(this.resourceProperties.getStaticLocations()).setCachePeriod(cachePeriod));
        }
    }
}

由上述代碼可以看出,所有訪問項目根目錄下的webjars下的所有資源,都會被映射到classpath:/META-INF/resources/webjars/文件夾下,其中classpath是resources資源文件夾或類的根目錄。

而使用maven方式導入的webjars包的靜態資源(js、css)會自動放到classpath:/META-INF/resources/webjars/文件夾下,如下所示:

在這裡插入圖片描述

由圖可以看出dist中的靜態資源文件上層目錄為resources/webjars/**

因此在前端引用(此處用的是thymeleaf模板引擎)時可以用如下方式引用:直接從webjars目錄開始寫即可,上述靜態資源映射配置的實際效果即在自己寫的資源路徑前面加上classpath:/META-INF/resources前綴

<link  th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="external nofollow"  rel="stylesheet">

2)、自己添加的靜態資源文件

Spring Boot對自己添加的靜態資源文件的映射規則仍然在WebMvcAutoConfiguration.java文件中,實際配置是在ResourcesProperties.java資源文件中CLASSPATH_RESOURCE_LOCATIONS變量。

private static final String[] CLASSPATH_RESOURCE_LOCATIONS = new String[]{"classpath:/META-INF/resources/", "classpath:/resources/", "classpath:/static/", "classpath:/public/"};

上述配置效果即所有的靜態資源的訪問除直接訪問/webjars/**路徑時,會在訪問路徑前加上上述配置中的任意一個字符串進行查找,直到在相應的文件下找到對應的靜態資源。因此在編寫SpringBoot應用時一般可以將靜態資源放置在resources資源目錄下的static或者public文件夾下,如下圖所示:

在這裡插入圖片描述

如上圖若想訪問layui.js可以如下引用靜態資源:

<script  th:src="@{/layui/layui.js}"></script>

上述引用之後,SpringBoot會去CLASSPATH_RESOURCE_LOCATIONS變量指定的路徑下找layui/layui.js直到找到該文件位置。

CLASSPATH_RESOURCE_LOCATIONS的值可以直接在SpringBoot的配置文件application.properties或yml文件中進行修改。

Thymeleaf模板引擎的映射規則

Thymeleaf模板引擎的映射規則如下所示

@ConfigurationProperties(prefix = "spring.thymeleaf")
public class ThymeleafProperties {
    private static final Charset DEFAULT_ENCODING = Charset.forName("UTF-8");
    private static final MimeType DEFAULT_CONTENT_TYPE = MimeType.valueOf("text/html");
    public static final String DEFAULT_PREFIX = "classpath:/templates/";
    public static final String DEFAULT_SUFFIX = ".html";

上述代碼的實際效果是在使用模板引擎是會將請求路徑字符串的前面加上classpath:/templates/,後面加上html進行資源請求。因此一般將需要模板引擎進行渲染的html界面放在resources路徑下的templates文件夾下,並且在請求的路徑字符串中不需要加html後綴。

一個簡單的例子如下所示:

    @RequestMapping("/success")
    public String success(Map<String,Object> map){
//        map=new HashMap<>();  這個地方不能再new瞭
        map.put("hello","hello");
        return "success";
    }

上述代碼返回所渲染的html界面即位於resources/templates文件夾下的success.html界面。該默認設置頁可以直接在配置文件中通過spring.thymeleaf選項進行修改。

SpringBoot對靜態資源的映射規則源碼學習筆記

在這裡插入圖片描述

WebMvcAuotConfiguration:

		@Override
		public void addResourceHandlers(ResourceHandlerRegistry registry) {
			if (!this.resourceProperties.isAddMappings()) {
				logger.debug("Default resource handling disabled");
				return;
			}
			Duration cachePeriod = this.resourceProperties.getCache().getPeriod();
			CacheControl cacheControl = this.resourceProperties.getCache().getCachecontrol().toHttpCacheControl();
			//所有 /webjars/** ,都去 classpath:/META-INF/resources/webjars/ 找資源;
			//webjars:以jar包的方式引入靜態資源;
			if (!registry.hasMappingForPattern("/webjars/**")) {
				customizeResourceHandlerRegistration(registry.addResourceHandler("/webjars/**")
						.addResourceLocations("classpath:/META-INF/resources/webjars/")
						.setCachePeriod(getSeconds(cachePeriod)).setCacheControl(cacheControl));
			}
			//"/**" 訪問當前項目的任何資源,都去(靜態資源的文件夾)找映射
			String staticPathPattern = this.mvcProperties.getStaticPathPattern();
			//靜態資源文件夾映射
			if (!registry.hasMappingForPattern(staticPathPattern)) {
				customizeResourceHandlerRegistration(registry.addResourceHandler(staticPathPattern)
						.addResourceLocations(getResourceLocations(this.resourceProperties.getStaticLocations()))
						.setCachePeriod(getSeconds(cachePeriod)).setCacheControl(cacheControl));
			}
		}

resourceProperties

			源碼:
			//可以設置和靜態資源有關的參數,緩存時間等
			@ConfigurationProperties(prefix = "spring.resources", ignoreUnknownFields = false)
			public class ResourceProperties {

getStaticPathPattern():

		源碼:			
		private String staticPathPattern = "/**";		
		public String getStaticPathPattern() {
			return this.staticPathPattern;
		}

getStaticLocations()

			源碼:
			private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/",
			"classpath:/resources/", "classpath:/static/", "classpath:/public/" };			
			private String[] staticLocations = CLASSPATH_RESOURCE_LOCATIONS;			
			public String[] getStaticLocations() {
				return this.staticLocations;
			}

//配置歡迎頁映射

		@Bean
		public WelcomePageHandlerMapping welcomePageHandlerMapping(
				ResourceProperties resourceProperties) {
				//靜態資源文件夾下的所有index.html頁面;被"/**"映射;
			return new WelcomePageHandlerMapping(resourceProperties.getWelcomePage(),
					this.mvcProperties.getStaticPathPattern());
		}
		private Optional<Resource> getWelcomePage() {
			String[] locations = getResourceLocations(this.resourceProperties.getStaticLocations());
			return Arrays.stream(locations).map(this::getIndexHtml).filter(this::isReadable).findFirst();
		}
		private Resource getIndexHtml(String location) {
			return this.resourceLoader.getResource(location + "index.html");
		}	

getStaticPathPattern()

   源碼:
   private String staticPathPattern = "/**";
   public String getStaticPathPattern() {
    return this.staticPathPattern;
   }

//配置喜歡的圖標

  @Configuration
  @ConditionalOnProperty(value = "spring.mvc.favicon.enabled", matchIfMissing = true)
  public static class FaviconConfiguration implements ResourceLoaderAware {
   private final ResourceProperties resourceProperties;
   private ResourceLoader resourceLoader;
   public FaviconConfiguration(ResourceProperties resourceProperties) {
    this.resourceProperties = resourceProperties;
   }
   @Override
   public void setResourceLoader(ResourceLoader resourceLoader) {
    this.resourceLoader = resourceLoader;
   }
   @Bean
   public SimpleUrlHandlerMapping faviconHandlerMapping() {
    SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
    mapping.setOrder(Ordered.HIGHEST_PRECEDENCE + 1);
    //所有  **/favicon.ico 都是在靜態資源文件下找
    mapping.setUrlMap(Collections.singletonMap("**/favicon.ico", faviconRequestHandler()));
    return mapping;
   }
   @Bean
   public ResourceHttpRequestHandler faviconRequestHandler() {
    ResourceHttpRequestHandler requestHandler = new ResourceHttpRequestHandler();
    requestHandler.setLocations(resolveFaviconLocations());
    return requestHandler;
   }
   private List<Resource> resolveFaviconLocations() {
    String[] staticLocations = getResourceLocations(this.resourceProperties.getStaticLocations());
    List<Resource> locations = new ArrayList<>(staticLocations.length + 1);
    Arrays.stream(staticLocations).map(this.resourceLoader::getResource).forEach(locations::add);
    locations.add(new ClassPathResource("/"));
    return Collections.unmodifiableList(locations);
   }
  }

Thymeleaf使用

 源碼:
 //隻要我們把HTML頁面放在classpath:/templates/,thymeleaf就能自動渲染;
 @ConfigurationProperties(prefix = "spring.thymeleaf")
 public class ThymeleafProperties {
  private static final Charset DEFAULT_ENCODING = StandardCharsets.UTF_8;
  public static final String DEFAULT_PREFIX = "classpath:/templates/";
  public static final String DEFAULT_SUFFIX = ".html"; 
 }

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: