The construction and source code of the front-end page framework of the online mall

I recently made a project for an online mall, and I have time to summarize the construction of the front-end, front-end and back-end frameworks

Front :
1.web.xml Configure the welcome page
         <!-- Set the default welcome page of the program-->
<welcome-file-list>
< welcome-file>index.jsp</welcome-file>
</welcome-file-list>


2. Welcome page 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">
<!--Refresh load request here-->
<META HTTP-EQUIV="Refresh" CONTENT=" 0;URL=index.do">
</head>
<body>
<center>
-- How did you stop it? Why stop it? What do you think he blocked? When will the money be blocked? ? ? --> <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"/> 4. Load the index.do request, query the basic information such as the main product category and enter the front index.jsp main page </struts> </package>
</action>





<%@ 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 The main page starts to load the page Header, load the basic information link of the main product, <s:action> starts to load hot-selling, recommended products




Background management:
1. Configure the structs-admin.xml of background management
<?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>
<!- - Background management-->
<package name="shop.admin" namespace="/admin" extends="shop-default">
<!-- Configure interceptor-->
< interceptors>
<!-- Interceptors that authenticate user login -->
<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. The user_logon.action request is executed to enter the background page. If the login is successful, it will jump to the global return variable main.jsp background management main page. If it fails, continue to the background login page
http://localhost:8080/Shop1/admin/user /user_logon.do

3. Enter the background management main page 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">View all categories${category_list}</a> < a target="abc" href="${product_add}">Add product</a> <div id="category_sub"> <div id="category_title">Product management</div>
</div>



</div>
<div id="category_sub">
<a target="abc" href="${product_list}">View All Products</a>
</div>
<div id="category_title">Order Management< /div>
<div id="category_sub">
<a target="abc" href="${order_list}">View order</a>
</div>
<div id="category_sub">
<a target=" abc" href="${order_query}">Order Query</a>
</div>
</div>
</div>

6. Click the corresponding operation on the hyperlink in left.jsp, and load it from the right


Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326762321&siteId=291194637