快捷導(dǎo)航

spring boot使用thymeleaf為模板的基本步驟介紹

更新時(shí)間：2018年01月14日 08:57:19 作者：夢(mèng)想修補(bǔ)師

Spring Boot項(xiàng)目的默認(rèn)模板引擎是Thymeleaf，這沒什么好說的，個(gè)人覺得也非常好，下面這篇文章主要給大家介紹了關(guān)于spring boot使用thymeleaf為模板的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。

前言

在開發(fā)過程中，使用模板引擎是很有必要的。jsp已經(jīng)明顯跟不上時(shí)代發(fā)展了，freemarker用的夠夠的？換thymeleaf試試吧。

springboot官方推薦的是freemarker和thymeleaf，而thymeleaf相對(duì)于freemarker更讓人感覺強(qiáng)大的，是他可以動(dòng)態(tài)替換標(biāo)簽內(nèi)靜態(tài)內(nèi)容，這樣前端可以安心寫頁面，后臺(tái)可以安心擼接口，只需要把變量替換一下即可，這種理念，不知道是VUE抄襲了thymeleaf還是thymeleaf抄襲了VUE，不過無所謂了，對(duì)于我們廣大碼奴來說，實(shí)用就好。

經(jīng)過查閱資料，配置好后，現(xiàn)在將實(shí)現(xiàn)的過程分享給大家，下面話不多說了，來一起看看詳細(xì)的介紹吧。

壹、pom引入

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

貳、application.properties添加thymeleaf配置

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

叁、編寫html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
  xmlns:th="http://www.thymeleaf.org">
<head>
 <title>demo</title>
</head>
<body>
<p>這是第一段</p>
<p th:text="${textValue}">這是第二段</p>
</body>
</html>

肆、測(cè)試類

package com.mos.easyboot.admin.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("demo")
public class DemoController {
 @RequestMapping("index")
 public String index(Model model){
 String textValue = "上士聞道，僅能行之；中士聞道，若存若亡；下士聞道，大笑之。" +
  "不笑不足以為道。" +
  "故建言有之：明道若昧；進(jìn)道若退；夷道若颣（lei）；上德若谷，大白若辱，廣德若不足，建德若偷，質(zhì)真若渝；大方無隅；大器免成；大音希聲；大象無形。" +
  "道隱無名。" +
  "夫唯道，善始且善成。";
 model.addAttribute("textValue",textValue);
 return "demo/demo";
 }
}

伍、頁面效果

陸、數(shù)據(jù)渲染

VUE有個(gè)SSR（服務(wù)端渲染）的問題比較頭疼，雖然也有解決方案（見我之前寫的文章《前后端分離Nuxt.js解決SEO問題》），但總覺得還是讓適合的技術(shù)做時(shí)候的業(yè)務(wù)比較好，而thymeleaf還是相當(dāng)于在服務(wù)端渲染，查看頁面源碼如下：