SpringBoot整合Thymeleaf

在介绍Thymeleaf前，说一下为什么JSP为什么会被淘汰。

jsp的不足之处

有几个原因，一般公司都是会有UI设计，前端开发，后端开发。

前端将页面写好提供给后端使用的时候，你后端使用jsp，需要修改html的后缀为jsp后缀，并且，后端还会使用上el表达式，C标签之类的。这样，你做修改，前端和后端就会很麻烦。要么是前端要多了解一下jsp，要么就是后端做很大的改动。

jsp其实在java中也是属于servlet。因为jsp会编译成servlet，编译成class文件，后端才能识别使用。

jsp依赖web容器。不能单纯的打开。

介绍Thymeleaf

Thymeleaf是用于Web和独立环境的现代服务器端Java模板引擎。

Thymeleaf的主要目标是将优雅的自然模板带到您的开发工作流程中—HTML能够在浏览器中正确显示，并且可以作为静态原型，从而在开发团队中实现更强大的协作。Thymeleaf能够处理HTML，XML，JavaScript，CSS甚至纯文本。

Thymeleaf的主要目标是提供一个优雅和高度可维护的创建模板的方式。为了实现这一点，它建立在自然模板的概念之上，以不影响模板作为设计原型的方式将其逻辑注入到模板文件中。这改善了设计沟通，弥合了前端设计和开发人员之间的理解偏差。

Thymeleaf也是从一开始就设计(特别是HTML5)允许创建完全验证的模板。

开始整合Thymeleaf

pom.xml

        <!-- web启动器-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!-- thymeleaf依赖包-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

Controller

package com.kevin.controller;

import com.kevin.model.Users;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import java.util.*;

/**
 * @author kevin
 * @version 1.0
 * @description     springboot整合Thymeleaf的案例
 * @createDate 2019/3/14
 */
@Controller
public class DemoController {

    /**
     * Thymeleaf中的字符串案例
     * 访问地址     http://localhost:8080/show
     * @param model
     * @return
     */
    @RequestMapping("/show")
    public String showInfo(Model model){
        model.addAttribute("msg","Thymeleaf第一个案例");
        model.addAttribute("key", new Date());  // 测试日期
        return "string";
    }

    /**
     * Thymeleaf中的条件判断
     * 访问地址     http://localhost:8080/show2
     * @param model
     * @return
     */
    @RequestMapping("/show2")
    public String showInfo2(Model model){
        model.addAttribute("sex", "女");
        model.addAttribute("id","1");
        return "ifAndSwitch";
    }

    /**
     * Thymeleaf中遍历List
     * 访问地址     http://localhost:8080/show3
     * @param model
     * @return
     */
    @RequestMapping("/show3")
    public String showInfo3(Model model){
        List<Users> list = new ArrayList<>();
        list.add(new Users(1,"张三",20));
        list.add(new Users(2,"李四",22));
        list.add(new Users(3,"王五",24));
        model.addAttribute("list", list);
        return "listEach";
    }

    /**
     * Thymeleaf中遍历Map
     * 访问地址     http://localhost:8080/show4
     * @param model
     * @return
     */
    @RequestMapping("/show4")
    public String showInfo4(Model model){
        Map<String, Users> map = new HashMap<>();
        map.put("u1", new Users(1,"张三",20));
        map.put("u2", new Users(2,"李四",22));
        map.put("u3", new Users(3,"王五",24));
        model.addAttribute("map", map);
        return "mapEach";
    }

    /**
     * Thymeleaf中获取作用域中的对象
     * 访问地址     http://localhost:8080/show5
     * @param model
     * @return
     */
    @RequestMapping("/show5")
    public String showInfo5(HttpServletRequest request, Model model){
        request.setAttribute("req", "HttpServletRequest");
        request.getSession().setAttribute("sess", "HttpSession");
        request.getSession().getServletContext().setAttribute("app", "Application");
        return "request";
    }

    @RequestMapping("/{page}")
    public String showInfo(@PathVariable String page, Integer id, String name){
        System.out.println(id+"--"+name);
        return page;
    }
}

实体类

package com.kevin.model;

/**
 * @author kevin
 * @version 1.0
 * @description
 * @createDate 2019/3/14
 */
public class Users {
    private Integer userid;
    private String username;
    private Integer userage;
    public Integer getUserid() {
        return userid;
    }
    public void setUserid(Integer userid) {
        this.userid = userid;
    }
    public String getUsername() {
        return username;
    }
    public void setUsername(String username) {
        this.username = username;
    }
    public Integer getUserage() {
        return userage;
    }
    public void setUserage(Integer userage) {
        this.userage = userage;
    }
    public Users(Integer userid, String username, Integer userage) {
        super();
        this.userid = userid;
        this.username = username;
        this.userage = userage;
    }
    public Users() {
        super();
    }

}

启动类

package com.kevin;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author kevin
 * @version 1.0
 * @description     springboot整合Thymeleaf
 * @createDate 2019/3/14
 */
@SpringBootApplication
public class ThymeleafApplication {

    public static void main(String[] args) {
        SpringApplication.run(ThymeleafApplication.class,args);
    }
}

ifAndSwitch.html，使用if语句和switch语句

<!DOCTYPE html>
<html  xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<span th:if="${sex} == '男'">
		性别：男
	</span>
<span th:if="${sex} == '女'">
		性别：女
	</span>
<hr/>
<div th:switch="${id}">
    <span th:case="1">ID为1</span>
    <span th:case="2">ID为2</span>
    <span th:case="3">ID为3</span>
</div>
</body>
</html>

listEach.html，遍历list

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>

<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Index</th>
        <th>Count</th>
        <th>Size</th>
        <th>Even</th>
        <th>Odd</th>
        <th>First</th>
        <th>lase</th>
    </tr>
    <tr th:each="u,var : ${list}">
        <td th:text="${u.userid}"></td>
        <td th:text="${u.username}"></td>
        <td th:text="${u.userage}"></td>
        <td th:text="${var.index}"></td>
        <td th:text="${var.count}"></td>
        <td th:text="${var.size}"></td>
        <td th:text="${var.even}"></td>
        <td th:text="${var.odd}"></td>
        <td th:text="${var.first}"></td>
        <td th:text="${var.last}"></td>
    </tr>
</table>
</body>
</html>

mapEach.html，遍历map

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="maps : ${map}">
        <td th:text="${maps}"></td>
    </tr>
</table>
<th/>
<table border="1">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr th:each="maps : ${map}">
        <td th:each="entry:${maps}" th:text="${entry.value.userid}" ></td>
        <td th:each="entry:${maps}" th:text="${entry.value.username}"></td>
        <td th:each="entry:${maps}" th:text="${entry.value.userage}"></td>
    </tr>
</table>
</body>
</html>

page.html，页面跳转

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Page...Show</title>
</head>
<body>
Show Page
</body>
</html>

request.html，获取作用域对象

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    Request:<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
    Session:<span th:text="${session.sess}"></span><br/>
    Application:<span th:text="${application.app}"></span>
</body>
</html>

string.html，简单操作string

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Thymeleaf中的字符串案例</title>
</head>
<body>
    <span th:text="hello"></span>
    <hr/>
    <span th:text="${msg}"></span>
    <hr/>
    <input type="text" name="username" th:value="${msg}" />
    <hr/>
    <span th:text="${#strings.isEmpty(msg)}"></span>
    <span th:text="${#strings.contains(msg,'9')}"></span>
    <span th:text="${#strings.contains(msg,'T')}"></span>
    <hr/>
    <span th:text="${#strings.startsWith(msg,'a')}"></span>
    <span th:text="${#strings.startsWith(msg,'T')}"></span>
    <hr/>
    <span th:text="${#strings.endsWith(msg,'a')}"></span>
    <span th:text="${#strings.endsWith(msg,'案例')}"></span>
    <hr/>
    <span th:text="${#strings.length(msg)}"></span>
    <hr/>
    <span th:text="${#strings.indexOf(msg,'h')}"></span>
    <hr/>
    <span th:text="${#strings.substring(msg,13)}"></span>
    <span th:text="${#strings.substring(msg,13,14)}"></span>
    <hr/>
    <span th:text="${#strings.toUpperCase(msg)}"></span>
    <span th:text="${#strings.toLowerCase(msg)}"></span>
    <hr/>
    <span th:text="${#dates.format(key)}"></span>
    <hr/>
    <span th:text="${#dates.format(key,'yyy/MM/dd')}"></span>
    <hr/>
    <span th:text="${#dates.year(key)}"></span>-
    <hr/>
    <span th:text="${#dates.month(key)}"></span>-
    <hr/>
    <span th:text="${#dates.day(key)}"></span>

</body>
</html>