更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~
这里用到的知识点：
<jsp:include page="test.jsp">
<span style="white-space:pre"> </span><jsp:param value="sss.jsp" name="sdf" />
</jsp:include>
上面的是一个例子，即页面sss.jsp要引用test.jsp中的内容，比如test.jsp是多个其他页面都要调用的公共控件，比如导航栏，侧栏等。下面给出一个例子：
sss.jsp:
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<title>主页</title>
<link href="/EVM/asserts/bootstrap3/css/bootstrap.min.css"
rel="stylesheet">
<link href="/EVM/asserts/bootstrap3/css/dashboard.css" rel="stylesheet">
<link href="/EVM/asserts/css/evm.css" rel="stylesheet">
<script src="/EVM/asserts/bootstrap3/ie-emulation-modes-warning.js"></script>
<!-- 为了做图表样例而添加的 -->
<script type="text/javascript" src="/EVM/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/EVM/js/highcharts.js"></script>
<script type="text/javascript" src="/EVM/js/exporting.js"></script>
<script type="text/javascript" src="/EVM/js/chartOptions.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<span style="color:#ff0000;"><jsp:include page="test.jsp">
<jsp:param value="sss.jsp" name="sdf" />
</jsp:include></span>
<div class="col-xm-9 col-md-10 main" style = "border:1px solid silver">
<div class="col-xm-12 col-md-5">
<h4 class="page-header">个人信息</h4>
<div class="info-block" id="left">
<div class="row">
<div class="col-sm-12 col-md-12">
<div class="thumbnail">
<br> <img data-src="holder.js/300x300" alt="...">
<div class="caption">
<div class="row">
<div class="col-xs-5 text-right">
<label><strong>登录邮箱</strong></label>
</div>
<div class="col-xs-7">
<p>${user.userEmail}</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 text-right">
<label><strong>姓名</strong></label>
</div>
<div class="col-xs-7">
<p>${user.userName}</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 text-right">
<label><strong>电话</strong></label>
</div>
<div class="col-xs-7">
<p>
<abbr title="Phone">${user.phoneNumber}</abbr>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 text-right">
<label><strong>联系邮箱</strong></label>
</div>
<div class="col-xs-7">
<p>
<abbr title="Phone">${user.msgEmail}</abbr>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 text-right">
<label><strong>所在项目</strong></label>
</div>
<div class="col-xs-7">
<p>
<c:forEach items="${user.projList }" var="proj">
${proj.projName };
</c:forEach>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-5 text-right">
<label><strong>所属部门</strong></label>
</div>
<div class="col-xs-7">
<p>${user.dept.deptName}</p>
</div>
</div>
<div class="row-fluid">
<div class="text-right">
<button class="btn btn-sm" data-toggle="modal"
data-target="#updateUserInfoModal"
onclick="updateUserInfoValid.resetForm()">修改信息</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
<div class="col-xm-12 col-md-7">
<h4 class="page-header">图表</h4>
<div class="info-block" id="right">
<div id="Achartsample"
style="width: 100%; height: 100%; margin: auto;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="updateUserInfoModal" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" role="form" id="updateUserInfo"
method="post" action="/EVM/userAction">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">修改个人信息</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="userName" class="col-sm-3 control-label">姓名：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="userName"
name="userName" value="${user.userEmail}" disabled>
</div>
</div>
<div class="form-group">
<label for="userName" class="col-sm-3 control-label">姓名：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="userName"
name="userName" value="${user.userName}">
</div>
<label for="userName" class="text-left" style="padding-left: 0px">*</label>
</div>
<div class="form-group">
<label for="phoneNumber" class="col-sm-3 control-label">联系电话：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phoneNumber"
name="phoneNumber" value="${user.phoneNumber}">
</div>
</div>
<div class="form-group">
<label for="msgEmail" class="col-sm-3 control-label">联系邮箱：</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="msgEmail"
name="msgEmail" value="${user.msgEmail}">
</div>
</div>
<div class="form-group">
<input type="hidden" name="deptId" value="${user.id}"> <input
type="hidden" name="method" value="updateUserInfo">
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">取消</a>
<button type="submit" class="btn btn-primary">确认</button>
</div>
</form>
</div>
</div>
</div>
<script src="/EVM/asserts/bootstrap3/jquery.min.js"></script>
<script src="/EVM/asserts/bootstrap3/js/bootstrap.min.js"></script>
<script src="/EVM/asserts/bootstrap3/docs.min.js"></script>
<script src="/EVM/asserts/bootstrap3/ie10-viewport-bug-workaround.js"></script>
<script src="/EVM/asserts/js/util.js"></script>
<script type="text/javascript" src="/EVM/js/jquery.validate.min.js"></script>
<script type="text/javascript">
updateUserInfoValid = null;
$(document).ready(
function() {
$.ajaxSetup({
cache : false,
async : false
});
jQuery.validator.addMethod("isMobile", function(value,
element) {
var length = value.length;
// var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
var mobile = /^1[0-9]{10}$/;
return this.optional(element)
|| (length == 11 && mobile.test(value));
}, "");
updateUserInfoValid = $("#updateUserInfo").validate({
debug : false,
rules : {
userName : "required",
msgEmail : "email",
phoneNumber : "isMobile",
},
messages : {
userName : "请输入用户名",
msgEmail : "请输入正确的邮箱地址",
phoneNumber : "请输入11未手机号码",
}
});
chartSample(Achartsample); // div的id不能和函数名完全相同
});
function logout() {
$.post("/EVM/userAction?method=logout", {}, function(data) {
window.location.replace(data);
});
}
</script>
</body>
</html>其中，红色部分就是引入的test.jsp页面，test.jsp如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href = "/EVM/img/sac_logo_small.jpg" rel="Icon"> <!-- 页面的地址栏上面，页面标题旁的小图标 -->
<title>主页</title>
<link href="/EVM/asserts/bootstrap3/css/bootstrap.min.css"
rel="stylesheet">
<link href="/EVM/asserts/bootstrap3/css/dashboard.css" rel="stylesheet">
<link href="/EVM/asserts/css/evm.css" rel="stylesheet">
<script src="/EVM/asserts/bootstrap3/ie-emulation-modes-warning.js"></script>
<!-- 为了做图表样例而添加的 -->
<script type="text/javascript" src="/EVM/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/EVM/js/highcharts.js"></script>
<script type="text/javascript" src="/EVM/js/exporting.js"></script>
<script type="text/javascript" src="/EVM/js/chartOptions.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".sidebar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" style="color: white">科研数据管理平台</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a style="color: white">${user.userEmail}</a></li>
<li><a style="color: white" onclick="logout()">注销登录</a>
</ul>
</div>
</div>
</div>
<div id="container-fluid">
<div id="row">
<div class="col-sm-2 col-md-2 hidden-xs" style="background-color: silver;height:860px"> <!-- 这里的高度是固定死的,即侧栏的高度 -->
<br> <br> <br> <br>
<div class="col-xm-12 col-md-12 ">
<div class="panel-group" id="accordionLeftSide">
<!-- 数据图表 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordionLeftSide"
id="accordionOfshujutubiaoId"
href="#collapseOfshujutibiaoBody"> <span
class="glyphicon glyphicon-off"> 数据图表</span></a>
</h4>
</div>
<div id="collapseOfshujutibiaoBody" class="panel-collapse collapse">
<div class="panel-body text-left"> <!-- 外层手风琴的结构体 -->
<div class="panel-group" id="accordionOfshujutubiao">
<!-- 绩效图表 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a data-toggle="collapse"
data-parent="#accordionOfshujutubiao"
href="#collapseOfjixiaotubiao"><span
class="glyphicon glyphicon-wrench"></span> 绩效图表</a>
</h4>
</div>
<div id="collapseOfjixiaotubiao"
class="panel-collapse collapse">
<!--若class中加入in表示默认打开专利的手风琴页面 -->
<div class="panel-body text-left">
<li><a href="test.jsp">公司绩效</a></li>
<li><a href="test.jsp">部门绩效</a></li>
<li><a href="test.jsp">项目绩效</a></li>
<li><a href="test.jsp">个人绩效</a></li>
</div>
</div>
</div>
<!-- 项目统计 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a data-toggle="collapse"
data-parent="#accordionOfshujutubiao"
href="#collapseOfxiangmutongji"><span
class="glyphicon glyphicon-wrench"></span> 项目统计</a>
</h4>
</div>
<div id="collapseOfxiangmutongji"
class="panel-collapse collapse">
<!--若class中加入in表示默认打开专利的手风琴页面 -->
<div class="panel-body text-left">
<li><a href="test.jsp">二级单位项目</a></li>
<li><a href="test.jsp">个人项目</a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 业务信息 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordionLeftSide"
id="accordionOfyewuxinxiId"
href="#collapseOfyewuxinxiBody"> <span
class="glyphicon glyphicon-off"> 业务信息</span></a>
</h4>
</div>
<div id="collapseOfyewuxinxiBody" class="panel-collapse collapse">
<div class="panel-body text-left"> <!-- 外层手风琴的结构体 -->
<!-- 业务单位信息 -->
<li><a href = "infos.jsp">业务单位信息</a></li>
</div>
</div>
</div>
<!-- 绩效工作 --> <!-- 这里暂时不考虑本块的事情，是系统管理员要做的 -->
<!-- <div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
text-center/left/right 文字的位置
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordionLeftSide"
id="accordionOfjixiaogongzuoId"
href="#collapseOfjixiaogongzuoBody"> <span
class="glyphicon glyphicon-off"> 绩效工作</span></a>
</h4>
</div>
<div id="collapseOfjixiaogongzuoBody" class="panel-collapse collapse">
<div class="panel-body text-left"> 外层手风琴的结构体
<div class="panel-group" id="accordionOfjixiaogongzuo">
日常维护
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
text-center/left/right 文字的位置
<a data-toggle="collapse"
data-parent="#accordionOfjixiaogongzuo"
href="#collapseOfrichangweihu"><span
class="glyphicon glyphicon-wrench"></span> 日常维护</a>
</h4>
</div>
<div id="collapseOfrichangweihu"
class="panel-collapse collapse">
若class中加入in表示默认打开专利的手风琴页面
<div class="panel-body text-left">
<li><a href="test.jsp">部门管理</a></li>
<li><a href="test.jsp">项目管理</a></li>
<li><a href="test.jsp">个人管理</a></li>
</div>
</div>
</div>
KPI维护
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
text-center/left/right 文字的位置
<a data-toggle="collapse"
data-parent="#accordionOfjixiaogongzuo"
href="#collapseOfKPIweihu"><span
class="glyphicon glyphicon-wrench"></span> KPI维护</a>
</h4>
</div>
<div id="collapseOfKPIweihu"
class="panel-collapse collapse">
若class中加入in表示默认打开专利的手风琴页面
<div class="panel-body text-left">
<li><a href="test.jsp">基础KPI</a></li>
<li><a href="test.jsp">考评表配置</a></li>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- 系统维护-->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a class="accordion-toggle" data-toggle="collapse"
data-parent="#accordionLeftSide"
id="accordionOfxitongweihuId"
href="#collapseOfxitongweihuBody"> <span
class="glyphicon glyphicon-off"> 系统维护</span></a>
</h4>
</div>
<div id="collapseOfxitongweihuBody"
class="panel-collapse collapse"> <!--若class中加入in表示默认打开专利的手风琴页面 -->
<div class="panel-body text-left"> <!-- 外层手风琴的结构体 -->
<div class="panel-group" id="accordionOfxitongweihu">
<!-- 个人账户 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a data-toggle="collapse"
data-parent="#accordionOfxitongweihu"
href="#collapseOfgerenzhanghu"><span
class="glyphicon glyphicon-wrench"></span> 个人账户</a>
</h4>
</div>
<div id="collapseOfgerenzhanghu"
class="panel-collapse collapse">
<!--若class中加入in表示默认打开专利的手风琴页面 -->
<div class="panel-body text-left">
<li><a href="test.jsp">个人信息</a></li>
<li><a href="test.jsp">密码修改</a></li>
</div>
</div>
</div>
<!-- 数据信息 -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<!-- text-center/left/right 文字的位置 -->
<a data-toggle="collapse"
data-parent="#accordionOfxitongweihu"
href="#collapseOfshujuxinxi"><span
class="glyphicon glyphicon-wrench"></span> 数据信息</a>
</h4>
</div>
<div id="collapseOfshujuxinxi"
class="panel-collapse collapse">
<!--若class中加入in表示默认打开专利的手风琴页面 -->
<div class="panel-body text-left">
<li><a href="test.jsp">考核表</a></li>
<li><a href="test.jsp">业务数据</a></li>
<c:if test="${!fn:contains(user.type, '部门_') }">
<c:if test="${fn:contains(user.type, '项目_') }"> <!-- 两个判断语句，只有在是项目负责人时显示 -->
<li><a href="patent.jsp">专利</a></li>
<li><a href="patent.jsp">著作权</a></li>
</c:if>
</c:if>
<li><a href="test.jsp">论文</a></li>
<c:if test="${!fn:contains(user.type, '项目_') }">
<li><a href="patentView.jsp">个人专利</a></li> <!-- patentView.jsp针对专利的统计(部门)和分解(个人)。 著作权同专利 -->
<li><a href="patentView.jsp">个人著作权</a></li>
<!-- 不对项目负责人开放 -->
</c:if>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br> <br> <br> <br>
</div>
</div>
</div>
<script src="/EVM/asserts/bootstrap3/jquery.min.js"></script>
<script src="/EVM/asserts/bootstrap3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/EVM/js/jquery.js"></script>
<script src="/EVM/asserts/bootstrap3/jquery.min.js"></script>
<!-- 该行(jquery.min.js的引用代码)的顺序不能随便放，如果放在body中的最下面， -->
<link rel="stylesheet" href="/EVM/css/jquery-ui.css">
<!-- 则插入的时间控件有问题，如果把该行删去，则手风琴打开后关不上 -->
<script type="text/javascript" src="/EVM/js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajaxSetup({
cache : false,
async : false
});
});
</script>
</body>引入的效果还是可以的：
左侧的导航栏是可以include进来的，但是和原始的被引入页面相比，如果打开以后，就吹出现合不上的局面，这是在chrome上出现的问题，而对于IE来说，更是直接打不开，看来这种引入还是有兼容性的问题。
当前知道的解决方式，就是把原界面中的代码copy过来，如果哪位大神知道这种现象出现的原因，麻烦告知一下，不胜感激！
有关于这方面的问题，以后还会继续更新，在以后的工程项目中，如果看出了真是原因，会再次在这里写明正确的解决方式的。今天先写到这儿吧，时间也不早了，快22:00了，也该回去了，明天还要继续奋斗，每一个不曾起舞的早晨都是对生命的辜负！我相信我的付出会有长期的汇报，永不言弃，永不妄自菲薄！
更多2019年的技术文章，欢迎关注我的微信公众号：码不停蹄的小鼠松（微信号：busy_squirrel），也可扫下方二维码关注获取最新文章哦~
3188
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
