安科网

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

Symiac

Symiac

2016-07-08

关注 关注

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

前台：

1.web.xml配置欢迎页面

<!--设置程序的默认欢迎页面-->

<welcome-file-list>

<welcome-file>index.jsp</welcome-file>

</welcome-file-list>

2.欢迎页面index.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<!--这里刷新加载请求-->

<METAHTTP-EQUIV="Refresh"CONTENT="0;URL=index.do">

</head>

<body>

<center>

<imgsrc="<%=request.getContextPath()%>/css/images/load.gif"><br>

<p>页面加载中......</p>

</center>

</body>

</html>

3.前台structs-front.xml的配置（包括index请求配置）

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.1//EN"

"http://struts.apache.org/dtds/struts-2.1.dtd">

<struts>

<!--前台登录-->

<packagename="shop.front"extends="shop-default">

<!--配置拦截器-->

<interceptors>

<!--验证用户登录的拦截器--><!--怎么拦截的？凭啥拦截？怎么看他拦截的是啥？还有啥时候财拦截？？？-->

<interceptorname="loginInterceptor"class="com.lyq.action.interceptor.CustomerLoginInteceptor"/>

<interceptor-stackname="customerDefaultStack">

<interceptor-refname="loginInterceptor"/>

<interceptor-refname="defaultStack"/>

</interceptor-stack>

</interceptors>

<actionname="index"class="indexAction">

<result>/WEB-INF/pages/index.jsp</result>

</action>

</package>

<!--消费者Action-->

<packagename="shop.customer"extends="shop-default"namespace="/customer">

<actionname="customer_*"method="{1}"class="customerAction">

<resultname="input">/WEB-INF/pages/user/customer_reg.jsp</result>

</action>

</package>

<!--商品Action-->

<packagename="shop.product"extends="shop-default"namespace="/product">

<actionname="product_*"class="productAction"method="{1}">

<resultname="list">/WEB-INF/pages/product/product_list.jsp</result>

<resultname="select">/WEB-INF/pages/product/product_select.jsp</result>

<resultname="clickList">/WEB-INF/pages/product/product_click_list.jsp</result>

<resultname="findList">/WEB-INF/pages/product/product_find_list.jsp</result>

</action>

</package>

<!--购物车Action-->

<packagename="shop.cart"extends="shop.front"namespace="/product">

<actionname="cart_*"class="cartAction"method="{1}">

<resultname="list">/WEB-INF/pages/cart/cart_list.jsp</result>

<interceptor-refname="customerDefaultStack"/>

</action>

</package>

<!--订单Action-->

<packagename="shop.order"extends="shop.front"namespace="/product">

<actionname="order_*"class="orderAction"method="{1}">

<resultname="add">/WEB-INF/pages/order/order_add.jsp</result>

<resultname="confirm">/WEB-INF/pages/order/order_confirm.jsp</result>

<resultname="list">/WEB-INF/pages/order/order_list.jsp</result>

<resultname="error">/WEB-INF/pages/order/order_error.jsp</result>

<interceptor-refname="customerDefaultStack"/>

</action>

</package>

</struts>

4.加载index.do请求，查询出主商品类别等基础信息进入前台index.jsp主页面

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>GO购网络商城by科帮网</title>

<STYLEtype="text/css">

</STYLE>

<SCRIPTtype="text/javascript">

if(self!=top){

top.location=self.location;

}

</SCRIPT>

</head>

<body>

<%@includefile="/WEB-INF/pages/common/head.jsp"%>

<divid="box">

<divid="left">

<divid="left_s01"><s:aaction="customer_login"namespace="/customer"><img

src="${context_path}/css/images/index_23.gif"class="imgx5"/></s:a>

<s:aaction="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>

<divid="left_s02"><img

src="${context_path}/css/images/index_25.gif"width="489"height="245"

class="imgz5"/></div>

<!--类别-->

<s:iteratorvalue="categories">

<divid="left_x">

<divid="left122">

<tablestyle="float:left;height:auto;width:678px;vertical-align:middle;">

<tr>

<tdclass="word14"style="width:22px;padding-left:10px;">

<s:propertyvalue="name"/>

</td>

<tdstyle="padding-bottom:3px;">

<divid="left122_y">

<!--二级-->

<s:iftest="!children.isEmpty">

<s:iteratorvalue="children">

<divstyle="white-space:nowrap;width:28%;float:left;margin-top:5px;margin-bottom:5px;margin-left:26px;">

<bstyle="color:#990000;"><s:propertyvalue="name"escape="false"/></b>　

<!--三级-->

<s:iftest="!children.isEmpty">

<span>

<s:iteratorvalue="children">

<s:aaction="product_getByCategoryId"namespace="/product">

<s:paramname="category.id"value="id"></s:param>

<s:propertyvalue="name"escape="false"/>

</s:a>

</s:iterator>

</span>

</s:if>

</div>

</s:iterator>

</s:if>

</div>

</td>

</tr>

</table>

</div>

</div>

</s:iterator>

</div>

<divid="right">

<!--商品排行-->

<divid="rqpgb">

<tablewidth="195"border="0"cellpadding="0"

cellspacing="0">

<tr>

<tdwidth="195"height="31"><img

src="${context_path}/css/images/index_28.gif"width="195"height="29"/></td>

</tr>

<tr>

<tdheight="5"></td>

</tr>

<tr>

<tdvalign="top">

<s:actionname="product_findByClick"namespace="/product"executeResult="true"></s:action>

</td>

</tr>

</table>

</div>

<!--推荐商品-->

<divid="xpss">

<tablewidth="195"border="0"cellpadding="0"

cellspacing="0">

<tr>

<tdwidth="195"height="31"><img

src="${context_path}/css/images/08.gif"width="195"height="29"/></td>

</tr>

<tr>

<tdheight="5"></td>

</tr>

<tr>

<tdvalign="top">

<s:actionname="product_findByCommend"namespace="/product"executeResult="true"></s:action>

</td>

</tr>

</table>

</div>

<!--热销商品-->

<divid="rxsp">

<tablewidth="195"border="0"cellpadding="0"

cellspacing="0">

<tr>

<tdwidth="195"height="31"><img

src="${context_path}/css/images/index_47.gif"width="195"height="29"/></td>

</tr>

<tr>

<tdheight="5"></td>

</tr>

<tr>

<tdvalign="top">

<s:actionname="product_findBySellCount"namespace="/product"executeResult="true"></s:action>

</td>

</tr>

</table>

</div>

<divid="sckf"></div>

</div>

<divid="foot"></div>

</div>

</body>

</html>

5.index.jsp主页面开始加载页头，加载主商品基本信息链接，<s:action>开始加载热销，推荐商品

后台管理：

1.配置后台管理的structs-admin.xml

<?xmlversion="1.0"encoding="UTF-8"?>

<!DOCTYPEstrutsPUBLIC

"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.1//EN"

"http://struts.apache.org/dtds/struts-2.1.dtd">

<struts>

<!--后台管理-->

<packagename="shop.admin"namespace="/admin"extends="shop-default">

<!--配置拦截器-->

<interceptors>

<!--验证用户登录的拦截器-->

<interceptorname="loginInterceptor"class="com.lyq.action.interceptor.UserLoginInterceptor"/>

<interceptor-stackname="adminDefaultStack">

<interceptor-refname="loginInterceptor"/>

<interceptor-refname="defaultStack"/>

</interceptor-stack>

</interceptors>

<actionname="admin_*"class="indexAction"method="{1}">

<resultname="top">/WEB-INF/pages/admin/top.jsp</result>

<resultname="left">/WEB-INF/pages/admin/left.jsp</result>

<resultname="right">/WEB-INF/pages/admin/right.jsp</result>

<interceptor-refname="adminDefaultStack"/>

</action>

</package>

<packagename="shop.admin.user"namespace="/admin/user"extends="shop-default">

<actionname="user_*"method="{1}"class="userAction"></action>

</package>

<!--类别管理-->

<packagename="shop.admin.category"namespace="/admin/product"extends="shop.admin">

<actionname="category_*"method="{1}"class="productCategoryAction">

<resultname="list">/WEB-INF/pages/admin/product/category_list.jsp</result>

<resultname="input">/WEB-INF/pages/admin/product/category_add.jsp</result>

<resultname="edit">/WEB-INF/pages/admin/product/category_edit.jsp</result>

<interceptor-refname="adminDefaultStack"/>

</action>

</package>

<!--商品管理-->

<packagename="shop.admin.product"namespace="/admin/product"extends="shop.admin">

<actionname="product_*"method="{1}"class="productAction">

<resultname="list">/WEB-INF/pages/admin/product/product_list.jsp</result>

<resultname="input">/WEB-INF/pages/admin/product/product_add.jsp</result>

<resultname="edit">/WEB-INF/pages/admin/product/product_edit.jsp</result>

<interceptor-refname="adminDefaultStack"/>

</action>

</package>

<!--订单管理-->

<packagename="shop.admin.order"namespace="/admin/product"extends="shop.admin">

<actionname="order_*"method="{1}"class="orderAction">

<resultname="list">/WEB-INF/pages/admin/order/order_list.jsp</result>

<resultname="select">/WEB-INF/pages/admin/order/order_select.jsp</result>

<resultname="query">/WEB-INF/pages/admin/order/order_query.jsp</result>

<resultname="update">/WEB-INF/pages/admin/order/order_update_success.jsp</result>

<interceptor-refname="adminDefaultStack"/>

</action>

</package>

</struts>

2.user_logon.action请求执行进入后台页面，登录成功则跳转到全局返回变量main.jsp后台管理主页面中去，失败继续在后台登录页面

http://localhost:8080/Shop1/admin/user/user_logon.do

3.进入后台管理主页面main.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<%@taglibprefix="s"uri="/struts-tags"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

<title>后台管理科帮网</title>

</head>

<%@includefile="/WEB-INF/pages/common/common_admin.jsp"%>

<divid="box">

<!--top-->

<s:actionname="admin_top"namespace="/admin"executeResult="true">头部</s:action>

<divid="mid">

<!--left-->

<s:actionname="admin_left"namespace="/admin"executeResult="true"></s:action>

<!--right-->

<iframename="abc"scrolling="auto"frameborder="0"width="705"height="500"></iframe>

<%--

<s:actionname="admin_right"namespace="/admin"executeResult="true"></s:action>

--%>

</div>

<divid="bottom"></div>

</div>

</html>

4.加载后台管理页面main.jsp,加载里面的<s:action>加载头部top.jsp，左边left.jsp

5.头部top.jsp，左边left.jsp

top.jsp

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<%@includefile="/WEB-INF/pages/common/common_admin.jsp"%>

<divid="top">

<divid="toptiao">

<imgsrc="${context_path}/css/images/flower.gif"width="12"height="12"/>

您好科帮网，<s:propertyvalue="#session.admin.username"/>！　

<s:aaction="user_logout"namespace="/admin/user">

<imgsrc="${context_path}/css/images/ht_02_02.gif"width="55"height="20"align="middle"/>

</s:a>

</div>

</div>

left.jsp:<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>

<%@includefile="/WEB-INF/pages/common/common_admin.jsp"%>

<!--类别-->

<s:urlaction="category_add"namespace="/admin/product"

var="category_add"></s:url>

<s:urlaction="category_list"namespace="/admin/product"

var="category_list"></s:url>

<!--商品-->

<s:urlaction="product_add"namespace="/admin/product"var="product_add"></s:url>

<s:urlaction="product_list"namespace="/admin/product"

var="product_list"></s:url>

<!--订单-->

<s:urlaction="order_list"namespace="/admin/product"var="order_list"></s:url>

<s:urlaction="order_query"namespace="/admin/product"var="order_query"></s:url>

<divid="left">

<divid="left_top"></div>

<divid="left_mid">

<divid="category_title">类别管理</div>

<divid="category_sub">

<atarget="abc"href="${category_add}">添加类别</a>

</div>

<divid="category_sub">

<atarget="abc"href="/Shop1/admin/product/category_list.do">查看所有类别${category_list}</a>

</div>

<divid="category_title">商品管理</div>

<divid="category_sub">

<atarget="abc"href="${product_add}">添加商品</a>

</div>

<divid="category_sub">

<atarget="abc"href="${product_list}">查看所有商品</a>

</div>

<divid="category_title">订单管理</div>

<divid="category_sub">

<atarget="abc"href="${order_list}">查看订单</a>

</div>

<divid="category_sub">

<atarget="abc"href="${order_query}">订单查询</a>

</div>

</div>

</div>

6.点击left.jsp里面的超链接相应的操作，加载都右边right里面来

前端框架

Symiac

Symiac

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

你应该知道的11个微前端框架

微前端将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面和应用程序。本文中，作者收集了 1

南昌千网科技 2020-10-18

Flask框架前端后端交互之传递Json数据

方案一：后端使用 jsonify（）方法响应前端Json数据

chencourage 2020-07-28

Vue.js前端框架系统学习（5）——Vue指令之v-for, v-on, v-bind, v-model

接上一篇文章，这篇文章来整理一下其他的一些vue指令。先申明一下，关于指令的一些概念都搬运自官网，如果有哪些不理解可以直接上官网进行学习。Expects: Array | Object | number | string | Iterable . 基于源数

Symiac 2020-07-04

框架主要是基于.net core 进行的后端Web API的开发二

简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能，本篇随笔继续深化这一主题，着重介绍基于ABP后端接口信息，实现对前端界面的开发工作。ABP框架主要还是基于领域驱动的理念来构建整个架构的，其中领域驱动包含的概念有 域对象Entities、仓储

xxuncle 2020-07-04

Vue.js前端框架系统学习（4）——Vue指令之v-text,v-html,v-if,v-show

指令 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。我们现在components目录下新建一个Dere

Symiac 2020-07-04

为什么使用前端框架

刚工作那会，前端都是用HTML+CSS+JS来写的,现在各种前端框架层出不穷，基本都是引入前端框架来构建前端，为什么？　　React提供的JSX和Vue提供的模板目的是为了实现声明式渲染的功能。　　状态与视图之间的映射关系，等同于render函数。

bowean 2020-06-28

个人技术总结---Android前端界面框架搭建

学习该技术的原因，技术的难点在哪里。编写Android前端界面，搭建基本框架让app界面更加美观。由于本次软件定义为Android方向，所以Android前端界面搭建美观就很重要，在初期考虑使用框架搭建还是自己打的时候，我们在网上查了很多有关Android

风萧萧梦潇 2020-06-14

前端测试框架Jest总结

为了降低上线的bug，使用TypeScript，Flow, Eslint ,StyleLint这些工具可以实现。前端自动化测试工具普及情况不是很好。测试分为单元测试，集成测试和端到端测试。单元测试主要是对一个独立的功能单元进行的测试，通过一个小例子来了解前

woxxoole 2020-06-13

新技术新框架不断涌现，目前学习web前端开发都要掌握什么？

web前端开发由网页制作演变而来，随着web2.0的发展，网页不再只是承载单一的文字和图片，各种丰富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。前端开发市场仍然有着大量的需求。而随着H5、微信小程

RainyX 2020-06-12

[推荐]好书推荐前端自动化测试框架 ——Cypress从入门到精通

　　《前端自动化测试框架 ——Cypress从入门到精通》是一本介绍软件自动化测试框架搭建、使用及定制方面的技术书籍，更是一本端到端自动化测试的专业指导书。包括目前流行的前端自动化测试工具基本介绍，Cypress测试框架的主要特点、性能比较，Cypress

abdstime 2020-06-10

前端测试框架 Jest

前端测试工具也和前端的框架一样纷繁复杂，其中常见的测试工具，大致可分为测试框架、断言库、测试覆盖率工具等几类。在正式开始本文之前，我们先来大致了解下它们：。测试框架的作用是提供一些方便的语法来描述测试用例，以及对用例进行分组。用于统计测试用例对代码的测试情

smj000 2020-06-09

Web前端MVC框架的意义分析

　　Web前端开发是Web技术发展中的一个重要组成部分，在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点，即以页面为主体来展示界面中的信息。然而随着科学技术的不断进步，Web前端开发形式上变得更为复杂，但是其功能方面也逐渐实现了与用户间

学习web前端 2020-06-07

基于jQuery+Bootstrap前端框架的.Net快速开发平台

Learun是一款.net快速开发平台，基于ASP.NET MVC、jQuery、Bootstrap、Dapper ORM等众多优秀框架开发而成，包含了代码 生成器，让您一键生成的后台代码以及前台页面。前端采用的jQuery-ui让您更加方便使用各个元素，

Beibeizhao 2020-05-28

前端网红框架的插件机制全梳理（axios、koa、redux、vuex）

前言前端中的库很多，开发这些库的作者会尽可能的覆盖到大家在业务中千奇百怪的需求，但是总有无法预料到的，所以优秀的库就需要提供一种机制，让开发者可以干预插件中间的一些环节，从而完成自己的一些需求。本文将从koa、axios、vuex和redux的实现来教你怎

jiangcs0 2020-05-22

前端框架和库的区别

jquery库 相当于 dom操作+请求。art-template库相当于模板引擎。框架 =全方位功能齐全。即简易的dom体验+发请求+模板引擎+路由功能+数据管理。一般使用库的代码是调用某个函数，我们自己把控库的代码。一般使用框架，其框架在帮我们运行我们

唯美st丶 2020-05-15

关于vue项目前后端打通

1.本地安装了一个MySQL8，中间因为路径中存在中文，一直有问题，后面采用全英文路径没有出现问题

究极死胖兽 2020-05-12

微前端框架是怎么导入加载子应用的

微前端似乎是最近一个很火的话题，我们也即将使用在生产环境中，接下来会更新一系列微前端源码分析、手写微前端文章。那么registerMicroApps,到底做了什么呢？上面代码里最重要的，如果我们entry传入字符串，那么就会使用这个函数去加载HTML内容。

龙旋 2020-04-22

转型web前端工程师怎样学才能拿高薪？过分依赖IDE，框架成为致命点！

前端开发工程师不仅要掌握基本的web前端开发技术、网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。一般来说，UI设计师会倾向于流畅靓丽，但并不

元元 2020-04-20

Web前端开发必不可少的9个开源框架

大多数人想到Web开发时，通常会想到HTML或JavaScript，往往忽略了CSS，根据Wikipedia的说法，CSS既是网页中最重要也是最常被遗忘的部分之一，尽管它是万维网的三大基础技术之一。今天就和大家分享9个流行的、强大的前端开源框架，帮助你轻松

杏仁技术站 2020-04-15

Web前端开发必不可少的9个开源框架

大多数人想到Web开发时，通常会想到HTML或JavaScript，往往忽略了CSS，根据Wikipedia的说法，CSS既是网页中最重要也是最常被遗忘的部分之一，尽管它是万维网的三大基础技术之一。今天就和大家分享9个流行的、强大的前端开源框架，帮助你轻松

小秋 2020-04-15
Symiac

Symiac

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号