快捷導(dǎo)航

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

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

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

前言

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

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

經(jīng)過(guò)查閱資料，配置好后，現(xiàn)在將實(shí)現(xiàn)的過(guò)程分享給大家，下面話不多說(shuō)了，來(lái)一起看看詳細(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ì)真若渝；大方無(wú)隅；大器免成；大音希聲；大象無(wú)形。" +
  "道隱無(wú)名。" +
  "夫唯道，善始且善成。";
 model.addAttribute("textValue",textValue);
 return "demo/demo";
 }
}

伍、頁(yè)面效果

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

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