Spring Boot實戰：模板引擎

時間 2019-11-18

原文原文鏈接

　　雖然如今不少開發，都採用了先後端徹底分離的模式，即後端只提供數據接口，前端經過AJAX請求獲取數據，徹底不須要用的模板引擎。這種方式的優勢在於先後端徹底分離，而且隨着近幾年前端工程化工具和MVC框架的完善，使得這種模式的維護成本相對來講也更加低一點。可是這種模式不利於SEO，而且在性能上也會稍微差一點，還有一些場景，使用模板引擎會更方便，好比說郵件模板。這篇文章主要討論Spring boot與模板引擎Thymeleaf、Freemaker以及JSP的集成。html

　　1、集成Thymeleaf前端

　　第一步：引入jar包（thymeleaf對應的starter）：java

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

　　第二步：配置thymeleaf：web

spring:
  thymeleaf:
    prefix: classpath:/templates/
    check-template-location: true
    cache: false
    suffix: .html
    encoding: UTF-8
    content-type: text/html
    mode: HTML5

　　prefix：指定模板所在的目錄spring

　　check-tempate-location: 檢查模板路徑是否存在apache

　　cache: 是否緩存，開發模式下設置爲false，避免改了模板還要重啓服務器，線上設置爲true，能夠提升性能。後端

　　encoding&content-type：這個你們應該比較熟悉了，與Servlet中設置輸出對應屬性效果一致。　前端工程化

　　mode：這個仍是參考官網的說明吧，而且這個是2.X與3.0不一樣，本文自動引入的包是2.15。api

　　第三步編寫thymeleaf模板文件：瀏覽器

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html;charset=UTF-8"/>
</head>
<body>
<h6>Thymeleaf 模板引擎</h6>
<table border="1" bgcolor="#f0ffff">
    <thead>
    <tr>
        <th>序號</th>
        <th>標題</th>
        <th>摘要</th>
        <th>建立時間</th>
    </tr>
    </thead>
    <tbody th:each="article : ${list}">
    <tr>
        <td th:text="${article.id}"></td>
        <td th:text="${article.title}"></td>
        <td th:text="${article.summary}"></td>
        <td th:text="${article.createTime}"></td>
    </tr>
    </tbody>
</table>
</body>
</html>

　　你們能夠看到，thymeleaf仍是比較簡單的，而且最大的特色就是的標籤是做爲HTML元素的屬性存在的，也就是說，該頁面是能夠直接經過瀏覽器來預覽的，只是沒有數據而已，這個很方便你們進行調試。

　　第四步配置Controller：

@Controller
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private ArticleService articleService;

    @RequestMapping("/articleList.html")
    public String getArticleList(Model model, String title, @RequestParam(defaultValue = "10") Integer pageSize,
                                 @RequestParam(defaultValue = "1") Integer pageNum) {
        int offset = (pageNum - 1) * pageSize;
        List<Article> list = articleService.getArticles(title, 1L, offset, pageSize);
        model.addAttribute("list", list);
        return "article/articleList";
    }
}

　　注意，這裏用的註解是@Controller，而不是@RestController，由於@RestController會自動將返回結果轉爲字符串。

　　第五步查看結果

2、Spring boot與Freemarker的集成

　　一、引入jar包（Freemarker對應的starter）

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

　　二、配置freemarker：

spring:
  freemarker:
    template-loader-path: classpath:/templates/
    suffix: .ftl
    content-type: text/html
    charset: UTF-8
    settings:
      number_format: '0.##'

　　除了settings外，其餘的配置選項和thymeleaf相似。settings會對freemarker的某些行爲產生影響，如日期格式化，數字格式化等，感興趣的同窗能夠參考官網提供的說明：https://freemarker.apache.org/docs/api/freemarker/template/Configuration.html#setSetting-java.lang.String-java.lang.String-

　　三、編寫freemarker模板文件：

<html>
    <title>文章列表</title>
<body>
<h6>Freemarker 模板引擎</h6>
    <table border="1">
        <thead>
            <tr>
                <th>序號</th>
                <th>標題</th>
                <th>摘要</th>
                <th>建立時間</th>
            </tr>
        </thead>
        <#list list as article>
            <tr>
                <td>${article.id}</td>
                <td>${article.title}</td>
                <td>${article.summary}</td>
                <td>${article.createTime?string('yyyy-MM-dd hh:mm:ss')}</td>
            </tr>
        </#list>
    </table>

</body>
</html>

　　四、編寫Controller：

@Controller
@RequestMapping("/article")
public class ArticleController {

    @Autowired
    private ArticleService articleService;

    @RequestMapping("/list.html")
    public String getArticles(Model model, String title, @RequestParam(defaultValue = "10") Integer pageSize, Integer pageNum) {
        if (pageSize == null) {
            pageSize = 10;
        }
        if (pageNum == null) {
            pageNum = 1;
        }
        int offset = (pageNum - 1) * pageSize;
        List<Article> list = articleService.getArticles(title, 1L, offset, pageSize);
        model.addAttribute("list", list);
        return "article/list";
    }
}

　　五、訪問頁面：

3、Sring boot與JSP集成：

　　在正式的項目開發中，如今已經極少用jsp模板了，因此Spring boot對jsp的支持也不是很好，所以配置起來比thymeleaf和Freemaker相對來講就更復雜一點。　　

第一步引入jar包：

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>
<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
</dependency>

　　第一個jstl的依賴用於支持el表達式，第二個依賴用於支持jsp。注意，若是是在外部的tomcat中運行，須要將scope設置爲provide，防止jar包衝突。

第二步手動建立webapp目錄：

　　須要手動在main目錄下建立一個webapp的目錄，結構以下：

第三步 jsp路勁配置：

　　在application.yml中添加以下配置：

spring:
  mvc:
    view:
      prefix: /WEB-INF/jsp/
      suffix: .jsp

　　瞭解Spring mvc的應該很熟悉上面的配置。

第四步編寫jsp頁面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <table border="1">
        <c:forEach var="article" items="${list}">
            <tr>
                <td>${article.id}</td>
                <td>${article.title}</td>
                <td>${article.summary}</td>
                <td>${article.createTime}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

第五步編寫Controller：

 @RequestMapping("/listJsp")
    public String getArticleListJsp(Model model, String title, @RequestParam(defaultValue = "10") Integer pageSize, Integer pageNum) {
        if (pageSize == null) {
            pageSize = 10;
        }
        if (pageNum == null) {
            pageNum = 1;
        }
        int offset = (pageNum - 1) * pageSize;
        List<Article> list = articleService.getArticles(title, 1L, offset, pageSize);
        model.addAttribute("list", list);
        return "articles";
    }

第六步訪問結果頁面：

4、總結

　　整體來說，Spring boot對thymeleaf和Freemaker支持比較友好，配置相對也簡單一點，在實際的開發中，大多也以這兩種模板引擎爲主，不多有用jsp的，jsp如今可能更可能是在實驗或者學習階段使用。jsp配置比較麻煩一點的事情是不像前二者，網上的說法基本一致，可是對Jsp的配置有不少種說法，好比說是否是須要將jar包改爲war包？jsp的依賴是否須要設置爲provide等等，這個主要依賴於你是否最後要將程序部署到外部的tomcat仍是直接運行jar？由於本文都是直接在idea下直接運行Application類，因此這些操做就不須要了。

個人博客即將搬運同步至騰訊雲+社區，邀請你們一同入駐：https://cloud.tencent.com/developer/support-plan