SpringBoot-05 Web開發

zc發表於2021-03-31
Spring BootWeb

SpringBoot-05 Web開發

1

2

靜態資源

要解決的第一個問題，靜態資源存放問題，靜態資源放在哪兒能查詢到。

首先檢視WebMvcAutoConfiguration.class（可以直接全域性查詢）

protected void addResourceHandlers(ResourceHandlerRegistry registry) {
    
        //是否有自定義配置，有的話這個方法失效
    super.addResourceHandlers(registry);
    if (!this.resourceProperties.isAddMappings()) {
        logger.debug("Default resource handling disabled");
    } else {
        
        //新增這個webjars，新增之後路徑為：classpath:/META-INF/resources/webjars/
        ServletContext servletContext = this.getServletContext();
        this.addResourceHandler(registry, "/webjars/**", "classpath:/META-INF/resources/webjars/");
        
        this.addResourceHandler(registry, this.mvcProperties.getStaticPathPattern(), (registration) -> {
            //其餘可以識別的靜態資源位置
            registration.addResourceLocations(this.resourceProperties.getStaticLocations());
            if (servletContext != null) {
                registration.addResourceLocations(new Resource[]{new ServletContextResource(servletContext, "/")});
            }

        });
    }
}

那麼，什麼是webjars？

WebJars是一個很神奇的東西，可以讓大家以jar包的形式來使用前端的各種框架、元件。WebJars是將客戶端（瀏覽器）資源（JavaScript，Css等）打成jar包檔案，以對資源進行統一依賴管理。

3

我的理解就是：以 依賴的形式匯入前端資源

結合上面的路徑，我們匯入一個jqury嘗試：

<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>jquery</artifactId>
    <version>3.5.1</version>
</dependency>
4

可以看出 一一對應，也可以正常訪問。

5

除了上面這些，還有其他可以識別靜態資源的位置：

//其餘可以識別的靜態資源位置
registration.addResourceLocations(this.resourceProperties.getStaticLocations());//getStaticLocations()  點選
if (servletContext != null) {
    registration.addResourceLocations(new Resource[]{new ServletContextResource(servletContext, "/")});
}

public String[] getStaticLocations() {
    return this.staticLocations;  //staticLocations  點選
}

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

6

  • 在springboot,我們可以使用一下方式處理靜態資源
    • webjars --------> localhost:8080/webjars/
    • public , static , /** , resources ------>localhost:8080/
  • 優先順序 : resources > static > public，可以按照自己的需求，放入檔案

至於 templates資料夾，其中的檔案只能用 Controller 控制類，才可以進入。

首頁設定

在SpringBoot中，預設自動識別在靜態資原始檔夾下的 index.html

注意：

  • 靜態資原始檔夾為：
    • public
    • static
    • resources
    • 優先順序：resources > static > public
  • 預設的首頁檔案為：index.html，不要弄錯。

下面測試放在了public，其餘方法大家可以自行測試：

7

8

Thymeleaf模板引擎

1.匯入依賴

模板引擎有什麼用呢？ 可以讓你使用 Controller類 呼叫頁面，沒有Thymeleaf就是不可以。

首先！！，最重要的是匯入這兩個依賴：

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

原因：自己建立的SpingBoor專案，自帶的Thymeleaf版本為2.xxx，而我們要使用的這個版本為3.xx

大家匯入依賴後確定是否成功：

9

10

之後更改一下pom.xml中的配置：

<properties>
    <java.version>1.8</java.version>
    <!-- 加入下面這兩句 -->
    <thymeleaf.version>3.0.11.RELEASE</thymeleaf.version>
    <thymeleaf-layout-dialect.version>3.0.4</thymeleaf-layout-dialect.version>
</properties>

2.Controller類測試

建立一個Controller類

注意：一定要在 xxxApplication啟動器的同級目錄下建立，不然不可能成功！！(踩了30分鐘的坑)

13 
@Controller
public class ThymeleafController {
    @RequestMapping("/a")
    public String test(){
        return "tt";
    }
}

建立一個html頁面

注意：SpringBoot內部規定要在templates資料夾下建立xxx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>ThymeleafController跳轉</h1>
</body>
</html>

之後執行測試：

12

3.Thymeleaf語法

14

th:text

修改controller類，使用model傳一個資料：

@RequestMapping("/a")
public String test(Model model){
    model.addAttribute("msg","Thymeleaf語法測試");
    return "tt";
}

修改html：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>ThymeleafController跳轉</h1><br> 
    <!--以往都是直接${msg}，在Thymeleaf中需要以下使用方法：-->
    <!--之前html可以用的標籤，都變為：  th:屬性名  -->
    <div th:text="${msg}"></div>
</body>
</html>
13

th:utext

修改controller類，使用model傳一個資料：

@RequestMapping("/a")
public String test(Model model){
    model.addAttribute("msg","<h2>Thymeleaf語法測試</h2>");
    return "tt";
}

修改html：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>ThymeleafController跳轉</h1><br>
    <div th:text="${msg}"></div><br>
    <div th:utext="${msg}"></div><br>
</body>
</html>
15

th:each

修改controller類，使用model傳一個資料：

@RequestMapping("/a")
public String test(Model model){
    model.addAttribute("users", Arrays.asList("user1","user2","user3"));
    return "tt";
}

修改html：

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>ThymeleafController跳轉</h1><br>
<!--    兩種寫法，推薦第一種   -->
    <h3 th:each="user:${users}" th:text="${user}"></h3>
    <div th:each="user:${users}" >[[ ${user} ]]</div>
</body>
</html>
16

擴充套件SpringMVC

1.MVC擴充套件原理

diy檢視解析器

@Configuration
public class MyMvcConfig {

    @Bean
    public ViewResolver MyViewResolver(){
        return new MyViewResolver();
    }


    public static class MyViewResolver implements ViewResolver{

        @Override
        public View resolveViewName(String s, Locale locale) throws Exception {
            return null;
        }
    }
}

2.SpringMVC擴充套件

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
//        這句話的意思就是訪問 ...8080/test, 跳轉到tt.html頁面
        registry.addViewController("/test").setViewName("tt");
    }
}

在SpringBoot中，有非常多的 xxxConfiguration 幫助我們進行擴充套件配置，只要看見了這個東西，我們就要注意了，可能是增加了一些新的功能。

個人部落格為：
MoYu's HomePage
MoYu's Gitee Blog

相關文章