SpringBoot系列: url重定向和轉發

Web UI項目中, 很多 Spring controller 視圖函數直接返回 html 頁面, 還有一些視圖函數是要重定向或轉發到其他的 url 上.

redirect 和 forward的區別:

重定向 redirect: 完整的重定向包含兩次request-response過程, 第一次是訪問原始url, 第二次是服務器通知客戶端訪問重定向后的url. 重定向完成后, 瀏覽器的地址是重定向后的url, 而不是原始的url.
    重定向的使用場景: 因為重定向會修改瀏覽器地址, 所以 form 提交應該使用重定向, 以免用戶刷新頁面導致form重復提交.

轉發 forward: 完整的轉發僅包含一次 request-response 過程, 用戶發出request后, 服務器端視圖函數先處理自己的邏輯, 然后在服務器端有調用另一個視圖函數, 最后將response返回給瀏覽器.

 

==============================
轉發 forward
==============================
在Spring MVC 中, 構建forward 目標有兩種方式:
1. 以字符串的形式構建目標url, url 需要加上 forward: 前綴
2. 使用 ModelAndView 對象來設置轉發的forward目標, viewName 可以省略 forward: 前綴, viewName 應該是目標url, 而不是目標視圖的函數名.
傳參方式:
1. 以字符串的形式構建目標url, 可以使用 query variable的格式拼url
2. 使用 ModelAndView 對象來增加 attribute Object, 其結果也是在拼接url. 
取參的方式: 可以使用 @RequestParam 來取參. 

==============================
重定向 redirect
==============================
redirect 目標有三種構建方式
1. 使用 redirect: 前綴url方式構建目標url
2. 使用 RedirectView 類型指定目標, 推薦使用這個,
3. 使用 ModelAndView 類型指定目標, ModelAndView 視圖名默認是forward, 所以對於redirect, 需要加上 redirect: 前綴

傳參和取參方式:
1. 傳參: 以字符串的形式構建目標url, 可以使用 query variable的格式拼url. 取參: @RequestParam()來fetch
2. 傳參: redirectAttributes.addAttribute() 加的attr. 取參: @RequestParam()來fetch
3. 傳參: redirectAttributes.addFlashAttribute() 加的attr. 取參: @ModelAttribute()來fetch

Flash attribute的特點:
1. addFlashAttribute() 可以是任意類型的數據(不局限在String等基本類型), addAttribute()只能加基本類型的參數.
2. addFlashAttribute() 加的 attr, 不會出現在url 地址欄上.
3. addFlashAttribute() 加的 attr, 一旦fetch后, 就會自動清空, 非常適合 form 提交后 feedback Message.

 

==============================
示例代碼
==============================
-----------------------------
pom.xml 和 application.properties
-----------------------------

<dependency>
    <groupId>io.pebbletemplates</groupId>
    <artifactId>pebble-spring-boot-2-starter</artifactId>
    <version>3.0.5</version>
</dependency>

# application.properties file
pebble.prefix=/templates/
pebble.suffix=.html
pebble.content-type=text/html
pebble.cache=false
pebble.encoding=UTF-8
pebble.defaultLocale=null
pebble.strictVariables=false

 

-----------------------------
java 代碼
-----------------------------

@Controller
@RequestMapping("/")
public class DemoController {

    /*
     * forward 示例: 以字符串的形式構建目標url, url 需要加上 forward: 前綴
     * */
    @RequestMapping("/forwardTest1")
    public String forwardTest1() {
        return "forward:/forwardTarget?param1=v1&param2=v2";
    }


    /*
     * forward 示例: 使用 ModelAndView() 設置轉發的目標url
     * */
    @RequestMapping("/forwardTest2")
    public ModelAndView forwardTest2() {
        ModelAndView mav=new ModelAndView("/forwardTarget"); // 絕對路徑OK
        //ModelAndView mav=new ModelAndView("forwardTarget"); // 相對路徑也OK
        mav.addObject("param1", "value1");
        mav.addObject("param2", "value2");
        return mav ;
    }

    @RequestMapping("/forwardTarget")
    public String forwardTargetView(Model model, @RequestParam("param1") String param1,
            @RequestParam("param2") String param2) {
        model.addAttribute("param1", param1);
        model.addAttribute("param2", param2);
        return "forwardTarget";
    }


    /*
     * redirect 目標有三種構建方式
     * 1. 使用 redirect: 前綴url方式構建目標url
     * 2. 使用 RedirectView 類型指定目標
     * 3. 使用 ModelAndView 類型指定目標, ModelAndView 視圖名默認是forward, 所以對於redirect, 需要加上 redirect: 前綴
     * */
    @RequestMapping("/noParamRedirect")
    public RedirectView noParamTest() {
        RedirectView redirectTarget = new RedirectView();
        redirectTarget.setContextRelative(true);
        redirectTarget.setUrl("noParamTarget");
        return redirectTarget;
    }

    @RequestMapping("/noParamTarget")
    public String redirectTarget() {
        return "noParamTarget";
    }

    @RequestMapping("/withParamRedirect")
    public RedirectView withParamRedirect(RedirectAttributes redirectAttributes) {
        RedirectView redirectTarget = new RedirectView();
        redirectTarget.setContextRelative(true);
        redirectTarget.setUrl("withParamTarget");

        redirectAttributes.addAttribute("param1", "value1");
        redirectAttributes.addAttribute("param2", "value2");
        return redirectTarget;
    }

    @RequestMapping("/withParamTarget")
    public String withParamTarget(Model model, @RequestParam("param1") String param1,
            @RequestParam("param2") String param2) {
        model.addAttribute("param1", param1);
        model.addAttribute("param2", param2);
        return "withParamTarget";
    }

    @RequestMapping("/withFlashRedirect")
    public RedirectView withFlashTest(RedirectAttributes redirectAttributes) {
        RedirectView redirectTarget = new RedirectView();
        redirectTarget.setContextRelative(true);
        redirectTarget.setUrl("withFlashTarget");

        redirectAttributes.addAttribute("param", "value");
        redirectAttributes.addFlashAttribute("flashParam", "flashValue");
        return redirectTarget;
    }


    /*
     * redirectAttributes.addAttribute加的attr, 使用 @RequestParam()來fetch
     * redirectAttributes.addFlashAttribute()加的attr, 使用 @ModelAttribute()來fetch
     * */
    @RequestMapping("/withFlashTarget")
    public String withFlashTarget(Model model, @RequestParam("param") String param,
            @ModelAttribute("flashParam") String flashParam) {
        model.addAttribute("param", param);
        model.addAttribute("flashParam", flashParam);
        return "withFlashTarget";
    }



    @GetMapping("/input")
    public String input() {
        return "input";
    }

    /*
     * form 提交后, 如果form數據有問題, 使用redirectAttributes.addFlashAttribute()加上 flash message.
     * addFlashAttribute()可以是任意類型的數據(不局限在String等基本類型)
     * addFlashAttribute() 加的 attr, 不會出現在url 地址欄上.
     * addFlashAttribute() 加的 attr, 一旦fetch后, 就會自動清空, 非常適合 form 提交后 feedback Message.
     * */
    @PostMapping("/submit")
    public RedirectView submit(RedirectAttributes redirectAttributes) {
        boolean passed = false;
        if (passed==false) {
            RedirectView redirectTarget = new RedirectView();
            redirectTarget.setContextRelative(true);
            redirectTarget.setUrl("input");
            redirectAttributes.addFlashAttribute("errorMessage", "some error information here");
            return redirectTarget;
        }else {
            RedirectView redirectTarget = new RedirectView();
            redirectTarget.setContextRelative(true);
            redirectTarget.setUrl("inputOK");
            return redirectTarget;
        }
    }
}

 

 

==============================
Html 代碼
==============================

-------------------------------
input.html
-------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title> </title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
    <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous"/>
  </head>
  <body>
     <div class="container">
      <form class="form-signin" method="post" action="/submit">
        <h2 class="form-signin-heading">Please input</h2>
        {% if errorMessage is not empty %}
           <div class="alert alert-danger" role="alert">{{errorMessage}}</div>         
        {% endif %}   
        <p>
          <label for="username" class="sr-only">Username</label>
          <input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
        </p>
        <button class="btn btn-lg btn-primary btn-block" type="submit">submit</button>
      </form>
    </div >
   </body>
</html>

 

-------------------------------
inputOK.html
-------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> </title>
  </head>
  <body>
     <div class="container">
     <h1>inputOK</h1> 
    </div >
   </body>
</html>

 

-------------------------------
forwardTarget.html
-------------------------------

<!DOCTYPE html>
<html lang="en">
  <head> 
    <title>{{param1}} &nbsp; {{param2}} </title> 
  </head>
  <body> 
      <h1>forwardTarget</h1>
</body>
</html>

 

-------------------------------
withParamTarget.html
-------------------------------

<!DOCTYPE html>
<html lang="en">
  <head> 
    <title>{{param1}} &nbsp; {{param2}} </title> 
  </head>
  <body> 
      <h1>withParamTarget</h1>
</body>
</html>

 

-------------------------------
noParamTarget.html
-------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{systemName}} &nbsp; {{version}} </title>
  </head>
  <body> 
         <h1>noParamTarget</h1>
</body>
</html>

 

-------------------------------
withFlashTarget.html
-------------------------------

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{{param}} &nbsp; {{flashParam}} </title> 
  </head>
  <body>
     <h1>withFlashTarget</h1>
</body>
</html>

 

==============================
效果截圖
==============================

轉發后的url還是原始請求url,  http://www.localhost:8080/forwardTest1

 

 

重定向的地址會發生改變, 請求地址  http://localhost:8080/withParamRedirect , 結果地址:

 

form提交驗證的示例:  http://localhost:8080/input 

開始時的GET 請求截圖:

 

form 提交后的截圖: