(二)springboot整合thymeleaf模板

小說:game939棋牌游戲官網作者:公建侯更新時間:2019-02-20字數:88214

(二)springboot整合thymeleaf模板


在我們平時的開發中,用了很久的jsp作view顯示層,但是標簽庫和JSP缺乏良好格式的一個副作用就是它很少能夠與其產生的HTML類似。所以,在Web瀏覽器或HTML編輯器中查看未經渲染的JSP模板是非常令人困惑的,而且得到的結果看上去也非常丑陋(也就是不放到服務器,直接本地打開)。

但是Thymeleaf模板是原生的,不依賴于標簽庫。它能在接受原始HTML的地方進行編輯和渲染(也就是說我們通過thymeleaf寫一個頁面,如果不放到服務器進行渲染,也是可以看到效果的,跟后端打開基本相同)

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

配置springbean視圖

首先我們需要讓springboot(springmvc通用)知道我們的頁面是通過什么來渲染的(jsp,freemarker,thymeleaf等等,以及模板的位置等信息)

/**
 * 設置視圖解析器
 * @param templateEngine
 * @return
 */
@Bean
public ViewResolver viewResolver(SpringTemplateEngine templateEngine){
    ThymeleafViewResolver resolver = new ThymeleafViewResolver();
    resolver.setTemplateEngine(templateEngine);
    return resolver;
}

/**
 * 設置模板引擎
 * @param templateResolver
 * @return
 */
@Bean
public SpringTemplateEngine templateEngine(TemplateResolver templateResolver){
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

/**
 * 模板解析引擎
 * @return
 */
@Bean
public TemplateResolver templateResolver(){
    TemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setPrefix("/WEB-INF/template/");//設置地址前綴
    resolver.setSuffix(".html");//設置后綴
    resolver.setCacheable(false);//設置不緩存
    resolver.setTemplateMode("HTML5");
    return resolver;
    
}

ThymeleafViewResolver是Spring MVC中ViewResolver的一個實現類。像其他的視圖解析器一樣,它會接受一個邏輯視圖名稱,并將其解析為視圖

TemplateResolver會最終定位和查找模板。與之前配置InternalResourceViewResolver類似,它使用了prefix和suffix屬性。前綴和后綴將會與邏輯視圖名組合使用,進而定位Thymeleaf引擎。它的templateMode屬性被設置成了HTML 5,這表明我們預期要解析的模板會渲染成HTML 5輸出

到這里我們就基本配置完了?。


接下來我們在WEB-INF/template下建立home.html,頭部加入thymeleaf的命令空間

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

建立一個controller,寫我們的第一個controller,打開訪問localhost:8080/home就會轉發到/WEB-INF/template/home.html

    @RequestMapping("/home")
    public String hello(Map<String,Object> map){
        User user = new User("1", "fei", 22, "愛好:籃球","admin");
        map.put("user",user);
        
        List<User> list = new ArrayList<>();
        for(int i =0;i<5;i++){
            User u = new User(""+(i+2), "fei"+(i+2), 22+(i+2), "愛好:籃球"+(i+2),"user"+i);
            list.add(u);
        }
        map.put("userList",list);
        
        return "home";
    }

thymeleaf語法

文本顯示

${}的使用和jsp的el表達式很類似,我們在后臺綁定了一個user對象那么我們可以通過${user.name}獲取用戶名,相當于user.getName();但是注意這個只能放到th表達式里面

th:text就相當于把里面的渲染主來的值放到aaa的位置上,如果th:text里面的值只有${user.name},并且為null,那么就會顯示aaa

<span th:text=""用戶名:" +${user.name}">aaa</span>
#或者下面的這種方式,|…|中只能包含變量表達式${…},不能包含其他常量、條件表達式等
<span th:text="|用戶名:${user.name}|"></span>

?運算符

在表達式中可以使用各類算術運算符,例如+, -, *, /, %

<span th:text=""年齡*2="+ ${user.age}*2 "></span>

邏輯運算符

在表達式中可以使用邏輯運算符,但是除了==其他的要使用轉義字符

>, <, >=, <= != 對應(gt, lt, ge, le, ne)

<span th:text="(${user.age} eq 22)">aaa</span>  //輸出true
#可以使用二元表達式
<span th:text="(${user.age} ge 23?"超過年紀":"ok")"></span>

條件判斷

th:if條件成立才會顯示
th:unless條件不成立才會顯示

<span th:if="(${user.age} gt 21)">年齡超過21才會顯示</span>
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>

Switch

* 代表default,其他都沒匹配到會顯示帶*的

<div th:switch="${user.role}">
  <p th:case=""admin"">用戶是管理員</p>
  <p th:case="*">用戶是普通人員</p>
</div>

循環

第二個參數稱作狀態變量,屬性有
- index:當前迭代對象的index(從0開始計算)
- count: 當前迭代對象的index(從1開始計算)
- size:被迭代對象的大小
- current:當前迭代變量
- even/odd:布爾值,當前循環是否是偶數/奇數(從0開始計算)
- first:布爾值,當前循環是否是第一個
- last:布爾值,當前循環是否是最后一個

<table>
  <tr>
       <th>index</th>
        <th>id</th>
        <th>name</th>
       <th>age</th>
  </tr>
  <tr th:each="user,iterStat: ${userList}" >
      <td th:text="${iterStat.index}">1</td>
        <td th:text="${user.id}">1</td>
        <td th:text="${user.name}">王五</td>
        <td th:text="${user.age}">55</td>
  </tr>
</table>

* 號和$符號共用

*{}里面的值就是上層th:object對象里面對應的屬性

 <div th:object="${user}">
   <p>Name: <span th:text="*{name}">wangwu</span>.</p>
   <p>AGE: <span th:text="*{age}">22</span>.</p>
 </div>

Utilities

Utilities為了模板更加易用,Thymeleaf還提供了一系列Utility對象(內置于Context中),可以通過#直接訪問

- dates : java.util.Date的功能方法類。
- calendars : 類似#dates,面向java.util.Calendar
- numbers : 格式化數字的功能方法類
- strings : 字符串對象的功能類,contains,startWiths,prepending/appending等等。
- objects: 對objects的功能類操作。
- bools: 對布爾值求值的功能方法。
- arrays:對數組的功能類方法。
- lists: 對lists功能類方法
- sets
- maps

表達式基本對象
- #ctx: 上下文對象.
- #vars: context中的變量們.
- #locale: context中的locale.
- #httpServletRequest: (只在web context中) HttpServletRequest對象.
- #httpSession: (只在web context中) HttpSession對象.

將date渲染成后面的格式
${#dates.format(date, "dd/MMM/yyyy HH:mm")}
得到當前時間
${#dates.createNow()}
得到當前時間并顯示
<span th:text=" ${#dates.format(new java.util.Date().getTime(), "yyyy-MM-dd hh:mm:ss")} "></span>

?utilities其他使用鏈接,很詳細

內聯

Text inlining

后面[[]]里面的值是從域中獲取的text文本,跟使用th:text效果類似

<span th:inline="text">[[${user.name}]]</span>

JavaScript inlining

<script th:inline="javascript">
    var name = [[${user.name}]];
</script>

下面這個意思是如果沒有跑在服務器,name就會是我們的lisi,如果在服務器上,會取出user.name的值,忽略lisi

var name = /*[[${user.name}]]*/"lisi";

CSS inlining

<style th:inline="css">
    .[[${classname}]] {
      text-align: [[${align}]];
    }
</style>

none inlining

但是如果我么就要顯示[[${user.name}]]不需要他轉換呢,就會用到none inlining

<span th:inline="none">[[${user.name}]]</span>

?


嵌套

在當前home.html路徑下有個footer.html,內容如下

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  <body>
    <footer th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </body>
</html>

在home.html引用這個footer,footer代表html的名稱,copy代表fragmen的值

<div th:replace="footer:: copy"></div>
<div th:include="footer:: copy"></div>

展現的源碼:

<footer>
    &copy; 2011 The Good Thymes Virtual Grocery
</footer>
<div>
    &copy; 2011 The Good Thymes Virtual Grocery
</div>

得出結論:
?- th:replace會將當前div整個替換成foot的元素
?- th:include只是將footer里面的內容拷貝進來


鏈接

鏈接一般用th:href="@{地址}",“@{}”表達式,用來計算相對于URL的路徑,在html ==<a ?href="/register"></a>

<a th:href="@{/register}">register</a>

?

常用標簽


?

springboot簡化配置

當然在springboot中,上面的視圖解析器等注冊都不需要我們做了,因為springboot都默認幫我們做了,(只要我們將Thymeleaf maven依賴添加到項目的pom文件下,就啟用了Spring Boot的自動配置。當應用運行時,Spring Boot將會探測到類路徑中的Thymeleaf,然后會自動配置視圖解析器、模板解析器以及模板引擎)

如果什么都不配置,springboot會默認查找類跟目錄下的templates文件夾下的模板,home.html放到src/main/ resources/templates目錄下

如果我們要在home的html中引入一些靜態資源怎么辦呢,這點springboot也幫我們考慮到了

springboot它會將“/**”映射到幾個資源路徑中

  • META-INF/resources/
  • resources
  • static
  • public

也就是說我們在有一個static/css/home.css

那么我們這樣引入就可以了。

<link type="text/css" rel="stylesheet" th:href="@{/css/home.css}"></link>

當然,我們還是可以配置前綴后綴,以及是否緩存等,只需要一個簡單的配置即可

#配置前綴
#spring.thymeleaf.prefix=classpath:/templates/  
#配置后綴
#spring.thymeleaf.suffix=.html
#spring.thymeleaf.mode=HTML5 
#spring.thymeleaf.encoding=UTF-8 
#spring.thymeleaf.content-type=text/html 
#是否開啟緩存
spring.thymeleaf.cache=false 

?

github代碼地址

?

當前文章:http://www.hfcxdn.com/21b9c/46332.html

發布時間:2019-02-20 01:40:00

那邊的德州撲克牌怎么玩的 電腦里的紙牌怎么玩 玩藍洞棋牌輸的錢能追回嗎 杰克棋牌房卡 天津高級養老院 山東省圍棋協會官網 撲克王棋牌現金版 手機炸金花游戲經驗 gtv網絡棋牌頻道象棋 手機游戲哪個可以賺錢

編輯:杜密侯石

我要說兩句: (0人參與)

發布
捕鱼达人之深海狩猎