基于WEB的电子商务系统的设计与开发

基于WEB的电子商务系统的设计与开发摘要随着科学技术的进步以及时代的变迁，导致生活节奏不断加快，互联网的普及率也迅速提高，在此背景下，电子商务开始逐步进入人们的生活，并且发展到现在，大多数人的生活已经离不开电子商务。目前大多数的企业都有自己的电子商务平台，开发拥有一套自己的电子商务平台已经成为了一种趋势，电子商务平台能为企业带来更多的利润。电子商务是一种依托于网络信息平台的经济贸易形式，主要是B2B(企业对企业)、B2C(企业对个人)以及C2C (个人对个人)三种方式，其本质是一种以信息技术作为工具来进行商品交换的商务活动。电子商务的产生和发展不仅极大的推动了社会的进步和经济的发展，而且为人们的生活带来了很多的便利。在本文实现了一个小型的电子商务管理系统，该电子商务管理系统主要考虑了用户的实际使用需要以及管理人员的管理要求。该系统的开发利用了MVC的分层思想，使用SSH(Struts+Hibernate+Spring)框架进行开发。在本文中，开发之前首先进行了系统的可行性分析与需求分析，明确了系统是否可实现以及所需要实现的功能，然后再进行系统设计。本文使用Eclipse作为开发软件，页面显示使用JSP和HTML技术，所实现的主要功能包括用户管理、系统管理等。最终所实现的系统具有管理方便、功能全面、操作简单、运行稳定的特点。关键词：电子商务系统；Eclipse；JSP；HTML

AbstractWiththeprogressofscienceandtechnologyandthechangeofTheTimes,thepaceoflifeisaccelerating,andthepenetrationrateoftheInternetisalsoincreasingrapidly.Inthiscontext,e-commercehasgraduallyenteredpeople'slife,anddevelopedtonow,mostpeople'slifehasbeeninseparablefrome-commerce.Atpresent,mostenterpriseshavetheirowne-commerceplatforms,andithasbecomeatrendtodevelopasetoftheirowne-commerceplatforms,ande-commerceplatformscanbringmoreprofitstoenterprises.E-commerceisaformofeconomicandtraderelyingonthenetworkinformationplatform,mainlyB2B(enterprisetoenterprise),B2C(enterprisetoindividual)andC2C(individualtoindividual).Itsessenceisabusinessactivitywithinformationtechnologyasatoolforcommodityexchange.Theemergenceanddevelopmentofe-commercehasnotonlygreatlypromotedthesocialprogressandeconomicdevelopment,butalsobroughtalotofconveniencetopeople'slife.Inthispaper,asmalle-commercemanagementsystemisimplemented,whichmainlyconsiderstheactualuseneedsofusersandthemanagementrequirementsofmanagementpersonnel.ThedevelopmentofthesystemutilizesthehierarchicalideaofMVC,beingdevelopedusingtheSSH(Struts+Hibernate+Spring)framework.Inthispaper,beforethedevelopmentofthefirstfeasibilityanalysisofthesystemanddemandanalysis,madeclearwhetherthesystemcanberealizedandtherequiredfunctionstobeimplemented,andthenthesystemdesign.ThispaperusesEclipseasthedevelopmentsoftware,thepagedisplayisusingJSPandHTMLtechnology,andthemainfunctionsimplementedincludeusermanagement,systemmanagement,etc.Thefinalrealizedsystemhasthecharacteristicsofconvenientmanagement,comprehensivefunctions,simpleoperationandstableoperation.Keywords:e-commercesystem;Eclipse;JSP;HTML

目录TOC\o"1-2"\h\u662摘要 22589Abstract 318408第1章引言 531552第2章基于WEB电子商务管理系统相关技术概述 762042.1JSP动态网页技术 7262602.2WEB体系结构 8320182.3MVC结构模式 983722.4SSH(Struts+Hibernate+Spring)集成框架 9321122.5开发工具介绍 1022922第3章需求分析与可行性研究 10211853.1系统需求分析 10207963.2系统前台功能需求 1180223.3系统后台功能需求 121483.4可行性分析 13168093.4本章小结 1314764第4章基于WEB的电子商务管理系统具体设计与实现 1389034.1用户注册和登录 14110664.2用户个人中心 19248384.3留言功能 22171254.4商品详情和购物车功能 223694.5后台管理 253972第5章总结 2826001致谢 302632参考文献 31

第1章引言本课题基于WEB技术，以充分考虑用户需求以及满足管理人员的管理需求为前提对系统进行设计。该设计以Eclipse为开发软件、MySQL为数据库、Tomcat为应用服务器，实现电子商务管理系统，主要的功能包括用户管理、订单管理、系统管理等功能。第2章基于WEB电子商务管理系统相关技术概述基于WEB的电子商务系统设计所涉及到的技术非常多，在本课题中我们所使用的开发工具为Eclipse、Tomcat应用服务器。本章主要将介绍基于WEB体系结构的一些关键技术，以及其他构建系统所需要的相关技术，这其中包括JSP动态网页技术、SSH(Struts+Hibernate+Spring)集成框架、MVC结构模式等等，同时还将介绍开发所使用的软件。2.1JSP动态网页技术JSP(JAVAServerpages)是由Sun公司提出，众多企业参与制作的动态网页技术。在传统网页的HTML文件中，JSP通过插入Java片段和JSP标签来形成JSP文件。当我们在服务器端构建JSP的执行模块后，客户端就能接受到它发来的HTML反馈结果，不需要其他的程序，使用浏览器，用户可以直接查找。当web收到jsp请求时，服务器开始运行web方面的区段，再将所接受到的JSP代码以及运行后的结果打包，送回WEB端。这个过程完成后即满足了创建动态网页所有的需求。JSP技术有很多优点，包括：(1)仅编写一次，就可以在其他任何环境中运行。除了系统之外，代码不需要做任何更改。(2)系统具有多平台支持。JSP技术可以在众多平台上的环境中开发，在任意的环境中进行系统部署和扩展。(3)功能强大的开发工具支持。已经具有很多优秀的开发工具支持的JSP，其中许多都可以免费得到，并且许多工具可以顺利运行于多种平台下。 (4)可以在多种平台的系统上运行，具有良好的适配性，并且拓展、调试等功能很容易就能实现。 (5)与ASP和PHP相比，JSP具有很好的开放性，且支持多脚本语言，适合建立大型WEB应用程序，程序的执行速度较快，学习难度较低，有Session管理，且安全性能较好。2.2WEB体系结构2.2.1WEB的概念WEB(WorldWideWeb)就是平时所说的万维网。Internet扩展链接信息是通过超文本和超媒体的信息组织方式，WEB的主要功能就是实现超文本链接，使文本成为非线性，可以从一个地方直接跳到另一个地方，让使用者在Internet上查询信息时能够更为直观且更加方便。Internet上的信息节点通过超链接后，形成了一种相互关联的网状结构，正是这种连接性所以人们称它为WEB(万维网)。2.2.2B/S结构B/S结构(Browser/Server，浏览器/服务器模式)，是一种经过C/S改进后的结构模式。B/S结构分为三层，即浏览器层，然后是WEB服务器层，最后是数据库服务器层。以上是按照系统主要功能来划分为三层的，但在实际的应用当中，有时候也会在不同的应用服务器上运行不同的功能模块以保证实际的效果，这些都要看实际情况而定。2.2.3WEB技术介绍1.HTML(超文本标记语言)HTML即超文本标记语言。我们所熟知的网页，其本质其实就是超文本标记语言，HTML是靠标记标签来描述网页的，HTML通过结合其他的Web技术一起使用就可以创造出功能强大的网页。WEB是建立在超文本基础之上的。而文本中包含有超链接点，故称之为超文本标记。2.JavaScriptJavaScript是本文中的系统开发语言，是一种解释性语言。作为开发WEB页面的脚本语言而出名，同时也在很多非浏览器环境中被应用。最大的特点是可以直接镶嵌在HTML中。3.jQueryjQuery是一个快速的，简洁的JavaScript库，属于轻量级的JS库，它所实现的功能与JavaScript类似，其目的是帮助开发者写更少的代码，做更多的事，极大的方便了开发人员。4.WebServiceWeb服务是使用开放的XML标准来描述和配置程序的Web应用程序。它的主要功能是使运行在不同机器上的不同应用程序能够在没有第三方软件或硬件的情况下交换数据或相互集成。它是一个软件接口，使各孤立的站点能够相互通信和共享信息。2.3MVC结构模式经典MVC模式中，M是指业务模型，V是指用户界面，C则是控制器，作为许多交互系统和界面系统的构成基础。MVC的本质其实是人为的将程序分为以上所提及的模型、界面和控制器三部分。M即model(模型)的主要作用是减少的代码的冗余量，降低编程人员的工作量。V即View(视图)，主要指的是与用户交互的界面，这其中的界面有很多种，比较常见的包括网页界面和客户端界面。C即controller(控制器)，控制器在MVC结构中起到了指挥官的作用，其功能表现在能够接受用户的输入，再根据用户的输入去调动模型与视图完成一系列的工作，最终实现需求。2.4SSH(Struts+Hibernate+Spring)集成框架SSH集成框架与上文所介绍的MVC结构关系密切，它是基于SSH进行开发的SSH框架集，在现在的软件设计中非常的常见。SSH集成框架与MVC密不可分。其中的Struts、Hibernate、Spring对应着着MVC模式的三层对象。1.Struts对应着前台的控制层，它能够降低系统的耦合度，让逻辑结构更清晰2.Spring负责实体bean的业务逻辑处理，其中的IOC和AOP可以对系统进行最大程度解耦合，让各层次之间的耦合度减小，提高系统的开发效率。3.Hibernate负责数据库的交接以及使用Dao接口来完成操作，这样做的目的是为了让系统操纵数据库更加的方便。2.5开发工具介绍2.5.1Eclispse它是一个十分优秀的用于开发Java软件，它的功能丰富，并且完全支持JSP、HTML、Struts、Spring、CSS、JS、SQL、Hibernate，与上文所提及的各种开发技术相匹配，因此选用用其作为软件的主要开发工具。2.5.2MySQLMySQL是一个关系型数据库管理系统，它的访问速度较快，灵活性较高。其使用标准的SQL数据语言形式，将数据保存到不同的表中。MySQL数据库不仅时开源免费的，同时具有体积较小，速度较快，并且移植性能好的优点。2.5.3TomcatTomcat是一种具有运行时占用系统资源小，扩展性好，支持负载平衡等功能优点的轻量级开源免费应用服务器。第3章需求分析与可行性研究3.1系统需求分析需求分析是软件开发环节的一个重要阶段，是软件生存周期中的一个重要部分。我们开发一款软件系统，最重要的是要搞清楚我们所需要实现的目标，即对客户的需求进行分析，满足客户的一切需要。简单来说需求分析所解决的并不是如何去实现目标，而是需要实现哪些目标。全面的需求分析能够帮助我们在系统设计过程中少走弯路，同时减少时间和资源的浪费，更好的满足客户的要求，获得更大的经济效益。要做好需求分析需要我们更加深入的了解系统，充分考虑系统实现过程中可能遇到的难题以及实现后在操作上的便利。本系统设计的目标是运用系统开发模式和开发体系，设计出一套功能比较完善的电子商务管理系统，利用信息管理方式以实现网络购物功能。该系统主要的面向对象是消费者和商家，商家可以在该平台上展示并出售自己的商品，消费者可以在平台上浏览并购买满意的商品。为了更好的服务交易双方，该系统应该具有良好的交互性和安全性，并且应保证该系统是可维护的，独立的，可操作的。3.2系统前台功能需求系统的前台功能主要是针对使用该系统的用户，旨在能够更好的服务于用户。前台功能即包括电子商务平台所需具有的一些基本功能与一些创新功能，主要包括：登录与注册、网站首页导航、购物车功能、个人信息管理、新闻公告展示、留言功能几部分。(1)登录与注册用户可以通过注册功能成为网站的会员，注册只需要填写一些个人信息即可，比如姓名、出生年月日、电话号码以及地址和邮箱。成为会员后可以使用登录功能进行登录，此时便不在以游客的身份浏览网站，并且能够实现更多的功能，比如留言，购物时无需多此填写收货信息等。(2)网站首页导航网站首页要为用户提供导航功能，在网站首页有商品分类、特价产品展示、热卖商品展示、公告新闻等内容。其中商品分类将商品进行划分，能够帮助用户更快的找到自己的所要购买的产品；特价商品展示则为用户提供近期价格便宜的商品信息；热卖商品展示为用户提供近期销量高的商品信息；公告新闻内容展示给用户近期网站的公告和新闻消息。这些功能的目的都是帮助顾客能够获得更好的购物体验。(3)购物车功能用户能够将自己想要但未付款的商品被添加到购物车中。添加到购物车中的商品没有数量限制，用户可以对购物车中的商品进行修改和删除，也可以对购物车中的商品一起付款，而无需单独付款，非常方便。(4)个人信息管理在个人信息管理功能中，用户可以自由更改自己的基本信息，但是一些个人信息的更改是有格式限制的，如果更改的信息不符合所设置的格式则无法更改。(5)新闻公告展示新闻公告展示主要是网站网站管理员或者商家用来发布一些信息的，商家可以给网站方面出租金租用展示界面用来给自己打广告。(6)留言功能用户可以使用留言功能对购买的某一商品或者是某一商家进行留言评论，对产品或服务进行评论或提出意见，留言功能的一大目的是可以给用户提供建议，用户也能够给网站通过建议，留言功能有助于促进网站更好的服务用户。3.3系统后台功能需求系统的后台功能需求即需要考虑网站管理者的管理与维护的需求，对系统的后台管理主要考虑到网站的用户、涉及商品的各种信息以及网站本身三个方面，因此可分为用户管理、商品信息管理、订单管理、数据管理和系统管理五个子功能。(1)用户管理用户管理是指赋予后台管理人员权限，可以对使用该系统的用户信息和账号进行管理和维护。对用户的信息管理包括更改用户的姓名、编号、联系方式等信息，还能够查询用户的订单等；对用户的账号管理包括当用户有不正当行为或言论时能够封禁并注销用户账号。(2)商品信息管理商品信息管理是指管理人员能够对网站中的商品进行更改类别、删除、增加、查询、修改等一系列操作管理。商品管理在网站的管理系统中十分重要。(3)订单管理订单管理包括两个方面，其一订单信息管理，即管理员可以查询订单的下单时间、商品信息、订单号、姓名、手机号等信息；其二订单状态管理，即管理员可以查询订单的提交、待发货、已发货、已接收等状态，并且能对状态进行更改。(4)数据管理数据管理即管理员可以对前台的各种数据进行查询、更改、增加、删除等操作，用于维护系统的前台数据。(5)系统管理系统管理是指管理员对整个系统的管理，整个系统主要就包括了三个方面，一是对数据库方面进行管理，二是对网站的前台进行管理，三是对后台管理进行。3.4可行性分析开发任何一个基于计算机的系统，都会受到时间和资源上的限制。因此，在接受项目之前，必须根据客户可能提供的时间和资源条件进行可行性研究。这样就可以避免人力、物力、财力上的浪费。项目风险越大，开发高质量软件的可行性就越小。3.4.1技术可行性技术可行性主要分为两个方面：一是要考虑当前是否有满足系统实现的软硬件配置，二是是否有可靠的技术满足系统的实现。经分析：开发电子商务系统硬件、软件要求不高，所使用的Eclipse和MySQL等开发工具以及JSP等技术目前市场上的一般计算机软硬件都能满足系统开发要求，并且大多数操作系统都能满足这些工具与技术的运行，因此技术方面是可行的。3.4.2经济可行性设计该系统所使用的Eclipse、Tomcat等开发工具都是免费的，开发成本很低，同时的维护由程序人员即可完成，避免了一部分的人工成本，开发完成后即可投入使用，而且从近年的数据显示来看，电子商务所带来的经济效应也是极佳的，因此经过分析得出经济方面是可行的。3.4本章小结本章确立了系统的总体需求，并且分别从系统的前台功能需求以及后台功能需求两方面进行了总结，同时还分析了实现该系统各方面的可能性，不仅为系统的实现确定了方向，而且提高了实现系统的信心。第4章基于WEB的电子商务管理系统具体设计与实现本次基于WEB的电子商务管理系统设计所使用的开发平台为Eclipse，使用了JSP等相关技术，同时使用了JavaScript等开发语言进行系统的开发，系统的数据库支持为上一章所介绍的MySQL。在进行开发之前我们首先进行了开发环境的搭建，首先安装JDK，配置环境变量JAVA_HOME(C:\ProgramFiles\Java\jdk1.8.0_25)，然后Eclipse关联JDK，其操作是Eclipse—>Window—>preferences—>java—>installedJRES—>Add—>StandardVM—>找到对应的JDK，最后Eclipse关联Tomcat，其操作是Eclipse—>Window—>preferences—>Server—>RuntimeEnvironments—>Add—>Apache—>选择ApacheTomcatv9.0—>找到tomcat路径以及设置。4.1用户注册和登录4.1.1用户注册用户若要使用购物车功能和购买商品，那么就必须先登录，用户要进行登录就要先完成注册。用户在注册时要填写详细的个人信息，以便更好的服务用户。用户注册流程图如图5-7所示。用户注册页面如图5-8所示，带*的信息是用户必须填写的信息，用户必须先填写用户名，如果用户名为空那么用户将不能填写其他信息，并且提示用户“用户名不能为空”，若用户填写的用户名已存在，系统将会给出提示“用户名已存在，请重新输入！”。如果用户有必须填写的信息未填写，那点击提交注册将无法成功，并且将提示用户未填写的信息“某某不能为空”。当用户注册成功后将显示如图5-9所示页面。用户注册的核心代码如下：<scripttype="text/javascript">functioncheckForm(){//var变量userName是变量名;通过$获取ID，就相当于拿到了这个元素的value{val()}varuserName=$("#userName").val();varpassword=$("#password").val();varrePassWord=$("#rePassWord").val();varmobile=$("#mobile").val();varaddress=$("#address").val();if(userName==""){$("#error").html("用户名不能为空");//向error指定的元素中添加一句话！returnfalse;}if(password==""){$("#error").html("密码不能为空");returnfalse;}if(rePassWord==""){$("#error").html("确认密码不能为空");returnfalse;}if(rePassWord!=password){$("#error").html("密码要与确认密码相同");returnfalse;}if(mobile==""){$("#error").html("手机号码不能为空");returnfalse;}if(address==""){$("#error").html("地址不能为空");returnfalse;}returntrue;}functioncheckUserName(){//获取你在该元素中写的值varuserName=$("#userName").val();if(userName==""){//如果是空的，对不起用户不能空！$("#userErrorInfo").html("用户名不能为空!");//鼠标仍然存在此输入框中$("#userName").focus();return;}else{//否则userErrorInfo什么都不做$("#userErrorInfo").html("");}$.post("userServlet?oper=checkName",{userName:userName},function(data){if(data=='true'){$("#userErrorInfo").html("");}else{$("#userErrorInfo").html("用户名已存在，请重新输入！");$("#userName").focus();}});}</script>图5-7注册流程图图5-8用户注册页面图5-9注册成功页面4.2.2用户登录用户登录界面如图5-10所示，用户需要输入用户名、密码和一个随机生成的验证码，然后点击立即登录按钮，将提交给系统验证，当用户名、密码和验证码均正确时才能登录，若用户名或密码错误时，将提示用户名和密码错误，当验证码错误时，将提示验证码错误，并且需要重新输入用户名和密码。用户登录的核心代码如下：<scripttype="text/javascript">functioncheckForm(){varuserName=$("#userName").val();//获取该对象的值varpasswrod=$("#password").val();varimageCode=$("#imageCode").val();if(userName==""){$("#error").html("用户名不能为空");returnfalse;}if(passwrod==""){$("#error").html("密码不能为空");returnfalse;}if(imageCode==""){$("#error").html("验证码不能为空");returnfalse;}returntrue;}functionloadimage(){document.getElementById("randImage").src="image.jsp?"+Math.random();}</script>图5-10用户登录页面4.2用户个人中心4.2.1个人信息管理当用户进行登录后，若用户点击注销则将退出当前登录，若用户点击自己的用户名，则将进入个人中心，可进行用户个人信息的修改，修改页面如图5-11所示，在修改页面中，用户可以更改自己的用户名、姓名、生日、手机号、地址等信息，当修改完成后点击更新页面则修改后的信息将录入数据库当中，并跳转回用户中心界面。用户资料修改核心代码如下：<scripttype="text/javascript">functioncheckForm(){vartrueName=$("#trueName").val();varpassword=$("#password").val();varbirthday=$("#birthday").val();varmobile=$("#mobile").val();varaddress=$("#address").val();vardentityCode=$("#dentityCode").val();varemail=$("#email").val();if(trueName==""){$("#error").html("姓名不能为空！");returnfalse;}if(password==""){$("#error").html("密码不能为空！");returnfalse;}if(birthday==""){$("#error").html("出生日期不能为空！");returnfalse;}if(mobile==""){$("#error").html("手机号码不能为空！");returnfalse;}if(address==""){$("#error").html("送货地址不能为空！");returnfalse;}if(dentityCode==""){$("#error").html("身份证不能为空！");returnfalse;}if(email==""){$("#error").html("邮件不能为空！");returnfalse;}returntrue;}</script>图5-11个人信息修改页面5.2.2用户个人订单管理用户登录后可以进入个人订单管理界面查看和管理自己的订单，用户的订单将在用户结算后自动生成，在个人订单界面中会显示出用户下单的时间、订单金额、订单号以及订单状态等关键信息，订单管理如图5-12所示。图5-12订单管理界面4.3留言功能用户登录后点击留言板则将进入留言界面，如图5-13所示，在留言界面中可以看到其他用户的全部留言，并且在下方的留言内容框中输入用户自己想要留言的信息再点击提交留言即可完成留言。图5-13留言界面4.4商品详情和购物车功能当用户点击商品图片或者商品ID时将展示如图5-14所示的商品详情展示界面，在商品详情展示中有商品的价格、库存、图片以及商品详情描述，同时还可以在该界面点击购买按钮购买该商品，点击加入购物车按钮将该商品加入进购物车。购物车界面如图5-15所示，顾客可以把想要的商品加入购物车进行统一结算，在购物车中可以更改商品的数量也可以删除商品。购物车的关键代码如下：<scripttype="text/javascript">$(function(){//自动加载setTotal();//每次刷新页面都会调用此方法functionsetTotal(){//商品的总价varsub=0;$(".productTr").each(function(){//获取商品的数量varnumber=$(this).find('input[class=text_box]').val();//获取商品的价钱varprice=$(this).find('label[class=price_]').html();//计算数量*价钱=总价钱sub+=number*price;});//把总数显示到总计处$("#product_total").html(sub);}//对"+"按钮进行操作$(".add").click(function(){//获取被修改的inputvart=$(this).parent().find('input[class=text_box]');t.val(parseInt(t.val())+1);//获取td隐藏域的id的值varproduct_id=$(this).parent().find('input[id=productId]').val();//获取对应ID的单价varprice=$("#price_"+product_id).html();//加价$("#productItem_total_"+product_id).html(price*t.val());refreshSession(product_id,t.val());setTotal();});$(".min").click(function(){//获取被修改的inputvart=$(this).parent().find('input[class=text_box]');t.val(parseInt(t.val())-1);if(parseInt(t.val())<1){//不允许减少到1以下！t.val(1);}//获取td隐藏域的id的值varproduct_id=$(this).parent().find('input[id=productId]').val();//获取对应ID的单价varprice=$("#price_"+product_id).html();//加价$("#productItem_total_"+product_id).html(price*t.val());refreshSession(product_id,t.val());setTotal();});//刷新functionrefreshSession(productId,count){$.post("shopping?oper=updateShopping",{productId:productId,count:count},function(result){varresult=eval('('+result+')');if(result.success){console.log(result);}else{alert("刷新Session失败！");}});}});functionremoveShopping(productId){if(confirm("您确定要删除这个商品吗？")){window.location.href="shopping?oper=remove&productId="+productId;}}</script>图5-14商品详情展示图5-15购物车4.5后台管理4.5.1后台管理登录后台管理员与普通用户同用一个数据库表，后台登录人员身份的判断是根据表中status的值所确定，当status=1时为普通用户，该用户没有后台登录权限，当status=2时，该用户为管理员身份，可以登录后台管理界面，登录界面如图5-16所示。图5-16后台管理登录4.5.2用户管理用户管理界面如图5-17所示，管理员能够添加和删除用户，点击修改按钮能够对用户信息进行修改。图5-17用户管理图4.5.3商品管理在商品管理中，管理员不仅能够删除、增加和修改商品的各种信息，而且还可以将商品设置为热卖或者特价，同时还能更改商品的大类别和小类别信息。商品管理界面如图5-18所示。5-18商品管理图4.5.4订单管理订单管理中非常关键的一环是管理员能够对订单的状态进