快捷導(dǎo)航

SpringBoot中web模板渲染的實(shí)現(xiàn)

更新時(shí)間：2022年02月08日 15:38:14 作者：起床oO

本文主要介紹了SpringBoot中web模板渲染的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

模板

開發(fā)Web站點(diǎn)的本質(zhì)，其實(shí)就是根據(jù)瀏覽器發(fā)起的請(qǐng)求（輸入），生成HTML代碼返回給瀏覽器（輸出）。在之前的學(xué)習(xí)中，我們已經(jīng)通過文件的形式存儲(chǔ)起來而不是直接在Java代碼中生成HTML代碼。另一方面，博客站點(diǎn)是動(dòng)態(tài)的，即不同的請(qǐng)求返回的內(nèi)容可能不同。但是對(duì)于同一類請(qǐng)求，例如訪問id分別為1和2的兩篇文章，對(duì)應(yīng)的URL分別為/blogs/1和/blogs/2，他們返回的HTML代碼片段的結(jié)構(gòu)幾乎是一樣的：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<div class="col-sm-8">
  <div class="page-header">
    <h2 th:text="${title}">Cum sociis（博客標(biāo)題）</h2>
    <p class="blog-post-meta"><span th:text="${createdTime}">2015年2月3日</span> 標(biāo)簽：<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Web開發(fā)</a></p>
  </div>

  <div class="blog-post-content" th:text="${content}">
    ...
    （這里是博客內(nèi)容）
  </div>
</div>
</html>

th:text="${title}"就是告訴模板引擎，用title變量作為<h2>標(biāo)簽的內(nèi)容(createdTime，content也是一樣)。

注意為了顯示博客創(chuàng)建時(shí)間，我們將時(shí)間放入了一個(gè)<span>標(biāo)簽中，用于和其他文字區(qū)分開。

Model

為了讓模板引擎知道這些變量的值，我們需要再@Controller做一些工作：

@RequestMapping("/index/{id}")
    public String getIndex(@PathVariable("id") int id ,Model model) {
//        return "index";
        //這里模擬一些數(shù)據(jù)
        model.addAttribute("title","This is a blog with id = " + id);
        model.addAttribute("CreatedTime","2017-11-13");
        model.addAttribute("content","This is content");
        return "index";
    }

在上面的代碼中，index()方法增加了一個(gè)Model類型的參數(shù)。通過Spring MVC框架提供的Model，可以調(diào)用其addAttribute方法，這樣Thymeleaf可以訪問Model中的變量從而進(jìn)行模板渲染。上述例子中可以看到，title變量的值是根據(jù)URL中的@PathVariable來確定的，雖然簡(jiǎn)單，但是這已經(jīng)是一個(gè)動(dòng)態(tài)頁面了。

在Servlet編程中，如果希望在頁面中動(dòng)態(tài)渲染信息，一般需要往HTTPRequest中添加屬性，然后再JSP中獲取。其實(shí)Model的屬性實(shí)際上也是放在HttpRequest的屬性中，但是Spring MVC提供了更高層的抽象，幫你屏蔽了HttpRequest，你看到的只有直接以MVC中M（即Model）

如果你依然希望使用HttpRequest，HttpResponse和HttpSession等原生的Servlet API對(duì)象，往Controller方法中增加對(duì)應(yīng)類型的參數(shù)即可，你在方法中就能直接使用了，Spring MVC會(huì)傳遞給你正確的對(duì)象。

運(yùn)行結(jié)果：

Model中添加對(duì)象

在上面的例子中，我們已經(jīng)將單篇文章的頁面動(dòng)態(tài)化，但是這個(gè)動(dòng)態(tài)化只是一個(gè)例子，當(dāng)我們真正擁有數(shù)百篇博文時(shí)，并且還會(huì)添加(或者刪除，更新)。顯然不能夠直接在@Controller方法中這樣來填充Model，另外如果需要渲染文章列表，那么這種方法顯然也是不行的。

為了解決這個(gè)問題，我們需要使用參考代碼JAR包中提供的Blog類：

package Entity;

import java.util.Date;

public class Blog {
    private int id;
    private String title;
    private String content;
    private Date createdTime;
    public int getId() {
        return id;
    }
    public void setId(int id) {
        this.id = id;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContent() {
        return content;
    }
    public void setContent(String content) {
        this.content = content;
    }
    public Date getCreatedTime() {
        return createdTime;
    }
    public void setCreatedTime(Date createdTime) {
        this.createdTime = createdTime;
    }
    
}

在單篇文章頁面里，對(duì)于每一個(gè)屬性，都需要調(diào)用一次Model.addAttribute()方法，屬性如果很多就會(huì)很不方便。現(xiàn)在我們有了Blog對(duì)象，可以將它放入Model:

@RequestMapping("/index/{id}")
    public String getIndex(@PathVariable("id") int id ,Model model) {
//        return "index";
        //這里模擬一些數(shù)據(jù)
//        model.addAttribute("title","This is a blog with id = " + id);
//        model.addAttribute("CreatedTime","2017-11-13");
//        model.addAttribute("content","This is content");
        Blog blog = new Blog();
        blog.setId(1);
        blog.setTitle("This is a blog with id = " + id);
        blog.setContent("This is content");
        blog.setCreatedTime(new Date());
        model.addAttribute("blog",blog);
        return "index";
    }

根據(jù)URL中的id獲取對(duì)應(yīng)的Blog對(duì)象，然后交給模板引擎渲染blog，相應(yīng)的在模板中的變量表達(dá)式也要發(fā)生變化：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<div class="col-sm-8">
  <div class="page-header">
    <h2 th:text="${blog.title}">Cum sociis（博客標(biāo)題）</h2>
    <p class="blog-post-meta"><span th:text="${blog.createdTime}">2015年2月3日</span> 標(biāo)簽：<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Web開發(fā)</a></p>
  </div>

  <div class="blog-post-content" th:text="${blog.content}">
    ...
    （這里是博客內(nèi)容）
  </div>
</div>
</html>

運(yùn)行結(jié)果：

提高：往Model中添加對(duì)象有兩種方式：

model.addAttribute("blog",blog);
model.addAttribute(blog);

使用第二種時(shí)，對(duì)象在Model中的命名默認(rèn)為類名的首字母小寫形式，任何時(shí)候?qū)τ谕环N類型，只可能存在一個(gè)這樣的“匿名”對(duì)象。

日期格式化

文章頁面經(jīng)過模板渲染處理后，還存在一個(gè)小問題：日期格式?，F(xiàn)在對(duì)于${blog.createdTime}的渲染結(jié)果是Mon Nov 13 16:18:08 GMT+08:00 2017 ，這是因?yàn)?{blog.createdTime}是一個(gè)Date對(duì)象，模板引擎在渲染的時(shí)候直接調(diào)用它的toString()方法。格式化日期是一個(gè)非常常見的任務(wù)，為此Thymeleaf提供了內(nèi)置的支持：

<p><span th:text="${#dates.format(blog.createdTime,'yyy-MM-dd')}">2015年2月3日</span> 標(biāo)簽：<a href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >Web開發(fā)</a></p>

#dates是Thymeleaf內(nèi)置的一個(gè)工具類，format()方法可以指定日期的格式。

運(yùn)行結(jié)果：