day60:thymeleaf

回顾:
1.restful风格
2.软件开发流程:15步
3.根据原型图抽接口,编写接口文档.
4.根据原型图抽数据表(数据存取方便),编写数据库字典文档.

今天内容
1.为什么要使用模板引擎:可以让(网站)程序实现界面与数据分离,业务代码与逻辑代码的分离,这就大大 提升了开发效率,良好的设计也使得代码重用变得更加容易。

2.什么是模板引擎:模板引擎(这里特指用于Web开发的模板引擎)是为了使用户界面与业务数据(内容)分 离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文 档。

3.常用的模板引擎有:Thymeleaf、Velocity、Freemarker几款主流模板.

4.为什么使用thymeleaf:传统的jsp本质上还是java代码,没有很好的做到前后端分离.
而thymeleaf有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面 的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。这是由于它 支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示 方式。浏览器解释 html 时会忽略未定义的标签属性,所以 thymeleaf 的模板 可以静态地运行;当有数据返回到页面时,Thymeleaf 标签会动态地替换掉静态 内容,使页面动态显示。
所以spring boot底层默认使用thymeleaf.

4.thymeleaf:是一个XML/XHTML/HTML5模板引擎,用于展示数据和生成基于文本的文件,也是Spring Boot 官 方推荐的Java模版引擎框架,其文件扩展名为.html。它还提供一个模块用于与Spring MVC 集成作为视图层使用。

5.thymeleaf的使用步骤:
第一步:导入依赖包:

			<!--thymeleaf依赖包-->
  <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf</artifactId>
      <version>3.0.11.RELEASE</version>
  </dependency>
  <dependency>
      <groupId>org.thymeleaf</groupId>
      <artifactId>thymeleaf-spring5</artifactId>
      <version>3.0.11.RELEASE</version>
  </dependency>

第二步:在springmvc的配置文件的视图解析器前面配置

		<!--配置thymeleaf模板解析器-->
<bean name="templateResolver" class="org.thymeleaf.spring5.templateresolver.SpringResourceTemplateResolver">
    <!--前缀配置
    <property name="prefix" value="/"></property>-->
    <!--后缀配置
    <property name="suffix" value=".html"></property>-->
    <!--模板类型-->
    <property name="templateMode" value="HTML"></property>
    <!--编码类型-->
    <property name="characterEncoding" value="utf-8"></property>
    <!--不使用缓存-->
    <property name="cacheable" value="false"></property>
</bean>
<!--模板引擎配置-->
<bean name="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
    <property name="templateResolver" ref="templateResolver"></property>
</bean>
<!--视图解析器-->
<bean class="org.thymeleaf.spring5.view.ThymeleafViewResolver">
    <property name="templateEngine" ref="templateEngine"></property>
    <property name="characterEncoding" value="utf-8"></property>
</bean>

	第三步:在html页面中引入名称空间才能用
		<!--名称空间-->
		<html lang="en" xmlns:th="http://www.thymeleaf.org">

6.thymeleaf常用th属性
注意:idea对表达式默认是要检查的,生成注释,报红线.
关闭idea对thymeleaf的表达式的检查:
在这里插入图片描述

	eg:<!DOCTYPE html>
<!--配置名称空间-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--thymeleaf中th:text使用-->
    <p th:text="${thText}"/>

    <!--thymeleaf中th:utext使用-->
    <p th:utext="${thUtext}"/>

    <!--thymeleaf中th:value使用-->
    <input type="text" th:value="${thValue}"/>

    <!--thymeleaf中th:each使用,循环div-->
    <div th:each="s:${thEach}">
        <p th:text="${s}"/>
    </div>

    <!--thymeleaf中th:each使用,循环p,(推荐)-->
    <div>
        <p th:text="${s2}" th:each="s2:${thEach}"/>
    </div>

    <!--thymeleaf中th:if使用-->
    <p th:text="${thIf}" th:if="${not #strings.isEmpty(thIf)}"></p>

    <!--thymeleaf中th:object使用-->
    <div th:object="${stu}">
        <p>姓名:<span th:text="*{sname}"/></p>
        <p>年龄:<span th:text="*{sage}"></span></p>
    </div>

    <div>学生姓名:
    <span th:text="${stu.sname}"/>
    </div>

    <!--thymeleaf中th:-->
    <div th:switch="${role}">
        <p th:case="student">学生角色</p>
        <p th:case="teacher">老师角色</p>
    </div>
</body>
</html>

7.thymeleaf标准表达式语法

7.1:${…} 变量表达式,Variable Expressions
7.1.1:可以获取对象的属性和方法
7.1.2:可以使用ctx(上下文),varsctx(上下文),locale(当前地区),request,response, session,servletContext内置对象

7.2:@{…} 链接表达式,Link URL Expressions 无参: @{/xxx} 有参: @{/xxx(k1=v1,k2=v2)} 对应url结构: xxx?k1=v1&k2=v2 引入本地资源: @{/项目本地的资源路径}
引入外部资源: @{/webjars/资源在jar包中的路径} 列举:第三部分的实战引用会详细使用该表达式
7.3:#{…} 消息表达式,Message Expressions 消息表达式一般用于国际化的场景。结构: th:text="#{msg}" 。 会在第三部分的实战详细介绍。

7.4:~{…} 代码块表达式,Fragment Expressions 语法:推荐: ~{templatename::fragmentname} 支持: ~{templatename::#id}
注意:模版名,Thymeleaf会根据模版名解析完整路径:/resources/templates/templatename.html,
对应前端的web-inf文件夹下.要注意文件的路径要放在WEB-INF下面。

		eg:/WEB-INF/test2.html
				<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--代码块-->
    <footer th:fragment="f1">
        我是千锋人,我爱千锋
    </footer>

    <footer th:fragment="f2">
        我是中国人
    </footer>
</body>
</html>


				/WEB-INF/test3.html
				<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>代码块表达式的使用</title>
</head>
<body>
    <!--thymeleaf中th:insert使用,将footer标签及内容全部引入到当前div中-->
    <div th:insert="~{test2::f1}"></div>

    <!--thymeleaf中th:replace使用,将footer标签及内容替换当前div-->
    <div th:replace="~{test2::f2}"></div>

    <!--thymeleaf中th:include使用,将footer标签中内容引入当前div中-->
    <div th:include="~{test2::f1}"></div>
</body>
</html>

7.5:*{…} 选择变量表达式,Selection Variable Expressions

	eg:<!--thymeleaf中th:object使用-->
<div th:object="${stu}">
    <p>姓名:<span th:text="*{sname}"/></p>
    <p>年龄:<span th:text="*{sage}"></span></p>
</div>

8.内置方法:
8.1:dates
8.2:numbers
8.3:strings
8.4:objects
8.5:arrays
8.6:lists
8.7:sets
8.8:maps

	eg:<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>thymeleaf内置方法的使用</title>
</head>
<body>
    <!--8.1:dates-->
    <div>dates日期方法的使用</div>
    <div>
        <p>今天的日期为:<span th:text="${
     
     #dates.format(today,'yyyy-MM-dd HH:mm:ss')}" /></p>
        <p>年:<span th:text="${
     
     #dates.year(today)}"/></p>
        <p>月:<span th:text="${
     
     #dates.month(today)}"/></p>
        <p>日:<span th:text="${
     
     #dates.day(today)}"/></p>
        <p>毫秒:<span th:text="${
     
     #dates.millisecond(today)}"/></p>
    </div>

    <!--8.2:numbers-->
    <div>numbers数据方法的使用</div>
    <div>
        <p>保留两位小数:<span th:text="${
     
     #numbers.formatDecimal(num,0,2)}"/></p>
    </div>

    <!--8.3:strings-->
    <div>strings字符串方法的使用</div>
    <div>
        <p>获得字符串的长度:<span th:text="${
     
     #strings.length(str1)}"/></p>
    </div>

    <!--8.5:arrays-->
    <div>arrays数组工具类方法的使用</div>
    <div>
        <p>判断一个数组中是否包含某个元素:<span th:text="${
     
     #arrays.contains(arr1,22)}" /></p>
    </div>

    <!--8.6:lists-->
    <div>lists集合方法的使用</div>
    <div >
        <p>对排好序的list集合进行遍历:<span th:text="${s1}" th:each="s1:${
     
     #lists.sort(alist1)}"/></p>
    </div>

    <!--8.7:sets-->
    <div>sets集合方法的使用</div>
    <div>
        <p>set集合中元素个数:<span th:text="${
     
     #sets.size(bset1)}"/></p>
    </div>

    <!--8.8:maps-->
    <div>maps集合方法的使用</div>
    <div>
        <p>判断map集合中是否包含某个value值:<span th:text="${
     
     #maps.containsValue(cmap1,'刚哥')}"/></p>
    </div>
</body>
</html>

9.注意:thymeleaf页面的th:xx能加载出来,前提条件是thymeleaf模板引擎及视图解析起用,而目前thymeleaf 的模板引擎及视图解析配置在springmvc的配置文件中,所以只有经过springmvc请求,thymeleaf模 板引擎及视图解析才能加载,才能识别跳转后的thymeleaf页面的th:xx.
注意:用thymeleaf模板跳转出异常报500,可能是路径错了,可能thymeleaf页面代码有误.

猜你喜欢

转载自blog.csdn.net/qq_44949002/article/details/121668304
今日推荐