快捷導(dǎo)航

springboot結(jié)合前端實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)功能實(shí)例

更新時(shí)間：2023年12月28日 10:38:43 作者：大盤雞加面

今天處理Springboot統(tǒng)一異常攔截的時(shí)候,遇到了頁(yè)面跳轉(zhuǎn)的問(wèn)題,這篇文章主要給大家介紹了關(guān)于springboot結(jié)合前端實(shí)現(xiàn)網(wǎng)頁(yè)跳轉(zhuǎn)功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

總結(jié)

1、前端代碼寫好放在springboot的static目錄下

2、controller類使用GetMapping獲取網(wǎng)址鏈接，然后返回具體的前端html代碼

前端篇

前端常用技術(shù)包含bootstrap、vue和react，今天基于html+css，主要為了說(shuō)明springboot如何實(shí)現(xiàn)前后端跳轉(zhuǎn)

編寫首頁(yè)

首頁(yè)包含兩個(gè)a標(biāo)簽，分別跳轉(zhuǎn)到a.html和b.html，編譯器使用VScode，

首頁(yè)index.html的body代碼如下：

<div class="">
    hello, world
</div>

<a href="/a" rel="external nofollow" >跳轉(zhuǎn)a網(wǎng)頁(yè)</a>
<a href="/b" rel="external nofollow" >跳轉(zhuǎn)b網(wǎng)頁(yè)</a>

a.html的body代碼如下，b.html類似:

<body>
    <div class="">這是a網(wǎng)頁(yè)</div>
</body>

前端三個(gè)頁(yè)面完成，只是前端跳轉(zhuǎn)的話，可以把/a和/b換成a.html和b.html就可以了

后端篇

后段使用springboot，

1、創(chuàng)建springboot項(xiàng)目

2、配置maven

3、創(chuàng)建controller文件夾以及controller類

4、編寫跳轉(zhuǎn)代碼

創(chuàng)建springboot項(xiàng)目和配置maven已在前面寫過(guò)，不熟悉的可以參考之前寫的這篇博客(springboot實(shí)現(xiàn)hello world)http://www.fzitv.net/program/310318c1r.htm

創(chuàng)建springboot項(xiàng)目

配置maven

創(chuàng)建controller類

新建controller文件夾，以及創(chuàng)建一個(gè)controller類：HelloController.java

在HelloController.java中編寫跳轉(zhuǎn)代碼

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

@Controller
public class HelloController {

    @GetMapping("/")
    public Object index(){
        return "c.html";
    }

    @GetMapping("/a")
    public Object a(){
        return "a.html";
    }

    @GetMapping("/b")
    public Object b(){
        return "b.html";
    }
 }

在GetMapping中填寫需要跳轉(zhuǎn)的url地址，函數(shù)類通過(guò)return返回一個(gè)具體的具體的html網(wǎng)頁(yè)

當(dāng)目前為止前后都已經(jīng)寫完了，但是后端尋找的是html文件，此時(shí)直接運(yùn)行會(huì)提示找不到html文件，需要將前端html文件放在springboot指定的目錄下：

靜態(tài)文件放在resources/static目錄中
動(dòng)態(tài)文件放在resources/templates目錄下
css、html和js都放在static目錄下

運(yùn)行spring啟動(dòng)類

這兩個(gè)地方都可以運(yùn)行，運(yùn)行后的效果如下：

運(yùn)行成功：

首頁(yè)打開成功：

點(diǎn)擊跳轉(zhuǎn)到a和b成功：

總結(jié)

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

您可能感興趣的文章: