`

网上商城前端页面框架的搭建及源码

structs2框架 
阅读更多
最近做了个网上商城的项目，闲下来总结下前端  前台后台 框架的搭建

前台：
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里面来


分享到：
| Structs2标签之<s:action>,<s: a action > ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    SSH2框架搭建实例源码

    总的来说，SSH2框架搭建实例是一个学习和理解Java Web开发的好素材。通过实践这个项目，开发者可以深入理解如何整合三大框架，以及如何利用它们来实现常见的业务功能。同时，这也是提升数据库操作、MVC设计模式和...

    商城前端html源码

    总的来说，"商城前端html源码"是一个涵盖了多种技术、设计原则和实践的综合项目，涉及HTML、CSS、JavaScript、响应式设计、前端框架、数据交互、安全性和性能优化等多个方面，为开发者提供了一个深入了解B2C电商平台...

    ThinkPHP 5.1框架全开源商城小程序源码【修复增加小程序前端】带后台商城源码程序

    ThinkPHP 5.1框架全开源商城小程序源码，代替了手机端的APP电脑端的独立网站。无需下载，触手可及。 1、源码部署自己服务器，全部数据自己掌握； 2、持续更新升级； 3、支持后台修改小程序端同步生效； 4、带...

    网上购物系统源码网上商城源码

    本源码是一个ASP.net mvc框架搭建的三层购物网站源码， 功能齐全，界面美观简洁，非常适合二次开发和学习，欢迎下载 三、菜单功能 前台页面 1、注册:2、登陆：3、首页：4、购物车5、会员中心：6、客服中心：7、...

    bootstrap的前端页面框架

    在"bootstrap的前端页面框架"中，我们可以探讨以下几个关键知识点： 1. **响应式设计**：Bootstrap的核心特性是其响应式网格系统，它允许网页内容根据不同的设备屏幕尺寸自动调整布局。通过使用预定义的CSS类，...

    SSH框架整合项目源码

    处理完成后，结果会通过Struts2返回给前端页面，展示给用户。同时，Spring的AOP特性可以用于实现全局的日志记录、异常处理和权限验证。 学习这个项目源码，初学者可以了解到如何编写Action、Service和DAO类，如何...

    电商商城前端静态模板小程序源码

    总的来说，这个“电商商城前端静态模板小程序源码”为开发者提供了一个快速搭建电商小程序的基础，可以用于学习、实践或者作为开发项目的起点。然而，为了构建一个完整的电商应用，开发者还需要掌握后端开发和API...

    10套商城html源码（PC端）

    这10套商城html源码是针对PC端设计的前端页面代码，它们提供了构建网上商城的基础框架，适用于各种类型的在线零售业务。每一套模板都有其独特的设计风格和功能布局，旨在满足不同商家和消费者的审美需求。下面将详细...

    基于Vue框架的前台页面设计源码模板

    本模板是一款基于Vue框架的前台页面设计源码，汇集了109个文件，涵盖40个JavaScript文件、27个Vue组件文件、11个SVG图形文件、6个SCSS样式文件、3个JSON配置文件、2个YAML配置文件、2个Markdown文件、2个PNG图片文件...

    Vue2全家桶+Vant搭建大型单页面商城项目。新蜂商城前后端分离版本-前端Vue项目源码.zip

    在"Vue2全家桶+Vant搭建大型单页面商城项目"中，我们首先会接触到Vue.js 2.x版本，它是当前广泛使用的前端框架，具有声明式渲染、虚拟DOM、组件化等特点，能够帮助开发者高效地构建用户界面。Vue CLI是Vue.js的...

    精致设计网上蛋糕商城预定选购前端页面小程序源码.zip

    该压缩包文件“精致设计网上蛋糕商城预定选购前端页面小程序源码.zip”包含了一个用于创建在线蛋糕商城的小程序前端源代码。这个源码是专为蛋糕预订和选购设计的，适用于那些希望搭建个性化、用户体验良好的在线销售...

    仿天猫商城开发的web项目源码

    每个子模块都有其特定的功能，比如Mall-Web可能包含了Vue.js或React等前端框架构建的用户界面，而Mall-Service则可能包含了使用SpringBoot开发的服务端代码。 在实际的电商项目中，SpringBoot可能会结合MyBatis或...

    Django Web框架源码下载

    Django是Python编程语言驱动的一个开源模型-视图-控制器（MVC）风格的Web应用程序框架。使用 Django，我们在几分钟之内就可以创建高品质、易维护、数据库驱动的应用程序。 Django框架的核心组件有： 1、用于创建...

    eladmin 后台管理框架 前端源码

    **eladmin 后台管理框架前端源码详解** eladmin 是一个基于 Spring Boot 的高效、易用的后台管理系统框架，其前端源码采用 Vue.js 框架进行开发，为开发者提供了一整套完整的前后端分离解决方案。Vue.js 是一个轻量...

    MUI手机app前端页面开发框架模板下载

    这款框架尤其适合快速开发手机应用的前端页面，提供了一套完整的开发模板，使得开发者能够快速搭建出具有原生应用体验的页面。 在提供的文件列表中，我们可以看到以下几个关键目录： 1. **fonts**：这个目录通常...

    淘宝开源的前端UI框架

    源码的阅读和分析对于提升前端技术深度，尤其是JavaScript和MVC框架的理解，是非常有帮助的。 总的来说，淘宝开源的前端UI框架Kissy是一个强大且全面的工具，适用于各种应用场景，无论是构建复杂的企业级应用，还是...

    仿微信支付生活缴费小程序前端页面源码

    本文将详细解析“仿微信支付生活缴费小程序前端页面源码”的相关知识点，主要涉及微信小程序开发、前端框架uni-app和Tailwind CSS的应用。 首先，我们要理解微信小程序是一种轻量级的应用开发平台，由腾讯推出，它...

    化妆品商城小程序前端源码

    2. **前端框架**：这个化妆品商城小程序可能使用了如React或Vue.js这样的前端框架，这些框架简化了UI组件的创建和管理，提供了状态管理和路由控制等功能。 3. **响应式设计**：为了适应不同屏幕尺寸的设备，小程序...

    悟空CRM-11.0 JAVA版Spring前端源码，采用vue+elementUI 技术框架

    悟空CRM-11.0 JAVA版Spring前端源码，采用vue+elementUI 技术框架。前端源码需打包后使用。悟空CRM在中国的开源管理软件行业有较高的知名度。目前软件已达到千万级的用户量，开源系统下载量达到200多万次，已覆盖...

Magicbox
Global site tag (gtag.js) - Google Analytics