Spring Boot入門第四天：使用Thymeleaf模板引擎

時間 2019-11-11

標籤 spring boot 入門第四使用 thymeleaf 模板引擎欄目 Spring 简体版

原文原文鏈接

關於Thymeleaf的優勢，我只說一條：它就是html頁面啊，直接能夠用瀏覽器打開。受夠了JSP的同窗能夠嘗試一下。css

1.在pom.xml文件中添加依賴：html

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

spring-boot-starter-thymeleaf下面已經包括了spring-boot-starter-web，因此能夠把spring-boot-starter-web的依賴去掉。web

2.配置屬性。其實徹底能夠使用不用配置，可是Spring Boot官方文檔建議在開發時將緩存關閉，那就在application.properties文件中加入下面這行吧：spring

spring.thymeleaf.cache=false

3.編寫Controller類。瀏覽器

package com.yws710.springboot.demo1.controller;

import com.yws710.springboot.demo1.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;


@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    UserService userService;

    @RequestMapping("/list2")
    public String userList2(Model model) throws Exception {
        model.addAttribute("hello","Hello, Spring Boot!");
        model.addAttribute("userList", userService.userList());
        return "/user/list2";
    }
}

4.建立Thymeleaf模板文件。在classpath:resources下建立一個名爲templates的文件夾，在templates的子文件夾user中建立一個名爲list2.html的文件。緩存

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <title>用戶列表</title>
    <link href="/css/main.css" rel="stylesheet" />
</head>
<body>
    <h1 th:text="${hello}">Hello, Spring Boot!</h1>
    <table>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>生日</th>
            <th>薪資</th>
        </tr>
        <tr th:each="user : ${userList}">
            <td th:text="${user.id}">0</td>
            <td th:text="${user.name}">zhansan</td>
            <td th:text="${user.birthday}">1988-06-01</td>
            <td th:text="${user.salary}">12345</td>
        </tr>
    </table>

    <select>
        <option th:each="user:${userList}" th:value="${user.id}" th:text="${user.name}">我是默認值</option>
    </select>

</body>
</html>

須要注意的是，模板文件中的全部標籤都須要閉合哦。meta標籤須要這麼寫：<meta charset="UTF-8" />或者<meta charset="UTF-8"></meta>。可是，不免有疏忽的時候，那怎麼辦？使用3版本吧。只須要在pom.xml文件中增長以下代碼：springboot

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <!-- set thymeleaf version -->
        <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    </properties>

這樣就不用擔憂單標籤關閉的問題了，更符合書寫習慣。app

5.啓動項目，查看運行結果：spring-boot

做爲對比，直接在瀏覽器中打開list2.html看看會怎樣？ui

很遺憾，樣式文件沒加載到。模板文件中是這樣寫的：

<link href="/css/main.css" rel="stylesheet" />
可是樣式文件是在classes/static/css中呢。淡淡的憂傷。
使用以下方式便可很好地解決上述問題。

<link href="../../static/css/main.css" th:href="@{/css/main.css}" rel="stylesheet" />

相關標籤/搜索

每日一句

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