Tiles框架简单介绍

最新推荐文章于 2018-05-19 21:39:27 发布

超超超超超帅耶

最新推荐文章于 2018-05-19 21:39:27 发布

阅读量428

点赞数 1

文章标签： tiles

本文链接：https://blog.csdn.net/weixin_41910244/article/details/80216043

版权

大家好，今天给大家分享一下，Tiles框架

一、Tiles框架作用简介

我们在写网页的时候，经常会遇见多个网页复用同样的代码，比如CSDN的菜单栏，顶部栏等，如果在每个页面中都复制粘贴，虽然说也可以实现要求的网页功能，但是，一是会使代码显得冗杂，二是以后需要修改公共部分的时候，所有使用此公共部分的网页都需要修改，项目少还好，如果是一个大型项目，上千个页面，就会非常麻烦。

而Tiles框架，就是用来解决这个问题的。

二、Tiles框架使用指北

本项目是在SSM框架的基础上进行的，关于SSM框架的搭建，可以参考其他框架。

1.首先需要导入依赖包，其中exclusions标签主要是用于防止jar包冲突的，如果没有jar包冲突可以不加

<dependency>
    <groupId>org.apache.tiles</groupId>
    <artifactId>tiles-extras</artifactId>
    <version>3.0.5</version>
      <exclusions>
        <exclusion>
          <artifactId>slf4j-api</artifactId>
          <groupId>org.slf4j</groupId>
        </exclusion>
         <exclusion>
           <groupId>com.google.guava</groupId>
           <artifactId>guava</artifactId>
         </exclusion>
        <exclusion>
          <groupId>org.springframework</groupId>
          <artifactId>spring-web</artifactId>
        </exclusion>
        <exclusion>
          <groupId>commons-collections</groupId>
          <artifactId>commons-collections</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

2.配置spring-mvc.xml文件中的视图解析器，其中layout.xml为布局文件，放在WEB-INF文件夹下

<!--tiles需要的视图解析器，优先级设置为1-->
    <bean id="tilesViewResolver" class="org.springframework.web.servlet.view.tiles3.TilesViewResolver" p:order="1"/>
    <bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer">
        <property name="definitions">
            <list>
                <value>/WEB-INF/layout.xml</value>
            </list>
        </property>
    </bean>

注意这里原本是有一个默认的视图解析器的，而我将tiles的视图解析器的优先级设置为p:order="1",则此解析器优先级最高，会最先匹配，所以如果返回的视图名存在同名的情况，会优先匹配layout.xml中名字。

3.创建layout.xml，其和web.xml放在同一目录下，主要是存放tiles的整体布局

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE tiles-definitions PUBLIC
        "-//Apache Software Foundation//DTD Tiles Configuration 3.0//EN"
        "http://tiles.apache.org/dtds/tiles-config_3_0.dtd">
<tiles-definitions>
    <!-- 主布局 ，下面的项目继承此主布局-->
    <definition name="layout" template="/WEB-INF/views/mainLayout.jsp">
        <put-attribute name="header" value="/WEB-INF/views/header.jsp" />
        <!--注意这个body就是我们需要复用的部分，所以设置为空-->
        <put-attribute name="body" value=""/>
        <put-attribute name="footer1" value="/WEB-INF/views/footer1.jsp" />
    </definition>
    <!-- 主布局 -->
    <!-- 项目1 ,继承主布局，插入单独的body-->
    <definition name="page01" extends="layout">
        <put-attribute name="body" value="/WEB-INF/views/homepage.jsp" />
    </definition>
    <!--项目1-->
    <!--项目2-->
    <definition name="page02" extends="layout">
        <put-attribute name="body" value="/WEB-INF/views/profession.jsp" />
    </definition>
    <!--项目2-->
    <!--项目3-->
    <definition name="page03" extends="layout">
        <put-attribute name="body" value="/WEB-INF/views/recommend.jsp" />
    </definition>
    <!--项目3-->
</tiles-definitions>

注意其中各个东西代表的意义和串联的其他文件的对应关系

主布局名：layout 对应子项目继承的项目

下面就是各个布局分文件，其中value中为空的就是需要改变的地方，其他就是固定复用的地方

分项目名：page01/02/03对应了controller中返回的视图名称，后面为继承的主布局

下面的就是每个不一样的body部分，后面跟着其对应的文件，会将此文件插入到主布局的空缺中，然后作为整个jsp返回到浏览器上

注意不要只局限于header/body/footer这三个，其实还有很多比如menu/title都是可以复用的

4.编写mainLayout.xml文件，其主要用来存放项目的主布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"  %>
<%--c标签--%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--tiles标签--%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%--<!DOCTYPE html>--%>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>技能树首页</title>
    <link rel="stylesheet/less" type="text/css" href="../../less/task15.less">
    <script src="../../less.js-2.5.3/dist/less.min.js" type="text/javascript"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<%--这里的header和footer不能删，否则就只显示中间的body--%>
<header id="header">
    <tiles:insertAttribute name="header" />
</header>
<section id="site-content">
    <tiles:insertAttribute name="body" />
</section>

<footer id="footer">
    <tiles:insertAttribute name="footer1" />
</footer>
</body>

</html>

注意上面是引入css和js文件，如果没有可以不用写

然后按照你布局的格式，安排各个部分的内容，我这里是header，body和footer1。

然后这里是必须要写header和footer1的，不能说主布局中安排过了header和footer，只需要就body就只安排body，否则页面返回的就只有Body,可以理解为此时layout.xml中的是提供一个寻找header和footer1对应具体jsp的视图作用

5.编写简单的header.jsp/body.jsp/footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Title</title>
</head>
<body>
大家好我是头部
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Title</title>
</head>
<body>
我是推荐页
</body>
</html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8" import="java.util.*" isELIgnored="false"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<title>Title</title>
</head>
<body>
大家好，我是脚部
</body>
</html>

6.在controller中设置转到此view的方法

@RequestMapping(value="/recommend")
public String listPage3()throws Exception{
return "page03";
}

注意，这里的page03是项目名，也就是layout.xml中的page03，因为在spring-mvc.xml设置了tiles这个解析器为第一优先级，所以，会先在layout.xml中寻找有没有page03这个页面，如果有，就进入，将page03的body带入到layout主布局中文件mainLayout.jsp中，其中header和footer都是对应位置的jsp文件

7.运行

当进入recommend的url后，就会跳转到对应的controller中，然后返回page03的视图到layout.xml去寻找此项目，再在mainLayout.jsp中加入指定的body——recommend.jsp，最后返回mainLayout.jsp到浏览器

至此，简单的tiles框架运用就结束，大家可以试验一下，去掉其中的几步动作会如何。

8.流程总结

我们在地址栏输入方法url后——到controller层寻找对应方法——进入方法中，返回对应视图名——到优先最高的tiles的视图解析器中寻找返回的page03——在layout.xml中找到了继承自layout的page03——将page03对应的body放进主视图mainLayout.jsp中——处理对应的jsp，将其返回到浏览器，就是我们看到的页面

今天的分享就到这了，希望大家多多指正，互相学习~

超超超超超帅耶

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Tiles框架简单介绍

大家好，今天给大家分享一下，Tiles框架一、Tiles框架作用简介我们在写网页的时候，经常会遇见多个网页复用同样的代码，比如CSDN的菜单栏，顶部栏等，如果在每个页面中都复制粘贴，虽然说也可以实现要求的网页功能，但是，一是会使代码显得冗杂，二是以后需要修改公共部分的时候，所有使用此公共部分的网页都需要修改，项目少还好，如果是一个大型项目，上千个页面，就会非常麻烦。而Tiles框架，就...
复制链接

扫一扫