天天看點

springboot之thymeleaf與freemarker模闆

1、springboot之thymeleaf模闆:

關于Thymeleaf的優點,我隻說一條:它就是html頁面。下面直接上代碼

1-1、相關pom依賴:
<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
           
1-2、關于緩存:

Spring Boot官方文檔建議在開發時将緩存關閉,那就在application.properties檔案中加入下面這行

spring.thymeleaf.cache=false

正式環境還是要将緩存開啟的

1-3、使用:表格的使用

在html頭部加入一行代碼,便于編寫代碼的時候有自動提示:

<html xmlns:th="http://www.thymeleaf.org">
           

1-3-1:頁面代碼:

<table  width="600">
    <thead>
        <tr>
            <td>使用者id</td>
            <td>使用者姓名</td>
            <td>使用者描述</td>
        </tr>
    </thead>
    <tbody>
        <tr th:each="user:${users}">
            <td th:text="${user.userid}"></td>
            <td th:text="${user.userName}"></td>
            <td th:text="${user.desc}"></td>
        </tr>
    </tbody>
</table>
           

1-3-2:controller代碼:

@RequestMapping("/user/list")
    public ModelAndView list(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("user/list");
        modelAndView.addObject("title","使用者清單");
        List list = new ArrayList();
        list.add(new User(1,"張三","神經兮兮"));
        list.add(new User(2,"李四","正正經經"));
        modelAndView.addObject("users",list);
        return modelAndView;
    }
           

1-3-3:運作結果

springboot之thymeleaf與freemarker模闆
1-4、下拉框的使用:

th:each:存放集合

th:value:存放值

th:text:頁面展示

<select>
    <option th:each="user:${users}" th:value="${user.userid}" th:text="${user.userName}"></option>
</select>

           

2:springboot之freemarker模闆

2-1:導入pom依賴
<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-freemarker</artifactId>
   </dependency>
           
2-2:application.yml檔案的預設配置
reemarker:
    # 設定模闆字尾名
    suffix: .ftl
    # 設定文檔類型
    content-type: text/html
    # 設定頁面編碼格式
    charset: UTF-8
    # 設定頁面緩存
    cache: false
    # 設定ftl檔案路徑,預設是/templates,為示範效果添加role
    template-loader-path: classpath:/templates/role
  mvc:
    static-path-pattern: /static/**
	
	
           
2-3:使用

controller背景代碼:

@RequestMapping("/role/list")
    public ModelAndView roleList(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("list");
        modelAndView.addObject("name",null);
        modelAndView.addObject("sex","giry");
        List list = new ArrayList();
        list.add(new role(1,"經理","辦公吩咐"));
        list.add(new role(2,"秘書","服從指令"));
        modelAndView.addObject("roles",list);

        return modelAndView;
    }


           

2-3-1:取值

注:! 很重要,如果沒有加上,則遇到null類型的就會報錯。

welcome 【${name!"未知内容"}】 to page
           

2-3-2:非空判斷:

<h3>exists用在邏輯判斷</h3>
<#if name?exists>
    ${name}
</#if>
           
<#if name??>
    hhh
</#if>
           

2-3-3:條件表達式

<#if sex="boy">
    男
<#elseif sex="giry">
女
<#else>
保密
</#if>
           
springboot之thymeleaf與freemarker模闆

2-3-4:循環

頁面代碼:

<table  width="600">
<thead>
<tr>
    <td>角色id</td>
    <td>角色姓名</td>
    <td>角色描述</td>
</tr>
</thead>
<tbody>
<#list roles as role>
<tr>
     <td>${role.roleid}</td>
    <td>${role.roleName}</td>
    <td>${role.desc}</td>
</tr>
</#list>
</tbody>
</table>
           
springboot之thymeleaf與freemarker模闆

2-3-5:設定局部變量(assign)、全局變量(global)

<#--<h5>将項目名指派給cxt1這個變量。這邊的作用域是目前頁面</h5>-->
<#assign ctx1>
    ${springMacroRequestContext.contextPath}
</#assign>
<#--<h5>将項目名指派給cxt2這個變量。這邊的作用域是整個項目</h5>-->
<#global ctx2>
    ${springMacroRequestContext.contextPath}
</#global>

${ctx1}和${ctx2}
           
springboot之thymeleaf與freemarker模闆

2-3-6:includ包含

<#include 'foot.ftl'>
           
springboot之thymeleaf與freemarker模闆

foot.ftl代碼:

springboot之thymeleaf與freemarker模闆

controller代碼:

springboot之thymeleaf與freemarker模闆

3、thymeleaf與freemarker的差別:

3-1: thymeleaf周遊集合的方式是:

th:each=" 自定義的鍵 : ${集合的鍵}"
           

且周遊值的時候是放在标簽裡:

<td th:text="${自定義的鍵.屬性}"></td>
           

3-2:freemarker周遊方式:

<#list 集合 as 自定義鍵> </#list>
           

且周遊值的時候是放在标簽的中間,和原始的jsp一樣:

<td> th:text="${自定義的鍵.屬性}"</td>
           

繼續閱讀