首先,我们先加载我们的系统的首页和子首页。很简单,就是转发到一个jsp页面而已,我们先写一个HomeAction来设置跳转功能:
- package cn.edu.hpu.tax.core.action;
- import com.opensymphony.xwork2.ActionSupport;
- public class HomeAction extends ActionSupport{
- //跳转到首页
- public String execute(){
- return "home";
- }
- }
然后我们给它一个struts的配置文件来设置跳转路径:
home-struts.xml
- <?xml version="1.0" encoding="UTF-8" ?>
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
- "http://struts.apache.org/dtds/struts-2.3.dtd">
- <struts>
- <package name="home-action" namespace="/sys" extends="base-default">
- <action name="home_*" class="cn.edu.hpu.tax.core.action.HomeAction" method="{1}">
- <result name="{1}">/WEB-INF/jsp/home/{1}.jsp</result>
- <result name="home">/WEB-INF/jsp/home/home.jsp</result>
- </action>
- </package>
- </struts>
- <!-- 主页跳转的struts配置文件 -->
- <include file="cn/edu/hpu/tax/core/conf/home-struts.xml"/>
然后把美工给我们的首页引入到/WEB-INF/jsp/home/路径下:
- <%@ page contentType="text/html; charset=UTF-8"%>
- <%@ taglib prefix="s" uri="/struts-tags"%>
- <%
- pageContext.setAttribute("ctx", request.getContextPath()) ;
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <title>国税协同办公平台</title>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <link href="${ctx}/css/home.css" rel="stylesheet" type="text/css" />
- </head>
- <body>
- <!-- 头部{ -->
- <table width="1222" border="0" align="center" cellpadding="0"
- cellspacing="0" background="${ctx}/images/home/top_bg.png" class="top">
- <tr>
- <td width="32" height="106"> </td>
- <td width="418" height="106" align="left" valign="middle">
- <img class="zxx_test_png" src="${ctx}/images/home/ind01.png" width="470" height="90" alt="" />
- </td>
- <td width="211"> </td>
- <td width="328">
- <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="86">
- <param name="movie" value="${ctx}/images/home/flash.swf" />
- <param name="quality" value="high" />
- <param name="wmode" value="transparent" />
- <param name="swfversion" value="6.0.65.0" />
- <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->
- <param name="expressinstall" value="Scripts/expressInstall.swf" />
- <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
- <!--[if !IE]>-->
- <object type="application/x-shockwave-flash" data="${ctx}/images/home/flash.swf"
- width="380" height="86">
- <!--<![endif]-->
- <param name="quality" value="high" />
- <param name="wmode" value="transparent" />
- <param name="swfversion" value="6.0.65.0" />
- <param name="expressinstall" value="Scripts/expressInstall.swf" />
- <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
- <div>
- <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
- <p>
- <a href="http://www.adobe.com/go/getflashplayer"><img
- src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"
- alt="获取 Adobe Flash Player" width="112" height="33" />
- </a>
- </p>
- </div>
- <!--[if !IE]>-->
- </object>
- <!--<![endif]-->
- </object>
- </td>
- <td width="331" align="right" valign="top">
- <table width="350" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td width="64" height="4"></td>
- <td width="25" height="5"></td>
- <td width="120" height="4"></td>
- <td width="25" height="4"></td>
- <td width="40" height="4"></td>
- <td width="25" height="4"></td>
- <td width="50" height="4"></td>
- </tr>
- <tr>
- <td align="center"></td>
- <td align="left"></td>
- <td align="right">
- <a><b></b><font color="red">欢迎您,<s:property value="#session.SYS_USER.name"/> </font></a>
- </td>
- <td align="center"><img src="${ctx}/images/home/help.png" width="12" height="17" /></td>
- <td align="left"><a href="javascript:void(0);">帮助</a></td>
- <td align="center"><img src="${ctx}/images/home/exit.png" width="14" height="14" /></td>
- <td align="left" valign="middle" ><a href="${ctx }/sys/login_logout.action">退出</a></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- <!-- }头部 -->
- <!-- 导航{ -->
- <div class="menu">
- <ul class="clearfix">
- <li class="hover"><a href="javascript:void(0);">工作主页</a></li>
- <li><a href="javascript:void(0);">行政管理</a></li>
- <li><a href="javascript:void(0);">后勤服务</a></li>
- <li><a href="javascript:void(0);">在线学习</a></li>
- <li><a href="${ctx }/nsfw/home_frame.action">纳税服务</a> </li>
- <li><a href="javascript:void(0);">我的空间</a></li>
- </ul>
- </div>
- <!-- }导航 -->
- <!-- 左{ -->
- <div class="content">
- <div class="left">
- <!-- 个人资料{ -->
- <div class="left_grzx1">
- <div class="left_grzxbt">
- <h1>个人资料</h1>
- </div>
- <table width="98%" border="0" align="center">
- <tr>
- <td width="76" height="100" align="center" valign="middle">
- <div class="left-tx">
- <s:if test="%{#session.SYS_USER.headImg != null && #session.SYS_USER.headImg !=''}">
- <img src="${ctx}/upload/<s:property value='#session.SYS_USER.headImg'/>" width="70" height="70" />
- </s:if><s:else>
- <img src="${ctx}/images/home/gs09.png" width="70" height="70" />
- </s:else>
- </div>
- </td>
- <td width="5%"><img src="${ctx}/images/home/gs10.png" width="4" height="59" alt="" /></td>
- <td width="60%"><table width="95%" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td colspan="2" style=" font-weight:bold; color:#3a7daa;"><s:property value="#session.SYS_USER.name"/></td>
- </tr>
- <tr>
- <td colspan="2">所属部门:<s:property value="#session.SYS_USER.dept"/></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- </div>
- <!-- }个人资料 -->
- </div>
- <!-- }左 -->
- <!-- 右{ -->
- <div class="right">
- <div class="left_grzx1">
- <div class="left_grzxbt">
- <h1>信息列表</h1>
- </div>
- <table width="98%" border="0" align="center">
- <tr>
- <td height="23">
- xx标题
- </td>
- <td width="150px">xx分类</td>
- <td width="150px">xx创建人</td>
- <td width="150px">xx创建时间</td>
- </tr>
- </table>
- </div>
- </div>
- <!-- }右-->
- <div class="clear"></div>
- <div class="layout_center">
- <div class="lc_grzx1">
- <div class="lc_grzxbt">
- <h1>我的投诉</h1>
- <div style="float:right;padding-top:3px;">
- <s:a action="home_complainAddUI" namespace="/sys">我要投诉</s:a>
- </div>
- </div>
- <table width="98%" border="0" align="center">
- <tr>
- <td height="23">
- xxx标题
- </td>
- <td width="180px">xx受理状态</td>
- <td width="180px">是否匿名投诉</td>
- <td width="180px">投诉时间</td>
- </tr>
- </table>
- </div>
- <div class="lc_grzx1">
- <div class="lc_grzxbt">
- <h1>我的咨询</h1>
- </div>
- <table width="98%" border="0" align="center">
- <tr>
- <td></td>
- <td width="150px"></td>
- <td width="150px"></td>
- </tr>
- </table>
- </div>
- </div>
- </div>
- <!-- 尾部{ -->
- <div class="foot">版权所有@国税局 2014</div>
- <!-- }尾部 -->
- </body>
- </html>
这就是我们整个系统的主页效果。
我们只是把首页加了,我们把子系统也加入进来(纳税服务模块首页),但是并不是简单的加进主页就可以的,因为我们子系统主页使用frame标签引入了许多子网页,每个子网页是一个模块(包括我们刚刚做好的用户管理模块),要显示很多信息,这些信息都要从数据库调取数据,所以我们在Action中要为各个模块中的网页设置加载。
纳税服务系统首页jsp框架图
首先编写我们的TaxHomeAction:
- package cn.edu.hpu.tax.core.action;
- public class TaxHomeAction extends BaseAction{
- //跳转到纳税访问系统首页
- public String frame(){
- return "frame";
- }
- //跳转到纳税访问系统首页-顶部
- public String top(){
- return "top";
- }
- //跳转到纳税访问系统首页-左边菜单
- public String left(){
- return "left";
- }
- }
然后使我们的struts配置文件taxHome-struts.xml:
- <?xml version="1.0" encoding="UTF-8" ?>
- <!DOCTYPE struts PUBLIC
- "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
- "http://struts.apache.org/dtds/struts-2.3.dtd">
- <struts>
- <package name="taxhome-action" namespace="/tax" extends="base-default">
- <action name="taxhome_*" class="cn.edu.hpu.tax.core.action.TaxHomeAction" method="{1}">
- <result name="{1}">/WEB-INF/jsp/tax/{1}.jsp</result>
- </action>
- </package>
- </struts>
然后在主struts文件中引入我们的taxHome-struts.xml:
- <!-- 子系统跳转的struts配置文件 -->
- <include file="cn/edu/hpu/tax/core/conf/taxHome-struts.xml"/>
然后在/WEB-INF/jsp/tax/下引入我们的jsp页面(frame.jsp、left.jsp、top.jsp)
frame.jsp:
- <%@ page language="java" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- application.setAttribute("basePath",basePath);
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>国税协同办公平台-纳税服务</title>
- <link href="${basePath}css/nsfw/css.css" rel="stylesheet" type="text/css" />
- <link href="${basePath}css/nsfw/style.css" rel="stylesheet" type="text/css" />
- </head>
- <frameset cols="*,1222,*" class="bj" frameborder="no" border="0" framespacing="0">
- <frame src="${basePath}common/bg.jsp" scrolling="No" noresize="noresize"/>
- <frameset rows="156,*" cols="*" frameborder="no" border="0" framespacing="0">
- <frame src="${basePath }tax/taxhome_top.action" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" />
- <frameset cols="14%,60%" frameborder="no" border="0" framespacing="0">
- <frame src="${basePath }tax/taxhome_left.action" scrolling="yes" noresize="noresize" id="leftFrame" />
- <frame src="${basePath}common/welcome.jsp" name="mainFrame" id="mainFrame" />
- </frameset>
- </frameset>
- <frame src="${basePath}common/bg.jsp" scrolling="No" noresize="noresize"/>
- </frameset>
- <body>
- <br>
- </body>
- </html>
left.jsp:
- <%@ page language="java" pageEncoding="UTF-8" %>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
- request.setAttribute("ctx", basePath);
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <base href="<%=basePath%>"/>
- <link href="${ctx}/css/nsfw/css.css" rel="stylesheet" type="text/css"/>
- <link href="${ctx}/css/nsfw/style.css" rel="stylesheet" type="text/css"/>
- <script src="${ctx}/js/jquery/jquery-1.10.2.min.js" type="text/javascript"></script>
- <script type="text/javascript">
- //隐藏菜单
- $(document).ready(function () {
- $("dt a").click(function () {
- var cur = $(this);
- cur.parent().next().toggle(700);
- var cur_dl = cur.parent().parent();
- doRemoveCurClass();
- $(cur_dl).addClass("curr");
- });
- $("dd a").each(function () {
- $(this).bind("click", function () {
- doRemoveCurClass();
- $(this).addClass("cur");
- });
- });
- });
- function doRemoveCurClass() {
- $("dl").each(function () {
- $(this).removeClass("curr");
- $("dd a").each(function () {
- $(this).removeClass("cur");
- });
- });
- }
- function closeOtherDD(id) {
- $("dd").each(function () {
- if ($(this).attr("id") != id + "dd") {
- $(this).hide(700);
- }
- });
- }
- </script>
- <!--[if IE 6]>
- <script type="text/javascript" src="${basePath}js/DD_belatedPNG.js"></script>
- <script type="text/javascript">
- DD_belatedPNG.fix('b, s, img, span, .prev, .next, a, input,');
- </script>
- <![endif]-->
- <style>
- * {
- scrollbar-face-color: #dee3e7; /*立体滚动条的颜色(包括箭头部分的背景色)*/
- scrollbar-highlight-color: #ffffff; /*滚动条的高亮颜色(左阴影?)*/
- scrollbar-shadow-color: #dee3e7; /*立体滚动条阴影的颜色*/
- scrollbar-3dlight-color: #eceaea; /*立体滚动条亮边的颜色*/
- scrollbar-arrow-color: #006699; /*三角箭头的颜色*/
- scrollbar-track-color: #efefef; /*立体滚动条背景颜色*/
- scrollbar-darkshadow-color: #eceaea; /*滚动条的基色*/
- }
- </style>
- </head>
- <body>
- <div class="xzfw" style="width: 210px;">
- <div class="xzfw_nav" style="width:214px;min-height:500px;">
- <div class="nBox" style="width:214px;">
- <div class="x_top" style="width:214px;"></div>
- <div class="sm">
- <dl class="">
- <dt><a class="yh" href="${ctx }nsfw/role_listUI.action" target="mainFrame"><b></b>角色管理<s class="down"></s>
- </a></dt>
- </dl>
- <dl class="">
- <dt><a class="yh" href="${ctx }nsfw/user_listUI.action" target="mainFrame"><b></b>用户管理<s class="down"></s>
- </a></dt>
- </dl>
- <dl>
- <dt><a class="xxfb" href="#" target="mainFrame"><b></b>信息发布管理<s
- class="down"></s> </a></dt>
- </dl>
- <dl class="">
- <dt><a class="tssl" href="#" target="mainFrame"><b></b>投诉受理管理<s
- class="down"></s> </a></dt>
- </dl>
- <dl class="">
- <dt><a class="nszx" href="#" target="mainFrame"><b></b>纳税咨询管理<s class="down"></s> </a></dt>
- </dl>
- <dl class="">
- <dt><a class="fwdc" href="#" target="mainFrame"><b></b>服务调查管理<s class="down"></s> </a></dt>
- </dl>
- <dl class="">
- <dt><a class="ygz" href="#" target="mainFrame"><b></b>易告知管理<s class="down"></s> </a></dt>
- </dl>
- <dl class="">
- <dt><a class="fwyy" style="cursor: pointer;"><b></b>服务预约管理<s class="down"></s> </a></dt>
- <dd id="fwyygl" style="display:none;">
- <a class="" href="#" target="mainFrame"><b></b>预约服务</a>
- <a class="" href="#" target="mainFrame"><b></b>预约事项</a>
- </dd>
- </dl>
- </div>
- </div>
- </div>
- </div>
- </body>
- </html>
top.jsp:
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <link href="${basePath}css/nsfw/css.css" rel="stylesheet" type="text/css" />
- <link href="${basePath}css/nsfw/style.css" rel="stylesheet" type="text/css" />
- <!--[if IE 6]>
- <script type="text/javascript" src="${basePath}js/DD_belatedPNG.js" ></script>
- <script type="text/javascript">
- DD_belatedPNG.fix('b, s, img, span, .prev, .next, a, input,');
- </script>
- <![endif]-->
- <script type="text/javascript">
- function openApp(url) {
- window.top.location = url;
- }
- function delCookie() {
- top.document.cookie = "TopNode=;expires=Fri, 31 Dec 1999 23:59:59 GMT;";
- }
- </script>
- </head>
- <body>
- <!-- 头部{ -->
- <table width="1222" border="0" align="center" cellpadding="0" cellspacing="0" background="${basePath}images/nsfw/xingzheng.png" class="top">
- <tr>
- <td width="26" height="106"> </td>
- <td width="416" height="110" align="left" valign="middle">
- <img class="zxx_test_png" src="${basePath}images/home/ind01.png" width="470" height="90" alt="" />
- </td>
- <td width="135"> </td>
- <td width="418">
- <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="450" height="86">
- <param name="movie" value="${basePath}images/home/flash.swf" />
- <param name="quality" value="high" />
- <param name="wmode" value="transparent" />
- <param name="swfversion" value="6.0.65.0" />
- <!-- 此 param 标签提示使用 Flash Player 6.0 r65 和更高版本的用户下载最新版本的 Flash Player。如果您不想让用户看到该提示,请将其删除。 -->
- <param name="expressinstall" value="Scripts/expressInstall.swf" />
- <!-- 下一个对象标签用于非 IE 浏览器。所以使用 IECC 将其从 IE 隐藏。 -->
- <!--[if !IE]>-->
- <object type="application/x-shockwave-flash" data="${basePath}images/home/flash.swf"
- width="380" height="86">
- <!--<![endif]-->
- <param name="quality" value="high" />
- <param name="wmode" value="transparent" />
- <param name="swfversion" value="6.0.65.0" />
- <param name="expressinstall" value="Scripts/expressInstall.swf" />
- <!-- 浏览器将以下替代内容显示给使用 Flash Player 6.0 和更低版本的用户。 -->
- <div>
- <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
- <p>
- <a href="http://www.adobe.com/go/getflashplayer">
- <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" width="112" height="33" />
- </a>
- </p>
- </div>
- <!--[if !IE]>-->
- </object>
- <!--<![endif]-->
- </object>
- </td>
- <td width="300" align="right" valign="top">
- <table width="350" border="0" cellpadding="0" cellspacing="0">
- <tr>
- <td width="17" height="9"></td>
- <td width="66" height="9"></td>
- <td width="120" height="5"></td>
- <td width="17" height="9"></td>
- <td width="36" height="9"></td>
- <td width="17"></td>
- <td width="46"></td>
- </tr>
- <tr>
- <td align="center"></td>
- <td align="left"></td>
- <td align="left"><a><b></b><font color="red">欢迎您,${sessionScope.SYS_USER.name }</font></a></td>
- <td align="center"><img src="${basePath}images/nsfw/help.png" width="12"height="17" /></td>
- <td align="left"><a href="javascript:void(0)">帮助</a></td>
- <td width="17" align="center"><img src="${basePath}images/nsfw/exit.png"width="14" height="14"/></td>
- <td align="left" valign="middle"><a href="${basePath}sys/login_logout.action" target="_top">退出</a></td>
- </tr>
- </table>
- </td>
- </tr>
- </table>
- <!-- }头部 -->
- <!-- 导航{ -->
- <div class="banner">
- <div class="menu">
- <ul class="clearfix">
- <li><a href="${basePath}sys/home.action" target="_top">工作主页</a></li>
- <li><a href="javascript:void(0);">行政管理</a></li>
- <li><a href="javascript:void(0);">后勤服务</a></li>
- <li><a href="javascript:void(0);">在线学习</a></li>
- <li><a href="javascript:void(0);">纳税服务</a></li>
- <li><a href="javascript:void(0);">我的空间</a></li>
- </ul>
- </div>
- </div>
- <!-- }导航 -->
- </body>
- </html>
我们再加入背景和欢迎子网页在common文件夹,因为它们在多个网页中调用了:
bg.jsp:
- <%@ page contentType="text/html; charset=UTF-8" %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html>
- <head>
- <style type="text/css">
- body,div {
- background: url("${basePath}images/nsfw/xzfwptBg.png") #DBF3FF center top repeat-x;
- background-size: 100% 200px;
- }
- </style>
- </head>
- <body>
- <div style="width:100%;height:100%;"> </div>
- </body>
- </html>
welcome.jsp
- <%@ page contentType="text/html; charset=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>
- </head>
- <body>
- <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
- <tr >
- <td align="center" valign="middle">
- <img style="margin-top: 5%;" src="${basePath}images/nsfw/gslogo.jpg"/>
- </td>
- </tr>
- </table>
- </body>
- </html>
我们在主系统首页中导航栏“纳税服务”链接中添加我们纳税服务子系统的首页链接:<!-- 导航{ -->
- <div class="menu">
- <ul class="clearfix">
- <li class="hover"><a href="javascript:void(0);">工作主页</a></li>
- <li><a href="javascript:void(0);">行政管理</a></li>
- <li><a href="javascript:void(0);">后勤服务</a></li>
- <li><a href="javascript:void(0);">在线学习</a></li>
- <li><a href="${ctx }/tax/taxhome_frame.action">纳税服务</a> </li>
- <li><a href="javascript:void(0);">我的空间</a></li>
- </ul>
- </div>
然后我们重启服务器,点击纳税服务:
然后发现跳转到我们的子系统首页: