天天看點

springboot使用thymeleaf為模闆

jsp已經明顯跟不上時代發展了,freemarker用的夠夠的?換thymeleaf試試吧。springboot官方推薦的是freemarker和thymeleaf,而thymeleaf相對于freemarker更讓人感覺強大的,是他可以動态替換标簽内靜态内容,這樣前端可以安心寫頁面,背景可以安心撸接口,隻需要把變量替換一下即可,這種理念,不知道是VUE抄襲了thymeleaf還是thymeleaf抄襲了VUE,不過無所謂了 ,對于我們廣大碼奴來說,實用就好

壹、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>
           

肆、測試類

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 = "上士聞道,僅能行之;中士聞道,若存若亡;下士聞道,大笑之。" +
                "不笑不足以為道。" +
                "故建言有之:明道若昧;進道若退;夷道若颣(lei);上德若谷,大白若辱,廣德若不足,建德若偷,質真若渝;大方無隅;大器免成;大音希聲;大象無形。" +
                "道隐無名。" +
                "夫唯道,善始且善成。";
        model.addAttribute("textValue",textValue);
        return "demo/demo";
    }
}

           

伍、頁面效果

springboot使用thymeleaf為模闆

4.png

陸、資料渲染

VUE有個SSR(服務端渲染)的問題比較頭疼,雖然也有解決方案(見我之前寫的文章《

前後端分離Nuxt.js解決SEO問題

》),但總覺得還是讓适合的技術做時候的業務比較好,而thymeleaf還是相當于在服務端渲染,檢視頁面源碼如下:

springboot使用thymeleaf為模闆

5.png