模板引擎

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指令是定义一个标签库以及其自定义标签的前缀。

九大对象

隐含对象类型说明
requestHttpServletRequest代表请求对象
responseHttpServletResponse代表响应对象
outJSPWriter输出的数据流
sessionHttpSession会话
applicationServletContext全局的Servlet上下文
pageContextPageContextJSP页面上下文
pageObject代表JSP页面本身,即this
configServlet ConfigServlet配置对象
exceptionThrowable捕获的页面异常对象

七大动作

  • 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语法}。

类别标识符描述
JSPpageContext当前页面
作用域pageScope访问在页面范围内的变量
requestScope访问在请求的
sessionScope访问会话
applicationScope访问应用范围内的变量
请求参数paramparam对象用于获取请求参数的值
paramValues当一个请求参数名对应多个值时
请求头header按名称存储请求头
headerValues按请求头的所有值作为String数组存储
Cookiecookie按名称存储请求附带的cookie
初始化参数initParam按名称存储Web应用程序上下文初始化参数

FreeMarker

FreeMarker是一个模板引擎,是一种基于模板和动态数据,并用来生成输出文本(HTML网页,电子邮件,配置文件,源代码等)的通用工具。它不是面向最终用户的,而是一个Java类库是一款程序员可以嵌入他们所开发产品的组件。

中文官方文档:http://freemarker.foofun.cn/toc.html

FreeMarker的特点

  1. 彻底的分离表现层和业务逻辑。
  2. 性能好,提高了开发效率。
  3. 使得开发过程中的人员分工更加明确。
  4. 学习成本低。
  5. 支持表达式、宏定义(类似jsp标签)。

FreeMarker的基本语法

数据类型

  • 标量:标量是最基本,最简单的数值类型,类似于java中的基本数据类型
  • 容器:这些值存在的目的是为了包含其他变量,类似于java中的框架
  • 子程序:
    1. 方法和函数
    2. 用户自定义指令

比较运算符

  • >(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并且转换其他文件的类
    1. 构建配置类
    2. 设置模板存放路径
    3. 构建数据库模型
    4. 加载模板文件
    5. 生成Writer输出流
    6. 输出文件
    7. 关流

什么是页面静态化

静态页面
  • 静态网页的内容稳定,页面加载速度快。
  • 静态网页没有数据库支持,在网站制作和维护方面的工作量较大。
  • 静态网页的交互性差,有很大的局限性。

适用场景

  • 高并发、要求用户响应速度快(泛指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表达式,用于调用各种属性和方法

    1. 可以获取对象的属性和方法
    2. 可以使用ctx,vars,locale,request,reponse,session,servletContext内置对象
    3. 可以使用dates,numbers,strings,objects,arrays,lists,sets,maps等内置方法
  • @{...}链接表达式:不管是静态资源的引用,form表单的请求,凡是链接都可以用@{...}

    1. 无参:@{/xxx}
    2. 有参:@{/xxx(k1=v1,k2=v2)},对应url结构:xxx?k1=v1&k2=v2
    3. 引入本地资源:@{/项目本地的资源路径}
    4. 引入外部资源:@{/webjars/资源在jar包中的路径}webjar网站:www.webjar.org
  • #{...}消息表达式: 用于从消息源中提取消息内容实现国际化

    1. 语法和变量表达式相比多了个获取参数的方式;
    2. 消息源主要是properties文件
  • {...} 代码块表达式:把某一段定义好的代码块插入到另外一个页面中,一般用于定义出一套通用的header或者footer

    • 语法:~{tmplatenmae::fragmentname}或者~{tmplatenmae::#id},如果省略templatename,它将在当前页面寻找指定的代码块,注意:~{}可以省略
      1. templatename:模板名,定义模板的写法:<footer th:fragment="copy">
      2. fragmentname:片段名,引入模板的写法:<div th:insert="comm/foot::copy">
      3. id: HTML的id选择器,使用时要在前面加上#号,不支持class选择器
    • 代码块表达式需要配合th属性(th:insert,th:replace,th:include)一起使用。
      1. th:insert:将代码块片段整个插入到使用了th:insert的HTML标签中,
      2. th:replace:将代码块片段整个替换使用了th:replace的HTML标签中,
      3. th:include:将代码块片段包含的内容插入到使用了th:include的HTML标签中,
  • *{...}:选择变量表达式:是另一种类似${...},在某些时候,两者是等价的,选择变量表达式在执行时是在选择的对象上求解(使用th:object来选择对象),而${...}是在上下文的变量Map上求解。

    1. 两者获取对象里属性的方式
    2. 两者进行混用的条件

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标签里书写[[]]、[()]来获取后端数据;
  • 在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标签里书写[[]]、[()]来获取后端数据;
  • 在CSS中实现前后端分离(也称之为CSS自然模板):

    • 与内联JavaScript一样,CSS内联也允许<style>标签可以静态和动态地工作,即通过在注释中包含内联表达式作为CSS自然模板。
    • 当服务器动态打开时,字体颜色为黄色;当以原型静态打开时,显示是红色,因为Thymeleaf会自动忽略掉CSS注释之后和分号之前的代码。
    • 在CSS中,因为CSS自然模板的问题,所以不能在css中像以前一样添加注释,因为Thymeleaf会将它们当作模板进行处理。

在style标签上引入对内联的支持:<style th:inline="css">

  • 在style标签里书写[[]]、[()]来获取后端数据;

  • 在CSS中实现前后端分离(也称之为CSS自然模板):

    • 与内联JavaScript一样,CSS内联也允许<style>标签可以静态和动态地工作,即通过在注释中包含内联表达式作为CSS自然模板。
    • 当服务器动态打开时,字体颜色为黄色;当以原型静态打开时,显示是红色,因为Thymeleaf会自动忽略掉CSS注释之后和分号之前的代码。
    • 在CSS中,因为CSS自然模板的问题,所以不能在css中像以前一样添加注释,因为Thymeleaf会将它们当作模板进行处理。

    与内联JavaScript一样,内联CSS同样只能Html内嵌的<style>标签中进行使用,不能在外部关联的CSS文件中进行使用

  • 4
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值