Spring Boot入門（6）前端接受後臺傳參

阿新 • • 發佈：2019-01-16

基礎知識

利用Spring Boot來製作Web應用，就必定會涉及到前端與後臺之間互相傳遞引數。在Spring Boot的MVC模型中，如果採用Thymeleaf來渲染檢視，則前端頁面怎麼才能獲得後臺執行傳遞的引數呢？
我們介紹兩種在Thymeleaf中前端接受後臺傳參的方法：

Thymeleaf自帶的方法
Thymeleaf提供的JavaScript接受後臺引數方法

在Thymeleaf中，使用th:text=”${var}”或者th:text=”#{var}”可接受後臺引數。如果使用Thymeleaf提供的JavaScript接受後臺引數方法，則需在script標籤中加入th:inline=”javascript”，同時使用變數時應為 [[$

var]]。採用JavaScript可以接受的後臺引數型別有：

Strings
Numbers
Booleans
Arrays
Collections
Maps
Beans (Java物件實現getter和setter方法)

一個例子

以上為理論知識介紹部分，讀者看了可能不一定會具體使用。因此，一個簡單的例子是必須的。在這個例子中，後臺使用Map方法向前端傳遞String和Bean。專案的完整結構如下圖：

我們只需建立紅線框內的三個檔案。首先是Bean檔案，即User類, 程式碼如下：

package com.hello.paramDemo.Controller;

public 
 class User {

    private int age;
    private String name;

    User(int age, String name){
        this.age = age;
        this.name = name;
    }

    public int getAge() {
        return age;
    }

    public void setAge(int age) {
        this.age = age;
    }

    public String getName() {
        return 
 name;
    }

    public void setName(String name) {
        this.name = name;
    }

}

接著是Controller檔案，EgController.java的程式碼如下：

package com.hello.paramDemo.Controller;

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

import java.util.Map;

@Controller
public class EgController {

    @RequestMapping(value="/params", method = RequestMethod.GET)
    /* 後臺用Map方法向前端傳遞引數
     * 傳遞的引數為message1: String, message2: String, user: User物件
     */
    public String passParam(Map <String, Object> map){

        map.put("message1", "Hello, Spring Boot!");

        map.put("message2", "Hello, Spring Boot!");

        User user = new User(18, "Bruce");

        map.put("user", user);

        return "result";

    }
}

最後是檢視result.html，其程式碼如下：

<!DOCTYPE HTML>

<html xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Passing Paraments</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script th:inline="javascript">
        function ShowMessage(){
            document.getElementById("message2").innerHTML = "Thymeleaf String by JS: " + [[${message2}]];
            var user = /*[[${user}]]*/ null ;
            document.getElementById("user").innerHTML = "Thymeleaf Beans by JS: name ->"+ user.name +", age -> "+ user.age.toString();
        }
    </script>
</head>

<body>
        <p th:text="${message1}">test</p>
        <p id="message2"></p>
        <p th:text="'name: ' + ${user.name} +', age: ' + ${user.age}"></p>
        <p id="user"></p>
        <button onclick="ShowMessage()">Show Message From Java</button>
</body>

</html>

在上述Thymtleaf渲染的HTML頁面中，就用到了之前將的兩種辦法來接受後臺傳遞過來的引數。在JavaScript部分，user變數被賦予後臺傳遞的user類的值，就是JavaScript中的物件。

程式執行

這是用Thymeleaf自帶的方法接受後臺引數，還未顯示JavaScript接受的引數。如想顯示JavaScript接受的引數，可以點選“Show Message From Java”按鈕，頁面如下：
JavaScript接受的後臺引數顯示

本次分享到此結束，如有問題，可參考Thymeleaf的官方說明文件網址： https://www.thymeleaf.org/doc/tutorials/3.0/thymeleafspring.html . 當然，也歡迎大家交流~~

Spring Boot入門（6）前端接受後臺傳參

基礎知識

一個例子

程式執行

Spring Boot入門（6）前端接受後臺傳參

Spring Boot 入門（四）微服務之 Config Server 統一配置中心

Spring Boot入門（四）——使用模板FreeMaker

Spring boot入門（1）

Spring Boot入門（三）起步依賴

Spring boot入門（三）：SpringBoot整合結合AdminLTE(Freemarker)，利用generate自動生成程式碼，利用DataTable和PageHelper進行分頁顯示

Spring Boot 入門（三）：自動化配置實現

Spring Boot入門（2）使用MySQL資料庫

Spring Boot入門（11）實現檔案下載功能

spring boot 入門（八）filter、servlet、listener

spring-boot入門（七）atomikos+druid+多資料來源下的分散式事務配置

spring-boot入門（六）多資料來源

spring boot 入門（一）

Spring Boot入門（12）實現頁面訪問量統計功能

spring boot入門（七） springboot的攔截器Interceptor。最完整、簡單易懂、詳細的spring boot教程。

spring boot入門（四） springboot事務管理。最完整、簡單易懂、詳細的spring boot教程。

spring-boot入門（四）與資料庫互動

【Spring Boot】（6）、Profile

Spring Boot 入門（一）——建一個最簡單的springboot專案

Spring Boot入門（一）返回JSON資料及資料封裝

Spring Boot入門（6）前端接受後臺傳參

基礎知識

一個例子

程式執行

相關推薦