发表于： 2020-07-21 22:41:46
1 1139
导入依赖
<!-- https://mvnrepository.com/artifact/org.apache.tiles/tiles-extras -->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.8</version>
</dependency>
<!-- https://mvnrepository.com/artifact/javax.servlet/jstl -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
<version>1.2</version>
</dependency>
<!--定义tiles视图解析器-->
<bean id="tilesConfigurer" "org.springframework.web.servlet.view.tiles3.TilesConfigurer">
<property name="definitions">
<list>
<value>/tiles/layout.xml</value>
</list>
</property>
</bean>
<bean "org.springframework.web.servlet.view.tiles3.TilesViewResolver" p:order="1"/>
<?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="/view/mainLayout.jsp">
</definition>
<!-- 主布局 -->
<!-- 项目 -->
<definition name="myView" extends="layout">
<put-attribute name="a" value="/view/a.jsp" />
<put-attribute name="b" value="/view/b.jsp" />
</definition>
<!--项目-->
</tiles-definitions>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles" %>
<%@ taglib uri="http://tiles.apache.org/tags-tiles-extras" prefix="tilesx" %>
<div>
<tiles:insertAttribute name="a" />
<tiles:insertAttribute name="b" />
</div>
head.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="css/t11.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div "top container">
<p "hidden-xs">客服热线：010-594-78634</p>
<img src="../imges/12321.gif">
</div>
<div role="navigation" "nav1 navbar navbar-default">
<div "container">
<div "header-logo">
<div "logo-middle"><img src="../imges/logo.png"></div>
</div>
<div "navbar-header marginTop">
<button data-target="#example-navbar-collapse" data-toggle="collapse" "navbar-toggle" type="button">
<span "sr-only">切换导航</span>
<span "icon-bar"></span>
<span "icon-bar"></span>
<span "icon-bar"></span>
</button>
</div>
<div id="example-navbar-collapse" " collapse navbar-collapse">
<ul "nav navbar-nav">
<a href="/home"><li>首 页</li></a>
<a href="/profession"><li>职 业 </li></a>
<a href=""><li>推 荐</li></a>
<a href=""><li>关 于</li></a>
</ul>
</div>
</div>
</div>
</header>
</body>
</html>
body.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport" charset="UTF-8">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="css/t11.css" rel="stylesheet" type="text/css">
<link href="css/base.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer "footer">
<div "container height">
<div "row">
<div "text-left col-sm-4">
<span>技能树 — 改变你我</span>
<p "bottom">关于我们 | 联系我们 | 合作企业</p>
</div>
<div "text-center col-sm-4">
<p>旗下网站</p>
<span>草船云孵化器 最强IT特训营</span>
<span>葡萄藤轻游戏 桌游精灵</span>
</div>
<div "text-right col-sm-4">
<p>微信公众号</p>
<img src="../imges/2524.jpg">
</div>
</div>
</div>
<div "footer-bottom">
Copyright © 2015技能树 www.jnshu.com All Rights Reserved | 京ICP
</div>
</footer>
</body>
</html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="../bootstrap-3.3.5-dist/css/bootstrap.css">
<link href="css/Untitled-3.css" rel="stylesheet" type="text/css">
<link href="css/Untitled-1base.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="myCarousel" "carousel slide">
<ol "carousel-indicators">
<li "active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
<li data-slide-to="3" data-target="#myCarousel"></li>
</ol>
<div "carousel-inner">
<div "item active">
<img alt="First slide" src="imges/547567.jpg">
</div>
<div "item">
<img alt="Second slide" src="imges/547567.jpg">
</div>
<div "item">
<img alt="Third slide" src="imges/547567.jpg">
</div>
<div "item">
<img alt="Third slide" src="imges/547567.jpg">
</div>
<a data-slide="prev" href="#myCarousel" "carousel-control left">
<i "icon-left"><img src="imges/54354.png"></i>
</a>
<a data-slide="next" href="#myCarousel" "carousel-control right">
<i "icon-right"><img src="imges/4525424.png"></i>
</a>
</div>
</div>
<div "main container">
<!--第一部分开始-->
<div "main-a row">
<div "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div "row text-center">
<ul "list-unstyled">
<li "col-xs-12 up-1">
<img alt="" src="imges/45354312.png">
</li>
<li "up-2 col-xs-12">高效</li>
<li "up-3 col-xs-12">将三到七年的成长时间,缩短到一年到两年</li>
</ul>
</div>
</div>
<div "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div "row text-center">
<ul "list-unstyled">
<li "col-xs-12 up-1">
<img alt="" src="imges/879789.png">
</li>
<li "up-2 col-xs-12">规范</li>
<li "up-3 col-xs-12">标准到实战教程,不会走弯路</li>
</ul>
</div>
</div>
<div "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div "row text-center">
<ul "list-unstyled">
<li "col-xs-12 up-1">
<img alt="" src="imges/786453654365.png">
</li>
<li "up-2 col-xs-12">人脉</li>
<li "up-3 col-xs-12">同班好友,同院学长,技术大师,入学就混职脉圈,为以后铺平道路</li>
</ul>
</div>
</div>
<div "col-xs-12 col-sm-6 col-md-6 col-lg-3 text-center">
<p>
<img src="imges/453254312.png">${count}<br>
<span "up-3">累计在线学习人数</span>
</p>
<p>
<img src="imges/453254312.png">${number}<br>
<span "up-3">学员已经找到满意工作</span>
</p>
</div>
</div>
<!--第二部分开始-->
<div "main-b row">
<h3 "text-center main-tab">如何学习</h3>
<ul "list-unstyled text-center">
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">1</span>
<p "up-2">匹配你现在的个人情况寻找适合自己的岗位</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">2</span>
<p "up-2">了解职业前景薪金待遇，竞争压力等</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">3</span>
<p "up-2">掌握行业内顶级技能</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">4</span>
<p "up-2">查看职业目标任务</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">5</span>
<p "up-2">参考学习资料，掌握技能点，逐个完成任务</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">6</span>
<p "up-2">加入班级，和小伙伴们互帮互动，一块学习</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">7</span>
<p "up-2">选择导师，一路引导，加速自己成长</p>
<span "up-3"></span>
</li>
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<span "up-1 text-center">8</span>
<p "up-2">完成职业 技能，升级业界大牛</p>
<span "up-3 invisible"></span>
</li>
</ul>
</div>
<!--第三部分开始-->
<div "main-c row">
<h3 "text-center main-tab">优秀学员展示</h3>
<ul "list-unstyled text-center">
<c:forEach begin="0" end="3" var="i">
<li "col-xs-12 col-sm-6 col-md-6 col-lg-3">
<div>
<img src="${studentlist.get(i).img}" width="100" height="100"/>
<span>${studentlist.get(i).position}:${studentlist.get(i).name}</span>
<p "text-left">${studentlist.get(i).profession}：${studentlist.get(i).intro}</p>
</div>
</li>
</c:forEach>
</ul>
</div>
<!--第四部分开始-->
<div "row main-bottom">
<h3 "text-center">战略合作企业</h3>
<div "col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul "logo">
<li>
<a href=""><img src="imges/123132.png"></a>
</li>
<li>
<a href=""> <img src="imges/1549865.png"></a>
</li>
<li>
<a href=""> <img src="imges/785345.png"></a>
</li>
<li>
<a href=""> <img src="imges/1471.png"></a>
</li>
<li>
<a href=""> <img src="imges/7861.png"></a>
</li>
</ul>
</div>
</div>
</div>
<div "main-e">
<h3 "text-center main-tab ">友情链接</h3>
<div "container">
<ul "text-justify">
<li><a href="#">手机软件</a></li>
<li><a href="#">教师招聘</a></li>
<li><a href="#">找工作</a></li>
<li><a href="#">教师招聘</a></li>
<li><a href="#">找工作</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">教师招聘</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">找工作</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">教师招聘</a></li>
<li><a href="#">找工作</a></li>
<li><a href="#">教师招聘</a></li>
<li><a href="#">找工作</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">教师招聘</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">手机软件</a></li>
<li><a href="#">找工作</a></li>
</ul>
</div>
</div>
</body>
</html>
controller
@RequestMapping(value = "home",method = RequestMethod.GET)
public String getIndex(Model model){
List<Student> studentList = studentService.selectStudent();
Integer count = studentService.selectByLearning();
Integer number = studentService.selectByWorking();
model.addAttribute("studentlist",studentList);
model.addAttribute("count",count);
model.addAttribute("number",number);
return "myView";
}
@RequestMapping(value = "profession",method = RequestMethod.GET)
public String getProfession(Model model){
List<Profession> professionsList = professionService.selectProfession();
model.addAttribute("profession",professionsList);
return "myView2";
}
完成
最早的Tiles是组装在Struts1.1里面的，主要目的是为了将复杂的jsp页面作为一个的页面的部分机能，然后用来组合成一个最终表示用页面用的，这样的话，便于对页面的各个机能的变更及维护。现在Tiles已经作为一个Apache独立的开源项目维护着。
所有的网站都有一些共通的东西：所有的网站都是有网页构成，而且它们彼此分享着共通的结构。这些页面有着共通的布局，但是页面和页面之间又有不同的地方，而且不同的地方通常都在同样的位置。
通常的来说一个页面大概可以划分为如下几块：
head页面头部：存放一个应用的公共信息：logo等，如果是网站可能是最上面的一块。
menu页面菜单：放置一个应用中需要使用的菜单，或者在每一个页面都使用的连接。
footer页面尾部：如版权信息等。
body页面主题内容：每个页面相对独立的内容。
我们的所有页面，按上面的划分，每一个页面我们只要写body里面的内容，其他的就可以共享重用。既然大多数页面的布局基本相同我们甚至可以使用一个jsp文件根据不同的参数调用不同的body，其余相同的部分直接重用即可。
【如何使用tiles框架】：
先引入jar包：
<!--tiles框架配置 start-->
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-extras</artifactId>
<version>3.0.5</version>
</dependency>
<dependency>
<groupId>org.apache.tiles</groupId>
<artifactId>tiles-jsp</artifactId>
<version>3.0.5</version>
</dependency>
写核心配置文件：
tiles.xml
<?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="base" template="/WEB-INF/jsp/page.jsp">
<put-attribute name="title" value="首页"/>
<put-attribute name="header" value="/WEB-INF/jsp/header.jsp"/>
<put-attribute name="footer" value="/WEB-INF/jsp/footer.jsp"/>
<put-attribute name="body" value=""/>
</definition>
<!--继承模块-->
<definition name="home" extends="base">
<put-attribute name="title" value="首页"/>
<put-attribute name="body" value="/WEB-INF/jsp/home.jsp"/>
</definition>
<!--继承模块-->
<definition name="profession" extends="base">
<put-attribute name="tittle" value="职业介绍"/>
<put-attribute name="body" value="/WEB-INF/jsp/profession.jsp"/>
</definition>
<!--继承模块-->
<definition name="welcome" extends="base">
<put-attribute name="tittle" value="欢迎界面"/>
<put-attribute name="body" value="index.jsp"/>
</definition>
</tiles-definitions>
可以从配置文件中看到
程序被分成了几个模块
header、body、footer
模板template.jsp页面，需要进行tiles的各组成部分的声明，代码如下：
<head>
<title>
<tiles:insertAttribute name="title"/>
</title>
</head>
<header>
<tiles:insertAttribute name="header" />
</header>
<main>
<tiles:insertAttribute name="body" />
</main>
<footer>
<tiles:insertAttribute name="footer"/>
</footer>
最后再编写各个模块指定的jsp文件就可以了
【总结】
tiles框架就是把原来的大段大段的jsp文件分成几个模块，并且如果另外一个或几个页面都用到了相同的头部和尾部，或者菜单，tiles可以复用配置好的header、footer，而不用在jsp中再重写一遍。大大增加了工作效率，修改的时候也比较方便。
今日问题 暂无
返回列表
评论