快捷導(dǎo)航

SpringBoot實(shí)現(xiàn)轉(zhuǎn)頁(yè)功能

更新時(shí)間：2023年05月12日 11:43:01 作者：春哥的魔法書

這篇文章主要介紹了SpringBoot實(shí)現(xiàn)轉(zhuǎn)頁(yè)功能，頁(yè)面的跳轉(zhuǎn)在web開發(fā)中是經(jīng)常用的基礎(chǔ)功能，感興趣想要詳細(xì)了解可以閱讀下文，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值

內(nèi)部轉(zhuǎn)頁(yè)forward

轉(zhuǎn)頁(yè)配置

在配置文件 resources > application.properties 中可以找到轉(zhuǎn)頁(yè)的配置信息,

這些是SpringBoot的默認(rèn)配置, 是可以省略不寫在配置文件中的

#在構(gòu)建URL時(shí)添加到視圖名稱前的前綴（默認(rèn)值: classpath:/templates/ )

spring.thymeleaf.prefix=classpath:/templates/

#在構(gòu)建URL時(shí)添加到視圖名稱后的后綴（默認(rèn)值:.html )

spring.thymeleaf.suffix=.html

準(zhǔn)備頁(yè)面

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

在文件夾下建立目標(biāo)頁(yè)面 ref.html

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

當(dā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>

在方法中添加轉(zhuǎn)頁(yè)

方法是通過返回值來(lái)進(jìn)行轉(zhuǎn)頁(yè)的, 添加新的方法

String 返回類型對(duì)應(yīng)的返回值就是轉(zhuǎn)頁(yè)路徑, 本例中應(yīng)該是 templates > ref.html

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

得到頁(yè)面路徑

通過菜單選擇項(xiàng)得到頁(yè)面路徑

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

將信息替換返回值,

注意要掐頭( templates/ ) 去尾 ( .html ) 因?yàn)檫@些信息已經(jīng)在配置文件中指定了

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

測(cè)試

重新啟動(dòng)項(xiàng)目, 在瀏覽器地址欄輸入U(xiǎn)RL : http://localhost:8080/test/test02

看到 ref.html 頁(yè)面上添加的信息, 測(cè)試成功

重新定向redirect

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

添加新的方法

添加測(cè)試方法 test03

返回值增加 redirect: 關(guān)鍵字

后面是新的請(qǐng)求URL, 本例是 test02,

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

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

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

測(cè)試

重新啟動(dòng)項(xiàng)目, 在瀏覽器地址欄輸入U(xiǎn)RL : http://localhost:8080/test/test03

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

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

簡(jiǎn)單轉(zhuǎn)頁(yè)

當(dāng) 只是簡(jiǎn)單的進(jìn)行轉(zhuǎn)頁(yè), 沒有具體業(yè)務(wù)代碼時(shí), SpringBoot 提供了簡(jiǎn)單的轉(zhuǎn)頁(yè)方式

注意 :

類上加注解 @Configuration說明這是一個(gè)配置類, 項(xiàng)目啟動(dòng)時(shí)會(huì)優(yōu)先讀取類中的配置信息

類實(shí)現(xiàn) WebMvcConfigurer 接口 , 并覆蓋 addViewControllers() 方法

通過傳入 ViewControllerRegistry 類型的參數(shù), 來(lái)實(shí)現(xiàn)內(nèi)部轉(zhuǎn)頁(yè), 重新定向

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) {
        // 內(nèi)部轉(zhuǎn)頁(yè)
        registry.addViewController("/").setViewName("start");
        // 重新定向
        registry.addRedirectViewController("/test03", "/");        
    }
}

頁(yè)面發(fā)請(qǐng)求的三種方式

在 resources > templates 文件夾下增加新的頁(yè)面 start

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

由于在 WebMvcConfig 配置類配置了默認(rèn)請(qǐng)求 “/” 轉(zhuǎn)到 start.html, 所以啟動(dòng)項(xiàng)目后默認(rèn)打開 start頁(yè)面

<a>超鏈接

在start.html 里增加超鏈接 , 通過 href 屬性 對(duì) test02 發(fā)請(qǐng)求, 轉(zhuǎn)頁(yè)到 ref.html頁(yè)面

<!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>

重啟項(xiàng)目, 瀏覽器上可以看到超鏈接

點(diǎn)擊超鏈接測(cè)試, 可以轉(zhuǎn)到ref.html頁(yè)面

form表單

在 start.html 里增加表單, 通過 action 屬性對(duì) test02 發(fā)請(qǐng)求, 轉(zhuǎn)頁(yè)到 ref.html頁(yè)面

<!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>

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

點(diǎn)擊提交按鈕, 可以轉(zhuǎn)到ref.html頁(yè)面

location.href

在 start.html 里增加按鈕 , 通過按鈕的 onclick單擊事件 調(diào)用函數(shù),

從而通過 location.href屬性 對(duì) test02 發(fā)請(qǐng)求, 轉(zhuǎn)頁(yè)到 ref.html頁(yè)面

<!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>

重啟項(xiàng)目, 瀏覽器上可以看到按鈕

點(diǎn)擊按鈕, 可以轉(zhuǎn)到ref.html頁(yè)面

到此這篇關(guān)于SpringBoot實(shí)現(xiàn)轉(zhuǎn)頁(yè)功能的文章就介紹到這了,更多相關(guān)SpringBoot轉(zhuǎn)頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: