本篇內(nèi)容主要講解“SpringBoot+Thymeleaf基于HTML5現(xiàn)代模板引擎怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“SpringBoot+Thymeleaf基于HTML5現(xiàn)代模板引擎怎么用”吧!

創(chuàng)新互聯(lián)主營湛河網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP軟件開發(fā),湛河h5微信小程序開發(fā)搭建,湛河網(wǎng)站營銷推廣歡迎湛河等地區(qū)企業(yè)咨詢

開始使用

1.引入依賴

SpringBoot默認(rèn)提供了Thymeleaf的Starter，只需簡單引入依賴即可。

      org.springframework.boot
      spring-boot-starter-thymeleaf
    

目前默認(rèn)版本是2.1，如果想升級版本到3.0，可以這樣修改。

  
    3.0.7.RELEASE
    2.0.0
  

為了方便開發(fā)，項目案例采用了熱部署工具dev-tools ，這樣我們在修改頁面之后，IDEA會自動加載，從而達(dá)到實現(xiàn)熱更新的效果。

   
      org.springframework.boot
      spring-boot-devtools
      runtime
    

注：由于IDEA默認(rèn)關(guān)閉了熱部署，需要做一些設(shè)置才能使其生效。解決方法：首先按住Ctrl+Shift+Alt+/ 然后進(jìn)入 Registry ，然后勾選compiler.automake.allow.when.app.running 即可。另外，Build->Compiler 也要勾選上Build Project automatically .

2. 添加相關(guān)配置

Thymeleaf默認(rèn)開啟了頁面緩存，在開發(fā)的時候，應(yīng)該關(guān)閉緩存。此外，通常我們還會指定頁面的存放路徑。（默認(rèn)是classpath:/templates/）

application.yml 配置如下：
spring:
 thymeleaf:
  cache: false #關(guān)閉緩存
  prefix: classpath:/views/ #添加路徑前綴

3.編寫HTML

編寫Thymeleaf和書寫HTML5頁面沒有什么不同，最大的轉(zhuǎn)變就是使用拓展屬性（th:xx）去跟服務(wù)端進(jìn)行數(shù)據(jù)交互，保留原始頁面風(fēng)格，也是Thymeleaf的推崇的風(fēng)格。例如下面這個簡單的案例，啟動項目，我們發(fā)現(xiàn)頁面跳轉(zhuǎn)的是簡書的連接，這一點也驗證了Thymeleaf覆蓋原生頁面數(shù)據(jù)的極佳能力。

頁面代碼：

  


  
歡迎使用Thymeleaf!!
  戳我有驚喜

后端代碼：

@Controller
public class UserController {

  @GetMapping("/")
  public String index(Model model) {
    model.addAttribute("info", "user/list");
    return "index";
  }

  @GetMapping("/user")
  public String hehe(Model model) {
    model.addAttribute("user", new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    return "user";
  }

  @GetMapping("/user/list")
  public String userlist(Model model) {
    List userList = new ArrayList<>();
    userList.add(new User(UUID.randomUUID().toString(), "yizhiwazi", "20170928"));
    userList.add(new User(UUID.randomUUID().toString(), "kumamon", "123456"));
    userList.add(new User(UUID.randomUUID().toString(), "admin", "admin"));
    model.addAttribute("userList", userList);
    return "userList";
  }

}

現(xiàn)在我們嘗試回填一個表單，展示單個用戶信息。

接下來，我們進(jìn)入一個更復(fù)雜的案例，例如展示一個用戶列表信息，不需要編寫新的標(biāo)簽，就可以完成對批量用戶的遍歷。

用戶列表


  
  用戶姓名：
  登錄密碼：