Thymeleaf的入门

Thymeleaf介绍:
    1.thymeleaf是什么?
    thymeleaf是一个XML/XHTML/HTML5模板引擎,可用于Web与非Web环境中的应用开发。它是一个开源的Java库,
基于Apache License 2.0许可,由Daniel Fernández创建,该作者还是Java加密库Jasypt的作者。Thymeleaf提供
了一个用于整合Spring MVC的可选模块,在应用开发中,你可以使用Thymeleaf来完全代替JSP或其他模板引擎,
如Velocity、FreeMarker等。Thymeleaf的主要目标在于提供一种可被浏览器正确显示的、格式良好的模板创建方式,
因此也可以用作静态建模。你可以使用它创建经过验证的XML与HTML模板。相对于编写逻辑或代码,开发者只需将标签
属性添加到模板中即可。接下来,这些标签属性就会在DOM(文档对象模型)上执行预先制定好的逻辑。
    
    2.thymeleaf入门:
        1.创建工程,添加依赖:
        <?xml version="1.0" encoding="UTF-8"?>
        <project xmlns="http://maven.apache.org/POM/4.0.0"
                 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
            <modelVersion>4.0.0</modelVersion>

            <groupId>com.it</groupId>
            <artifactId>it-thymeleaf</artifactId>
            <version>1.0-SNAPSHOT</version>

            <parent>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-parent</artifactId>
                <version>2.1.4.RELEASE</version>
            </parent>

            <dependencies>
                <!--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>
            </dependencies>


        </project>
        2.在resources下创建templates文件夹,再创建index.html
        注意:要在html中引入约束:
        <!DOCTYPE html>
        <html xmlns:th="http://www.thymeleaf.org">
        <head>
            <meta charset="UTF-8">
            <title>测试入门</title>
        </head>
        <body>
            <h1>欢迎来到首页:<span th:text="${message}"></span></h1>
        </body>
        3.创建Controller类测试:
        package com.it.controller;

        /**
         * ToDo
         *
         * @author Lyle
         * @date 2020/4/11
         */

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

        @Controller
        @RequestMapping("/test")
        public class TestController {

            @RequestMapping("/index")
            public String showIndex(Model model){
                model.addAttribute("message","lyle");
                return "index";
            }
        }
        4.配置文件application.yml:
        spring:
            thymeleaf:
                cache: false # 去除缓存
                
    3.Thymeleaf基本语法:
        1.在Controller测试类中设置Model类型:
             //简单类型: key value
            model.addAttribute("message","lyle");
            //pojo类型:
            Person person = new Person(18, "樱木花道");
            model.addAttribute("person",person);
            //List集合类型:
            ArrayList<Person> list = new ArrayList();
            list.add(new Person(20,"鹰眼米霍克"));
            list.add(new Person(21,"红发香克斯"));
            model.addAttribute("list",list);
            //Map集合类型:
            HashMap<String,Object> map = new HashMap();
            map.put("风清扬","独孤九剑");
            map.put("洪七公","降龙十八掌");
            model.addAttribute("map",map);
            //在请求路径后拼接参数传入到路径后面
            model.addAttribute("id",1);
            model.addAttribute("name","路飞");
            //日期类型:
            model.addAttribute("date",new Date());
                    
        2.在index.html中获取对应的值:
            <body>
                <h4>欢迎来到首页:<span th:text="${message}"></span></h4>
                <br />
                <h4>
                    POJO类型:<br/>
                    用户的信息:<br/>
                    用户名:<span th:text="${person.name}"></span><br/>
                    年龄:<span th:text="${person.age}"></span><br/>
                </h4>
                <hr/>
                <br/>
                <h4>
                    集合List类型:<br/>
                    <table>
                        <tr>
                            <td>name</td>
                            <td>age</td>
                        </tr>
                        <tr th:each="person:${list}">
                            <td th:text="${person.name}"></td>
                            <td th:text="${person.age}"></td>
                        </tr>

                    </table>
                </h4>
                <hr/>
                <div>
                    <div th:each="entry:${map}">
                        <span th:text="${entry.key}"></span>:
                        <span th:text="${entry.value}"></span>
                    </div>
                </div>
                <hr/>
                <a th:href="@{/test/index(id=${id},name=${name})}">点击链接</a>
                
                日期格式化:<span th:text="${#dates.format(date,'yyyy-MM-dd HH:mm:ss')}"></span><br/>
                
                条件判断:
                <div>
                    <div th:if="2>1">吃好吃的</div>
                    <div th:if="2<1">吃清淡的的</div>
                </div>
                
                <br/>
                <button onclick="login()">点点点</button>


            </body>
            <script th:inline="javascript">
                var login=function () {
                    var name=[[${message}]];
                    alert("哈哈哈,"+name+"你上当了...")
                }
            </script>
        

 

posted @ 2020-04-11 11:30  moonlighter  阅读(198)  评论(0编辑  收藏  举报