最近做了个网上商城的项目，闲下来总结下前端 前台后台 框架的搭建
前台：
1.web.xml 配置欢迎页面
<!-- 设置程序的默认欢迎页面-->
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
2.欢迎页面 index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--这里刷新加载请求-->
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=index.do">
</head>
<body>
<center>
<img src="<%=request.getContextPath()%>/css/images/load.gif"><br>
<p>页面加载中......</p>
</center>
</body>
</html>
3.前台 structs-front.xml的配置（包括index请求配置）
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd" >
<struts>
<!-- 前台登录 -->
<package name="shop.front" extends="shop-default">
<!-- 配置拦截器 -->
<interceptors>
<!-- 验证用户登录的拦截器 --> <!--怎么拦截的？凭啥拦截？怎么看他拦截的是啥？还有啥时候财拦截？？？ -->
<interceptor name="loginInterceptor" class="com.lyq.action.interceptor.CustomerLoginInteceptor"/>
<interceptor-stack name="customerDefaultStack">
<interceptor-ref name="loginInterceptor"/>
<interceptor-ref name="defaultStack"/>
</interceptor-stack>
</interceptors>
<action name="index" class="indexAction">
<result>/WEB-INF/pages/index.jsp</result>
</action>
</package>
<!-- 消费者Action -->
<package name="shop.customer" extends="shop-default" namespace="/customer">
<action name="customer_*" method="{1}" class="customerAction">
<result name="input">/WEB-INF/pages/user/customer_reg.jsp</result>
</action>
</package>
<!-- 商品Action -->
<package name="shop.product" extends="shop-default" namespace="/product">
<action name="product_*" class="productAction" method="{1}">
<result name="list">/WEB-INF/pages/product/product_list.jsp</result>
<result name="select">/WEB-INF/pages/product/product_select.jsp</result>
<result name="clickList">/WEB-INF/pages/product/product_click_list.jsp</result>
<result name="findList">/WEB-INF/pages/product/product_find_list.jsp</result>
</action>
</package>
<!-- 购物车Action -->
<package name="shop.cart" extends="shop.front" namespace="/product">
<action name="cart_*" class="cartAction" method="{1}">
<result name="list">/WEB-INF/pages/cart/cart_list.jsp</result>
<interceptor-ref name="customerDefaultStack"/>
</action>
</package>
<!-- 订单Action -->
<package name="shop.order" extends="shop.front" namespace="/product">
<action name="order_*" class="orderAction" method="{1}">
<result name="add">/WEB-INF/pages/order/order_add.jsp</result>
<result name="confirm">/WEB-INF/pages/order/order_confirm.jsp</result>
<result name="list">/WEB-INF/pages/order/order_list.jsp</result>
<result name="error">/WEB-INF/pages/order/order_error.jsp</result>
<interceptor-ref name="customerDefaultStack"/>
</action>
</package>
</struts>
4.加载index.do请求，查询出主商品类别等基础信息 进入前台index.jsp主页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>GO购网络商城by科帮网</title>
<STYLE type="text/css">
</STYLE>
<SCRIPT type="text/javascript">
if (self != top) {
top.location = self.location;
}
</SCRIPT>
</head>
<body>
<%@include file="/WEB-INF/pages/common/head.jsp"%>
<div id="box">
<div id="left">
<div id="left_s01"><s:a action="customer_login" namespace="/customer"><img
src="${context_path}/css/images/index_23.gif" class="imgx5" /></s:a>
<s:a action="customer_reg" namespace="/customer"><img
src="${context_path}/css/images/index_26.gif" class="imgx5" /></s:a><img
src="${context_path}/css/images/index_27.gif" /></div>
<div id="left_s02"><img
src="${context_path}/css/images/index_25.gif" width="489" height="245"
class="imgz5" /></div>
<!-- 类别 -->
<s:iterator value="categories">
<div id="left_x">
<div id="left122">
<table style="float: left;height: auto;width: 678px; vertical-align: middle; ">
<tr>
<td class="word14" style="width: 22px; padding-left: 10px;">
<s:property value="name"/>
</td>
<td style="padding-bottom: 3px;">
<div id="left122_y">
<!-- 二级 -->
<s:if test="!children.isEmpty">
<s:iterator value="children">
<div style="white-space:nowrap; width: 28%;float: left; margin-top: 5px; margin-bottom: 5px; margin-left: 26px;">
<b style="color: #990000;"><s:property value="name" escape="false"/></b>
<!-- 三级 -->
<s:if test="!children.isEmpty">
<span>
<s:iterator value="children">
<s:a action="product_getByCategoryId" namespace="/product">
<s:param name="category.id" value="id"></s:param>
<s:property value="name" escape="false"/>
</s:a>
</s:iterator>
</span>
</s:if>
</div>
</s:iterator>
</s:if>
</div>
</td>
</tr>
</table>
</div>
</div>
</s:iterator>
</div>
<div id="right">
<!-- 商品排行 -->
<div id="rqpgb">
<table width="195" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="195" height="31"><img
src="${context_path}/css/images/index_28.gif" width="195" height="29" /></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td valign="top">
<s:action name="product_findByClick" namespace="/product" executeResult="true"></s:action>
</td>
</tr>
</table>
</div>
<!-- 推荐商品 -->
<div id="xpss">
<table width="195" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="195" height="31"><img
src="${context_path}/css/images/08.gif" width="195" height="29" /></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td valign="top">
<s:action name="product_findByCommend" namespace="/product" executeResult="true"></s:action>
</td>
</tr>
</table>
</div>
<!-- 热销商品 -->
<div id="rxsp">
<table width="195" border="0" cellpadding="0"
cellspacing="0">
<tr>
<td width="195" height="31"><img
src="${context_path}/css/images/index_47.gif" width="195" height="29" /></td>
</tr>
<tr>
<td height="5"></td>
</tr>
<tr>
<td valign="top">
<s:action name="product_findBySellCount" namespace="/product" executeResult="true"></s:action>
</td>
</tr>
</table>
</div>
<div id="sckf"></div>
</div>
<div id="foot"></div>
</div>
</body>
</html>
5.index.jsp 主页面开始加载页头，加载主商品基本信息链接，<s:action>开始加载 热销，推荐商品
后台管理：
1.配置后台管理的 structs-admin.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1//EN"
"http://struts.apache.org/dtds/struts-2.1.dtd" >
<struts>
<!-- 后台管理 -->
<package name="shop.admin" namespace="/admin" extends="shop-default">
<!-- 配置拦截器 -->
<interceptors>
<!-- 验证用户登录的拦截器 -->
<interceptor name="loginInterceptor" class="com.lyq.action.interceptor.UserLoginInterceptor"/>
<interceptor-stack name="adminDefaultStack">
<interceptor-ref name="loginInterceptor"/>
<interceptor-ref name="defaultStack"/>
</interceptor-stack>
</interceptors>
<action name="admin_*" class="indexAction" method="{1}">
<result name="top">/WEB-INF/pages/admin/top.jsp</result>
<result name="left">/WEB-INF/pages/admin/left.jsp</result>
<result name="right">/WEB-INF/pages/admin/right.jsp</result>
<interceptor-ref name="adminDefaultStack"/>
</action>
</package>
<package name="shop.admin.user" namespace="/admin/user" extends="shop-default">
<action name="user_*" method="{1}" class="userAction"></action>
</package>
<!-- 类别管理 -->
<package name="shop.admin.category" namespace="/admin/product" extends="shop.admin">
<action name="category_*" method="{1}" class="productCategoryAction">
<result name="list">/WEB-INF/pages/admin/product/category_list.jsp</result>
<result name="input">/WEB-INF/pages/admin/product/category_add.jsp</result>
<result name="edit">/WEB-INF/pages/admin/product/category_edit.jsp</result>
<interceptor-ref name="adminDefaultStack"/>
</action>
</package>
<!-- 商品管理 -->
<package name="shop.admin.product" namespace="/admin/product" extends="shop.admin">
<action name="product_*" method="{1}" class="productAction">
<result name="list">/WEB-INF/pages/admin/product/product_list.jsp</result>
<result name="input">/WEB-INF/pages/admin/product/product_add.jsp</result>
<result name="edit">/WEB-INF/pages/admin/product/product_edit.jsp</result>
<interceptor-ref name="adminDefaultStack"/>
</action>
</package>
<!-- 订单管理 -->
<package name="shop.admin.order" namespace="/admin/product" extends="shop.admin">
<action name="order_*" method="{1}" class="orderAction">
<result name="list">/WEB-INF/pages/admin/order/order_list.jsp</result>
<result name="select">/WEB-INF/pages/admin/order/order_select.jsp</result>
<result name="query">/WEB-INF/pages/admin/order/order_query.jsp</result>
<result name="update">/WEB-INF/pages/admin/order/order_update_success.jsp</result>
<interceptor-ref name="adminDefaultStack"/>
</action>
</package>
</struts>
2. user_logon.action 请求执行进入后台页面，登录成功则跳转到全局返回变量main.jsp 后台管理主页面中去，失败继续在后台登录页面
http://localhost:8080/Shop1/admin/user/user_logon.do
3.进入后台管理主页面 main.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>后台管理科帮网</title>
</head>
<%@include file="/WEB-INF/pages/common/common_admin.jsp"%>
<div id="box">
<!-- top -->
<s:action name="admin_top" namespace="/admin" executeResult="true">头部</s:action>
<div id="mid">
<!-- left -->
<s:action name="admin_left" namespace="/admin" executeResult="true"></s:action>
<!-- right -->
<iframe name="abc" scrolling="auto" frameborder="0" width="705" height="500"></iframe>
<%--
<s:action name="admin_right" namespace="/admin" executeResult="true"></s:action>
--%>
</div>
<div id="bottom"></div>
</div>
</html>
4.加载后台管理页面 main.jsp,加载里面的 <s:action>加载 头部top.jsp，左边left.jsp
5.头部top.jsp，左边left.jsp
top.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/pages/common/common_admin.jsp"%>
<div id="top">
<div id="toptiao">
<img src="${context_path}/css/images/flower.gif" width="12" height="12" />
您好科帮网，<s:property value="#session.admin.username"/> ！
<s:a action="user_logout" namespace="/admin/user">
<img src="${context_path}/css/images/ht_02_02.gif" width="55" height="20" align="middle" />
</s:a>
</div>
</div>
left.jsp:<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/pages/common/common_admin.jsp" %>
<!-- 类别 -->
<s:url action="category_add" namespace="/admin/product"
var="category_add"></s:url>
<s:url action="category_list" namespace="/admin/product"
var="category_list"></s:url>
<!-- 商品 -->
<s:url action="product_add" namespace="/admin/product" var="product_add"></s:url>
<s:url action="product_list" namespace="/admin/product"
var="product_list"></s:url>
<!-- 订单 -->
<s:url action="order_list" namespace="/admin/product" var="order_list"></s:url>
<s:url action="order_query" namespace="/admin/product" var="order_query"></s:url>
<div id="left">
<div id="left_top"></div>
<div id="left_mid">
<div id="category_title">类别管理</div>
<div id="category_sub">
<a target="abc" href="${category_add}">添加类别</a>
</div>
<div id="category_sub">
<a target="abc" href="/Shop1/admin/product/category_list.do">查看所有类别${category_list}</a>
</div>
<div id="category_title">商品管理</div>
<div id="category_sub">
<a target="abc" href="${product_add}">添加商品</a>
</div>
<div id="category_sub">
<a target="abc" href="${product_list}">查看所有商品</a>
</div>
<div id="category_title">订单管理</div>
<div id="category_sub">
<a target="abc" href="${order_list}">查看订单</a>
</div>
<div id="category_sub">
<a target="abc" href="${order_query}">订单查询</a>
</div>
</div>
</div>
6.点击left.jsp 里面的超链接相应的操作，加载都右边 right里面来
网上商城前端页面框架的搭建及源码
猜你喜欢
转载自wangdingxin.iteye.com/blog/2310002
今日推荐
周排行