一、问题引入
增加新闻信息页面和新闻列表显示页面的左侧和上半部分完全一样，要把页面代码全部重写一遍或者复制一遍吗？
image.png
这个页面是一个上中下结构，其中中间又分为左右两部分，点右半部分右上角的增加按钮的时候，只有中间的右半部分会发生变化，其他部分不用变，那在做增加功能的时候怎么办？
可以用面向对象的思想来解决这个问题。
二、<jsp:include>
把指定的文件插入正在生成的页面中
语法：
<jsp:include page="URL">
URL：要引用的页面的地址
image.png
admin.jsp页面：
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<!-- 让超链接后的页面在页面的右下部分显示 -->
<base target="rightFrame"/>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/common.css"/>
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<!--页面顶部-->
<jsp:include page="adminTop.jsp"></jsp:include>
<!--页面中部-->
<div id="content" class="main-content clearfix">
<jsp:include page="adminSidebar.jsp"></jsp:include>
<jsp:include page="adminRightbar.jsp"></jsp:include>
</div>
<!--页面底部-->
<jsp:include page="adminBottom.jsp"></jsp:include>
</body>
</html>
adminTop.jsp页面:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div id="header">
<div class="main-top">
<div class="logo"><a href=""><span>新闻大视野</span></a></div>
<div class="nav">
<ul class="clearfix">
<li><a href="<%=request.getContextPath()%>/index.jsp" target="_parent">首页</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>
<!--banner-->
<div class="main-banner"><img src="<%=request.getContextPath()%>/images/banner.png" />
</div>
<!--管理工具栏-->
<div class="admin-bar"><span class="fr">退出账户</span>管理员：admin 2012-06-19
</div>
</div>
adminSidebar.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="main-content-left">
<!--新闻管理-->
<div class="class-box">
<div class="class-box-header">
<h3>新闻管理</h3>
</div>
<div class="class-box-content">
<ul>
<li><a href="newsDetailList.jsp">新闻管理</a></li>
<li class="clear-bottom-line"><a href="javascript:void(0);">最新新闻</a></li>
</ul>
</div>
</div>
<!--主题管理-->
<div class="class-box">
<div class="class-box-header">
<h3>分类管理</h3>
</div>
<div class="class-box-content">
<ul>
<li><a href="javascript:void(0);">分类管理</a></li>
<li class="clear-bottom-line"><a href="javascript:void(0);">删除主题</a></li>
</ul>
</div>
</div>
<!--账户管理-->
<div class="class-box">
<div class="class-box-header">
<h3>用户管理</h3>
</div>
<div class="class-box-content">
<ul>
<li><a href="javascript:void(0);">用户管理</a></li>
<li class="clear-bottom-line"><a href="javascript:void(0);">付费服务</a></li>
</ul>
</div>
</div>
<!--//-->
</div>
adminRightbar.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/common.css"/>
<div class="main-content-right">
<iframe name="rightFrame" style="WIDTH: 100%; HEIGHT: 800px" src="newsDetailList.jsp"
frameborder=0>
</iframe>
</div>
adminBottom.jsp页面：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<div class="main-footer-box">
24小时客户服务热线：010-68988888 常见问题解答 新闻热线：010-627488888<br />
文明办网文明上网举报电话：010-627488888 举报邮箱：jubao@bj-aptech.com.cn<br />
Coyright©1999-2007 News China gov,All Right Reserved.<br />
新闻中心版权所有
</div>
newsDetailList.jsp页面：
<%@page import="com.kgc.pojo.News"%>
<%@page import="java.util.List"%>
<%@page import="com.kgc.service.impl.NewsServiceImpl"%>
<%@page import="com.kgc.service.NewsService"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%--动态包含无法使用，页面报错，newsService无法使用 <jsp:include page="../common/common.jsp" /> --%>
<%@include file="../common/common.jsp" %>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>无标题文档</title>
<style type="text/css">
<!--
-->
</style>
<script>
function addNews(){
window.location="newsDetailCreateSimple.jsp";
}
</script>
</head>
<body>
<!--主体-->
<div class="main-content-right">
<!--即时新闻-->
<div class="main-text-box">
<div class="main-text-box-tbg">
<div class="main-text-box-bbg">
<form name ="searchForm" id="searchForm" action="/news/jsp/admin/newsDetailList.jsp" method="post">
<div>
新闻分类：
<select name="categoryId">
<option value="0">全部</option>
<option value='1' >国内</option>
<option value='2' >国际</option>
<option value='3' >娱乐</option>
<option value='4' >军事</option>
<option value='5' >财经</option>
<option value='6' >天气</option>
</select>
新闻标题<input type="text" name="title" id="title" value=''/>
<button type="submit" class="page-btn">GO</button>
<button type="button" onclick="addNews();" class="page-btn">增加</button>
<input type="hidden" name="currentPageNo" value="1"/>
<input type="hidden" name="pageSize" value="10"/>
<input type="hidden" name="totalPageCount" value="2"/>
</div>
</form>
<table cellpadding="1" cellspacing="1" class="admin-list">
<thead >
<tr class="admin-list-head">
<th>新闻标题</th>
<th>作者</th>
<th>时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<%
List<News> newsList = newsService.getNewsList();
int i= 0;
for(News news:newsList){
i++;
%>
<tr <%if(i%2==0){ %>class="admin-list-td-h2"<%} %>>
<td><a href='newsDetailView.jsp?id=<%=news.getId()%>'><%=news.getTitle() %></a></td>
<td><%=news.getAuthor() %></td>
<td><%=news.getCreateDate() %></td>
<td><a href='adminNewsCreate.jsp?id=2'>修改</a>
<a href="javascript:if(confirm('确认是否删除此新闻？')) location='adminNewsDel.jsp?id=2'">删除</a>
</td>
</tr>
<%} %>
</tbody>
</table>
<div class="page-bar">
<ul class="page-num-ul clearfix">
<li>共7条记录 1/2页</li>
<a href="javascript:page_nav(document.forms[0],2);">下一页</a>
<a href="javascript:page_nav(document.forms[0],2);">最后一页</a>
</ul>
<span class="page-go-form"><label>跳转至</label>
<input type="text" name="inputPage" id="inputPage" class="page-key" />页
<button type="button" class="page-btn" onClick='jump_to(document.forms[0],document.getElementById("inputPage").value)'>GO</button>
</span>
</div>
</div>
</div>
</div>
</div>
</body></html>
分析：
1、在左侧页面中的新闻管理的连接页面也是newsDetailList.jsp，所以点击这个超链接页面还是跟之前的相同。
2、当点击右侧的增加新闻按钮的时候，可以看到是要跳转到newsDetailCreateSimple.jsp页面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<link href="<%=request.getContextPath() %>/css/common.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="<%=request.getContextPath() %>/ckeditor/ckeditor.js"> </script>
</head>
<body>
<form name ="dataFrm" id="dataFrm" action="doAdd.jsp" method="post" enctype="multipart/form-data">
<table width="100%" border="0" cellspacing="5" cellpadding="0">
<thead>
<tr><td align="center" colspan="2" class="text_tabledetail2">增加新闻</td></tr>
</thead>
<tbody>
<tr>
<td style="text-align:right;" class="text_tabledetail2">分类</td>
<td style="text-align:left;">
<!-- 列出所有的新闻分类 -->
<select name="categoryId">
<option value="1">国内</option>
<option value="2">国际</option>
<option value="3">娱乐</option>
<option value="4">军事</option>
<option value="5">财经</option>
<option value="6">天气</option>
</select>
</td>
</tr>
<tr>
<td style="text-align:right;" class="text_tabledetail2">标题</td>
<td style="text-align:left;"><input type="text" name="title" value=""/></td>
</tr>
<tr>
<td style="text-align:right;" class="text_tabledetail2">作者</td>
<td style="text-align:left;"><input type="text" name="author" value=""/></td>
</tr>
<tr>
<td style="text-align:right;" class="text_tabledetail2">摘要</td>
<td style="text-align:left;"><textarea id="summary" name="summary" rows="8" cols="50"></textarea></td>
</tr>
<tr>
<td style="text-align:right;" class="text_tabledetail2">内容</td>
<td style="text-align:left;">
<div id="xToolbar"></div>
<textarea id="newscontent" name="newscontent" rows="8" cols="30" class="ckeditor"></textarea></td>
</tr>
<tr>
<td style="text-align:right;" class="text_tabledetail2">上传图片 </td>
<td style="text-align:left;"><input type="file" name="picPath" value=""/></td>
</tr>
<tr>
<td style="text-align:center;" colspan="2">
<button type="submit" class="page-btn" name="save">保存</button>
<button type="button" class="page-btn" name="return" onclick="javascript:location.href='newsDetailList.jsp'">返回</button>
</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
网友评论