ssm框架下 tiles框架的使用

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

tiles框架的工作在springMVC工作流程中属于视图解析器解析视图这一步。算是视图解析器的一个插件，作了视图解析这步的一部分工作。

1. 加maven依赖引入 jar包：

                <!-- 页面布局 --><dependency><groupId>org.apache.tiles</groupId><artifactId>tiles-jsp</artifactId><version>3.0.5</version></dependency>

2. 在 spring-servlet.xml 中加入配置：

<!-- tiles 标签  --><bean id="tilesConfigurer" class="org.springframework.web.servlet.view.tiles3.TilesConfigurer"><property name="definitions"><list><value>/WEB-INF/tiles/tiles-definitions.xml</value></list></property></bean>

3. 书写如配置中取名的 tiles-definitions.xml 文件，并放到对应的 /WEB-INF/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> <!-- Default 主布局 --> <definition name="defaultTemplate" template="/WEB-INF/jsps/common/layout.jsp"> <put-attribute name="title" value="布局页" type="string" /></definition>
</tiles-definitions>

4. layout.jsp就是主布局页面，可以把公用的js、css的引用写在这个页面，子页面就不用再重复引入了。

我的布局是左侧为导航页面，右侧为每个功能页面。

在对应位置书写layout.jsp 页面：

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<% String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%><!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>"/>
<title><tiles:insertAttribute name="title" /></title>  <!-- 主布局页面 --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- Bootstrap -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- 引入自定义的样式等内容 -->
<tiles:insertAttribute name="heads" />
</head><body class="nav-md"><div class="container body" ><div class="main_container"><!-- 功能菜单界面 --><jsp:include page="nav.jsp"></jsp:include><!-- /功能菜单界面 --><!-- 当前页面内容 --><div class="right_col" role="main"><tiles:insertAttribute name="body" /></div><!-- /当前页面内容 --></div></div><!-- jQuery -->
<script charset="utf-8" src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script charset="utf-8" src="js/bootstrap.min.js"></script><tiles:insertAttribute name="scripts" />
</body>
</html><!-- 主布局页面 --><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><!-- Bootstrap -->
<link href="css/bootstrap/css/bootstrap.min.css" rel="stylesheet"><!-- 引入自定义的样式等内容 -->
<tiles:insertAttribute name="heads" />
</head><body class="nav-md"><div class="container body" ><div class="main_container"><!-- 功能菜单界面 --><jsp:include page="nav.jsp"></jsp:include><!-- /功能菜单界面 --><!-- 当前页面内容 --><div class="right_col" role="main"><tiles:insertAttribute name="body" /></div><!-- /当前页面内容 --></div></div><!-- jQuery -->
<script charset="utf-8" src="js/jquery.min.js"></script>
<!-- Bootstrap -->
<script charset="utf-8" src="js/bootstrap.min.js"></script><tiles:insertAttribute name="scripts" />
</body>
</html>

5. 导航页面nav.jsp书写：

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<% String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<base href="<%=basePath%>"/>  <!-- 导航页面 --><div class="col-md-3 left_col"><div class="left_col scroll-view"><div class="navbar nav_title" style="border: 0;"><a href="/" class="site_title"><i class="fa fa-paw"></i><span>小熊乐园 V0.1</span></a></div><div class="clearfix"></div><!-- 登录人员信息 --><div class="profile"><div class="profile_pic"><img src="data:images/img.jpg" alt="..." class="img-circle profile_img"></div><div class="profile_info"><span>欢迎您：</span><h2><shiro:principal property="account"/></h2></div></div><br /><!-- 系统功能菜单 --><div id="sidebar-menu" class="main_menu_side hidden-print main_menu"><div class="menu_section"><h3><shiro:principal property="roleDesc"/></h3><ul class="nav side-menu"><shiro:hasPermission name="love:menu"><li><a><i class="fa fa-male"></i>完美生活<span class="fa fa-chevron-down"></span></a><ul class="nav child_menu"><shiro:hasPermission name="love:list"><li><a href="/loveList">爱的告白</a></li><li><a href="/feeling">心情印记</a></li></shiro:hasPermission></ul></shiro:hasPermission><shiro:hasPermission name="ad:menu"><li><a><i class="fa fa-bullhorn"></i>浅浅人生<span class="fa fa-chevron-down"></span></a><ul class="nav child_menu"><shiro:hasPermission name="adFlow:list"><li><a href="/adLife">默默心语</a></li></shiro:hasPermission></ul></li></shiro:hasPermission><shiro:hasPermission name="system:menu"><li><a><i class="fa fa-cog"></i>系统管理<span class="fa fa-chevron-down"></span></a><ul class="nav child_menu"><shiro:hasPermission name="systemAuth:menu"><li><a>系统权限<span class="fa fa-chevron-down"></span></a><ul class="nav child_menu"><shiro:hasPermission name="systemAuthRes:list"><li class="sub_menu"><a href="/systemAuthRes">权限资源</a></li></shiro:hasPermission><shiro:hasPermission name="systemAuthRole:list"><li class="sub_menu"><a href="/systemAuthRole">权限角色</a></li></shiro:hasPermission></ul></li></shiro:hasPermission><shiro:hasPermission name="systemAdmin:list"><li><a href="/systemAdmin">管理人员</a></li></shiro:hasPermission></ul></li></shiro:hasPermission></ul></div></div><!-- /menu footer buttons --><div class="sidebar-footer hidden-small">         <!-- /logout ：退出功能访问路径是在spring-shiro.xml中配置的，由shiro执行 ，不走controller --><a data-toggle="tooltip" data-placement="top" title="退出" href="/logout"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></a></div><!-- /menu footer buttons --></div>
</div><!-- jQuery -->
<script charset="utf-8" src="js/jquery.min.js"></script>省略...
<script type="text/javascript">
</script>  省略...
<script type="text/javascript">
</script>

6. 功能页面书写：

<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>
<% String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<base href="<%=basePath%>"/>  <tiles:insertDefinition name="defaultTemplate"><tiles:putAttribute name="title" value="心情印记时光轴" /><tiles:putAttribute name="heads"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>时光轴</title><style>
/*          *{margin:0;padding:0} */.box{width:960px;height:300px;margin:100px auto;position:relative;z-index:1;} body{font-size:14px;font-family:"微软雅黑"; background-attachment:fixed;z-index:0;}.box{margin:1px auto;position:relative;z-index:1;}/*内容发布区域*/.box .boxcenter{width:500px;height:200px;background:#4e8f86;position:absolute;top:80px;left:180px;border:1px solid green;border-radius:6px;}.box .boxcenter .boxc_t{height:30px;line-height:30px;color:gold;}.box .boxcenter .boxc_c{width:460px;height:100px;border:1px solid #A6C8FF;margin:8px auto;text-indent:10px;box-shadow:0 0 4px #A6C8FF;}.box .boxcenter .boxc_b{width:80px;height:30px;position:absolute;right:10px;bottom:8px;}.box .boxcenter .boxc_b a{font-size:14px;color:#fff;line-height:30px;background:#3bbfb4;border-radius:6px;display:block;text-align:center;text-decoration:none;}.box .boxcenter .boxc_b a:hover{background:#2C8E86;}.box .timeline{width:60px;height:100%;position:absolute;top:100px;left:80px;border-right:3px solid yellow;}.timeline .timeline_t{width:50px;height:50px;border-radius:50%;border:2px solid white;background:url("images/day_yuan.gif") no-repeat;background-size:100%;}.timeline .nextbox{width:380px;height:80px;position:absolute;top:260px;left:60px;}.a{width:380px;height:80px;background:#4e8f86;border-radius:6px;margin-top:30px;font-size:16px;line-height:20px;text-indent:20px;word-break:break-all;position:relative;left:6px;}.a .b{width:6px;height:6px;border-radius:50%;border:2px solid #fff;background:#9DCFE1;position:absolute;top:35px;left:-10px;}#time{font-size:20px;color:gold;}#hour{font-size:12px;color:gold;}</style></tiles:putAttribute><tiles:putAttribute name="body"><div class="box" style="width:100%;height:100%;background-image: url(images/record_back.jpg);"><!--内容发布区域--><div class="boxcenter" ><div class="boxc_t"><h4>   随便说点什么吧...</h4></div><div class="boxc_c" contenteditable="true" id="aa" style="color:black;font-size:19px;"></div><div class="boxc_b"><a>发布</a></div></div><!--时光轴线--><div class="timeline"><div class="timeline_t"></div><div class="nextbox" style="color:black;font-size:19px;"></div></div></div></tiles:putAttribute><tiles:putAttribute name="scripts"><script type="text/javascript" src="js/jquery-1.11.2.min.js"></script><script type="text/javascript"> $(function(){$(".box").find(".boxc_b").click(function(){var center = $(".boxc_c").text();//.appendTo("nextbox");if(center==""){alert("嘻嘻，请写下你此时的心情吧...");return;}$(".nextbox").prepend("<div class='a'>"+"<div class='b'></div>"+"<br/>"+"<span id='time'>  "+year+"-"+month+"-"+day+"  "+"<span id='hour'>"+hour+":"+min+"</span>"+"</span>"+"<br>"+"<p style='padding:4px'>"+center+"</p>"+"</div>");$(".boxc_c").text("");  });//alert(1);$(".boxc_c").keydown(function(event){                   var len =$(".boxc_c").text().length;         if(len > 70){alert("够了，别写了，哪儿那么多话啊...");                 }});var dateDom = new Date();//获取本地时间，年月日时分var year = dateDom.getFullYear();var month = dateDom.getMonth()+1;var day = dateDom.getDate();var hour = dateDom.getHours();var min = dateDom.getMinutes();});</script></tiles:putAttribute>
</tiles:insertDefinition>

ssm框架下 tiles框架的使用相关推荐

Net框架下-ORM框架LLBLGen的简介（转载）
Net框架下-ORM框架LLBLGen的简介 http://www.cnblogs.com/huashanlin/archive/2015/02/12/4288522.html 官方网址:http:/ ...
ZUI + SSM框架下数据表格的使用
完成一个小项目,后端为SSM框架,前端使用了ZUI框架,下面记录了如何使用zui框架下的datagrid组件来实现传统页面下 1.加载数据 2.关键字搜索 3.按照字段排序 4.全选常用功能的实现, ...
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后对数据库的更新问题
SSM框架下对信息执行修改操作时的信息弹窗回显以及对信息修改后的同步问题概括主要说一下前端的实现概括今天在做实训作业时,有个对数据信息进行修改的操作,要求点击修改按钮后弹出修改框,栏目中需要显 ...
SSM框架下实现验证码图片验证功能（源码）
SSM框架下实现验证码图片验证功能背景图片资源路径 https://download.csdn.net/download/hero_qhz/10322064 一.首先,在pom里面加上需要用的资源j ...
SSM框架下实现form表单提交的方式
实现form表单的提交有多种方式,这里我们主要讲两种常用的. 注:此Demo是在SSM框架下完成的,数据库采用MySQL,关于ssm整合的相关知识,这里不做过多赘述.主要展示表单提交方式,暂不考虑代码 ...
ssm框架下的文件上传和下载
ssm下的文件上传和下载 1. 文件上传 1.1 文件上传需要的依赖文件上传需要使用到 commons-fileupload 和 commons-io 两个 jar 包. <dependenc ...
SSM框架下log4j的配置和使用
2019独角兽企业重金招聘Python工程师标准>>> 一.引入相关包和依赖我用的是pom文件的引入,我使用的是slf4j+log4j的方式,还有另一种方式为commons-log ...
Tiles框架简单介绍
大家好,今天给大家分享一下,Tiles框架一.Tiles框架作用简介我们在写网页的时候,经常会遇见多个网页复用同样的代码,比如CSDN的菜单栏,顶部栏等,如果在每个页面中都复制粘贴,虽然说也可以实 ...
MyBatis 框架下 SQL 注入攻击的 3 种方式，真是防不胜防！
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章本文授权转载请注明来自FreeBuf.COM 链接:https:/ ...

ssm框架下 tiles框架的使用

ssm框架下 tiles框架的使用相关推荐

最新文章

热门文章

ssm框架下 tiles框架 的使用

ssm框架下 tiles框架 的使用相关推荐

最新文章

热门文章

ssm框架下 tiles框架的使用

ssm框架下 tiles框架的使用相关推荐