SpringBoot集成Freemarker與Thymeleaf

時間 2019-11-10

標籤 springboot 集成 freemarker thymeleaf 欄目 Spring 简体版

原文原文鏈接

一:歸納

pom.xml添加依賴

配置application.yml

HTML頁面使用表達式

二：Freemarker模板引擎

1.添加依賴html

<!-- ftl模板引擎 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>

2.配置參數java

#Freemarker模板引擎
spring:
  freemarker:
    template-loader-path:
    - classpath:/templates
    charset: UTF-8
    check-template-location: true
    content-type: text/html
    expose-request-attributes: true
    expose-session-attributes: true
    request-context-attribute: request
    suffix: .ftl
    cache: false
    #關閉緩存，及時刷新，上線須要改爲true

3.模板使用
在templates文件夾下新建freemarker文件夾，而後在該文件夾下新建index.htmlspring

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<title>Freemarket</title>
</head>
<body>
${message}
</body>
</html>

4.Controller返回視圖緩存

@Controller()
@RequestMapping("/ftl")
public class FtlController {

    @GetMapping("/hello")
    public String hello(ModelMap map) {
        map.addAttribute("message", "Hello! freemarket!");
        return "/freemarker/index";
    }

}

三：Thymeleaf模板引擎

1.添加依賴session

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

2.配置參數（通常狀況不用配置）app

#Thymeleaf 靜態資源配置
spring:
  thymeleaf:
      prefix: classpath:/templates/
      suffix: .html
      mode: HTML5
      encoding: UTF-8
      content-type: text/html
      cache: false
#關閉緩存，即便刷新，上線須要改爲true
#i18n配置
  messages:
    basename: i18n/messages
    cache-seconds: 3600
    encoding: UTF-8

在源文件夾下新建i18n/messages文件夾目錄，在該目錄下新建messages.properties：spring-boot

roles.manager=manager
roles.superadmin=superadmin

2.模板使用
thymeleaf涉及的標籤不少post

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>

<!-- <script th:src="@{/js/test.js}"></script> -->

</head>
<body>
<!--@{}是用來輸出內容的，${}是用來輸出對象的，#{}是輸出i18n的參數-->
<div>
    用戶姓名：<input th:id="${user.name}" th:name="${user.name}" th:value="${user.name}"/>
    <br/>
    用戶年齡：<input th:value="${user.age}"/>
    <br/>
    用戶生日：<input th:value="${user.birthday}"/>
    <br/>
    用戶生日：<input th:value="${#dates.format(user.birthday, 'yyyy-MM-dd')}"/>
    <br/>
</div>

<br/>

<div th:object="${user}">
    用戶姓名：<input th:id="*{name}" th:name="*{name}" th:value="*{name}"/>
    <br/>
    用戶年齡：<input th:value="*{age}"/>
    <br/>
    用戶生日：<input th:value="*{#dates.format(birthday, 'yyyy-MM-dd hh:mm:ss')}"/>
    <br/>
</div>

<br/>

text 與 utext ：<br/>
<span th:text="${user.desc}">abc</span>
<br/>
<span th:utext="${user.desc}">abc</span>
<br/>
<br/>

URL:<br/>
<a href="" th:href="@{http://www.imooc.com}">網站地址</a>
<br/>

<br/>
<form th:action="@{/th/postform}" th:object="${user}" method="post" th:method="post">
    <input type="text" th:field="*{name}"/>
    <input type="text" th:field="*{age}"/>
    <input type="submit"/>
</form>
<br/>

<br/>
<div th:if="${user.age} == 18">十八歲的天空</div>
<div th:if="${user.age} gt 18">你老了</div>
<div th:if="${user.age} lt 18">你很年輕</div>
<div th:if="${user.age} ge 18">大於等於</div>
<div th:if="${user.age} le 18">小於等於</div>
<br/>

<br/>
<select>
     <option >選擇框</option>
     <option th:selected="${user.name eq 'lee'}">lee</option>
     <option th:selected="${user.name eq 'imooc'}">imooc</option>
     <option th:selected="${user.name eq 'LeeCX'}">LeeCX</option>
</select>
<br/>

<br/>
<table>
    <tr>
        <th>姓名</th>
        <th>年齡</th>
        <th>年齡備註</th>
        <th>生日</th>
    </tr>
    <tr th:each="person:${userList}">
        <td th:text="${person.name}"></td>
        <td th:text="${person.age}"></td>
        <td th:text="${person.age gt 18} ? 你老了 : 你很年輕">18歲</td>
        <td th:text="${#dates.format(user.birthday, 'yyyy-MM-dd hh:mm:ss')}"></td>
    </tr>
</table>
<br/>

<br/>
<!--i18n配置-->
<div th:switch="${user.name}">
  <p th:case="'lee'">lee</p>
  <p th:case="#{roles.manager}">普通管理員</p>
  <p th:case="#{roles.superadmin}">超級管理員</p>
  <p th:case="*">其餘用戶</p>
</div>
<br/>

</body>
</html>

4.Controller返回視圖網站

@Controller
@RequestMapping("th")
public class ThymeleafController {

    @RequestMapping("/index")
    public String index(ModelMap map) {
        map.addAttribute("name", "thymeleaf-imooc");
        return "thymeleaf/index";
    }

    @RequestMapping("center")
    public String center() {
        return "thymeleaf/center/center";
    }

    @RequestMapping("test")
    public String test(ModelMap map) {

        User u = new User();
        u.setName("superadmin");
        u.setAge(10);
        u.setPassword("123465");
        u.setBirthday(new Date());
        u.setDesc("<font color='green'><b>hello imooc</b></font>");

        map.addAttribute("user", u);

        User u1 = new User();
        u1.setAge(19);
        u1.setName("imooc");
        u1.setPassword("123456");
        u1.setBirthday(new Date());

        User u2 = new User();
        u2.setAge(17);
        u2.setName("LeeCX");
        u2.setPassword("123456");
        u2.setBirthday(new Date());

        List<User> userList = new ArrayList<>();
        userList.add(u);
        userList.add(u1);
        userList.add(u2);

        map.addAttribute("userList", userList);

        return "thymeleaf/test";
    }

    @PostMapping("postform")
    public String postform(User u) {

        System.out.println("姓名：" + u.getName());
        System.out.println("年齡：" + u.getAge());

        return "redirect:/th/test";
    }

    @RequestMapping("showerror")
    public String showerror(User u) {

        int a = 1 / 0;

        return "redirect:/th/test";
    }
}

相關標籤/搜索

springboot+freemarker

springboot+mybatis+mysql+freemarker

springboot+mybatis+freemarker+bootstrap

springboot+freemarker+bootstrap

springboot+freemarker+pagehelper

springboot+mybatis+mysql+thymeleaf

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。