zoukankan      html  css  js  c++  java
  • 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>
            
  • 相关阅读:
    四、K8S
    三、kubernetes环境搭建(实践)
    二、K8S镜像问题
    一、linux扩展
    十、docker扩展
    二、kubernetes环境搭建
    一、Composer
    一、权限控制-过滤器
    二、kubernetes
    【2019-06-28】客观认知
  • 原文地址:https://www.cnblogs.com/lyle-liu/p/12678420.html
Copyright © 2011-2022 走看看