溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

SpringBoot中web模板渲染怎么實現(xiàn)

發(fā)布時間:2022-02-08 16:31:29 來源:億速云 閱讀:184 作者:iii 欄目:開發(fā)技術(shù)

這篇“SpringBoot中web模板渲染怎么實現(xiàn)”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細(xì),步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“SpringBoot中web模板渲染怎么實現(xiàn)”文章吧。

模板

開發(fā)Web站點的本質(zhì),其實就是根據(jù)瀏覽器發(fā)起的請求(輸入),生成HTML代碼返回給瀏覽器(輸出)。在之前的學(xué)習(xí)中,我們已經(jīng)通過文件的形式存儲起來而不是直接在Java代碼中生成HTML代碼。另一方面,博客站點是動態(tài)的,即不同的請求返回的內(nèi)容可能不同。但是對于同一類請求,例如訪問id分別為1和2的兩篇文章,對應(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">
    <h3 th:text="${title}">Cum sociis(博客標(biāo)題)</h3>
    <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變量作為<h3>標(biāo)簽的內(nèi)容(createdTime,content也是一樣)。

注意為了顯示博客創(chuàng)建時間,我們將時間放入了一個<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()方法增加了一個Model類型的參數(shù)。通過Spring MVC框架提供的Model,可以調(diào)用其addAttribute方法,這樣Thymeleaf可以訪問Model中的變量從而進(jìn)行模板渲染。上述例子中可以看到,title變量的值是根據(jù)URL中的@PathVariable來確定的,雖然簡單,但是這已經(jīng)是一個動態(tài)頁面了。

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

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

運行結(jié)果:

SpringBoot中web模板渲染怎么實現(xiàn)

Model中添加對象

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

為了解決這個問題,我們需要使用參考代碼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;
    }
    
}

在單篇文章頁面里,對于每一個屬性,都需要調(diào)用一次Model.addAttribute()方法,屬性如果很多就會很不方便?,F(xiàn)在我們有了Blog對象,可以將它放入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獲取對應(yīng)的Blog對象,然后交給模板引擎渲染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">
    <h3 th:text="${blog.title}">Cum sociis(博客標(biāo)題)</h3>
    <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>

運行結(jié)果:

SpringBoot中web模板渲染怎么實現(xiàn)

提高:往Model中添加對象有兩種方式:

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

  2. model.addAttribute(blog);

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

日期格式化

文章頁面經(jīng)過模板渲染處理后,還存在一個小問題:日期格式?,F(xiàn)在對于${blog.createdTime}的渲染結(jié)果是Mon Nov 13 16:18:08 GMT+08:00 2017 ,這是因為${blog.createdTime}是一個Date對象,模板引擎在渲染的時候直接調(diào)用它的toString()方法。格式化日期是一個非常常見的任務(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)置的一個工具類,format()方法可以指定日期的格式。

運行結(jié)果:

SpringBoot中web模板渲染怎么實現(xiàn)

以上就是關(guān)于“SpringBoot中web模板渲染怎么實現(xiàn)”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI