为什么要使用Tiles框架


大家好,我是IT修真院深圳分院第11期学员,一枚正直善良的JAVA程序员。

今天给大家分享一下,修真院官网JAVA任务4中需要使用的tiles框架


1.背景介绍


Tiles框架就是一种JSP页面复用体系,我们在设计前端jsp页面时,可能会有很多页面重复的地方,在每个页面上都写上相同的代码块,极大的降低了效率,为了解决代码不可复用的问题,Tiles框架应运而生。


所有的网站都有一些共通的东西:所有的网站都是有网页构成,而且它们彼此分享着共通的结构。这些页面有着共通的布局,但是页面和页面之间又有不同的地方,而且不同的地方通常都在同样的位置。



2.知识剖析


在Tiles中,模板是页面的布局部分,每个页面都是由模板文件和碎片文件来组合生成的。

页面头部:存放一个运用的公共信息:logo等,如果是网站可能是最上面的一块。
menu页面菜单:放置一个运用中需要使用的菜单,或者在每一个页面都使用的连接
页面主题内容:每个页面相对独立的内容。
页面尾部:如版权信息等。



3.常见问题


如何配置Tiles框架



4.解决方案


1.添加依赖
tiles-api、tiles-core、tiles-jsp、tiles-servlet、tiles-template
2.在配置文件中加载tiles视图解析器和tiles.xml
3.编写tiles.xml、Controll、JSP(布局文件、tile)



5.编码实战


这是我搭的一个ssm跟tiles框架的整合,按照刚才说的配置过程来说吧

首先是在pom文件添加的5个依赖。

然后是加载tiles视图解析器和tiles.xml,因为是ssm框架,所以最终肯定是要加载到web.xml中的,所以从web.xml开始看

在web.xml中我加载了springMVC.xml,进入文件中看一下

我并没有直接配置在这个xml文件里面,而是通过import标签导入了一个springmvc-servlet.xml的配置文件,进去看一下

可以看到在这个文件里面配置了tiles视图解析器和tiles.xml文件,其实是可以配置到刚才的xml文件中的。我只是为了方便查看,才特意建多一个XML文件。回到刚才的xml文件看一下吧。

可以看到,我是配置到MVC的视图解析器上面的,如果不放在上面是会出问题的,等一下扩展思考再说一下为什么吧。现在还是看一下tiles框架该怎么使用。这些文件已经配置好了,一般是用不到的,直接关掉吧。

现在我们点开使用tiles框架需要用到的几个页面

控制器肯定是需要的,在控制器中,我写了一个方便测试的跳转控制器。一个主页面的控制器,还有3个测试的控制器

跳转页面就是简单的,<a>标签

<p>基本操作</p>
<a href="/test">layout</a><br>
<a href="/test1">Test1</a><br>
<a href="/test2">Test2</a><br>
<p>tiles嵌套</p>
<a href="/test3">Test3</a><br>

然后再打开tiles.xml文件

在tiles.xml文件中我配置了一个模板布局、三个以模板布局为基础的延伸布局,可以看到主布局声明了一个name属性,还有一个模板属性,模板属性指向了一个JSP文件,我们看一下这个JSP文件里面有些什么内容

这个layout.jsp也就是刚才说的模板页面,可以看到他首先是导入了tiles的标签库。然后通过标签库提供的标签设置碎片文件的位置。

我搭的这一个页面布局只是一个简单的 标题、头部、身体、底部的布局。

讲一下这些标签吧

<title><tiles:insertAttribute name="title" ignore="true"/></title>

这个标签是用来设置碎片文件位置的。

name属性是用来跟tiles.xml文件的布局属性作一个关联的

忽略属性是用来忽略关联的,默认是flase,不忽略。这种情况下当布局中的属性没有跟模板页面相对应的属性时是会报错的,设置为true以后,就算没有对应也不会报错。

我们看一下模板页面属性是怎么跟布局属性对应上的

就拿这个name=title的属性来说吧,在主布局中可以看到一个name也是title的属性。所以他在代码运行时是先通过模板布局设置好的路径找到模板页面,然后再根据name找到碎片页面应该放置在模板页面中的位置。

以此类推,我们可以看到其他name对应的属性(头部、身体、底部)。我们再来看一下属性对应的值,标题对应的值是字符串标题,头部对应的值是一个jsp文件

<%@ page contentType="text/html;charset=UTF-8" %>
<p>固定的页面头部</p>

身体的值是空的

底部的值是另外一个jsp文件

<%@ page contentType="text/html;charset=UTF-8" %>
<p>固定的底部</p>

我们看一下访问这个模板布局是个什么情况

可以看到标题部分显示的是标题,头部和底部是按配置好的jsp页面进行显示,身体是空的。

我们看一下控制器是怎么设置返回值的。

//主页面
@RequestMapping(value = "/test",method = RequestMethod.GET)
public String test(){
    return "layout";//返回逻辑视图名
}

在MVC中,我们返回的值是视图的名称,就像这个跳转页面一样返回的home是jsp文件夹下的home.jsp文件。

而在tiles框架中,我们返回的是在tiles.xml中配置的布局名称

所以当访问主布局时,就会显示到中tiles.xml中配置好的布局页面

现在来看一下tiles是怎么实现复用性的,假设一下项目有两个页面,他们头部和底部是一致的,标题和身体是不同的。打开tiles.xml,这边设置了两个测试布局。

这两个测试布局通过延伸这个属性指向了上面配置好的主布局

<!--定义延伸:测试布局1-->
<definition name="test1" extends="layout">
    <put-attribute name="title" value="测试1"/>
    <put-attribute name="body" value="/WEB-INF/jsp/bodyTest1.jsp"/>
</definition>
<!--定义延伸:测试布局2-->
<definition name="test2" extends="layout">
    <put-attribute name="title" value="测试2"/>
    <put-attribute name="body" value="/WEB-INF/jsp/bodyTest2.jsp"/>
</definition>

他们的标题分别是测试1和测试2,身体分别是

<%@ page contentType="text/html;charset=UTF-8" %>
<p>测试1内容</p>

<%@ page contentType="text/html;charset=UTF-8" %>
<p>测试2内容</p>

我们来看一下效果

标题是:测试1

标题是测试2

可以看到这样就实现了固定块的复用

接下来看一下tiles的嵌套,在tiles中所有网页资源都可以视为tiles的碎片。包括字符串

<put-attribute name="title" value="标题"/>

jsp页面

<put-attribute name="header" value="/WEB-INF/jsp/header.jsp"/>

还有布局,嵌套讲的就是在一个布局中嵌套一个布局

在测试布局的body中设置的值指向了测试布局2,我们运行一下

<!--定义延伸:测试布局3-->
<definition name="test3" extends="layout">
    <put-attribute name="title" value="测试3"/>
    <put-attribute name="body" value="test2"/>
</definition>

可以看到在测试布局3中嵌套了测试布局2的内容




6.扩展思考

为什么要把tiles视图解析器放在mvc视图解析器之前

先看一下如果放在mvc视图解析器下面会是个什么情况

运行一下

我们可以看到,跳转控制器是可以找到返回的jsp页面

点击测试1页面,可以看到他报了一个404找不到资源的错误,可以看到他找的是jsp文件夹下的test1.jsp页面


也就是说他是直接通过MVC的视图解析器配置的前缀后缀去找JSP文件,而且不会通过tiles视图解析器去找布局。所以如果遇到404的问题可以看一下配置解析器的位置

<!--使用springioc容器配置视图控制器-->
<bean
    class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass"
        value="org.springframework.web.servlet.view.JstlView" />
    <property name="prefix" value="/WEB-INF/jsp/" />
    <property name="suffix" value=".jsp" />
</bean>



7.参考文献


1、参考资料1:CSDN: https://blog.csdn.net/aosica321/article/details/68948915

2、参考资料2:CSDN:https://blog.csdn.net/chj225500/article/details/7055526


8.更多讨论

今天的分享就到这里啦,欢迎大家提问和探讨!




猜你喜欢

转载自blog.csdn.net/qq_41829464/article/details/80877709