SpringBoot - 07整合Thymeleaf

Posted on 2020-12-14 20:20 Kingdomer 阅读(115) 评论(0) 收藏举报

SpringBoot - 07整合Thymeleaf

（1）Thymeleaf介绍

Thymeleaf的主要目标是将优雅的自然模板带到开发工作流程中，并将HTML在浏览器中正确显示，并且可以作为静态原型，让开发团队能更容易地协作。
Thymeleaf能够处理HTML、XML、JavaScript、CSS甚至纯文本。
Thymeleaf是原生的，不依赖于标签库。它能够在接受原始HTML的地方进行编辑和渲染。因为Thymeleaf没有与Servlet规范耦合，因此Thymeleaf模板能够进入jsp所无法涉足的领域。

（2）Thymeleaf基本使用

（2.1）修改POM文件，添加依赖

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

（2.2）创建Controller

    @GetMapping("/show01")
    public String showPage(Model model){
        model.addAttribute("msg","Hello SpringBoot!!!");
        return "index01";
    }

（2.3）创建视图 index01.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>BEAR PX</title>
</head>
<body>
    <span th:text="BEAR_PX">NEW</span>
    <hr>
    <span th:text="${msg}"></span>
</body>
</html>

（2.4）测试

（3）Thymeleaf语法

命名空间： xmlns:th="http://www.thymeleaf.org"

（3.1）字符串与变量输出操作

th:text 在页面中输出值; <span th:text="${msg}"></span>
th:value 可以将一个值放入到input标签的value中 <input th:value="${msg}">

    <input value="${msg}">
    <br/>
    <input th:value="${msg}">

（3.2）字符串操作

Thymeleaf提供了一些内置对象，内置对象可直接在模板中使用。这些对象是以#引用的。

（3.2.1）使用内置对象语法

引用内置对象需要使用#。大部分内置对象的名称都以s结尾。如strings、numbers、dates。

${#strings.isEmpty(msg)} ：判断字符串是否为空，为空返回true，否则返回false。
${#strings.contains(msg,'T')} ：判断字符串是否包含指定的子串，包含返回true，否则返回false
${#strings.length(msg)} ：返回字符串长度
${#strings.indexOf(msg,'h')} ：查找子串的位置，并返回子串的下标，未找到返回-1
${#strings.substring(msg,2)} ：截取子串，与JDK String类的SubString方法相同
${#strings.substring(msg,2,5)}：截取[2,5)范围的子串
${#strings.toUpperCase(msg)}
${#strings.toLowerCase(msg)}

    <span th:text="${#strings.isEmpty(msg)}"></span>           // flase
    <span th:text="${#strings.length(msg)}"></span>            // 19
    <span th:text="${#strings.contains(msg,'H')}"></span>      // true
    <span th:text="${#strings.indexOf(msg,'pr')}"></span>      // 7
    <span th:text="${#strings.substring(msg,2)}"></span>       // llo SpringBoot!!!  
    <span th:text="${#strings.substring(msg,2,8)}"></span>     // llo Sp
    <span th:text="${#strings.toUpperCase(msg)}"></span>       // HELLO SPRINGBOOT!!!

（3.3）日期格式化处理

${#dates.format(key)} 格式化日期，默认是以浏览器默认语言为格式化标准
${#dates.format(key, 'yyyy/MM/dd')} 按照自定义格式做日期转换
${#dates.year(key)}
${#dates.month(key)}
${#dates.day(key)}

    <span th:text="${date}"></span>                                 //Sun Dec 20 21:40:09 CST 2020
    <span th:text="${#dates.format(date)}"></span><br/>             //2020年12月20日 下午09时40分09秒
    <span th:text="${#dates.format(date,'yyyy/MM/dd')}"></span>     //2020/12/20
    <span th:text="${#dates.year(date)}"></span>                    //2020
    <span th:text="${#dates.month(date)}"></span>                   //12
    <span th:text="${#dates.day(date)}"></span>                     //20

（3.4）条件判断

th:if 条件判断
th:switch/th:case 与Java中switch语句等效，有条件地显示匹配的内容。如果有多个匹配结果只选择第一个显示。
- th:case="*" 表示Java中switch的default，即没有case的值为true时则显示 th:case="*"的内容。

    <div>
        <span th:if="${sex} == 'F'">
            性别： 男
        </span>
        <span th:if="${sex} == 'M'">
            性别： 女
        </span>
    </div>
    <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>
        <span th:case="*">ID为*</span>
    </div>

    @GetMapping("/show01")
    public String showPage(Model model){
        model.addAttribute("msg","Hello SpringBoot!!!");
        model.addAttribute("date", new Date());
        model.addAttribute("sex","F");
        model.addAttribute("id","*");
        return "index01";
    }

（3.5）迭代遍历

th:each 迭代器，用于循环迭代集合
th:each状态变量
- index：当前迭代器的索引，从0开始
- count：当前迭代对象的计数，从1开始
- size：被迭代对象的长度
- odd/even：布尔值，当前循环是否是偶数/奇数，从0开始
- first：布尔值，当前循环的是否是第一条，是返回true，否返回false
- last：布尔值，当前循环的是否是最后一条，是返回true，否返回false

        List<User> listUsers = new ArrayList<>();
        listUsers.add(new User("admin","F",23));
        listUsers.add(new User("root","M",25));
        listUsers.add(new User("app","F",27));
        listUsers.add(new User("mali","M",28));
        model.addAttribute("listUsers",listUsers);

    <table border="1" width="50%">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>Index</th>
            <th>Count</th>
            <th>Size</th>
            <th>Odd</th>
            <th>Even</th>
            <th>First</th>
            <th>Last</th>
        </tr>
        <tr th:each="u, state : ${listUsers}">
            <td th:text="${u.userName}"></td>
            <td th:text="${u.sex}"></td>
            <td th:text="${u.age}"></td>
            <td th:text="${state.index}"></td>
            <td th:text="${state.count}"></td>
            <td th:text="${state.size}"></td>
            <td th:text="${state.odd}"></td>
            <td th:text="${state.even}"></td>
            <td th:text="${state.first}"></td>
            <td th:text="${state.last}"></td>
        </tr>
    </table>

结果：

（3.6）th:each迭代Map

        Map<String, User> mapUsers = new HashMap<>();
        mapUsers.put("user1",new User("admin","F",23));
        mapUsers.put("user2",new User("root","M",25));
        mapUsers.put("user3",new User("mali","M",28));
        model.addAttribute("mapUsers",mapUsers);

   <table border="1" width="50%">
        <tr>
            <th>Name</th>
            <th>Sex</th>
            <th>Age</th>
            <th>Key</th>
        </tr>
        <tr th:each="m : ${mapUsers}">
            <td th:text="${m.value.userName}"></td>
            <td th:text="${m.value.sex}"></td>
            <td th:text="${m.value.age}"></td>
            <td th:text="${m.key}"></td>
        </tr>
    </table>

（3.7）操作域对象

HttpServletRequest/HttpSession/ServletContext

        // 操作域对象
        request.setAttribute("req","HttpServletRequest2020");
        request.getSession().setAttribute("ses","HttpSession2020");
        request.getSession().getServletContext().setAttribute("app","application2020");

    HttpServletRequest: <span th:text="${#request.getAttribute('req')}"></span>
                        <span th:text="${#httpServletRequest.getAttribute('req')}"></span><br/>
    HttpSession: <span th:text="${session.ses}"></span>
                 <span th:text="${#httpSession.getAttribute('ses')}"></span><br/>
    HttpApplication: <span th:text="${application.app}"></span>
                     <span th:text="${#servletContext.getAttribute('app')}"></span><br/>

（3.8）URL表达式

（3.8.1）语法格式： @{}

绝对路径： <a th:href="@{http://www.baidu.com}">打开百度</a>
相对路径：
- <a th:href="@{/show2}">打开Index2</a> 相对于当前项目的根
- <a th:href="@{~/project2/resourcename}"> 相对于服务器路径的根</a> 访问同一个tomcat 下其他项目的服务

    @GetMapping("/show2")
    public String show2(){
        return "index2";
    }

    <a th:href="@{http://www.baidu.com}">打开百度</a>
    <a th:href="@{/show2}">打开Index2</a>

（3.8.2）在URL中传递参数

    @GetMapping("/show3")
    public String show3(String id, String name){
        System.out.println(id +"\t"+name);
        return "index3";
    }

    <a th:href="@{/show3?id=1&name=admin}">普通URL传递参数方法一</a>
    <a th:href="@{/show3(id=2,name=root)}">普通URL传递参数方法二</a>
    <hr>
    <a th:href="@{'/show3?id='+${id}+'&name='+${name}}">普通URL传递参数方法三</a>
    <a th:href="@{/show3(id=${id},name=${name})}">普通URL传递参数方法四</a>

        // 传参数
        model.addAttribute("id","99");
        model.addAttribute("name","malili");

（3.8.3）在Restful格式的URL中传递参数

    <a th:href="@{/show4/{id}(id=200)}">restful格式传递参数方式一</a>
    <a th:href="@{/show5/{id}/{name}(id=200,name=kali)}">restful格式传递参数方式二</a>

    @GetMapping("/show4/{id}")
    public String show4(@PathVariable String id){
        System.out.println(id);
        return "index3";
    }
    @GetMapping("/show5/{id}/{name}")
    public String show5(@PathVariable String id,@PathVariable String name){
        System.out.println(id +"\t"+name);
        return "index3";
    }

    <a th:href="@{/show6/{id}(id=299,name=cent)}">restful格式传递参数方式三</a>
    <a th:href="@{/show6/{id}(id=${id},name=${name})}">restful格式传递参数方式四</a>

    @GetMapping("/show6/{id}")
    public String show6(@PathVariable String id, String name){
        System.out.println(id +"\t"+name);
        return "index3";
    }

（4）配置文件中配置Thymeleaf

spring.thymeleaf.prefix=classpath:/templates/aa/
spring.thymeleaf.suffix=.html
spring.thymeleaf.mode=HTML               # 配置视图模板类型，如果视图模板使用的是html5需要配置
spring.thymeleaf.encoding=utf-8
spring.thymeleaf.servlet.content-type=text/html   # 响应类型

spring.thymeleaf.cache=false

index4.html 放在 resources/templates/aa/下

    @GetMapping("/show7")
    public String show7(){
        return "index4";
    }

刷新页面返回顶部

我的运维笔记

SpringBoot - 07整合Thymeleaf

SpringBoot - 07整合Thymeleaf

（1）Thymeleaf介绍

（2）Thymeleaf基本使用

（2.1）修改POM文件，添加依赖

（2.2）创建Controller

（2.3）创建视图 index01.html

（2.4）测试

（3）Thymeleaf语法

（3.1）字符串与变量输出操作

（3.2）字符串操作

（3.3）日期格式化处理

（3.4）条件判断

（3.5）迭代遍历

（3.6）th:each迭代Map

（3.7）操作域对象

（3.8）URL表达式

（3.8.1）语法格式： @{}

（4）配置文件中配置Thymeleaf