#在構建URL時添加到視圖名稱前的前綴（默認值: classpath:/templates/ )

spring.thymeleaf.prefix=classpath:/templates/

#在構建URL時添加到視圖名稱后的后綴（默認值:.html )

spring.thymeleaf.suffix=.html

準備頁面

在 resources 文件夾下創(chuàng)建新文件夾 templates , 這個文件夾是springboot默認存放模板頁面的文件夾

在文件夾下建立目標頁面 ref.html

同樣在創(chuàng)建文件時, 同時創(chuàng)建了所屬的文件夾,

當然也可以分開創(chuàng)建 , 文件夾 Directory

創(chuàng)建后, 添加一句 “hello spring boot”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hello spring boot
</body>
</html>

在方法中添加轉頁

方法是通過返回值來進行轉頁的, 添加新的方法

String 返回類型對應的返回值就是轉頁路徑, 本例中應該是 templates > ref.html

 	@RequestMapping("/test/test02")
    public String test02(){
        System.out.println(" controller 中的測試方法 test 02 ");
        return "轉頁的路徑";
    }

得到頁面路徑

通過菜單選擇項得到頁面路徑

文件上右鍵 > Copy Path… > Path From Source Root 將路徑復制到剪切板上

將信息替換返回值,

注意要掐頭( templates/ ) 去尾 ( .html ) 因為這些信息已經在配置文件中指定了

@RequestMapping("/test/test02")
    public String test02(){
        System.out.println(" controller 中的測試方法 test 02 ");
        return "ref";
    }

測試

重新啟動項目, 在瀏覽器地址欄輸入URL : http://localhost:8080/test/test02

看到 ref.html 頁面上添加的信息, 測試成功

重新定向redirect

就是方法執(zhí)行后, 不是返回頁面, 而是跳轉到別的方法里, 繼續(xù)執(zhí)行

添加新的方法

添加測試方法 test03

返回值增加 redirect: 關鍵字

后面是新的請求URL, 本例是 test02,

如果當前方法的請求前綴與重新定向的方法前綴相同( 本例前綴為 /test ), 可以省略

特別注意 “:” 與后面的URL之間不能有空格

    @RequestMapping("/test/test03")
    public String test03(){
        System.out.println(" controller 中的測試方法 test 03 ");
        return "redirect:test02";
    }

測試

重新啟動項目, 在瀏覽器地址欄輸入URL : http://localhost:8080/test/test03

看到 ref.html 頁面上添加的信息, 注意URL又從 test03 跳轉成 test02, 說明依然還是 test02 方法轉頁的

但在idea控制臺能看到兩個方法被依次執(zhí)行

簡單轉頁

當只是簡單的進行轉頁, 沒有具體業(yè)務代碼時, SpringBoot 提供了簡單的轉頁方式

注意 :

類上加注解 @Configuration說明這是一個配置類, 項目啟動時會優(yōu)先讀取類中的配置信息

類實現 WebMvcConfigurer 接口 , 并覆蓋 addViewControllers() 方法

通過傳入 ViewControllerRegistry 類型的參數, 來實現內部轉頁, 重新定向

package com.yuan.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        // 內部轉頁
        registry.addViewController("/").setViewName("start");
        // 重新定向
        registry.addRedirectViewController("/test03", "/");        
    }
}

頁面發(fā)請求的三種方式

在 resources > templates 文件夾下增加新的頁面 start

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    welcome start <br>
</body>
</html>

由于在 WebMvcConfig 配置類配置了默認請求 “/” 轉到 start.html, 所以啟動項目后默認打開 start頁面

<a>超鏈接

在start.html 里增加超鏈接 , 通過 href 屬性 對 test02 發(fā)請求, 轉頁到 ref.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    welcome start <br>
    <a href="/test/test02" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >test02</a> <br>
</body>
</html>

重啟項目, 瀏覽器上可以看到超鏈接

點擊超鏈接測試, 可以轉到ref.html頁面

form表單

在 start.html 里增加表單, 通過 action 屬性對 test02 發(fā)請求, 轉頁到 ref.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    welcome start <br>
    <a href="/test/test02" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >test02</a> <br>
    <form action="/test/test02" >
        <input type="submit" value="提交">
    </form>
</body>
</html>

重啟項目, 瀏覽器上可以看到表單的 submit 提交按鈕

點擊提交按鈕, 可以轉到ref.html頁面

location.href

在 start.html 里增加按鈕 , 通過按鈕的 onclick單擊事件 調用函數,

從而通過 location.href屬性 對 test02 發(fā)請求, 轉頁到 ref.html頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    welcome start <br>
    <a href="/test/test02" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >test02</a> <br>
    <form action="/test/test02"  method="post" >
        <input type="submit" value="提交">
    </form>
    <button type="button" onclick="fn()" >按鈕</button>
</body>
<script type="text/javascript" >
    function fn() {
        window.location.href = "/test/test02"
    }
</script>
</html>

重啟項目, 瀏覽器上可以看到按鈕