溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

springBoot（5）：web開發(fā)-模板引擎FreeMarker與thymeleaf

發(fā)布時(shí)間：2020-07-29 12:32:20 來源：網(wǎng)絡(luò) 閱讀：2635 作者：我愛大金子 欄目：開發(fā)技術(shù)

一、簡介

spring boot的web應(yīng)用開發(fā)，是基于spring mvc。


Spring boot在spring默認(rèn)基礎(chǔ)上，自動(dòng)配置添加了以下特性：

 1、包含了ContentNegotiatingViewResolver和BeanNameViewResolver beans。

 2、對(duì)靜態(tài)資源的支持，包括對(duì)WebJars的支持。

 3、自動(dòng)注冊(cè)Converter，GenericConverter，F(xiàn)ormatter beans。

 4、對(duì)HttpMessageConverters的支持。

 5、自動(dòng)注冊(cè)MessageCodeResolver。

 6、對(duì)靜態(tài)index.html的支持。

 7、對(duì)自定義Favicon的支持。

 8、主動(dòng)使用ConfigurableWebBindingInitializer bean


二、模板引擎的選擇

FreeMarker

Thymeleaf

Velocity (1.4版本之后棄用，Spring Framework 4.3版本之后棄用)

Groovy

Mustache

注：jsp應(yīng)該盡量避免使用，原因如下：

 1、jsp只能打包為：war格式，不支持jar格式，只能在標(biāo)準(zhǔn)的容器里面跑（tomcat，jetty都可以）

 2、內(nèi)嵌的Jetty目前不支持JSPs

 3、Undertow不支持jsps

 4、jsp自定義錯(cuò)誤頁面不能覆蓋spring boot 默認(rèn)的錯(cuò)誤頁面

三、FreeMarker使用

新建一個(gè)工程，勾選Freemarker、DevTools（開發(fā)方便）

springBoot（5）：web開發(fā)-模板引擎FreeMarker與thymeleaf

會(huì)自動(dòng)在pom.xml中加入Freemarker的配置：

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


WebController.java:

package com.example.demo.controller;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * Created by DELL on 2017/6/13.
 */
@Controller
@RequestMapping("/web")
public class WebController {
    private static final Logger logger = LoggerFactory.getLogger(WebController.class);

    @RequestMapping("/index")
    public String index(Model model){
        logger.info("這是一個(gè)controller");
        model.addAttribute("title","我是一個(gè)例子");
        return "index";  // 注意，不要再最前面加上/，linux下面會(huì)出錯(cuò)
    }
}

index.ftl:

<!DOCTYPE html>
<html>
<head lang="en">
   <title>Spring Boot Demo - FreeMarker</title>
    <link href="/css/index.css" rel="stylesheet" />
</head>
<body>
    <center>
        <img src="/images/logo.png" />
        <h2 id="title">${title}</h2>
    </center>

    <script type="text/javascript" src="/js/jquery.min.js"></script>

    <script>
        $(function(){
            $('#title').click(function(){
                alert('點(diǎn)擊了');
            });
        })
    </script>
</body>
</html>


說明：

 1、視圖默認(rèn)訪問templates下面，如"index",則：在templates下面找index.ftl

 2、css、js、img等靜態(tài)資源則在static下面找，如<link href="/css/index.css" rel="stylesheet" />，則是找static下面的css下面的index.css文件

四、thymeleaf模塊

4.1、簡介

Thymeleaf是一個(gè)優(yōu)秀的面向java的XML/XHTML/HTML5頁面模板，并且有豐富的標(biāo)簽語言和函數(shù)。使用Springboot框架進(jìn)行界面設(shè)計(jì)，一般都會(huì)選擇Thymeleaf模板。

4.2、使用

引入依賴：

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


配置application.properties文件：

#####################thymeleaf開始#####################################
#關(guān)閉緩存
spring.thymeleaf.cache=false
#后綴
spring.thymeleaf.suffix=.html
#編碼
spring.thymeleaf.encoding=UTF-8
#####################thymeleaf結(jié)束#####################################

IndexController.java:

@Controller
public class IndexController {
    @RequestMapping("/index")
    public String show(Model model) throws Exception {
        List<User> users = new ArrayList<User>();
        users.add(new User(1L, "zhangsan"));
        users.add(new User(2L, "lisi"));
        users.add(new User(3L, "wangwu"));
        model.addAttribute("hello","我只是一個(gè)例子");
        model.addAttribute("users", users);
        model.addAttribute("addtime",new Date());
        return"/helloHtml";
    }
}

main/resources/templates/helloHtml.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Hello World!</title>
</head><p th:text="${hello}"></p>
<body>
<h2 th:inline="text">Hello.v.2</h2>
<p th:text="${addtime} ? ${#dates.format(addtime, 'yyyy-MM-dd HH:mm:ss')}"></p>
<select>
    <option>請(qǐng)選擇用戶</option>
    <option th:each="user:${users}" th:value="${user.id}" th:text="${user.name}">
    </option>
</select>
</body>
</html>

瀏覽器中輸入：http://localhost:8989/index ，效果如下：

springBoot（5）：web開發(fā)-模板引擎FreeMarker與thymeleaf

4.3、thymeleaf功能簡介

在html頁面中使用thymeleaf標(biāo)簽語言，用一個(gè)簡單的關(guān)鍵字“th”來標(biāo)注，如：

<p th:text="${hello}"></p>
<img th:src="@{images/logo.png}" />

其中th:text指定在<p>標(biāo)簽中顯示的文本，它的值來自"$"所引用的內(nèi)存變量。

th:src指定img的圖片地址


注意：使用th，需要<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

 springBoot（5）：web開發(fā)-模板引擎FreeMarker與thymeleaf


thymeleaf的主要標(biāo)簽和函數(shù)：

th:text，顯示文本。
th:utext，和th:text的區(qū)別是針對(duì)"unescaped text"。
th:attr，設(shè)置標(biāo)簽屬性
th:if or th:unless，條件判斷語句
th:switch, th:case，選擇語句
th:each，循環(huán)語句

#date：日期函數(shù)
#calendars：日歷函數(shù)
#numbers：數(shù)字函數(shù)
#strings：字符串函數(shù)
#objects：對(duì)象函數(shù)
#bools：邏輯函數(shù)
#arrays：數(shù)組函數(shù)
#lists：列表函數(shù)

詳細(xì)標(biāo)簽請(qǐng)查看官方：http://www.thymeleaf.org/  


向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手