• Thymeleaf


    java模板引擎,能够处理HTML,XML,JavaScript,CSS甚至是纯文本。类似于JSP和Freemarker,

    作用就是把各个用户的公用的东西(页面)做一个提取,然后再根据不同的数据对页面进行渲染

    自然模板,原型即页面。

    语法优雅易懂,支持这两种OGNL,SpringEL编码方式

    遵循Web的标准,支持HTML5

    1. Thymeleaf介绍
    2. Thymeleaf的特点:
    动静结合:
    开箱即用:
    - 用来开发Web和独立环境项目的现代服务器端Java模板引擎。
    - 目标:
      为开发带来优雅的自然模板 - HTML。
      可以在直接浏览器中直接显示,并且可以作为静态原型,从而在开发团队中实现更强大的协作。
    Thymeleaf是现代HTML5 Web开发的理想选择。
    Spring官方支持的服务的渲模板中,并没有JSP,而是Thymeleaf和Freemarker等,而
    Thymeleaf与SpringMVC的视图技术以及SpringBoot的自动化配置集成的非常完美,几乎没有任
    何成本,我们只需要关注一下Thymeleaf的语法即可。
    Thymeleaf是一种模板语言(模板引擎)。那模板语言或模板引擎是什么?
    常见的模板语言都包含以下几个概念:
    数据(Data)。
    模板(Template)。
    模板引擎(Template Engine)。
    结果文档(Result Documents)。
    -数据
    数据是信息的表现形式和载体,可以是符号、文字、数字、语音、图像、视频等。
    数据本身没有意义,数据只有对实体行为产生影响时才成为信息。
    -模板
      是一个与类型无关的类。
      编译器在使用模板时,会根据模板实参对模板进行实例化,得到一个与类型相关的类。
    -模板引擎
    这里特指用于Web开发的模板引擎;
    是为了让把用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档;
    用于网站的时候模板引擎就会生成一个标准的HTML文档。
    -结果文档
    一种特定格式的文档,比如用于网站的模板引擎就会生成一个标准的HTML文档。
        Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态
    效果,也可以让程序员在服务器查看带数据的动态页面效果。
        这是由于它支持html原型,然后在html标签里增加额外的属性来达到“模板+数据”的展示方
    式。浏览器解释html时会忽略未定义的标签属性,所以Thymeleaf的模板可以静态地运行;当有数
    据返回到页面时,Thymeleaf标签会动态地替换掉静态内容,使页面动态显示。多方言支持:
    与SpringBoot完美整合:
    3. 常用语法
    3.1 链接表达式 @{}
    3.2 变量表达式:${}
    Thymeleaf通过${}来获取model中的变量。
    在页面的使用方式
    3.3 选择表达式 *{}
    它提供标准和Spring标准两种方言,可以直接套用模板实现JSTL、 OGNL表达式效果,避免每
    天套模板、改jstl、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。
    它提供Spring标准方言和一个与SpringMVC完美集成的可选模块,可以快速的实现表单绑定、属性
    编辑器、国际化等功能。
    SpringBoot提供了Thymeleaf的默认配置,并且为Thymeleaf设置了视图解析器,我们可以
    像以前操作jsp一样来操作Thymeleaf。
    <link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
    @Controller
    public class UserController {
     @RequestMapping("queryUser")
     public String queryUser(Model model) {
    User user = new User(1, "张三", 20);
    model.addAttribute("user", user);
    return "index";
    }
    }
    <span th:text="${user.name}">默认值</span>
    <span th:text="${user['name']}">默认值</span>下面使用form和表格两种方式展示使用方式
    3.4 循环 th:each
    页面中
    使用方法:通过th:object获取对象,然后使用th:xx="*{}"获取对象属性值。
    <form th:object="${user}">
     <input name="id" th:value="*{id}"/>
     <input name="name" th:value="*{name}"/>
     <input name="age" th:value="*{age}"/>
    </form>
    <table>
     <tr>
       <td>id</td>
       <td>名字</td>
       <td>年龄</td>
     </tr>
     <tr th:object="${user}">
       <td><span th:text="*{id}"></td>
       <td><span th:text="*{name}"></td>
       <td><span th:text="*{age}"></td>
     </tr>
    </table>
    @Controller
    public class UserController {
     @RequestMapping("queryUser")
     public String queryUser(Model model) {
    User user2 = new User(2, "lisi", 22);
    User user3 = new User(3, "Jack", 23);
    User user4 = new User(4, "Jhon", 24);
    List<User> userList = new ArrayList<User>();
    userList.add(user2);
    userList.add(user3);
    userList.add(user4);
    model.addAttribute("userList", userList);
    return "index";
    }
    }注意:stat对象包含以下属性:
    index,从0开始的角标
    count,元素的个数,从1开始
    size,总元素个数
    current,当前遍历到的元素
    even/odd,返回是否为奇偶,boolean值
    first/last,返回是否为第一或最后,boolean值
    3.5 JS中使用模板数据
    3.6 get请求传参
    <table>
     <tr>
       <td>id</td>
       <td>名字</td>
       <td>年龄</td>
       <td>操作</td>
     </tr>
     <tr th:each="user,stat:${userList}">
       <td><span th:text="${user.id}"></td>
       <td><span th:text="${user.name}"></td>
       <td><span th:text="${user.age}"></td>
     </tr>
    </table>
    <script th:inline="javascript">
    var user = [[${user}]];
    console.log("name:" + user.name);
     var contextPath = [[${#httpServletRequest.getContextPath()}]];
    // var contextPath = [[${#request.getContextPath()}]];
    // alert("contextPath-->" +contextPath);
    </script>
    <a th:href="@{/hello(name=test,k2=v2)}">get传参</a>
  • 相关阅读:
    P2525 Uim的情人节礼物·其之壱
    prev_permutation()
    P1634 禽兽的传染病
    P1615 西游记公司
    P1888 三角函数
    __gcd()函数
    P4325
    unique函数
    vscode C++开发环境配置教程(教你如何用vscode写C++)
    codeforces-C. News Distribution-2019.5.15
  • 原文地址:https://www.cnblogs.com/liuqingzhong/p/14096993.html
Copyright © 2020-2023  润新知