电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: jsp中通用模版的引用 include的用法（1） [打印本页]

作者: look_w 时间: 2019-4-19 20:37 标题: jsp中通用模版的引用 include的用法（1）

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重
---------------------
作者：张小凡vip
来源：CSDN
原文：https://blog.csdn.net/zzq900503/article/details/42218251
版权声明：本文为博主原创文章，转载请附上博文链接！

因为静态引入是把 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;
}

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)