SpringBoot跳轉頁面詳解+thymeleaf


     初次做SpringBoot,要解決頁面跳轉的問題,這個問題我弄了大半天,弄好后,其實也不算個事,寫出來給大家提個醒!其實不要使用spring boot的@RestController注解,直接使用spring原來的注解@Controller就可以了。示例如下:

 

@Controller

public class ActionController {

    @RequestMapping(value = "/action",method = RequestMethod.GET)

    public String index(){

        return "login";

    }

}

如果你的項目如什么都沒有配,那么你想跳到login.html時,語句必須是  return "login.html"  ,否則它會報錯 。因為找不到login文件。

        為什么呢?因為@RestController注解,相當於@Controller+@ResponseBody兩個注解的結合, @Responsebody后,返回結果直接寫入HTTP response body中,不會被解析為跳轉路徑,所以你總是看到是打印字符串的效果,不是跳轉效果。

=========================================================

請看更詳細的解答:SpringBoot里面沒有我們之前常規web開發的WebContent(WebApp),它只有src目錄,在src/main/resources下面有兩個文件夾,[static]和[templates],springboot默認static中放靜態頁面,而templates中放動態頁面,見下圖:

 

 

 

靜態頁面:

        靜態頁面可以直接訪問。這里我們直接在static放一個hello.html,然后直接輸入http://localhost:8080/hello.html便能成功訪問(好像可以新建一個public文件夾,也可以放靜態文件)。

        也可以通過controller跳轉:

@Controller

public class HelloController {

    @RequestMapping("/Hi")

    public String sayHello() {

        return "redirect:/hello.html";

    }

}

如果不想返回視圖,則用@RestController

如果用了靜態模板你還想返回static中的頁面,那么就要用重定向:

如果在使用動態頁面時還想跳轉到/static/index.html,可以使用重定向return "redirect:/hello.html"。 

 

        然后輸入http://localhost:8080/Hi就可以成功訪問 

動態頁面:

        動態頁面需要先請求服務器,訪問后台應用程序,然后再轉向到頁面,比如訪問JSP。spring boot建議不要使用JSP,默認使用Thymeleaf來做動態頁面。

要在pom中要添加Thymeleaf組件

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

 

然后,在配置文件:application.yml或application.property中加配置:

spring.thymeleaf.prefix:classpath: /templates/

spring.thymeleaf.suffix: .html

 

但你加上了上面的thymeleaf后,你必須重啟工程,即使是你配置了熱啟動后,也要重啟工程,才可以看到效果 。

    我們先在tempates文件夾中也新建一個hello.html但內容不同,然后先試一下直接訪問該頁面。輸入http://localhost:8080/hello.html:

 

 

結果顯然訪問的是靜態文件夾里面的那個hello.html

然后我們現在再試一下用controller:

 

似乎無法訪問到hello.html了。。。這是因為:靜態頁面的return默認是跳轉到/static/index.html,當在pom.xml中引入了thymeleaf組件,動態跳轉會覆蓋默認的靜態跳轉,默認就會跳轉到/templates/index.html,注意看兩者return代碼也有區別,動態有或沒有html后綴都可以。

也就是我們要這樣改controller:

@Controller

public class HelloController {

@RequestMapping("/Hi")

    public String sayHello() {

        return "hello";//在沒有配置的情況下,return "hello”; 或者return "hello"都可以,它們都會到templates/index.html去。

    }  

}

然后就可以成功跳轉了

然后我們看看返回一點數據在前端利用Thyemleaf來拿:

@Controller

public class HelloController {

 

    @RequestMapping("/Hi")

    public ModelAndView sayHello() {

        ModelAndView modelAndView = new ModelAndView();

        modelAndView.setViewName("hello");

        modelAndView.addObject("key", 12345);

        //System.out.println("test");

        return modelAndView;

    }

   

}

---------------------

Templates/hello.html

---------------------

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8"/>

<title>Insert title here</title>

 

</head>

<body>

<h1>this is the hello.html in templates</h1>

<span th:text="${key}"></span> 

</body>

</html>

 

效果:

 

 

如果不想返回視圖,則用@RestController

如果用了靜態模板你還想返回static中的頁面,那么就要用重定向:

如果在使用動態頁面時還想跳轉到/static/index.html,可以使用重定向return "redirect:/index.html"。 
 

幾點tips:

1.攔截的url最后不要跟視圖重合,否則會拋出Circular view path異常,我之前就是

@Controller

public class HelloController {

 

    @RequestMapping("/hello")

    public String sayHello() {

        return "hello.html"; 

    }

   

}

然后就報錯說會有個循環視圖的錯誤,反正以后注意就是。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM