整合SpringMVC之歡迎頁面與自定義Favicon

.Spring Boot設置歡迎頁面

1.默認歡迎頁的源碼

在Spring Boot中，默認的歡迎界面是index.html，那為什么這樣呢？我們可以看看源碼是怎么定義的。

public class WebMvcAutoConfiguration {
   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");
    }
}

從源碼中我們可以看到，歡迎頁的靜態(tài)資源文件默認就是index.html頁面，并且只要該頁面存放在resources目錄下的默認路徑中，就會被"/**"映射。

classpath:/META-INF/resources/ 
classpath:/resources/
classpath:/static/ 
classpath:/public/
/：當前項目的根路徑

也就是只要index.html頁面在以上幾個目錄內(nèi)，就會自動被Spring Boot探測到。

2.實驗驗證

2.1 創(chuàng)建web項目(略)

目錄結(jié)構(gòu)如下，在該項目中，我們在resources目錄下，創(chuàng)建4個子文件夾，具體參考上一章節(jié)。然后在每個子文件夾中，都存放一個index.html文件，但是文件內(nèi)容略有不同，每個文件都有自己的編號。

每個index.html文件內(nèi)容的編號不同，以此類推！

2.2 啟動項目測試

我們啟動web項目，輸入地址http://localhost:8080會發(fā)現(xiàn)，默認加載的是META-INF/resources目錄下的index.html文件，為什么呢？這與靜態(tài)資源文件夾的優(yōu)先級有關(guān)系哦，我們上一章節(jié)已經(jīng)講過了

二.自定義歡迎頁面

但在實際開發(fā)中，我們有時候就希望先訪問登錄界面，然后登錄成功后再跳到主頁面，那此時如何將登錄頁面作為歡迎頁面呢？

這個可以有兩種實現(xiàn)方式。

視圖控制器配置方式；
Controller直接實現(xiàn)方式；

1.視圖控制器配置方式

1.1 創(chuàng)建配置類

我們可以在上面的web項目中，創(chuàng)建一個WebMvcConfigurerAdapter類。

package com.yyg.boot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurationSupport;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

/**
 * @Description Description
 * @Author 一一哥Sun
 * @Date Created in 2020/3/21
 */
@Configuration
public class DefaultViewConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        //這里的"/"是訪問路徑，"forward:home.html"是請求轉(zhuǎn)發(fā)到的頁面名稱
        registry.addViewController("/").setViewName("forward:home.html");
        //設置優(yōu)先級
        registry.setOrder(Ordered.HIGHEST_PRECEDENCE);
        super.addViewControllers(registry);
    }

}

1.2 創(chuàng)建home.html頁面

我們在static目錄下創(chuàng)建一個home.html頁面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>一一哥的Home頁面...</h1>
</body>
</html>

1.3 運行測試

接著我們運行程序，輸入地址：http://localhost:8080就可以看到如下歡迎界面。

2. Controller直接實現(xiàn)方式

我們在上一個例子的基礎(chǔ)之上，創(chuàng)建一個Controller類。

注意：

把上一個案例中DefaultViewConfig配置類的@Configure注解去掉，避免影響到本次實驗。

2.1 項目結(jié)構(gòu)：

2.2 創(chuàng)建Controller

package com.yyg.boot.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Description Description
 * @Author 一一哥Sun
 * @Date Created in 2020/3/21
 */
@Controller
public class WelcomeController {

    @RequestMapping("/")
    public String view() {
        return "forward:home.html";
    }

}

2.3 運行測試

接著我們運行程序，輸入地址：http://localhost:8080就可以看到如下歡迎界面。

三.結(jié)合Thymeleaf模板實現(xiàn)歡迎頁面

我們可以結(jié)合Thymeleaf模板，來實現(xiàn)歡迎頁面。

1.添加依賴包

在該web項目的pom.xml文件中添加依賴包。

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

2.配置模板路徑

創(chuàng)建application.properties文件，添加如下配置，其實默認也是這個配置。

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html

3.創(chuàng)建login.html頁面

創(chuàng)建login.html存放到/templates/目錄下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <h1>一一哥的登錄頁面...</h1>
</body>
</html>

4.創(chuàng)建Controller接口

package com.yyg.boot.web;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Description Description
 * @Author 一一哥Sun
 * @Date Created in 2020/3/21
 */
@Controller
public class WelcomeController {

//    @RequestMapping("/")
//    public String view() {
//        return "forward:home.html";
//    }

    @RequestMapping("/")
    public String login() {
        return "login";
    }
}

5.運行測試

輸入地址，http://localhost:8080即可看到歡迎界面。

四.設置網(wǎng)站圖標Favicon

1.Favicon簡介

很多時候，企業(yè)網(wǎng)站一般都會有一個對應的網(wǎng)站圖標(Favicon)，在瀏覽器訪問網(wǎng)站時，對應的瀏覽器標簽上會出現(xiàn)對應的圖標。例如csdn網(wǎng)站上的小圖標。

2.Favicon源碼分析

我們可以看看Spring中關(guān)于Favicon的源碼。

@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;
    }

    public void
    setResourceLoader(ResourceLoader resourceLoader) {
        this.resourceLoader = resourceLoader;
    }

    @Bean
    public SimpleUrlHandlerMapping faviconHandlerMapping() {
        SimpleUrlHandlerMapping mapping = new SimpleUrlHandlerMapping();
        mapping.setOrder(-2147483647);
        mapping.setUrlMap(Collections.singletonMap("**/favicon.ico", this.faviconRequestHandler()));
        return mapping;
    }

    @Bean
    public ResourceHttpRequestHandler faviconRequestHandler() {
        ResourceHttpRequestHandler
        requestHandler = new ResourceHttpRequestHandler();
        requestHandler.setLocations(this.resolveFaviconLocations());
        return requestHandler;
    }

    private List<Resource> resolveFaviconLocations() {
    String[] staticLocations = WebMvcAutoConfiguration.WebMvcAutoConfigurationAdapter.getResourceLocations(this.resourceProperties.getStaticLocations());
    List<Resource> locations = new ArrayList(staticLocations.length + 1);
    Stream var10000 = Arrays.stream(staticLocations);
    ResourceLoader var10001 = this.resourceLoader;
    var10001.getClass();
    var10000.map(var10001::getResource).forEach(locations::add);
    locations.add(new ClassPathResource("/"));
    return
    Collections.unmodifiableList(locations);
   }
}

3.SpringBoot 1.x與2.x版本區(qū)別

在SpringBoot 1.x版本中對Favicon進行了默認支持，并且可以通過如下配置進行關(guān)閉操作:

spring.mvc.favicon.enabled=false ## 關(guān)閉

默認的Favicon圖標效果：

但到了SpringBoot2.x版本后，在Spring Boot項目的issues中提出，如果用戶不進行自定義的Favicon的設置，而Spring Boot項目會提供默認的圖標，而如果提供默認的Favicon圖標，則可能會導致泄露網(wǎng)站的開發(fā)框架這樣的信息。

因此，在Spring Boot2.2.x中，將默認的favicon.ico移除，同時也不再提供上述application.properties中的屬性配置。更多詳細信息可查看對應的issues：https://github.com/spring-pr

4.SpringBoot2.x項目中添加Favicon

在2.x以前的版本，直接將你需要的favicon.ico文件存放在static下面就可以。

但到了2.2.X以后的版本，去掉了默認的自動配置，需要我們手動在每一個頁面添加自己網(wǎng)站的Favicon圖標。

我們可以在static目錄下創(chuàng)建一個images目錄，里面存放自己的Favicon.ico圖標。

4.1 html頁面中添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    <link rel="icon" href="images/Favicon.ico" type="image/x-icon"/>
</head>
<body>
<h1>一一哥的登錄頁面...</h1>
</body>
</html>

4.2 Thymeleaf頁面中添加

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Hello Favicon</title>
<link rel="icon" th:href="@{/favicon.ico}" type="image/x-icon"/>
</head>
<body>
<h1>Hello 一一哥!</h1>
</body>
</html>

5.重啟項目測試

我們重新訪問頁面，可以看到Favicon圖標已經(jīng)換成了我自己的圖標。

章來源：freecodecamp網(wǎng)址：https://chinese.freecodecamp.org/

HTML 是一種標記語言，使用特殊的語法或標記來向瀏覽器描述網(wǎng)頁的結(jié)構(gòu)。HTML 元素由開始和結(jié)束標簽構(gòu)成，標簽之間是文本內(nèi)容。不同的標簽可以讓文本內(nèi)容以標題、段落、列表等形式展現(xiàn)。

在這個課程中，你將通過編寫一個展示貓咪圖片的應用，學習最常見的 HTML 元素——它們可以用來構(gòu)成任何網(wǎng)頁。

向 HTML 元素問好通過

歡迎訪問 freeCodeCamp 的 HTML 編程挑戰(zhàn)。這些挑戰(zhàn)將會幫助你逐步掌握 Web 開發(fā)。

首先，我們采用 HTML 制作一個簡單的網(wǎng)頁。你可以直接在網(wǎng)頁內(nèi)置的代碼編輯器中編輯代碼。

你看到編輯器中的 <h1>Hello</h1> 了嗎？那是一個 HTML 元素。

大部分 HTML 元素都有一個開始標簽和一個結(jié)束標簽。

開始標簽像這樣：

<h1>

結(jié)束標簽像這樣：

</h1>

開始標簽和結(jié)束標簽的唯一區(qū)別就是結(jié)束標簽多了一個斜杠。

每個挑戰(zhàn)都有測試，任何時候你點擊“運行測試”按鈕，就可以運行測試。如果代碼通過測試，將會彈出一個窗口，你就可以進入下一個挑戰(zhàn)。

要通過這個挑戰(zhàn)的測試，需要修改 h1 元素的文本為 Hello World。

具體要求如下：

h1 元素的內(nèi)容文本應為 Hello World。

源代碼如下：

<h1>Hello</h1>

更改后如下：

<h1>Hello world</h1>

evExpress WinForms擁有180+組件和UI庫，能為Windows Forms平臺創(chuàng)建具有影響力的業(yè)務解決方案。DevExpress WinForms能完美構(gòu)建流暢、美觀且易于使用的應用程序，無論是Office風格的界面，還是分析處理大批量的業(yè)務數(shù)據(jù)，它都能輕松勝任！

DevExpress WinForm 近日正式發(fā)布了2022年第一個重大版本——v22.1，此版本也正式升級了之前版本中發(fā)布的HTML CSS模板功能，歡迎下載最新版體驗！

DevExpress WinForms Subscription官方最新版免費下載試用，歷史版本下載，在線文檔和幫助文件下載-慧都網(wǎng)

HTML CSS 模板

列表框、組合框、警報 - HTML和CSS標記支持

v22.1 為我們的WinForms ListBox、ComboBox和Alert控件引入了 HTML 和 CSS 標記支持，使用HtmlTemplates屬性定義可應用于項目的HTML-CSS模板集合，閱讀以下文章：

DevExpress WinForms的HTML & CSS 模板 — 新控件和功能
DevExpress WinForms HTML & CSS模板——輕松創(chuàng)建警報通知

處理以下事件以響應針對 HTML UI 元素的鼠標操作：

HtmlElementMouseOver
HtmlElementMouseMove
HtmlElementMouseOut
HtmlElementMouseClick
HtmlElementMouseDown
HtmlElementMouseUp

HTML Content控件 - 存儲庫項的輸入標記

您現(xiàn)在可以將存儲庫項目包裝在 <input> 標記內(nèi)。

'name' 屬性按名稱引用存儲庫項，'value' 屬性指定數(shù)據(jù)字段名稱。

HTML

<div class='default-avatar-container' hidden='${HasPhoto}'>
<input class='default-avatar' name='pictureEdit' value='${Photo}' />
<a class='choose-photo' id='choose_Photo'>Choose a photo</a>
</div>
<div class='default-avatar-container avatar-container' hidden='${IsDefaultPhoto}'>
<input class='avatar' name='pictureEdit' value='${Photo}' />
</div>
<div class='input-box'>
<input class='input' name='emailEdit' value='${Email}'/>
</div>

我們的Template Designer 在包括'In-place Editor Repository' 選項卡，打開此選項卡來創(chuàng)建要在 HTML 模板中引用的存儲庫項目。

HTML模板設計器增強

HTML 模板設計器現(xiàn)在附帶以下選項：

區(qū)域折疊
縮進指南
行號

TileView - 項目自動高度

我們添加了一個新的TileViewOptionsHtmlTemplate.ItemAutoHeight 選項來支持由HTML和基于CSS模板呈現(xiàn)的圖塊的自動高度模式，在自動高度模式下，磁貼會垂直拉伸以完全顯示內(nèi)容。

新的 CSS 屬性

我們支持以下 CSS 屬性：

overflow-wrap
white-space
background-image
background-position
background-size
background-repeat

在線咨詢

上一篇：獲取Iframe內(nèi)外的元素
下一篇：js 遍歷html表格獲取表格內(nèi)容

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商