回顾:
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页面代码有误.