web开发----jsp中通用模版的引用 include的用法

最新推荐文章于 2024-04-19 22:31:37 发布

张小凡vip

最新推荐文章于 2024-04-19 22:31:37 发布

阅读量1.3w

点赞数 4

分类专栏： java web 文章标签： jsp html web开发母版页 include

本文链接：https://blog.csdn.net/zzq900503/article/details/42218251

版权

java 同时被 2 个专栏收录

267 篇文章 4 订阅

订阅专栏

web

142 篇文章 2 订阅

订阅专栏

web开发中常常会有一些代码需要多个页面使用，比如 banner nav导航还有 footer等.

ASP.NET开发中有母版页的说法，也就是写一些通用的模版页，然后其他页面可以引用。

jsp中当然也有这样的用法也就是 include的用法

两种用法

一种是说明标签<%@ include file="xxx.jsp"%>，一种是动作标签<jsp:include page="xxx.jsp"/>

说明标签是静态引入，动作标签是动态

静态引入是把b.jsp的源码拼接到a.jsp中，在一块编译，这样两者代码是加到一起的

而动态引入则是分开编译两个jsp，把行成的html再加到一起

比如我们jsp页面中经常都会有 path的定义

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

如果 a.jsp页面中定义了path, b.jsp页面中也定义了path

在a.jsp页面中<%@ include file="b.jsp"%> 这时候 a.jsp静态引入 b.jsp页面就会报错 path重复定义

因为静态引入是把 a.jsp和b.jsp页面融合后再编译这样就有两个path了

但是动态引入则不会报错

在a.jsp中 <jsp:include page="b.jsp"/> 是ok的因为它们是分开编译后再融合起来

静态引入的示例

通过对两种用法的了解之后我们现在使用静态引入

因为上述原因我的模版页中只有div 不会有 path等定义也不会有html标签如下:

我的header.jsp 全部内容如下:

   <div id="banner">
   <img src="img/logo.jpg"></img>
  <img src="img/contactTitle.png"></img><img src="img/contactContent.gif" /> 
  </div>
<table width="910" border="0" cellspacing="0" cellpadding="0">
<tr>
  <td width="92" class="nav" ><a href="#">HOME</a></td>

    <td width="111" class="nav">Hair De Vera</td>

    <td width="128" class="nav">About us</td>

    <td width="135" class="nav">Contact Us</td>
    <td  width="350"><div style="position:relative;" class="search_back"><div id="123">
	
    <div class="bar">
        <div>Search:
            <input  type="text" /> 
            <input type="image" src="img/dyimage.png" style="border-width:0px;" />
        </div>
    </div>
   </div>
    </div>

</td>
  </tr>
</table>

header中用到的样式我们也独立出来这样在引用页面同时引用即可

新建已经header.css

 #banner {
width: 100%;
left: 0;
right: 0;
top: 0;
height: 100px;
}
.nav{
 background:#0E0D0D;
width:92px;   
 text-align: center;     
 white-space:nowrap;
color:#ffffff;
cursor:pointer;
line-height:37px;
}
.nav a {
        display:block; /* 把行内元素 变成 块级元素 */
        width:92px; /* 盒子 宽度 */
        height:37px; /* 盒子 高度 */
        text-decoration: none;
        vertical-align: middle;
        
    }
 .nav    a:link {color: #ffffff}		/* 未访问的链接 */
 .nav  a:visited {color: #ffffff}	/* 已访问的链接 */
  .nav  a:hover {color: #CC00FF}
.nav:hover{
	background:#ffffff;
	color:#CC00FF;
}
div.bar { /* styles for horizontal top bar */
	height: 37px;
	font-size: 110%;
	color:#ffffff;
	 text-align: center;     
}
div.bar div {
	padding:  7px 20px 3px 20px;
}
a.bar {
    text-decoration: none;
}

a.bar:hover {
    text-decoration: underline;
}
.search_back { background:#0E0D0D; height:37px;}

input {
vertical-align: middle;
}

如果使用到js的话也独立新建这里就不记录了

我依次建了 header.jsp left.jsp footer.jsp三个模版以及它们各自的css和用到的js

然后开始在index.jsp中引用如下(完整index.jsp页面代码参考最后的ps):

  <body>
   <div class="center">
 <%@ include file="header.jsp"%> 
 <%@ include file="left.jsp"%> 
 <%@ include file="footer.jsp"%>
		</div>
  </body>

同时引用模版用到的css js

	<link rel="stylesheet" type="text/css" href="css/header.css"/>
	<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="css/left.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/left.js"></script>

效果如图:

ps：index.jsp页面完整代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  
<html xmlns="http://www.w3.org/1999/xhtml" >  
  <head>
    <base href="<%=basePath%>"/>
    
    <title>My JSP 'vera.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache"/>
	<meta http-equiv="cache-control" content="no-cache"/>
	<meta http-equiv="expires" content="0"/>    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
	<meta http-equiv="description" content="This is my page"/>
		<link rel="stylesheet" type="text/css" href="css/header.css"/>
	<link rel="stylesheet" type="text/css" href="css/footer.css"/>
		<link rel="stylesheet" type="text/css" href="css/left.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/left.js"></script>
<style  type="text/css">
  html {
    margin: 0px; 
    padding: 0px 0px 0px 5px; 
}
 body {
	color: #3C3C3C;
	background-color:#FFFFFF;
	font-family: Verdana, Arial, Helvetica, sans-serif;
		margin: 0px; 
	padding: 0px;  
}
div{
display: block;
}
div.center{
  max-width:1140px;
    min-width:960px;
    margin:0pt auto; 
    z-index:99
}
div.center{
  width:910px;
  min-width:800px;
}



  </style>
  </head>
  
  <body>
   <div class="center">
 <%@ include file="header.jsp"%> 
 <%@ include file="left.jsp"%> 
 <%@ include file="footer.jsp"%>
		</div>
  </body>
</html>

张小凡vip

关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
2
评论
web开发----jsp中通用模版的引用 include的用法

web开发中常常会有一些代码需要多个页面使用，比如 banner nav导航还有 footer等.ASP.NET开发中有母版页的说法，也就是写一些通用的模版页，然后其他页面可以引用。 jsp中当然也有这样的用法也就是 include的用法两种用法一种是说明标签，一种是动作标签说明标签是静态引入，动作标签是动态静态引入是
复制链接

扫一扫