电子商城网站设计与实现

电子商城网站设计与实现摘要：电子商务在90年代便用于商业，直到现在家家户户，从老人到小孩，网络已经成了人们日常生活不可或缺的一部分，人们可以通过它方便的买到自己想要的物品。在网站中，商家可以交付很少的租金甚至无需任何费用，来开一家自己的网店，在任何场所都可以工作。电子商务不仅适合宅男、宅女们，而且还适合上班族晚上回家做兼职，丰富了人们的生活，因此设计一个电子商城网站系统在如今是很意义的。设计主要是在Windows7、myeclipse开发环境下，以mysql为数据库开发平台、tomcat作为应用服务器、采用jsp技术开发的网上购物系统。系统实现了电子商城网站的基本功能。关键词：电子商务;网购;jsp;myeclipseAbstract:ElectronicCommercehasbeenusedforbusinessinthe1990s,untilnowineveryfamilyfromthechildtotheold,theInternethasbecometheessentialpartofthepeople’sdailylife.peoplecanuseitconvenienttobuyanythingwhatyouwant.Inwebsite,businessescanpayalitterrentorevenforfree,toopenhisownshop,whichcanworkinanyplace.Notonlyforthemenorwomenwholikestayathome,butalsoforofficeworkerstodoapart-timejobatnightitissuitableforeveryone,shoppingwebsiteenrichesthelivesofthepeople,sothedesignofanelectronicshoppingwebsitesystemisverysignificanttoday.Thedesignismainlydesignedinwindows7,basedonMyEclipsedevelopmentenvironment,andituseMySQLasdatabasedevelopmentplatform,Tomcatasapplicationserver,usingtheJSPtechnologytodeveloponlineshoppingsystem.Thesystemrealizesthebasicfunctionofthewebsite.Keywords：shoppingwebsite;shoppingonline;jsp;myeclipse目录第1章绪论 第1章绪论1.1课题背景在这个科学技术每天都在不断进步的21世纪，国家在大力推进信息化建设，网络技术也在不断革新，网络已经成了当代新兴的办公交流工具，人们已经渐渐的习惯了使用电子设备来进行办公生活,在这样的时代背景下，电子商务必然会发展成一棵参天大树。电子商务技术每天都在不断更新，随着技术的革新它的功能也变的越来越强大，人们足不出户就可以在网上购买到自己想要的商品。我设计的也正是一个电子商务系统的毕业设计电子商城网站系统。其中包括，前台功能：用户的注册；用户资料的修改；用户登录；购买的商品；商品的搜索；商品的分类搜索；购物车中商品数量的修改、删除以及付款；订单提交及收货人信息的修改。后台功能：管理员登录及密码修改；商品的管理，包括增、删、查、改商品；订单的管理，包括发货及删除；管理员的添加及修改[2]。建立电子商城网站的意义主要有：1.可以树立品牌形象，打响品牌知名度。利用网络，使用户随时随地都有机会接收到产品信息。2.可以提高营销效率，扩大市场，并且大大的减少了中间环节的成本，加快资本累计速度。3.更加方便厂家与用户之间的交流，大大加强商品的流通的速度，使用户更容易用合适的价格买到自己想要的物品。1.2系统开发关键技术本文中使用的是三层构架[3]，这种构架方法在网站中使用的尤为广泛，图1.1就是三层架构原理的结构图。图1.1三层架构原理图1.2.1Java语言及MyEclipseJsp的全名叫作javaserverpage[7]是sun公司主导与其他公司一起建立的的一种技术标准。这种技术就是在网页HTML文件中加入jsp标签和java片段，同时可以对数据库进行调用访问、重新定向网页，实现建立动态网站，这种方式大大降低了对浏览器的要求。归其本源其实就是servlet的简化版。Web在遇到访问jsp的请求时，先执行程序，再将结果和代码返回给客户[5]。其中的java段可以连接使用数据库，实现建立动态网页等功能。Java是一种编写跨平台应用软件的程序设计设计语言，广泛应用于pc端、移动电话和互联网等平台。其语言风格十分接近c、c++。继承了C++面对对象技术的核心。Java由四方面组成:汇编语言、类文件格式、虚拟机jvm和应用程序接口api。平台由虚拟机和api构成。Java分为3个体系：j2se(平台标准版)、j2ee（平台企业版）、j2me(平台微型版)。MYEclipse是一款被程序员广泛使用的集成开发工具。但他还集成了多种工具，用户这样就可以通过使用插件来构建自己的想要的开发环境。MyEclipse本身就包含一个插件来供用户们使用。Myeclipse是对eclipseide的拓展，人们可以用它进行数据库和j2ee的开发，包括完整的编码、调试、测试和发布等功能，支持HTML、SQL、jsf、CSS、Struts、JavaScript、hibernate。[6]在结构上，myeclipse的特征可以被分为7类：1.j2ee模型2.web开发工具3.ejb开发工具4.应用程服务器的连接器5.J2ee项目部署服务6.数据库服务7.Myeclipse整合帮助1.2.2MySQLMySQL是一款关系型通用的数据库管理系统。这款软件具有速度快、使用免费，体积小、开放源码和总体要求成本低诸多优点[1]。它将数据保存在不同的表中，而不是放在一个总的仓库中，这样能做到数据的高速处理和调用，大大提高灵活性。MySQL的目标就是快速、健壮和易用。MySQL的系统特性：1.应用C、C++编写，并通过了多种测试，其可移植性有保证；2.支持多种操作系统；3.为大多数主流编程语言提供API；4.使用多线程，CPU的资源得到了充分的利用；5.提供多种库来供用户连接；6.查询速度提高了很多，因为它是经过优化的查询算法。1.3本文研究内容及主要贡献以下就是该设计的设计流程，通过以下步骤设计出的电子商城网站系统：绪论：通过对课题背景，以及其发展状况和发展趋势，概括性的对这个系统做一个描述，并且介绍主要用到的工具。需求分析：对电子商城网站系统的进行需求分析，并通过可行性分析，包括经济可行性、操作可行性、技术可行性，系统分析、系统功能分析[8]，清晰明朗的介绍这个系统。系统概要设计：主要设计分为三部分，内容包括：总体设计、详细设计和数据库设计。总体设计是对需求分析阶段得出的系统需求进行设计，并且给出系统层次图方便理解。详细设计阶段则是对总体设计阶段划分出的各大功能模块进行的详细分析设计，并通过流程图说明系统流程情况[4]。数据库阶段则对数据库进行物理及逻辑设计，并通过实体——联系图（E-R图）和数据表加以解释说明。设计编码及其所对应的页面截图：该章节分为编码、实现以及测试这三大块内容。给出各模块的关键性代码，实现部分则给出各模块实际效果，测试部分则通过相应的覆盖测试，对比预想情况与实际情况，从而给出相应的测试结果说明。总结与展望：主要是讲该设计需要改进的地方，还有一些欠缺的地方，并为其将来的发展做个展望。第2章需求分析2.1市场现状企业在运行过程中，会遇到一些条件的限制：商品的宣传经常达不到预期的效果，有些宣传是盲目的，客户不需要这件商品却常常能看到这件商品的广告，而有些被人们所需要的商品，却因为缺少宣传，而少被人知晓，受空间与时间的局限很大。产品周转渠道太过繁琐。从工厂到最后被客户购买，期间的周转渠道过于复杂，同时也带来了一些经济损耗，往往导致商品的价格升高很多，顾客望而却步，地区差价很大，企业与顾客之间并没有建立起很全面的交流与运营的平台。企业跟客户之间无法做到良好的沟通，企业要通过市场变化，敏锐的观察商品的销售走势，而客户无法正确认识商品的价值，也无法及时向企业反馈商品的效果和建议[9]。2.2可行性研究可行性分析就是通过调查，对我们要开发的系统是否具备开发的可能性进行评估。可行性研究的目的就是用最短的时间花费最小的精力，决定最后问题是否可以得到解决[10]。我的设计是一个小型的电子商城系统，可以为每一位注册的用户提供便捷的购物环境，这种模式在现在在当前网络大环境下是非常主流的。该系统的主要功能包括，前台功能：用户的注册；用户资料的修改；用户登录；购买的商品；商品的搜索；商品的分类搜索；购物车中商品数量的修改删除和付款；订单提交及收货人信息的修改。后台功能：管理员登录及密码修改；商品的管理，包括的增、删、查、改商品；订单的管理，包括发货及删除；管理员的添加。2.1.1技术可行性Jsp技术可以和各种java技术完好的结合，实现各种复杂的应用。因此是大家广泛应用的一项技术。而且该技术应用简单，可以让人很快速的上手。利用JSP技术可以建立跨平台动态网站，这是一项非常安全和新兴的技术[11]。后台应用mysql进行数据的管理，对于以上提到的技术，都是在我们掌握范围之内的，所以技术上是可行的。2.1.2经济作可行性成本与利益的对比是经济可行性中最为重要的分析的指标。高性能pc机作为企业网站理论上是没有问题的。运营成本不会太高，况且，实现的一些功能都是开放的、免费的，更减少了成本预算的问题，但是却能带动经济的发展。如何做好这项分析，需要咨询一些业内人士和通过详细的市场调研。2.1.3操作可行性在计算机与网络已经广泛普及的现代。如何应用计算机已经成为现在每个人必备的技能。网络更是现在年轻一代必不可少的一部分。运营商对网站进行操作和管理也不是很难的事。用户也渐渐熟悉。2.3需求分析商务系统在经济的高速发展下已经发生了巨大的变化。一些中小型企业随着经济的增长也迅速的成长起来，与此同时这一行业的竞争也越发激烈。[12]我们在制作一个网站的同时不仅是把想要表达的内容放上去，与此同时还需要把企业的思想和理念，展现在客户面前。通过设计多种多样的元素，来吸引浏览者的眼球，要深度挖掘企业的核心竞争力。建立一个自身商品形象的电商网站营销模式是一种非常有效的方法，不仅可以宣传自身品牌形象，还可以传达企业自己的营销模式，完善企业服务环节，减少销售成本。2.4系统功能目标（1）前台管理：用户注册：这是购物的第一步，通过录入用户信息，才可登录系统。用户登录：每个用户根据自己注册的ID，在首页的登陆上填写所注册的名字和密码，就可进入系统。商品浏览：用户可以通过商品类别来查找和浏览来找到自己想要的商品。购物车模块：当用户浏览商品，找到自己想要购买的商品后，我们可以点击“放入购物车”，然后在购物车模块中选择结账，同时购物车模块中的商品如果不想买了，也可点击删除。订单模块：用户可以查看自己的订单详情，管理员则可以根据订单决定是否发货。（2）后台管理：管理员登陆：点击登陆后台，进入后台，管理员通过自己的账号登陆。会员设置：管理员可以查看会员相关信息，添加和删除会员。商品管理：通过这个管理，实现新商品的上架和促销等，也可以将过期的商品信息在系统中删除。订单管理：通过订单管理，用户可以查看自己的订单情况。同时管理员也可以管理用户的订单，决定是否出货。2.5系统实现目标现在的电商网站不仅要能够适应用户的各种需求，还需要设计出精美的网页，来达到吸引浏览者的眼球的目的。因此，我们要端正自己的态度，严谨的规划，认真完成设计的每一步。前台功能：用户的注册；用户资料的修改；用户登录；购买的商品；商品的搜索；商品的分类搜索；购物车中商品数量的修改删除和付款；订单提交及收货人信息的修改[13]。后台功能：管理员登录及密码修改；商品管理，包括的增、删、查、改商品；订单的管理，包括发货及删除；管理员的添加和修改。第3章系统设计电商网站是分商品分类展示、管理员管理两部分，由此可见它是一种非常典型的数据库开发应用程序。在这章首先，我们要做一个总体的设计，从设计思想、体系结构、软件结构各个方面进行说明，通过层次图来划分系统模块[14]。接着在对系统进行详细设计，将总体设计阶段得到的各个功能模块在进行单独设计，并通过流程图来说明运行流程。最后便是本系统的数据库的分析设计，同时还有相应系统的E-R图和数据表结构设计。3.1总体设计总体设计阶段的重要任务就是来设计软件的结构，从设计思想、体系结构、软件结构各个方面[15]进行说明，通过层次图来划分系统模块。3.1.1设计思想该系统用了很多程序都会用到的三层构架。用户层发送一个文件请求给业务层面，业务层接收到请求后，通过处理将请求转换成数据后对数据库进行操作，然后将处理好的数据封装成类的形式从数据库中返回给用户界面层[16]。这样用户界面层客户端接收到的仅仅只有结果，这种方式大大降低了对用户端的硬件要求。3.1.2系统结构根据系统结构及架构设计，我们把前台用户界面模块设计成如图3.1所示结构：图3.1前台用户功能模块后台的功能模块设计如图3.2所示，主要包括：图3.2后台管理功能模块根据面对对象和三层结构的设计思想可以画出以下设计图3.3：图3.3三层结构模块图3.2详细设计1）商品信息查询这个模块的作用就是对商品的名称、图片、出产地等进行录入，同时还会有特价商品，销售排行等内容便于用户查询了解商品。2）购物车管理在你进行购物时，首先你要登陆，登陆后，你就会有一个购物车，当你看到想要购买的商品时点击“放入购物车”，购物车会记录下每一件你想要买的物品。然后你只要点击你的的购物车，可以实现所选商品修改、清空和付款等操作。3）用户信息管理在主页上会有用户登录界面，用户注册后，系统就会把用户信息录入数据库，如果密码忘了还可修改密码，收集的信息包括用户的联系方式、通讯地址、职业等信息，为客户提供更加详细良好的服务，同时也可以帮助商家进行更加简单的市场调研。4）订单处理当点击订单按钮时，用户可以查阅自己的订单，看看是否出货。与此同时，管理员可以根据购物车中的信息，包括送货方式和付款方式，和用户对应的个人信息确定配送信息，并且决定是否发货。用户注册活动图。如下图3.4：图3.4用户注册活动图用户登录活动图，如下图3.5：图3.5用户登录活动图3.3数据库设计3.3.1数据库需求分析订单可以分成多种形式显示。一个用户可以购买多个商品。一个用户对应一张订单。一个列表对应多张订单。针对本系统功能分析，总结出如下的需求信息[17]。用户，包括数据项：用户名、密码、职业、年龄、密保问题及答案。商品，包括数据项：商品编号、商品名、厂家、价格、上架时间、图片。订单列表，包括数据项：订单编号、商品编号、购买数量、下单时间、是否发货。3.3.2数据库概念结构设计从本系统的实体包括：会员信息实体、管理员信息实体、商品实体、商品分类实体、订单实体、购物车实体。实体之间关系的E-R图如图3.6所示：图3.6实体之间E-R图管理员实体的E-R图，如图3.7所示：图3.7管理员实体E-R图商品分类实体的E-R图，如图3.8所示：图3.8商品分类实体E-R图用户信息实体的E-R图，如图3.9所示：商品实体的E-R图，如图3.10所示:图3.10商品实体的E-R图订单实体的E-R图，如图3.11所示：图3.11订单实体E-R图购物车实体的E-R图，如图3.12所示：图3.12购物车实体E-R图3.3.3数据库逻辑结构设计我的设计用的后台数据库软件是mysql[18]，系统数据库名称是db_Shopping,其中包含了9张表。1、数据表概要说明表3.13数据库总表2、商品大类表tb_affiche表3.14表3.14商品大类表3、商品列表tb_goods表3.15表3.15商品列表4、用户及管理员信息表tb_manager与tb_member如表3.16和表3.17表3.16用户tb_member表3.17管理员tb_manager5、订单信息表tb_order如表3.18表3.18订单信息表tb_order3.4本章小结本章节从总体设计以至详细设计再到数据库的设计进行了系统的设计，而且同时在各个阶段给出了对应的层次图，流程图以及相应E-R图等，并且进行了详细的说明和解释。第4章系统实现与测试4.1编码实现首页显示是index.jsp页面，在地址栏中输入http://localhost:8080/Shopping即可登录系统。4.1.1主页login代码如下：<tablewidth="766"border="0"align="center"cellpadding="0"cellspacing="0">//设计主页界面各模块<tr><tdwidth="207"valign="top"bgcolor="#F5F5F5"><!--左侧01--><jsp:includepage="fg-left.jsp"flush="true"/></td><tdwidth="559"valign="top"bgcolor="#FFFFFF"><!--右侧01--> <jsp:includepage="fg-goodSorts.jsp"flush="true"/> <divalign="center"><%if(session.getAttribute("form")!=null){%><br><imgsrc="image/fg_right02.jpg"></div><tablewidth="100%"border="0"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#819BBC"><tr> <%intfree=2;if(freeList.size()<2){free=freeList.size();}for(inti=0;i<free;i++){GoodsFormnewGoods=(GoodsForm)freeList.get(i);%><tdvalign="top"> <tablewidth="257"height="136"border="1"align="center"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#999999"><tr><tdwidth="33%"height="80"rowspan="5"bgcolor="#FFFFFF"><inputname="pricture<%=i%>"type="image"src="<%=newGoods.getPriture()%>"width="140"height="126"></td><tdwidth="67%"height="20"bgcolor="#FFFFFF"><divalign="center"><%=newGoods.getName()%></div></td></tr><tr><tdheight="20"bgcolor="#FFFFFF"><divalign="center"style="text-decoration:line-through;color:#910402">原价：<%=newGoods.getNowPrice()%>元</div></td></tr><tr><tdheight="20"bgcolor="#FFFFFF"><divalign="center"><fontcolor="#F14D83">现价：<%=newGoods.getFreePrice()%>元</font></div></td></tr><tr><tdheight="20"bgcolor="#FFFFFF"><divalign="center"><%=newGoods.getIntroduce()%></div></td></tr><tr><tdheight="13"bgcolor="#FFFFFF"><divalign="center"class="linkBlack"><ahref="#"onClick="window.open('goodsAction.do?action=16&id=<%=newGoods.getId()%>','','width=500,height=200');">查看详细内容</a></div></td></tr></table></td><%}%></tr></table><divalign="center"><%}%><imgsrc="image/fg_right01.jpg"></div><tablewidth="100%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdheight="215"valign="top"> <%intnow=5;if(nowList.size()<5){now=nowList.size();}if(session.getAttribute("form")!=null){ now=3;}for(inti=0;i<now;i++){GoodsFormnewGoods=(GoodsForm)nowList.get(i);%><tablewidth="100%"border="0"align="center"cellpadding="0"cellspacing="0"><tr><td> <tablewidth="99%"border="0"align="center"cellpadding="0"cellspacing="0"bordercolor="#CCCCCC"><tr><tdheight="150"bordercolor="#666666"><tablewidth="96%"border="1"align="center"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#CCCCCC"><tr><tdwidth="36%"rowspan="4"bgcolor="#FFFFFF"><divalign="center"><inputname="pricture<%=i%>"type="image"src="<%=newGoods.getPriture()%>"width="110"height="100"></div></td><tdwidth="64%"bgcolor="#FFFFFF"><divalign="center"><%=newGoods.getName()%></div></td></tr><tr><tdbgcolor="#FFFFFF"><divalign="center"><fontcolor="#F14D83">单价：<%=newGoods.getNowPrice()%>元</font></div></td></tr><tr><tdbgcolor="#FFFFFF"><divalign="center"><%=newGoods.getIntroduce()%></div></td></tr><tr><tdbgcolor="#FFFFFF"class="linkBlack"align="center"><%if(session.getAttribute("form")!=null||session.getAttribute("id")!=null){%><ahref="#"onClick="window.open('goodsAction.do?action=16&id=<%=newGoods.getId()%>','','width=500,height=200');">查看详细内容</a>//用户登陆界面设计<%}else{%>登录后才能购买</td><%}%></tr></table></td></tr></table></td></tr></table><%}%> </td></tr></table></td></tr></table>下图为login.jsp电子商城主页面截图如图4.1所示：图4.1商品主页面截图4.1.2商品大类添加functioncheckEmpty(form){//商品大类的添加for(i=0;i<form.length;i++){if(form.elements[i].value==""){alert("表单信息不能为空");returnfalse;}}}</script><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>电子商城的后台</title></head><linkhref="css/css.css"rel="stylesheet"type="text/css"><body><jsp:includepage="bg-up.jsp"flush="true"/><tablewidth="788"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="170"valign="top"><jsp:includepage="bg-left.jsp"flush="true"/></td><tdwidth="618"align="center"valign="top"bgcolor="#FFFFFF"><br> <tablewidth="610"height="25"border="0"cellpadding="0"cellspacing="0"background="image/bg_02.jpg"><tr><td><divalign="center"><strong>添加商品大类别信息</strong></div></td></tr></table><br> <formaction="bigTypeAction.do?action=2"method="post"name="form"onSubmit="returncheckEmpty(form)"><tablewidth="74%"height="60"border="1"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#CCCCCC"><tr><tdwidth="25%"height="30"><divalign="center">大类别名称</div></td><tdwidth="75%"bgcolor="#FFFFFF">    <inputname="name"type="text"size="50"></td></tr></table><br><inputtype="image"class="input1"src="image/save.jpg"width="51"height="20">  <ahref="#"onClick="javascript:form.reset()"><imgsrc="image/clear.gif"></a>  <ahref="#"onClick="javasrcipt:history.go(-1)"><imgsrc="image/back.gif"></a> </form></td></tr></table><jsp:includepage="bg-down.jsp"flush="true"/>商品类别截图如图4.2所示：商品类别截图添加商品信息：<%ListbigList=big.selectBig();//设计商品信息模块Stringid=(String)request.getAttribute("bigId");if(id==null||id.equals("")){ //当id值为空时，设置id值为-1id="-1"; //当id值为空时，没有选择任何一个商品大类别名称，因此不会出现商品小类别名称}IntegerbigId=Integer.valueOf(id);ListsmallList=small.selectOneBigId(bigId);%><scriptlanguage="javascript">functioncheckEmpty(form){for(i=0;i<form.length;i++){if(form.elements[i].value==""){alert("表单信息不能为空");returnfalse;}}if(isNaN(document.form.nowPirce.value)){window.alert("价格只能为数字");returnfalse;}}functionChangeItem(){varbig=form.big.value;window.location.href="goodsAction.do?action=2&bigId="+big;}</script><tablewidth="788"border="0"align="center"cellpadding="0"cellspacing="0"><tr><tdwidth="170"valign="top"><jsp:includepage="bg-left.jsp"flush="true"/></td><tdwidth="618"align="center"valign="top"bgcolor="#FFFFFF"><br> <tablewidth="610"height="25"border="0"cellpadding="0"cellspacing="0"background="image/bg_02.jpg"><tr><td><divalign="center"><strong>添加商品信息</strong></div></td></tr>//添加商品信息</table><br><formaction="goodsAction.do?action=3"method="post"enctype="multipart/form-data"name="form"onSubmit="returncheckEmpty(form)"><tablewidth="90%"border="1"cellpadding="1"cellspacing="1"bordercolor="#FFFFFF"bgcolor="#CCCCCC"><tr><tdwidth="20%"height="26">  所属大类别</td><tdwidth="31%"bgcolor="#FFFFFF">  <selectname="big"onChange="ChangeItem()"><optionvalue="">请选择</option><%for(inti=0;i<bigList.size();i++){BigTypeFormbigForm=(BigTypeForm)bigList.get(i);%><optionvalue="<%=bigForm.getId()%>"<%if(bigId.equals(bigForm.getId())){out.println("selected");}%>> <%=big.selectName(bigForm.getId())%> </option><%}%></select></td>//选择商品类别<tdwidth="20%">  所属于小类别</td><tdwidth="31%"bgcolor="#FFFFFF"> <selectname="small"><optionvalue="">请选择</option><%for(inti=0;i<smallList.size();i++){SmallTypeFormsmallForm=(SmallTypeForm)smallList.get(i);%><optionvalue="<%=smallForm.getId()%>"><%=smallForm.getSmallName()%></option><%}%></select></td></tr><tr><tdheight="25">  商品名称</td><tdbgcolor="#FFFFFF">  <inputname="name"type="text"size="20"></td><td>  生产厂商</td><tdbgcolor="#FFFFFF"> <inputname="from"type="text"size="20"></td></tr><tr><tdheight="27">  商品定价</td><tdbgcolor="#FFFFFF">  <inputname="nowPirce"type="text"size="20"></td><td>  初始化特价</td><tdbgcolor="#FFFFFF"> <inputname="freePirce"type="hidden"size="20"value="0">0元</td></tr> <tr><tdheight="28">  商品图片</td><tdcolspan="3"bgcolor="#FFFFFF">  <inputname="formFile"type="file"id="formFile"></td></tr> <tr><tdheight="28">  简介</td><tdcolspan="3"bgcolor="#FFFFFF">  <inputname="introduce"type="text"size="50"></td></tr></table><br><inputtype="image"class="input1"src="image/save.jpg"width="51"height="20">  <ahref="#"onClick="javascript:form.reset()"><imgsrc="image/clear.gif"></a>  <ahref="#"onClick="javasrcipt:history.go(-1)"><imgsrc="image/back.gif"></a> </form></td></tr></table>functioncheckEmpty(form){for(i=0;i<form.length;i++){if(form.elements[i].value==""){alert("表单信息不能为空");returnfalse;}}}</script><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>电子商城</title><styletype="text/css"><!--.style1{ color:#FF0000; font-weight:bold;}--></style>商品添加页面截图，如图4.3所示：图4.3商品添加页面4.1.4收银结账页面：<tablewidth="766"border="0"align="center"cellpadding="0"cellspacing="0">//收银页面设计<tr><tdwidth="207"bgcolor="#F5F5F5"><!--左侧01--><jsp:includepage="fg-left.jsp"flush="true"/></td><tdwidth="559"valign="top"bgcolor="#FFFFFF"align="center"><!--右侧01--> <jsp:includepage="fg-goodSorts.jsp"flush="true"/> <br><br> <strong>收银结帐</strong><formname="form"method="post"action="cart_checkOutOrder.jsp"onSubmit="checkEmpty(form)"> <tablewidth="68%"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="30"colspan="2"><divalign="center"class="style1">注意：请您不要恶意或非法提交订单以免造成不必要的麻烦！</div></td></tr> <tr><tdheight="30"><divalign="center">订单编号：</div></td><td> <inputtype="hidden"name="number"value="<%=date.getTime()%>"><%=date.getTime()%></td></tr><tr><tdwidth="24%"height="30"><divalign="center">会员名称：</div></td><tdwidth="76%"> <inputtype="text"name="name"value="<%=form.getName()%>"></td></tr><tr><tdheight="30"><divalign="center">真实姓名：</div></td><td> <inputtype="text"name="reallyName"value="<%=form.getReallyName()%>"></td></tr><tr><tdheight="30"><divalign="center">联系地址：</div></td><td> <inputtype="text"name="address"></td></tr><tr><tdheight="30"><divalign="center">联系电话：</div></td><td> <inputtype="text"name="tel"></td></tr><tr><tdheight="30"><divalign="center">付款方式：</div></td><td>  <selectname="setMoney"class="textarea"> <optionvalue="">请选择</option><optionvalue="银行付款">银行付款</option><optionvalue="邮政付款">邮政付款</option><optionvalue="现金支付">现金支付</option></select> </td></tr><tr><tdheight="30"><divalign="center">运送方式：</div></td><td> <selectname="post"class="textarea"> <optionvalue="">请选择</option><optionvalue="普通邮寄">普通邮寄</option><optionvalue="特快专递">特快专递</option><optionvalue="EMS专递方式">EMS专递方式</option></select> </td></tr><tr><tdheight="60"><divalign="center">备注信息：</div></td><td> <textareaname="bz"></textarea></td></tr></table> <br><inputtype="submit"name="Submit2"value="提交"> <inputtype="reset"name="reset"value="清除"> <inputtype="button"name="back"value="返回"onClick="javasrcipt:history.go(-1)"></form></td></tr></table>填写购物订单截图，如图4.4所示：图4.4填写订单截图4.1.5订单查看页面<tablewidth="766"border="0"align="center"cellpadding="0"cellspacing="0">//查看订单页面设计<tr><tdwidth="207"bgcolor="#F5F5F5"><!--左侧01--><jsp:includepage="fg-left.jsp"flush="true"/></td><tdwidth="559"valign="top"bgcolor="#FFFFFF"align="center"><!--右侧01--> <jsp:includepage="fg-goodSorts.jsp"flush="true"/> <br><br> <strong>订单查看</strong> <br> <br> <br><%if(orderList.size()==0){%>没有订货信息<%}else{%> <tablewidth="95%"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#819BBC"><tralign="center"><tdwidth="15%"height="21">编号</td><tdwidth="15%">电话</td><tdwidth="21%">地址</td><tdwidth="19%">订货时间</td><tdwidth="18%">是否出货</td><tdwidth="12%">操作</td></tr><%for(intorderNumber=0;orderNumber<orderList.size();orderNumber++){OrderFormorderForm=(OrderForm)orderList.get(orderNumber);%><tralign="center"><tdheight="24"><%=orderForm.getNumber()%></td><td><%=orderForm.getTel()%></td><td><%=orderForm.getAddress()%></td><td><%=orderForm.getCreaTime()%></td><td><%if(orderForm.getSign().equals("0")){%>否<%}else{%>是<%}%></td><td><ahref="cart_detail.jsp?number=<%=orderForm.getNumber()%>">查看明细</a></td></tr><%}%></table><divalign="center"> <br> <%if(request.getParameter("number")!=null){%> <br> 订货明细查询 <br><br><tablewidth="89%"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolorlight="#FFFFFF"bordercolordark="#819BBC"><tralign="center"><tdwidth="25%"height="21">编号</td><tdwidth="24%">商品名称</td><tdwidth="28%">商品价格</td><tdwidth="23%">商品数量</td></tr><%floatsum=0;ListorderDetailList=orderDetail.selectOrderDetailNumber(request.getParameter("number"));for(intorderDetailNumber=0;orderDetailNumber<orderDetailList.size();orderDetailNumber++){OrderDetailFormorderDetailForm=(OrderDetailForm)orderDetailList.get(orderDetailNumber);sum=sum+orderDetailForm.getPrice()*orderDetailForm.getNumber();%><tralign="center"><tdheight="21"><%=orderDetailForm.getOrderNumber()%></td><td><%=goodsDao.selectOneGoods(orderDetailForm.getGoodsId()).getName()%></td><td><%=orderDetailForm.getPrice()%>元</td><td><%=orderDetailForm.getNumber()%></td></tr><%}%></table> <tablewidth="89%"border="0"cellspacing="0"cellpadding="0"><tr><tdheight="24"><divalign="right">总金额：<%=sum%>元</div></td></tr></table><%}%></div><%}%> </td></tr></table>商品订单详情截图，如图4.5所示：图4.5订单详细信息4.1.6购物车页面<strong>我的购物车</strong> <divalign="center"><br>//设计购物车模块<%if(session.getAttribute("cart")==null){%>您还没有购物！！！<%}else{%></div><formmethod="post"action="cart_modify.jsp"name="form"> <tablewidth="92%"border="1"align="center"cellpadding="0"cellspacing="0"bordercolor="#FFFFFF"bordercolordark="#819BBC"bordercolorlight="#FFFFFF"><tr><tdwidth="16%"height="28"><divalign="center">序号</div></td><tdwidth="23%"><divalign="center">商品的名称</div></td><tdwidth="22%"><divalign="center">商品价格</div></td><tdwidth="22%"><divalign="center">商品数量</div></td><tdwidth="17%"><divalign="center">总金额</div></td></tr>//购物车内商品的各个属性<%floatsum=0;Vectorcart=(Vector)session.getAttribute("cart");for(inti=0;i<cart.size();i++){SellGoodsFormform=(SellGoodsForm)cart.elementAt(i);sum=sum+form.number*form.price;System.out.print("sum="+sum);%><tr><tdheight="28"><divalign="center"><%=i+1%></div></td><td><divalign="center"><%=dao.selectOneGoods(newInteger(form.ID)).getName()%></div></td><td><divalign="center"><%=form.price%>元</div></td><td><divalign="center"><inputname="num<%=i%>"size="7"type="text"value="<%=form.number%>"onBlur="check(this.form)"></div></td><td><divalign="center"><%=form.number*form.price%>元</div></td></tr> <scriptlanguage="javascript"> <!-- functioncheck(myform){ if(isNaN(myform.num<%=i%>.value)||myform.num<%=i%>.value.indexOf('.',0)!=-1){ alert("请不要输入非法字符");myform.num<%=i%>.focus();return;} if(myform.num<%=i%>.value==""){ alert("请输入修改的数量");myform.num<%=i%>.focus();return;} myform.submit(); }//修改商品 --> </script><%}%></table></form><tablewidth="100%"height="52"border="0"align="center"cellpadding="0"cellspacing="0"><tralign="center"valign="middle"> <tdheight="10">  </td><tdwidth="24%"height="10"colspan="-3"align="left"> </td> </tr><tralign="center"valign="middle"><tdheight="21"class="tableBorder_B1"> </td><tdheight="21"colspan="-3"align="left">合计总金额：￥<%=sum%></td></tr><tralign="center"valign="middle"><tdheight="21"colspan="2"><ahref="index.jsp">继续购物</a>|<ahref="cart_checkOut.jsp">去收银台结账</a>|<ahref="cart_clear.jsp">清空购物车</a>|<ahref="#">修改数量</a></td></tr></table><%}%> </td></tr></table>>购物车页面截图，如图4.6所示：图4.6购物车截图4.1.7会员注册界面functioncheckEmpty(memberForm){//会员注册界面for(i=0;i<memberForm.length;i++){if(memberForm.elements[i].value==""){alert("表单信息不能为空");returnfalse;}}if(document.memberForm.password.value!=document.memberForm.passwordOne.value){window.alert("您两次输入的密码不一致，请重新输入");returnfalse;}if(isNaN(document.memberForm.age.value)){window.alert("年龄只能为数字");returnfalse;}}<body><jsp:includepage="fg-top.jsp"flush="true"/><tablewidth="