SpringBoot 靜態資源導入及首頁設置問題

本節瞭解一下 SpringBoot 中 Web 開發的靜態資源導入和首頁設置,對應 SpringBoot-03-Web 項目。

1. 靜態資源導入

在 Web 開發過程中,我們需要接觸許多的靜態資源,如 CSS、JS、圖片等;在之前的開發過程中,這些資源都放在 Web 的目錄下,用到的時候按照對應路徑訪問即可。不過在 SpringBoot 項目中,沒有瞭 Web 的目錄,那這些靜態資源該放到哪裡去,又要如何訪問呢?

由於是 Web 應用中的配置,所以查看對應的自動配置類 WebMvcAutoConfiguration,可以看到處理資源的方法 addResourceHandlers

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");
        return;
    }
    addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");
    addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
        registration.addResourceLocations(this.resourceProperties.getStaticLocations());
        if (this.servletContext != null) {
            ServletContextResource resource = new ServletContextResource(this.servletContext, SERVLET_LOCATION);
            registration.addResourceLocations(resource);
        }
    });
}

其中,this.resourceProperties.isAddMappings() 的作用為判斷是否在配置文件中指定瞭資源的訪問路徑,若指定瞭則此方法不用生效,直接返回;若未指定則繼續執行方法,去默認的位置查找資源。

1.1 WebJars

WebJars 是前端資源的 Jar 包形式,讓我們可以通過 Jar 包的形式使用前端的框架、組件。

WebJars 網站:https://www.webjars.org/。

為什麼要使用 WebJars?

我們在開發 Java web 項目的時候會使用像 Maven,Gradle 等構建工具以實現對 jar 包版本依賴管理,以及項目的自動化管理,但是對於 JS,Css 等前端資源包,我們隻能采用拷貝到 webapp 目錄下的手工方式,這樣做就無法對這些資源進行依賴管理,而且容易導致文件混亂、版本不一致等問題。WebJars 就提供給我們這些前端資源的 jar 包形式,我們就可以進行依賴管理

如要使用到 JQuery 時,按照之前的做法,我們要去網上下載 JQuery 的 JS 文件,把它放到 web 目錄下的 statics/js 下(之前用 AJAX 的時候就是這麼幹的);但現在,我們可以采用 WebJars 的方式。

首先在 WebJars 網站中找到 JQuery 的 Maven 坐標,把它放到項目的 pom 文件中

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.6.0</version>
</dependency>

引入後,在項目的 External Libaries 中就可以看到 org.webjars:jquery:3.6.0 瞭!

那麼我們要怎麼訪問到它呢?在上面的源碼中其實就已經給出瞭路徑

addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");

這行代碼將 /webjars/ 下的所有訪問都映射為瞭 classpath:/META-INF/resources/webjars/,即我們隻需要通過 /webjars/ 就可以找到類路徑下的 /jquery/3.6.0/jquery.js 文件瞭!

運行項目,在瀏覽器中輸入 http://localhost:8080/webjars/jquery/3.6.0/jquery.js,確實顯示出瞭 jquery.js 文件!

以 WebJars 方式引入的文件,都符合上圖中的結構,即能通過 classpath:/META-INF/resources/webjars/ 路徑訪問到,這樣代碼中的設置和外部文件就聯系起來瞭!

1.2 staticPathPattern

回到源碼中,這個方法的三句話還有最後一句(雖然很長但確實是一句)

addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
    registration.addResourceLocations(this.resourceProperties.getStaticLocations());
    if (this.servletContext != null) {
        ServletContextResource resource = new ServletContextResource(this.servletContext, SERVLET_LOCATION);
        registration.addResourceLocations(resource);
    }
});

這就有點復雜瞭(之前版本的源碼倒還好理解一點),不過可以看到獲取靜態路徑 getStaticPathPattern() 方法,點進去

public String getStaticPathPattern() {
    return this.staticPathPattern;
}

這個方法直接返回瞭 staticPathPattern,繼續點

/**
 * Path pattern used for static resources.
 */
private String staticPathPattern = "/**";

到這就明白瞭,其實就是默認的靜態資源路徑!這個路徑也可以通過 spring.mvc 去設置,在未設置的情況在,它就是項目下的所有路徑 /**

然後在 Web 屬性類 WebProperties 中有一個資源類 Resource,它也設置瞭4個路徑(跳躍的有點大,先看著吧),其中

public static class Resources {

    private static final String[] CLASSPATH_RESOURCE_LOCATIONS = { "classpath:/META-INF/resources/",
                                                                  "classpath:/resources/", "classpath:/static/", "classpath:/public/" };
    ...
}
  1. classpath:/META-INF/resources/ 即上面的 WebJars 路徑
  2. classpath:/resources/resources/resources/ 路徑
  3. classpath:/static/resources/static/路徑
  4. classpath:/public/resources/public 路徑

即所有通過 /**(未配置情況下)的訪問請求,都會在這四個路徑中尋找靜態資源!

默認的 resource 中隻有 static 一個目錄,這裡把上面的目錄都創建一下,且放入一個測試用的 js 文件

此時運行項目,訪問 http://localhost:8080/public.jshttp://localhost:8080/resources.jshttp://localhost:8080/static.js,都可以顯示出對應的 js 文件內容!

註意:如果三個目錄下的文件有重名的情況,則優先級為 CLASSPATH_RESOURCE_LOCATIONS 數組的順序,可以理解為如果在前面的路徑中找到瞭就不找後面的瞭!

2. 首頁設置

和上面一樣,先找到對應的源碼

@Bean
public WelcomePageHandlerMapping welcomePageHandlerMapping(ApplicationContext applicationContext,
                                                           FormattingConversionService mvcConversionService, ResourceUrlProvider mvcResourceUrlProvider) {
    WelcomePageHandlerMapping welcomePageHandlerMapping = new WelcomePageHandlerMapping(
        new TemplateAvailabilityProviders(applicationContext), applicationContext, getWelcomePage(),
        this.mvcProperties.getStaticPathPattern());
    welcomePageHandlerMapping.setInterceptors(getInterceptors(mvcConversionService, mvcResourceUrlProvider));
    welcomePageHandlerMapping.setCorsConfigurations(getCorsConfigurations());
    return welcomePageHandlerMapping;
}

很長也很復雜,不過隻需要關註裡面的 getWelcomePage() 方法,點進去看看

private Resource getWelcomePage() {
    for (String location : this.resourceProperties.getStaticLocations()) {
        Resource indexHtml = getIndexHtml(location);
        if (indexHtml != null) {
            return indexHtml;
        }
    }
    ServletContext servletContext = getServletContext();
    if (servletContext != null) {
        return getIndexHtml(new ServletContextResource(servletContext, SERVLET_LOCATION));
    }
    return null;
}

private Resource getIndexHtml(String location) {
    return getIndexHtml(this.resourceLoader.getResource(location));
}

private Resource getIndexHtml(Resource location) {
    try {
        Resource resource = location.createRelative("index.html");
        if (resource.exists() && (resource.getURL() != null)) {
            return resource;
        }
    }
    catch (Exception ex) {
    }
    return null;
}

這三個方法是逐層調用的關系(雖然我也不知道為什麼要這麼幹),不過可以知道,其中的 location 就是上面的三個目錄 resourcesstaticpublic,默認的首頁是 index.html。也就是說,如果這三個目錄下存在 index.html 文件,那麼它就是默認的首頁!演示就省略瞭,反正也不是什麼難點!

3. 總結

本節主要是從源碼的角度,研究瞭一下靜態資源導入和首頁設置的問題。其實學習結論很簡單,但從源碼出發思考問題的思想,是不容易學習的。

到此這篇關於SpringBoot 靜態資源導入及首頁設置的文章就介紹到這瞭,更多相關SpringBoot 靜態資源導入內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: