### 前言

本來準備繼續分析spring mvc的核心元件HandlerAdapter的原理，這個元件負責將請求體request交由最終的Handler處理，也就是由業務層編寫的介面（Controller中的方法）處理，然後將返回的結果傳給展示層解析渲染。HandlerAdapter可以說是和業務程式碼的直接互動層。但是寫到一半無法繼續了，因為目前spring mvc存在兩種模式：一種是系統內統合後端和前端的功能，spring mvc不僅包括後端的程式碼邏輯，同時實現最後前端頁面的渲染和返回；另一種是spring mvc專案只作為後端，返回json或者xml資料，由瀏覽器請求資料，展示頁面。對於這兩種方式在生產環境中應用的比例，目前看來似乎是後者更加廣泛。spring mvc之所以稱為mvc(model, view 和controller)，是因為最初的設計思想是秉承綜合處理後端（model、controller）和前端（view），這意味著目前的程式碼中會存在很多第一種情況的邏輯。如果想要對程式碼有清晰的理解，還是需要對這兩種模式有基礎的認識。為了方便學習，兼顧不太瞭解第一種模式的讀者，故加增此篇作為說明。

### spring mvc的設計思想

在經典的gof《設計模式》的引言部分，提出了MVC的設計思想，其中M（model）代表資料模型，V（view）代表展示檢視，C（Controller）代表對使用者輸入的響應方式。書中有一個很典型的例子來理解這一模式，如圖所示：
![tomcat + spring mvc原理外傳：spring mvc與前端的糾葛-QQ20200130-1.png](http://img-hxy021.didistatic.com/static/km/do1_vXbX6MvtAseqMvusMIJm)
模型（model）中儲存了檢視中所需要的資料，而檢視（view）可以使用這些資料實現最終展示，模型和檢視的分離，可以支援同一種資料的多種展示方式，比如圖中的表格、柱狀圖和餅狀圖等。而Controller的作用表現在互動的過程中，Controller負責接收傳入的操作訊息，生成資料model，並將model傳遞給view做展示。
  spring mvc的設計是基於MVC的理論。比較明顯的是在編寫業務程式碼時，會用到@Controller或者@RestController註解，由此可見業務程式碼的各種介面綜合起來，實際上實現的就是Controller模組。使用@Controller註解的介面，需要對M（model）和V（view）有感知，傳入引數中包括model，返回預設為view名。但是目前多使用@RestController，返回為json資料，隱藏了model和view相關的部分，spirng mvc實際工作模式為spring mc。

### spring mvc的前後端一體化模式

spring mvc前後端一體的模式比較流行的模板語言包括JSP、FreeMaker和Thymeleaf等。其中如果看了spring boot自動化配置檔案——spring-boot-autoconfigure包下的spring.factories，會發現spring boot引入瞭如下配置：

```
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafAutoConfiguration
......
org.springframework.boot.autoconfigure.thymeleaf.ThymeleafTemplateAvailabilityProvider
```

這說明spring boot本身預設支援Thymeleaf。

#### spring boot + Thymeleaf的demo

![tomcat + spring mvc原理外傳：spring mvc與前端的糾葛-tree.png](http://img-hxy021.didistatic.com/static/km/do1_9PMy9imHrBBTNm6E2GTf)

可以使用spring intializr生成專案spring boot（spring boot基於spring mvc），當然也可以手動生成。專案的整個目錄如上圖所示。其中main中存放的是java程式碼，resource中存放專案配置和靜態資源。
  首先，專案中需要引入Thymeleaf依賴。因為使用簡便的嵌入式h2資料庫，也需要引入jdbc和h2資料庫的依賴。由於我想偷懶，使用程式碼builder工具，所以也引入了lombok依賴。整個專案的pom.xml內容如下：

```
//pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemalocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelversion>4.0.0</modelversion>
    <parent>
        <groupid>org.springframework.boot</groupid>
        <artifactid>spring-boot-starter-parent</artifactid>
        <version>2.1.12.RELEASE</version>
        <relativepath></relativepath>
    </parent>
    <groupid>com.example</groupid>
    <artifactid>thymeleaf-demo</artifactid>
    <version>0.0.1-SNAPSHOT</version>
    <name>thymeleaf-demo</name>
    <description>Demo project for Spring Boot</description>
    <properties>
        <java.version>1.8</java.version>
    </properties>

<dependencies>
        
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-thymeleaf</artifactid>
        </dependency>
        
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-web</artifactid>
        </dependency>
        
        <dependency>
            <groupid>com.h2database</groupid>
            <artifactid>h2</artifactid>
            <scope>runtime</scope>
        </dependency>
        
        <dependency>
            <groupid>org.springframework.boot</groupid>
            <artifactid>spring-boot-starter-jdbc</artifactid>
        </dependency>
        
        <dependency>
            <groupid>org.projectlombok</groupid>
            <artifactid>lombok</artifactid>
            <version>1.18.10</version>
        </dependency>
    </dependencies>
    <build>
        <plugins>
            <plugin>
                <groupid>org.springframework.boot</groupid>
                <artifactid>spring-boot-maven-plugin</artifactid>
            </plugin>
        </plugins>
    </build>
</project>
```

schema.sql儲存的是資料庫的建表語句，spring boot在載入過程中會自動讀取這個檔案，並執行建表語句：

```
//schema.sql
create table friends (
    id identity,
    name varchar(70) not null,
    phone varchar(13) not null,
    qq varchar(20),
    email varchar(256),
    wchat varchar(256)
);
```

這樣資料庫的friends表就會在記憶體中建起來。這個表主要是儲存姓名、電話、email、qq號、wchat欄位。

```
//Friend.java
package com.example.thymeleafdemo;
import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class Friend{
    private Long id;
    private String name;
    private String phone;
    private String email;
    private String QQ;
    private String wchat;
}
```

對應的，程式碼中用Friend類來儲存表中讀取的每一條資料。Friend.java檔案比較簡單，唯一注意點是我使用了@Data、@Builder等註解節省程式碼，這也是為什麼引入lombok依賴的原因。

```
//RecordRepository.java
package com.example.thymeleafdemo;
import java.util.List;
import java.sql.ResultSet;
import java.sql.SQLException;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.core.RowMapper;
import org.springframework.stereotype.Repository;

@Repository
public class RecordRepository {
    @Autowired
    private JdbcTemplate jdbc;

public List<friend> findAll() {
        return jdbc.query(
            "select id, name, phone, email, qq, wchat " +
            "from friends order by name",
             new RowMapper<friend>() {
                public Friend mapRow(ResultSet rs, int rowNum) throws SQLException {
                    return Friend.builder()
                            .id(rs.getLong(1))
                            .name(rs.getString(2))
                            .phone(rs.getString(3))
                            .email(rs.getString(4))
                            .QQ(rs.getString(5))
                            .wchat(rs.getString(6))
                            .build();
                }
             }
        );
    }

public void save(Friend friend){
       jdbc.update("insert into friends" +
                  "(name, phone, email, qq, wchat)" +
                   "values (?, ?, ?, ?,?)",
                    friend.getName(), friend.getPhone(),
                    friend.getEmail(),friend.getQQ(),friend.getWchat());
    }
}
```

RecordRepository.java使用jdbc查詢和儲存資料，findAll讀取表中的所有記錄，sava方法用來儲存一條記錄。
  style.css設定了簡單的樣式，會用在home.html中。

```
body {
    background-color: #eeeeee;
    font-family: sans-serif;
}

label {
    display: inline-block;
    width: 120px;
    text-align: right;
}
```

最後，重點是RecordController.java檔案和home.html檔案。RecordController是spring mvc中的C，home.html代表了其中的V，model是被RecordController用來向home.html中傳遞資料的資料結構。
  為了方便理解這兩個檔案，先展示專案執行後的效果和可以做的操作。
![tomcat + spring mvc原理外傳：spring mvc與前端的糾葛-home.png](http://img-hxy021.didistatic.com/static/km/do1_t9A5HqCktMqHQiMmNCbv)
這個是專案執行後，在瀏覽器輸入"http://127.0.0.1:8080/show" ，就可以訪問home.html展示頁面。在頁面中輸入如圖所示的內容，然後點選提交，會在頁面下方展示表中所有錄入的資訊。這中間需要訪問兩個後端介面，一個是提交表單的POST介面，另一個是展示資訊的GET介面。
  先看RecordController.java檔案中的介面程式碼。

```
package com.example.thymeleafdemo;
import java.util.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller
public class RecordController {
   @Autowired
   private RecordRepository recordRepo;

@GetMapping("/show")
   public String home(Map<string object=""> model){
       List<friend> Friends = recordRepo.findAll();
       model.put("friends", Friends);
       return "home";
   }
   @PostMapping("/show")
   public String submit(Friend friend) {
       recordRepo.save(friend);
       return "redirect:/show";
   }
}
```

RecordController類由@Controller註解，其中注入了RecordRepository的bean，分別用來在home方法和submit方法中查詢friends表中所有資料和存入單條記錄。
  home方法對應處理GET型別“/show”url路徑的介面訪問，入參是map型別的model。model引數並不是由介面傳入的，上文中在瀏覽器中輸入的url“http://127.0.0.1:8080/show”並沒有帶有如何引數。model是由spring mvc框架傳入，在方法返回之後，model會自動傳遞給view進行檢視的渲染，這一步會在home.html中有所體現。home方法在查詢表中資料之後，所有”friend"資料會存入到Friend類的List中，接著會把List資料輸入model，並將索引命名為“friends”。return返回的String為檢視名，即“home.html”的名字（view name）。這個view name和model會在後續框架中的檢視解析器中使用。
  sumbit方法對應處理表單資料的POST介面訪問。這裡的入參是由POST傳入的，對應的引數名即Friend類中的引數名。在表中存入資料之後，return返回依然應該為檢視名，不過這裡使用了重定向，使用相對url路徑重新訪問“/show”介面，呼叫home方法，展示home.html的檢視。
  接下來看home.html是如何展示和傳遞資料的。

```

<title>Thymeleaf Test</title>
        <link rel="stylesheet" th:href="@{/style.css}">
    
    
        <h2>Thymeleaf Test</h2>

<form method="POST">
             <label for="name">姓名:</label>
               <input type="text" name="name"><br>
             <label for="phone">電話:</label>
               <input type="text" name="phone"><br>
             <label for="email">Email:</label>
               <input type="text" name="email"><br>
            <label for="QQ">QQ:</label>
               <input type="text" name="QQ"><br>
            <label for="wchat">微信:</label>
                <input type="text" name="wchat"><br>
             <input type="submit"> 
        </form>

<ul th:each="friend : ${friends}">
            <li>
                name phone email QQ wchat </li>
        </ul>

```

在html頭中，就宣告瞭會使用thymeleaf模板語言。表單資料使用POST方法傳送，input標籤中的name對應Friend類中的引數名，這樣才能在submit方法中接收輸入引數。下面是所有friend資料的展示，資料來源是”friends”，對應model中“friends”索引，即存入的List資料結構，這裡遍歷每一個Friend，將對應的name、phone等引數展示出來。
  以上即為spring mvc前後端一體的模式，主要特點為spring mvc既需要負責提供後端資料，也需要進行前端的檢視渲染，最終會把整個頁面的資料返回給瀏覽器。這種模式前後端的資料互動比較簡單便捷，缺點是過於笨重。

### spring mvc專職後端模式

另一種模式是spring mvc只負責後端資料處理，所有的檢視相關都交給獨立部署的前端完成。這種模式比較典型的是RESTful Web服務，主要為JavaScript型別框架，比如Backbone.js、AngularJS、React或者Vue等，提供資料。

#### spring mvc的RESTful Web服務

不同於傳統spring mvc需要依靠view，RESTful Web服務控制器只返回物件，物件資料作為JSON / XML直接寫入HTTP響應。本質實現也是在@Controller的基礎上，新增@ResponseBody註解，這也是@RestController註解的淺層實現原理。由於這裡只介紹模式，底層原理會在HandlerAdapter篇中詳細分析，所以不再贅述。
  實現RESTful Web服務就非常簡單，在上文的專案中直接修改RecordController的@Controller註解為@RestController註解，然後再次執行，訪問"http://127.0.0.1:8080/show", 網頁的返回結果變成了“home”。這時所有的前端檔案和配置都已經不再發揮作用，因為return返回結果“home”字串，不再是檢視名，而是直接對應HTTP的響應資料，被寫入到了ResponseBody中。
  當然也可以返回更復雜的資料結構，比如修改程式碼如下：

```
package com.example.thymeleafdemo;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
public class RecordController {
   @Autowired
   private RecordRepository recordRepo;

@GetMapping("/show")
   public Friend home(){

return Friend.builder()
               .id(0L)
               .name("帆雲羽")
               .email("sunxin3399@163.com")
               .phone("123456789")
               .QQ("2038529489")
               .wchat("xsun1314")
               .build();
   }
}
```

![tomcat + spring mvc原理外傳：spring mvc與前端的糾葛-rest.png](http://img-hxy021.didistatic.com/static/km/do1_m5Vkp3pN2Kw6DfpHRbny)

如果返回Friend類例項，實際會生成一個json字串。
  目前比較常用的JavaScript框架，比如React或者Vue可以獨立部署，瀏覽器獲取頁面後，可透過url訪問spring mvc介面，獲取json資料後解析。目前這種模式是在生產中比較常見。
  
  ###作者：孫新【滴滴出行軟體開發工程師】
- [	現在註冊滴滴雲，得10000元立減紅包](https://app.didiyun.com/#/auth/signup?channel=14816)
- [8月特惠，1C2G1M雲伺服器 9.9元/月限時搶](https://www.didiyun.com/?channel=14816)
- [滴滴雲使者專屬特惠，包年雲伺服器低至68元/年](https://www.didiyun.com/envoy/e-index.html?channel=14816)
- [輸入大師碼【7886】，GPU全線產品9折優惠](https://www.didiyun.com/production/gpu.html?channel=14816)</friend></string></friend></friend>

tomcat + spring mvc原理外傳：spring mvc與前端的糾葛

相關文章