JSP模板引擎
了解模板引擎:模板引擎(用于Web开发)是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档。
模板引擎的分类
- 置换型的模板引擎
就是将规定好的文本标记替换为目标内容。这种模板引擎实现简单,除了标签替换之外,很少支持诸如子模板引用、流程控制等功能。置换型模板引擎通常于业务逻辑不是很复杂的项目,比如生成短信、生成电子邮件,甚至有很多代码生成器也在用它。可以说,置换型模板引擎的思想是整个模板引擎界的基础。
- 解释型模板引擎
解释型模板引擎的原理还是标记置换。只不过有了解释器的存在,可以支持更加复杂的标记和语法。
- 编译型模板引擎
它通过解析引擎和一系列的算法将我们定义的模板转换为页面文件,然后直接访问页面文件即可。
JSP的相关概念
JSP的概念
Java Server Page(Java服务器端页面技术,无视了低耦合的要求,但是这也是它的优势所在),是Sun公司指定的一种服务器端动态页面生成技术的规范;
springboot中JSP的配置
#设置tomcat端口号server.port=9999#设置jsp的访问目录spring.mvc.view.prefix=/WEB-INF/jsp/#设置jsp文件以什么后缀结尾spring.mvc.view.suffix=.jsp
JSP的结构
HTML标签+JAVA代码,即在HTML页面中嵌入java代码;
JSP的几种写法
- Java代码片段:
<%java代码片段;%>
- Java代码表达式:
<%=java代码表达式%>
- Java方法:
<%!java的方法%>
三大指令
Page指令:
-
import
:用于导包的,可以一次性导入多个包,中间用逗号隔开,也可以使用多次page指令来进行导包; -
pageEncoding
:告诉JSP引擎,JSP文件保存的时候应该采用的编码格式; -
contentType
:等价于reponse.setContentType()
; -
errorPage
:指向错误处理页面(需要你手动书写错误页面); -
isErrorPage
:可以写true/false,即定义这个页面是否是错误页面,默认是false;注意,这个属性和上面errorPage属性一般是成对出现的,成对并不是指在一个页面都出现。而是指关联着出现。 -
session
:可以写true/false,默认为true,即表示当前页面是否支持session; -
isELIgored
:可以写true/false,表示这个JSP是否支持EL表达式,默认为true;
include指令:
这个指令里面最主要的属性是file,用来表示这个页面要包含哪个页面。
taglib指令:
Taglib指令是定义一个标签库以及其自定义标签的前缀。
九大对象
隐含对象 | 类型 | 说明 |
---|---|---|
request | HttpServletRequest | 代表请求对象 |
response | HttpServletResponse | 代表响应对象 |
out | JSPWriter | 输出的数据流 |
session | HttpSession | 会话 |
application | ServletContext | 全局的Servlet上下文 |
pageContext | PageContext | JSP页面上下文 |
page | Object | 代表JSP页面本身,即this |
config | Servlet Config | Servlet配置对象 |
exception | Throwable | 捕获的页面异常对象 |
七大动作
jsp:include
:在页面被请求的时候引入一个文件。jsp:useBean
:寻找或者实例化一个JavaBean。jsp:setProperty
:设置JavaBean的属性。jsp:getProperty
:输出某个JavaBean的属性。jsp:forward
:把请求转到一个新的页面。jsp:plugin
:根据浏览器类型为Java插件生成OBJECT或EMBED标记。
JSTL介绍
JSTL的概念
JSP标准标签库(JSTL)是一个JSP标签集合,它封装了JSP应用的通用核心功能。JSTL支持通用的、结构化的任务,比如迭代,条件判断,XML文件操作,国际化标签,SQL标签。除了这些,还提供了一个框架来使集成JSTL的自定义标签。
JSTL的分类
- 核心标签库:导入方式:
<%@ taglib prefix="c" url="http://java.sun.com/jsp/jstl/core"%>
标签名称 | 作用 |
---|---|
<c:out> | 用于在JSP中显示数据,就像<%= … > |
<c:set> | 用于保存数据 |
<c:remove> | 用于删除数据 |
<c:catch> | 用来处理产生错误的异常状况,并且将错误信息储存起来 |
<c:if> | 与我们在一般程序中用的if一样 |
<c:choose> | 本身只当做<c:when> 和<c:otherwise> 的父标签 |
<c:when> | <c:choose> 的子标签,用来判断条件是否成立 |
<c:otherwise> | <c:choose> 的子标签,接在<c:when> 标签后,当<c:when> 标签判断为false时被执行 |
<c:forEach> | 用户代替java代码for循环语句 |
<c:forTokens> | 用户迭代操作String字符 |
<c:param> | 给请求路径添加参数 |
<c:url> | 重写url,在请求路径添加sessionid,使用可选的查询参数来创造一个URL |
<c:import> | 检索一个绝对或相对 URL,然后将其内容暴露给页面 |
<c:redirect> | 用于将当前的访问请求转发或重定向到其他资源 |
EL介绍
EL的概念
expression language,主要用来简化JSP中的表达式的代码,可以很方便的以标签的形式来代替jsp中的部分java代码,以提高打码的可读性。语法:${el语法}。
类别 | 标识符 | 描述 |
---|---|---|
JSP | pageContext | 当前页面 |
作用域 | pageScope | 访问在页面范围内的变量 |
requestScope | 访问在请求的 | |
sessionScope | 访问会话 | |
applicationScope | 访问应用范围内的变量 | |
请求参数 | param | param对象用于获取请求参数的值 |
paramValues | 当一个请求参数名对应多个值时 | |
请求头 | header | 按名称存储请求头 |
headerValues | 按请求头的所有值作为String数组存储 | |
Cookie | cookie | 按名称存储请求附带的cookie |
初始化参数 | initParam | 按名称存储Web应用程序上下文初始化参数 |
FreeMarker
FreeMarker是一个模板引擎,是一种基于模板和动态数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。它不是面向最终用户的,而是一个Java类库是一款程序员可以嵌入他们所开发产品的组件。
中文官方文档:http://freemarker.foofun.cn/toc.html
FreeMarker的特点
- 彻底的分离表现层和业务逻辑。
- 性能好,提高了开发效率。
- 使得开发过程中的人员分工更加明确。
- 学习成本低。
- 支持表达式、宏定义(类似jsp标签)。
FreeMarker的基本语法
数据类型
- 标量:标量是最基本,最简单的数值类型,类似于java中的基本数据类型
- 容器:这些值存在的目的是为了包含其他变量,类似于java中的框架
- 子程序:
- 方法和函数
- 用户自定义指令
比较运算符
>(gt)
:大于号,推荐使用gt<(lt)
:小于号,推荐使用lt>=(gte)
:推荐使用gte<=(lte)
- 与java不同freemarker中=和== 一样
空值运算符
-
??
:判断是否为空<#if object.attribute??></#if>
:这将检查对象的属性是否不为null;<#if(object.attribute)??></#if>
:这将检查对象或属性是否不为null;
-
!
:指定缺失变量的默认值,如果不指定则默认值是空字符串、长度为0的序列或者长度为0的Map对象。${aaa!}
:如果aaa变量没定义,不报错,默认没有任何输出;${aaa!'-'}
:如果aaa变量没定义,为空的话,就默认设置该表达式的值为横杠,这里不会为aaa变量赋值${(user.name)!"默认值"}
:如果user或name为null,就输出默认值${user.name!"默认值"}
:如果user为null会报错,如果name为null,就输出默认值
模板中的代码片段
${...}
:FreeMarker将会输出真实的值来替换大括号内表达式,这样的表达式被称为interpolation(插值),FreeMarker中的运算也是在该大括号中进行;- 注释:注释和HTML的注释也很相似,但是使用
<#--and-->
来标识。不像HTML注释那样,FTL注释不会出现在输出中(不出现在访问者的页面中),因为FreeMarker会跳过它们。 - FTL标签(FreeMarker Template Language):FTL标签和HTML标签有一些相似之处,但是他们是FreeMarker的指令,是不会在输出中打印的。这些标签的名字以**#**开头。(用户自定义的FTL标签则需要使用@来代替#)
FreeMarker入门
- 构建一个maven项目(默认模板)
- 导入FreeMarker依赖(maven仓库中)
- 在maven项目的resource目录下构建一个templates目录
- 在templates目录下构建一个welcome的ftl文件并且书写简单的模板内容
- 在src下新建一个package,并且书写加载ftl并且转换其他文件的类
- 构建配置类
- 设置模板存放路径
- 构建数据库模型
- 加载模板文件
- 生成Writer输出流
- 输出文件
- 关流
什么是页面静态化
静态页面
- 静态网页的内容稳定,页面加载速度快。
- 静态网页没有数据库支持,在网站制作和维护方面的工作量较大。
- 静态网页的交互性差,有很大的局限性。
适用场景:
- 高并发、要求用户响应速度快(泛指3s内)。
- 适用于大规模且数据变化不太频繁的页面。
动态网页
- 交互性好。
- 动态网页的信息都需要从数据库中读取,每打开一个页面就需要去获取一次数据库,如果访问人数很多,也就会对服务器增加很大的荷载,从而影响这个网站的运行速度。
内建函数
所谓的内建函数,就是由语法规定存在的函数。这些函数,包含在编译器的运行时库中,程序员不必单独书写代码实现它,只需要调用即可,他们的实现,由该编译器对应的厂商完成。
简单地说,就是不需要引入任何外部资源就可以使用的函数。(可在官方文档查看具体使用方法)
共同特点:都是书写在**?**后面的;都能实现某个功能函数。
Thymeleaf
官方文档:https://www.thymeleaf.org
Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎,能够处 理HTML,XML,JavaScript,CSS甚⾄纯⽂本。
Thymeleaf旨在提供⼀个优雅的、⾼度可维护的创建模板的⽅式。 为了实现这⼀⽬标,Thymeleaf建⽴在⾃然模板的概念上,将其逻辑注⼊到模板⽂件中,不会影响模板设计原型。 这改善了设计的沟通,弥合了设计和开发团队之间的差距。 做到了页面和展示的分离。
Thymeleaf从设计之初就遵循Web标准——特别是HTML5标准 ,如果需要,Thymeleaf允许您创建完全符合HTML5验证标准的模板。
Spring Boot体系内推荐使用Thymeleaf作为前端页面模板,并且Spring Boot 2.0中默认使用Thymeleaf 3.0,性能大幅度提升
Thymeleaf的特点
- Thymeleaf在不管是否连接服务器的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果。
- Thymeleaf开箱即用的特性。它支持标准方言和Spring方言,可以直接套用模板实现JSTL、OGNL表达式效果,避免每天套模板、改JSTL、改标签的困扰。同时开发人员也可以扩展和创建自定义的方言。但是也导致了没有一个标准的语言模板,显得比较杂乱。
- Thymeleaf提供Spring标准方言和一个与SpringMVC完美集成的可选模板,可以快速地实现表单绑定、属性编辑器、国际化等功能。
Thymeleaf的表达式语法
-
${...}
变量表达式:也叫OGNL表达式或者Spring EL表达式,用于调用各种属性和方法- 可以获取对象的属性和方法
- 可以使用
ctx,vars,locale,request,reponse,session,servletContext
内置对象 - 可以使用
dates,numbers,strings,objects,arrays,lists,sets,maps
等内置方法
-
@{...}
链接表达式:不管是静态资源的引用,form表单的请求,凡是链接都可以用@{...}
- 无参:
@{/xxx}
- 有参:
@{/xxx(k1=v1,k2=v2)}
,对应url结构:xxx?k1=v1&k2=v2
- 引入本地资源:
@{/项目本地的资源路径}
- 引入外部资源:
@{/webjars/资源在jar包中的路径}
webjar网站:www.webjar.org
- 无参:
-
#{...}
消息表达式: 用于从消息源中提取消息内容实现国际化- 语法和变量表达式相比多了个获取参数的方式;
- 消息源主要是properties文件
-
{...} 代码块表达式
:把某一段定义好的代码块插入到另外一个页面中,一般用于定义出一套通用的header或者footer- 语法:
~{tmplatenmae::fragmentname}
或者~{tmplatenmae::#id}
,如果省略templatename,它将在当前页面寻找指定的代码块,注意:~{}
可以省略- templatename:模板名,定义模板的写法:
<footer th:fragment="copy">
- fragmentname:片段名,引入模板的写法:
<div th:insert="comm/foot::copy">
- id: HTML的id选择器,使用时要在前面加上#号,不支持class选择器
- templatename:模板名,定义模板的写法:
- 代码块表达式需要配合th属性
(th:insert,th:replace,th:include)
一起使用。th:insert
:将代码块片段整个插入到使用了th:insert
的HTML标签中,th:replace
:将代码块片段整个替换使用了th:replace
的HTML标签中,th:include
:将代码块片段包含的内容插入到使用了th:include
的HTML标签中,
- 语法:
-
*{...}
:选择变量表达式:是另一种类似${...}
,在某些时候,两者是等价的,选择变量表达式在执行时是在选择的对象上求解(使用th:object
来选择对象),而${...}
是在上下文的变量Map上求解。- 两者获取对象里属性的方式
- 两者进行混用的条件
Thymeleaf中的基础对象
#ctx,#vars
:上下文对象(一般用#ctx
)#locale
:区域对象#requst
:(仅Web环境可用)HttpServletRequest对象#response
:(仅Web环境可用)HttpServletResponse对象#session
:(仅Web环境可用)HttpSession对象#servletContext
:(仅Web环境可用)ServletContext对象param
:获取请求的参数session
:访问session属性application
:获取应用程序/servlet上下文
注意: 以上三个不带#的对象,都拥有以下方法:size(),isEmpty,containsKey(),.key()
Thymeleaf中的内联标签
body内的内联
th属性和内联标签的对应关系:
[[...]]
等价于th:text
(结果将被HTML转义)[(...)]
等价于th:utext
(结果不会执行HTML转义)
js里的内联
-
在JavaScript中使用内联标签(默认不支持):
- 在script标签上引入对内联的支持:
<script type="text/javascript"th:inline="javascript">
- 在script标签里书写[[]]、[()]来获取后端数据;
- 在script标签上引入对内联的支持:
-
在JavaScript中实现前后端分离(也称之为JavaScript自然模板):
- Thymeleaf的目标就是希望前后端分离,即同一个Html文件前端人员以静态原型的方式打开时,看到的是它们的内容,而后端人员通过服务器打开时,看到的是动态数据;
- 直接在数据上使用js注释即可实现前后端分离:
var msg=/*[[${name}]]*/'666666'
; - 当在服务器打开该页面时,就会展示
${name}
的值,当在静态打开时,就展示666666
-
在JavaScript中自动进行对象序列化:
- JavaScript内联的一个重要的特性是,内联表达式的计算结果不限于字符串,它能自动的将后台的数据库序列化为javascript对象
js中开启内联标签模式只能在Html文件内部的JavaScript代码,不能在引入的外部JavaScript文件中进行操作;
css里的内联
-
在CSS中使用内联标签(默认不支持):
- 在style标签上引入对内联的支持:
<style th:inline="css">
- 在style标签里书写[[]]、[()]来获取后端数据;
- 在style标签上引入对内联的支持:
-
在CSS中实现前后端分离(也称之为CSS自然模板):
- 与内联JavaScript一样,CSS内联也允许
<style>
标签可以静态和动态地工作,即通过在注释中包含内联表达式作为CSS自然模板。 - 当服务器动态打开时,字体颜色为黄色;当以原型静态打开时,显示是红色,因为Thymeleaf会自动忽略掉CSS注释之后和分号之前的代码。
- 在CSS中,因为CSS自然模板的问题,所以不能在css中像以前一样添加注释,因为Thymeleaf会将它们当作模板进行处理。
- 与内联JavaScript一样,CSS内联也允许
在style标签上引入对内联的支持:<style th:inline="css">
-
在style标签里书写[[]]、[()]来获取后端数据;
-
在CSS中实现前后端分离(也称之为CSS自然模板):
- 与内联JavaScript一样,CSS内联也允许
<style>
标签可以静态和动态地工作,即通过在注释中包含内联表达式作为CSS自然模板。 - 当服务器动态打开时,字体颜色为黄色;当以原型静态打开时,显示是红色,因为Thymeleaf会自动忽略掉CSS注释之后和分号之前的代码。
- 在CSS中,因为CSS自然模板的问题,所以不能在css中像以前一样添加注释,因为Thymeleaf会将它们当作模板进行处理。
与内联JavaScript一样,内联CSS同样只能Html内嵌的
<style>
标签中进行使用,不能在外部关联的CSS文件中进行使用 - 与内联JavaScript一样,CSS内联也允许