Spring Boot視圖技術

前言

經過前2期文章（見上面鏈接）的學習，我們學會了如何建立Spring Boot項目、如何在Spring Boot框架底下開發API、如何開發具備數據庫交互的API等。但聯系到實際情況，我們會發現這樣的項目遠遠不夠，至少：

缺少用戶交互界面！

咱們今天就在之前的基礎上，簡單開發一個用戶交互界面！其中用到的主要技術是：視圖技術！

什么是視圖技術

我們這里指的是Spring Boot MVC中的后端視圖技術，也即MVC（Model View Controller）中的V（View）。視圖技術又分：
1. 使用模板引擎，后端渲染模板，把渲染好的頁面，發送給客戶端展示；
2. JSON序列化技術Jackson。

我們今天學習的是第一種，即模板引擎。Spring Boot 在視圖引擎上就已經集成自動配置的模版引擎有：

  • FreeMarker；
  • Thymeleaf；
  • Mustache；
  • ...

(JSP技術Spring Boot官方是不推薦的，但也是可以集成的，我們此處就不做研究了...)
其中FreeMarker和Thymeleaf是最常用的2種模版引擎，我們今天就來學習下這2種模板引擎如何在Spring Boot框架下使用！
在介紹之前，我們先在項目目錄src/main/resources底下建文件夾templates：

templates文件夾

1）FreeMarker

1. 添加項目依賴；
2. 修改配置文件；
3. 創建模板文件；
4. 編寫Controller；
5. 編寫模板文件；
6. 啟動項目，瀏覽器訪問頁面；

1. 添加項目依賴；
在pom.xml文件內的dependencies節點下添加以下依賴：

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

2. 修改配置文件；
在src/main/resources/application.properties文件內添加freemarker的配置：

#configuration for Freemarker
spring.freemarker.template-loader-path=classpath:/templates/
spring.freemarker.suffix=.ftl
spring.freemarker.charset=UTF-8

3. 創建模板文件；
在src/main/resources/templates下創建.ftl文件，如FreeMarkerDemo.ftl：

FreeMarkerDemo

4. 編寫Controller；
在LeadController內添加2個方法，用來演示FreeMarker視圖引擎：

    @GetMapping("/{leadId}/FreeMarkerDemo1.html")
    public ModelAndView showLeadByFreeMarker(@PathVariable("leadId") Integer leadId) {
        Lead lead = leadService.getLead(leadId);
        ModelAndView view = new ModelAndView();
        view.addObject("lead", lead);
        view.setViewName("FreeMarkerDemo");
        return view;
    }

    @GetMapping("/{leadId}/FreeMarkerDemo2.html")
    public ModelAndView showLeadByFreeMarker(@PathVariable("leadId") Integer leadId, ModelAndView view) {
        Lead lead = leadService.getLead(leadId);
        view.addObject("lead", lead);
        view.setViewName("FreeMarkerDemo");
        return view;
    }

//1. view.setViewName("FreeMarkerDemo");代表指向的是resources/templates/FreeMarkerDemo.ftl模板；
//2.上述2個寫法都能達到一樣的目的，只是寫法不太一樣而已，一個view在方法體內實例化，一個是方法入參；

5. 編寫模板文件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>FreeMarkerDemo</title>
</head>
<body>
    <input type="text" value="${lead.leadId}"/>
    <input type="text" value="${lead.email}"/>
</body>
</html>

6. 啟動項目，瀏覽器訪問頁面；

2）Thymeleaf

1. 添加項目依賴；
2. 修改配置文件；
3. 創建模板文件；
4. 編寫Controller；
5. 編寫模板文件；
6. 啟動項目，瀏覽器訪問頁面；

1. 添加項目依賴；
在pom.xml文件內的dependencies節點下添加以下依賴：

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

2. 修改配置文件；
在src/main/resources/application.properties文件內添加Thymeleaf的配置：

#configuration for Thymeleaf
spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML
spring.thymeleaf.encoding=UTF-8

3. 創建模板文件；
在src/main/resources/templates下創建HTML文件，如ThymeleafDemo.html：

ThymeleafDemo

4. 編寫Controller；
在LeadController內添加2個方法，用來演示Thymeleaf視圖引擎：

    @GetMapping("/{leadId}/ThymeleafDemo1.html")
    public ModelAndView showLeadByThymeleaf(@PathVariable("leadId") Integer leadId) {
        Lead lead = leadService.getLead(leadId);
        ModelAndView view = new ModelAndView();
        view.addObject("lead", lead);
        view.setViewName("ThymeleafDemo");
        return view;
    }

    @GetMapping("/{leadId}/ThymeleafDemo2.html")
    public ModelAndView showLeadByThymeleaf(@PathVariable("leadId") Integer leadId, ModelAndView view) {
        Lead lead = leadService.getLead(leadId);
        view.addObject("lead", lead);
        view.setViewName("ThymeleafDemo");
        return view;
    }

//1. view.setViewName("ThymeleafDemo");代表指向的是resources/templates/ThymeleafDemo.html模板；
//2.上述2個寫法都能達到一樣的目的，只是寫法不太一樣而已，一個view在方法體內實例化，一個是方法入參；

5. 編寫模板文件；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ThymeleafDemo</title>
</head>
<body>
    <input type="text" th:value="${lead.leadId}"/>
    <input type="text" th:value="${lead.email}"/>
</body>
</html>
#1.注意關鍵代碼：xmlns:th="http://www.thymeleaf.org" ；或xmlns:th="http://www.w3.org/1999/xhtml"；
#2.要把html節點屬性通過渲染賦值的話，需要在屬性前使用標識：“th:”；
#3.渲染的數據來源是controller中設置的：view.addObject("lead", lead);
#4.可以取設置的object內的數據，如：${lead.leadId}，指的是lead對象內的leadId這個數據；

6. 啟動項目，瀏覽器訪問頁面;

如果數據源是個數組類型的數據，如數據源leads：

[
    {
        "leadId": 123,
        "email": "123@XXX.com"
    },
    {
        "leadId": 321,
        "email": "321@XXX.com"
    }
]

那么可以這么遍歷進行展示：

#FreeMarker
<#list leads as lead>
    <tr>
        <td>${lead.leadId</td>
        <td>${lead.email}</td>
    </tr>
</#list>

#Thymeleaf
<tr th:each="lead : ${leads}">
    <td th:text="${lead.leadId}"></td>
    <td th:text="${lead.email}"></td>
</tr>

我們還可以在模板文件內設置html的樣式，包括引用css文件，這樣頁面就能滿足美觀性方面的需求了，關于這塊可自行腦補。

模板引擎語法、詳細介紹

模板引擎應用場景

現在都在提倡前后端分離，而模板引擎其實還是有一定的使用場景的，我目前能想到的應用場景有（歡迎指正、添加）：
1. 頁面為簡單的表單式頁面；
2. 無前后端分離需求，且希望快速建立簡單交互界面的；
3. 可能出于某種安全考慮，如不希望客戶端知道API返回的數據結構時，采用模板引擎策略在服務端渲染頁面；
4. 由于某些特殊原因，如需兼容多端等，需要在服務端渲染頁面的；
...

碼字不容易，點贊需積極

謝謝?。?！

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。