Spring Boot 零基礎入門 (17) - 返回值改成 JSON 格式

哈囉大家好，我是古古。

在上一篇文章中，我們有介紹了 JSON 格式的寫法，所以之後我們就可以使用 JSON 格式，更簡單直覺的去呈現數據，進而提升前後端溝通的效率了。

那麼接著的這篇文章，我們就會回到 Spring Boot 程式中，來看一下要如何將 MyController 所回傳的值，改成是以 JSON 的格式來返回，讓前端能夠取得到 JSON 格式的數據。

回顧：到目前為止的返回數據 #

在上兩篇文章中，我們有在 MyController 中添加了一個新的 product() 方法，並且為他添加對應的 url 路徑 /product，程式如下：

所以目前當前端去請求 http://localhost:8080/product 時，後端的 Spring Boot 程式就會在 response body 中，返回「第一個是蘋果，第二個是橘子」的數據給前端。

不過在我們了解了 JSON 格式的寫法之後，我們現在就可以將「第一個是蘋果，第二個是橘子」這種人類語言的句子，改成是以下列的 JSON 格式來撰寫：

{
    "productList": ["蘋果", "橘子"]
}

因此在這篇文章中，我們的目標，就是要去修改 MyController 中的 product() 方法，將他的 return 返回值，從「第一個是蘋果，第二個是橘子」改成是返回上面的 JSON 格式的數據，這樣子才能夠成功的返回 JSON 格式的數據給前端。

如何將 Spring Boot 的返回值轉換成 JSON 格式？ #

如果我們想要將 Spring Boot 程式中的某個方法，將他的返回值改成是以 JSON 格式來傳遞的話，那麼就需要兩個步驟：

在該 class 上面加上 @RestController
將該方法的返回值，改成是「Java 中的物件」

只要完成了這兩個步驟，就可以改成用 JSON 格式去返回數據給前端了！

步驟一：在 class 上面加上 @RestController #

在 Spring MVC 中，有一個非常厲害的註解 @RestController，他可以說是集多功能於一身的超強註解！只要在某個 class 上面加上 @RestController 之後，那麼就可以達到以下的效果：

使這個 class 成為一個 Bean
讓該 class 中的 @RequestMapping 能夠生效
能夠將返回值自動轉換成 JSON 格式

因此 @RestController 在使用上可以說是非常的方便，一箭三鵰！

而如果我們回頭看一下之前所寫的程式，其實我們已經有在 MyController 中添加 @RestController 這個註解了：

所以其實到目前為止，我們已經完成了第一個步驟，也就是在 class 上添加 @RestController 了！

步驟二：將該方法的返回值，改成是「Java 物件」 #

而當我們有在 class 上加上 @RestController 之後，那麼下一步，就是要將這個方法的返回值，改成是「Java 物件」。

這裡的運作邏輯是這樣的：首先 Spring Boot 程式會將 Java class 中的變數，一一的去轉換成 JSON 格式中的 key，並且該 key 的 value 值，就是 Java class 中的變數所儲存的值。

這個聽起來可能有點複雜，所以下面我們就透過一個例子，來了解一下他的運作邏輯。

舉例來說，假設我們有一個 Student class，他裡面有兩個變數：一個是 Integer 類型的變數 id、另一個是 String 類型的變數 name，並且在這個 class 中，也有實作這兩個變數各自的 getter() 和 setter() 方法。

public class Student {

    private Integer id;
    private String name;
    
    public Integer getId() {
        return id;
    }
    
    public void setId(Integer id) {
        this.id = id;
    }
    
    public String getName() {
        return name;
    }
    
    public void setName(String name) {
        this.name = name;
    }
}

此時，如果我們改寫一下 MyController 中的 test() 方法，將他的返回值，改成是回傳 Student 類型的話：

@RequestMapping("/test")
public Student test() {
    Student student = new Student();
    student.setId(123);
    student.setName("Judy");
    return student;
}

那麼這個時候，當前端來請求 http://localhost:8080/test 時，Spring Boot 就會執行第 11～14 行的程式，最終去回傳一個 student 物件給前端。

而在 Spring Boot 在回傳 student 物件給前端時，Spring Boot 就會將這個 student 物件，先去轉換成 JSON 格式，最後才回傳給前端，因此前端最終所收到的結果，就會是 JSON 格式的數據了！

所以透過這個邏輯，我們就可以用一樣的方式去改寫 product() 方法，將他的返回值，從 String 類型改為是其他的 Java 物件，這樣子就可以回傳 JSON 格式的數據給前端了！

因此我們可以先去創建一個新的 class，該 class 的名字為 Store，並且其中的程式如下：

public class Store {

    public List<String> productList;
    
    public List<String> getProductList() {
        return productList;
    }

    public void setProductList(List<String> productList) {
        this.productList = productList;
    }
}

接著我們用一樣的邏輯，回頭改寫一下 product() 方法，所以我們先將返回的類型改成是 Store，並且將「蘋果」和「橘子」這兩個值，添加到 store 中的 productList 變數裡面：

@RequestMapping("/product")
public Store product() {
    Store store = new Store();
    List<String> list = new ArrayList<>();
    list.add("蘋果");
    list.add("橘子");
    store.setProductList(list);
    return store;
}

因此後續當前端來請求 http://localhost:8080/product 時，Spring Boot 就會執行第 22～27 行的程式，最終去回傳一個 store 物件給前端。

而在 Spring Boot 在回傳 store 物件給前端時，Spring Boot 就一樣是會將這個 store 物件，先去轉換成 JSON 格式，最後才回傳給前端，因此前端最終所收到的結果，就也會是 JSON 格式的數據了！

所以透過這樣子的寫法，我們就成功的將 Spring Boot 中所實作的程式，改成是以 JSON 格式來返回數據了！

小結：將 Spring Boot 的返回值轉換成 JSON 格式的步驟 #

所以總合上面的介紹，我們總共只需要兩個步驟，就可以「將 Spring Boot 的返回值轉換為 JSON 格式來傳遞」，而這兩個步驟分別是：

在該 class 上面加上 @RestController
將該方法的返回值，改成是「Java 中的物件」

只要完成這兩個步驟，Spring Boot 就會自動在回傳數據給前端之前，將「Java 物件」轉換成「JSON 格式」，因此前端最終所收到的數據，就會是 JSON 的格式了！

因此我們後續就可以透過這個寫法，使用 JSON 格式和前端進行溝通了，這也是實務上非常常見的用法，建議大家一定要熟練掌握才行。

補充：@Controller 和 @RestController 的差別在哪裡？ #

了解了如何在 Spring Boot 中返回 JSON 格式的數據之外，最後我們也可以來補充一下，@Controller 和 @RestController 這兩個很像的註解，他們的差別在哪裡。

雖然 @Controller 和 @RestController 的用途有點像，不過他們之間還是有一個致命性的差別，也就是 @Controller 會將方法的返回值轉換為「前端模板的名字」、@RestController 會將方法的返回值轉換為「JSON 格式的數據」。

因此像是在以前的時代，因為前後端之間的界線很模糊（那時候甚至還沒有專職的前端工程師），所以後端就需要在 Spring Boot 程式中返回前端的模板給使用者，因此當時通常都是在 class 上面加上 @Controller，指定「要返回的前端模板的名字」為何。

不過隨著前後端分離的盛行、以及 JSON 格式的崛起，目前大部分的程式都是以 JSON 格式來傳遞數據，也因為如此，漸漸的我們在 class 上就會改成使用 @RestController，改成使用 JSON 格式來傳遞數據。

因此 @Controller 和 @RestController 可以說是見證了網頁開發的歷史，就是因為前端的崛起，才使得我們要從 @Controller 轉換到 @RestController，因此大家目前在開發上，通常都是會使用 @RestController 來返回 JSON 數據比較多，只有少見的較舊的專案，仍舊會使用 @Controller 來回傳前端的模板。

所以就建議大家，在實作上優先使用 @RestController 去回傳 JSON 格式的數據給前端，只有在使用 JSP 或是 Thymeleaf 這類的前端模板引擎時，才需要改用 @Controller，這個部分是大家在實作上要多加留意的細節。

總結 #

這篇文章我們有去活用了前面所學到的內容，將 Spring Boot 所返回的回傳值，改成是以 JSON 格式來傳遞，並且也補充了 @Controller 和 @RestController 的差別。

那麼到這邊為止，我們就大致了解了 Spring MVC 的基本用法了，像是我們已經知道：

如何使用 @RequestMapping，去進行 url 的路徑對應
如何使用 @RestController，去返回 JSON 格式的數據給前端
JSON 格式的寫法

所以到目前為止，我們已經可以成功的接住前端所傳過來的請求，並且也能夠成功的回傳 JSON 數據給前端了，讚！！

那麼在大家對 Spring MVC 有一個初步的認識之後，接下來的文章，我們就會繼續來探索 Http 協議中的其他部分，繼續介紹 Spring MVC 的相關用法。

因此下一篇文章，我們就會接著來介紹 Http 協議中的「Http method」，了解什麼是 GET 和 POST，並且要在什麼時機點去使用他們，那我們就下一篇文章見啦！

補充：本文是擷取自我開設的線上課程 Java 工程師必備！Spring Boot 零基礎入門的內容，如果你想了解更多的 Spring Boot 的用法，歡迎參考課程簡介 （輸入折扣碼「HH202504KU」即可享 85 折優惠）。

Day 17 - 返回值改成 JSON 格式 - @RestController