B2C网上商城Web前端系统设计与实现_第1页
B2C网上商城Web前端系统设计与实现_第2页
B2C网上商城Web前端系统设计与实现_第3页
B2C网上商城Web前端系统设计与实现_第4页
B2C网上商城Web前端系统设计与实现_第5页
已阅读5页，还剩91页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

绪论1.1项目研究背景及研究目的1.1.1研究背景网络的诞生，犹如化学催化剂，加快了我们前进的步伐，推动了生活方式的改变，网络已经成为这个时代的主流，成为人们生活当中重要的一部分，我们可以通过网络快速获取信息、发表信息和分享信息，包括政治、生活、经济等方面的信息，总之，互联网发挥的作用越来越重要。网络的普及，是电子商务发展的一大要素，在互联网的影响下，电子商务网上商城应运而生，它摒弃了人们以前传统的购物方式，顾客不需要出门购物，而是将商品直接放到互联网上进行交易，在互联网上完成商品的买卖和交易过程；快节奏的生活方式，缩短了人们的休息时间，而这种购物方式却刚刚能够弥补这种快节奏的生活方式造成的缺陷，而且，人们对时尚的关注度越来越高，线下的实体商城已经不能够满足大家的需求，而电子商务网上商城的出现，恰到好处的给大家提供了一个良好的平台，来满足大家的各种需求。只要身边有网络，打开任何一个浏览器，找到商城，就可以随时随地去浏览商品信息，查看自己想要购买的各种商品，选择商品，输入地址，在网上下订单，就可以购买商品。电子商务受到越来越多的企业的关注，电子商务的发展必然是大势所趋。这次所选的网上商城课题主要是经过分析当前电子商务网上商城的现状，特别是B2C（即商家对顾客）模式，电子商务网上商城最近几年发展迅速，加上网民数量的不断增多，更是促进的网上商城发展的脚步。从美国的第一家网上书店的开放，到中国现在的当当和淘宝等商城的发展，无一不展示了电商网站在这个时代的地位，这同时也丰富了大家的日常。电子商务网上商城就是将商品信息发布到网上，然后顾客可以进入商城浏览商品信息，然后将相应的商品信息加入购物车，或者直接对商品进行购买，完成商品的买卖过程。如今，很多网上商城产品种类繁多，分类明确；本次课题设计的系统，对于消费者来说，可以让消费者在不出门的情况下买到称心如意的商品；而对于商家来说，为商家带来更多的利益。1.1.2研究目的经济全球化的实现，推动了整个世界的发展，在这个信息日益多样化的时代，电子商务在各种催化剂的作用下发展起来，已经成为商家和企业关注的焦点。计算机网络的发展及普及，对我国经济的发展产生了很大的推动作用。不管是传统的企业，还是新生的互联网企业，都会受到电子商务的影响。电子商务的诞生，使得服务行业发展迅速。电子商务作为现在的商业性信息平台，提高了企业和商家的服务质量，为大家带来了极大的便利，更是为企业和商家带来了更大的利润空间。电子商务的发展是现在信息化的核心，在促进国家经济发展中有着极高的地位，对以后促进国家的发展，加强国家地位，有着十分重要的意义。1.2网上商城系统1.2.1电子商务系统的简介ElectronicCommerce，即电子商务,Electronic的意思是电子的，电商的，Commerce的意思是商务，现在我们在各种开放的网络环境下，利用互联网，然后在该平台上放入相应的商品信息，通过电子支付和各种网络支付等交易方式，在商家和顾客不面对面交易的情况下，进行的一种全新的网上交易模式，这就是所谓的电子商务。综上，电子商务就是通过一种现有的电子技术，在网络平台下进行的一种商业性质的交易活动。电子商务是现在最受企业欢迎的一款应用型软件，它主要是通过一种轻量级的框架来进行开发的，这款受欢迎的框架就是J2EE框架，全称是Java2Platform,EnterpriseEdition。J2EE可以挑战任何难度较高的电子商务应用软件的开发是他越累越受欢迎的重要因素。使用J2EE开发出来的软件，部署能力极强，部署起来也相对方便，而且在系统出现Bug时，它能够及时找出对应的Bug，并且在尽可能块的时间内提供对应的系统解决法案。1.2.2电子商务的发展现状及趋势电子商务对大家来说并不陌生，美国是电子商务的龙头，人尽皆知，它是世界上最早着手于实现电子商务交易的国家，现如今，美国人民已经越来越习惯于在家中上网，在网络平台上购买商品。近些年来，大部分信息化程度较高的国家，如：美国、日本、欧洲等，这些国家电子商务网上商城的发展速度不容小觑，其中很多大品牌公司已经跻身于各种网络购物平台。全球化趋势越来越流行，国外电子商务的发展对我国电子商务网上商城的发展具有很大的推动力作用。我国的电子商务的发展已经有了一个全新的面貌，现在的电子商务对拉动我国的经济发展，提高国家GDP值，对扩大我国的国民消费水平起着举足轻重的作用。现在电子商务的成交额越来越多，群众也越来越熟悉这个购物平台，这些都为我国网上商城的发展奠定了稳定的基础。在未来的几年发展中，我国的电子商务的发展仍将处于一个上升的趋势，快速的融入到互联网发展的前列，跻身于世界发达水平。加之近几年来，国家在这些发面采取的一些措施，更是推动电子商务发展的有力保障。现在大多数的传统型企业在互联网的推动之下，也正在向电子商务网上商城转型，网上商城的发展是大势所趋。自古以来，利弊同在，我国电子商务的发展还面临着很多问题。尽管这几年，国家政府对电子商务的发展提出了很多有效的政策，但是，这些政策落实起来还是会有很大的困难；此外，我国的经济发展水平不平衡导致我国民众对电子商务的认知不够全面，对电子商务的快速扩张发展有一定的阻碍。1.3系统的实现任务这次课题要求使用基于J2EE的框架来完成相关系统的开发。这个涉及到前端页面，所以要使用相关的前端技术HTML、CSS和后台开发框架SSH结合起来完成这次系统的开发，实现浏览商品信息、管理购物车、管理订单和管理个人信息个部分，然后熟悉相关的测试和部署工作，了解相关技术支持，像对数据库的操作等。2实现网上商城所需的技术本次课题研究技术就是SSH框架，它基于J2EE轻量级框架，近几年，企业的发展变化很大，都在逐渐转型，对框架的要求也就越来越高，由于J2EE框架的各种优势所在，例如：部署能力好、处理和解决问题的速度快，受到越来越多企业的青睐。一款全球化的电子商务软件的开发，选择J2EE来开发是毋庸置疑的。2.1后台技术J2EE电商网站的迅速普及，由SUN公司开发出来的轻量级的企业级开发框架J2EE框架也为大家熟知。那么J2EE是怎么开发软件的？J2EE通常是采用多层次的开发模式，也就是说划分为多个组件，然后在不同的服务器上安装这些组件。J2EE应用是由Servlet和JSP（JavaServerPages）这两部分组件组成的，分别是，其最明显的特征就是组件必须运行在容器中。Hibernate，Spring，Struts2，EXTJS，Json这些是在J2EE开发过程中常见的框架。这次开发主要使用的技术是SSH框架，SSH框架是由struts、spring、hibernate集成的一个框架，也是现在使用较多，较受欢迎的框架，它是基于J2EE来实现的。struts、spring、hibernate在框架中扮演着不同的角色。struts框架是一个被广泛使用的开源框架，使用灵活方便、其组件实现模块化、具有重用性，为我们开发软件提供了很大的便利，struts有两个版本：struts1和struts2，现在一般使用的是struts2，它的控制器是由过滤器、拦截器、Action三部分组成，其中action是最重要的部分，被称为业务控制器。Spring框架也是一个开源框架，它被组织在七个模块中，是一个控制反转、面向切面的轻量级框架，IoC(控制反转)是学习spring的基础。IoC(控制反转)是指将设计好的类交给容器来控制，容器则负责实例化对象，并将对象依赖的属性进行注入，从而得到一个可用的对象。Spring框架的这些属性使得编写出来的代码简洁、更易管理。Hibernate同上述二者一样，也是一个开源框架，它能够将java类与关系数据表进行映射，同时提供面向对象的数据查询机制，简化应用的数据持久层编程，它主要包括三部分：持久化对象（用来映射数据库中的记录）、hibernate属性文件（配置相关数据库访问信息）和XML映射文件（关联实体类字段和表中字段）。在实际应用中扮演的角色一般都是数据库操作，完成对数据的管理。2.2前端开发技术前端页面的实现，则使用的是符合W3C标准的前端技术，例如：HTML、CSS、JavaScript、AJAX等，HTML和CSS主要是实现网页的结构布局和显示样式，JavaScript则负责实现页面的动态交互，AJAX则负责前后台数据交互的实现。在电子商务网站的建设过程中，我们会遇到大量的前后台数据交互的情况，掌握动态网页编程语言对我们来说，十分重要。2.2.1HTML技术介绍HTML，开发前端页面的常用技术，它是一种超文本标记语言，它的全称是HyperTextMark-UpLanguage，我们只要在学习过程中了解其各种标记的使用，就可以很方便的使用，HTML的格式非常简单，由文字和标记组合而成，可以在任何编辑工具中使用，保存文件时，只需要将其后缀名改为.html或者.htm即可。HTML在网页编辑中的作用主要就是确定网页的结构，我们需要了解其中常见的空标签，如：<hr/>、<br/><input/>、<img/>、<meta/>、<link/>等。2.2.2CSS技术介绍CSS一种层叠样式表，它的英文全称是Cascadingstylesheets,它的作用主要是来定义HTML标签如何显示在页面中。常见的样式修饰方式主要有3种：内联样式表、内部样式表和外部样式表，W3C标准规定，要实现样式与结构的分离，所以一般使用外部样式表来定义标签在页面中的显示，这种方式需要使用link标签将文件引入到对应的HTML结构中。外部样式的优先级最低，内联样式表的优先级最高，内联样式则是直接将CSS代码嵌入到HTML标签中，内部样式则是使用<style></style>标签将CSS代码包裹起来，放入到<head></head>标签中。我们还需要了解CSS样式的常见属性及值，了解它的常见选择器：ID选择器、类选择器、标签选择器等。CSS的存在可以使我们做出结构优美的页面展示给用户，使得页面的显示内容不在枯燥，也摆脱了使用Flash技术的繁琐缺陷。2.2.3JavaScript技术介绍JavaScript与java不同，JavaScript是基于对象的，是一种脚本语言，是现在实现前端页面使用频繁的技术，其主要作用就是实现页面信息的动态显示，实现一些动态效果，为用户提供一个友好的交互界面。JavaScript常见的使用方式有两种：一种是JavaScript代码嵌入到<script></script>标签中，这种方式一般需要将JavaScript代码放在body之后，他需要在整个加载完成之后，在实现动态效果；我们也可以将JavaScript代码包裹在一个以.js结尾的JS文件中，使用外部文件来包裹JS，在使用的使用<script></script>标签将JS文件引入到页面中；将JS代码包裹成外部文件之后，有利于实现页面结构与行为的分离。实现页面的特效，我们需要先获取到DOM（全称为Document）对象，然后为DOM对象挂接事件，从而实现特定的效果。获取DOM对象常见的几种方法有：（1）document.getElementById()：通过id名获取对象，只可以获取一个对象；（2）document.getElementsByTagName()：通过标签名获取DOM对象，返回值为集合；（3）document.getElementsByName()：通过name属性获取对象，返回值为集合；（4）document.getElementsByClassName()：通过类名获取DOM对象，返回值为集合；获取到DOM对象之后，我们需要为对象绑定相应的事件，绑定事件的方法主要有一下几种：（1）<buttonid="button1"onclick="testButton1()">BUTTON1</button><script> functiontestButton1(){ alert(“这是第一种挂接事件的方式”);alert(this);//这里的this指的是window }</script>这是绑定事件的第一种方式，这种方式是直接将事件绑定到元素标签内部，可以传递参数，触发对象是window对象。（2）<buttonid="button2">BUTTON2</button><script> varbutton2=document.getElementById("button2"); button2.setAttribute("onclick","testButton2()"); functiontestButton2(){ alert(“这是第二种挂接事件的方式”); alert(this);//this指的是window对象 }</script>这是绑定事件的第二种方式，这种方式使用的是setAttribute()方法，使用这种方式绑定事件时，需要传入两个参数，第一个是绑定的事件，第二个是绑定的参数，它可以绑定多个事件。触发对象是window对象。（3）<buttonid="button3">BUTTNO3</button><script> varbutton3=document.getElementById("button3"); button3.addEventListener("click",testButton3); button3.addEventListener("click",testBytton2); button3.attachEvent("onclick",testButton2); functiontestButton2(){ alert(3); } functiontestButton3(){ alert(this);//this指的是按钮 }</script>这是绑定事件的第三种方式，调用addEventListener()方法，传入两个参数，第一个为绑定的事件，不能加“on”,第二个是函数名，不能给函数名加括号。通过多次调用addEventListener()方法可以挂接多个事件，后挂接的事件不会覆盖先前挂接的事件，所有的挂接事件都可以执行；这种方式是推荐使用的方式，值得注意的是：该方式在老版本的IE中不支持；attachEvent与addEventListener()方法类似，但是该方法只有IE高版本浏览器支持，其他几个浏览器都不支持，兼容性不好，不推荐使用。（4）<buttonid="button4">BTN4</button><script> varbutton4=document.getElementById("button4"); button4.onclick=testButton4;button4.onclick=testButton3; functiontestButton4(){ alert(this);//this指的是按钮 } functiontestButton3(){ alert(123); }</script>这是绑定事件的第四种方式，这种方式使用.onclick属性来绑定事件，是现下最受欢迎的使用量最多的绑定事件的方式，格式如下所示：btn4.onclick=testBtn4；该方式不能直接传递参数，函数名后边也不可以添加括号和参数，否则就会直接调用该函数；使用.onclick属性不可以直接挂接多个事件；多次使用.onclick属性挂接不同的事件时，后挂接的事件会将先挂接的事件覆盖，只执行后挂接的事件；触发该事件的对象是按钮元素。2.3数据库MySQL是一个小型关系型数据库管理系统，被广泛的应用于Internet上的中小型网站中。MySQL的特征如下：（1）性能快捷、优化Sql语言（2）容易使用（3）多线程和可靠性（4）多用户支持（5）源代码开放、可移植（6）遵循国际标准和国际化支持（7）为多种编程语言提供API3系统需求分析在真正的开发一个软件系统之前，我们首先要做的就是对该系统进行需求分析。需求分析在整个软件开发的前期阶段扮演着重要的角色。软件需求分析是软件开发周期的第一个阶段，准确的回答出“系统必须做什么？”是需求分析阶段的基本任务，即分析用户的具体需求，明确用户需要完成一个什么样的系统，这个需要实现的功能有哪些。需求分析阶段的主要目的就是为了对该软件所需要实现的功能进行全面的、详细的描述，使得软件能够达到用户所期望的标准。3.1功能需求3.1.1网上商城流程图B2C网上商城的完整的操作流程如下：作为普通访客，只能通过网上商城浏览商品信息，不能对商品下订单或者进行其他的操作；注册后的用户，作为商城会员，登录系统之后，可以浏览商品信息，看见合适的商品，需要购买时，可以直接下订单；也可以先将关注的商品加入到购物车中，随时从购物车中选择商品并下订单，实现购买。具体流程如图3-1所示：图3-1网上商城流程图3.1.2用例图功能需求就是要我们明确一个系统需要干什么。通过对用户的商城浏览流程来分析，可以确定一个B2C网上商城的需求，这次设计的系统主要是针对与前端功能来实现的，即客户端，所以在研发系统的过程中没有涉及到商家，只是对用户的使用需求做出了以下分析，主要包含以下几个模块：商品信息的浏览、管理订单、管理购物车和管理个人信息。用例图描述的是系统的参与者与它们的用例之间的关系。参与者，即用户，可以实现主要的4个功能，这4个功能模块又有对应的下属子模块。用例图如图3-2所示：图3-2用例图浏览商品信息商品信息的浏览是一个网上商城最基本的功能，它可以对分类的商品信息进行查看。管理订单管理订单主要实现的是对订单的创建、修改、查询和删除操作；创建我的订单信息：订单信息的创建过程，实际上就是一次完整的购物流程，用户登录，选择商品信息，确认收货地址和收货信息，创建订单。创建订单流程图如图3-3：图3-3下订单流程图修改我的订单信息：订单信息的修改主要就是对用户的已存在订单进行的操作，修改订单的相应信息查询我的订单信息：用户点击我的订单，就可以查询所有的订单信息删除我的订单信息：通过用户的ID值对订单进行操作管理个人信息：用户注册成功之后，系统会将用户的信息存储在数据库中，用户登录之后，用户可以查看自己的个人信息，并完善修改相关信息查看个人详细信息修改个人详细信息（4）管理购物车该模块涉及的子模块有添加商品、修改商品、删除商品3部分。添加商品：用户选择商品信息，点击加入购物车，就可以实现添加商品功能删除商品：购物车商品，删除不想要的或者过期商品查询商品：用户通过点击我的购物车就可以查看购物车的所有信息3.1.3E-R图E-R图即实体-关系图，实体关系图主要是描述实体之间的关系，从系统的用例图可以看出，涉及到的实体主要有：用户、订单、商品和购物车。由于该系统只是实现客户端的应用，没有涉及到管理员对商品信息的管理，所以在我的系统设计中，用户可以购买商品，还可以实现对订单的管理，也可以将商品加入到购物车中，然后商品又属于订单，系统E-R图如图3-4：图3-4E-R图3.2非功能性需求可靠性需求在进行需求分析时，我们要对系统发生故障的概率进行统计，然后根据实际情况分析系统，根据实际情况提出性能要求，提高系统的可靠性，使得系统能够高效可靠的稳定运行，避免因系统运行故障带来的损害。（2）完整性需求要求各种订单信息、用户信息的完整性，同时，保证数据的正确性。性能需求在设计电商网站时，我们要了解所开发系统的技术性能指标，根据需求来完善系统的各种性能，使得系统能够达标。（4）易用性需求该系统前端界面设计简单明了，不需要指导，用户就可以快速的熟悉系统，实现对该系统的操作。（5）安全性需求在使用该网上商城系统创建定单时，要先登录，如果没有登录，查看订单信息时，系统会提示请先登录等信息；在登录时，验证该用户是否存在，密码是否正确。3.3可行性分析通过研究系统在完成开发之后效益和开发时付出的代价，来确定这个系统是否值得我们投资去开发，一般进行可行性分析都是从以下几个方面来做出研究：3.3.1经济可行性经济可行性就是以成本为基础，以市场前景为导向，从开发系统所需要的各种资源出发，初步估算来确定该项目是否值得投资开发，在开发一个完整的项目所得到的效益和花费的代价之间进行权衡，确定利是否大于弊。一旦忽略该分析，将会造成巨大的经济损失。我们一般从以下几个方面考虑：计算机以及外围设备的费用；硬软件的费用；研究时所需要的投资，包括日常运行的各种耗材费用；由于该课题是我们自己来分析完成，从上述几个方面来分析，耗费较少，利大于弊，值得研究开发。3.3.2技术可行性技术可行性指的是对要开发的系统的功能、性能以及限制条件等方面进行分析，评价项目所采用的技术是否足够先进，使用现有的技术能否实现系统想要达到的目标，开发人员的技术水平是否能够胜任这一项目开发。一般从以下两个方面进行分析：硬件可行性分析该系统相对简单，对于硬件没有特殊要求，只需要一台电脑就可以轻松完成，只要硬件系统运行正常，而且现在大多数人使用的都是windows7系统，由此得出结论：该系统的开发在硬件方面是符合条件的。软件可行性分析该电商网站主要分为前端页面和后台实现，开发该系统时，前端页面的实现使用的技术主要就是HTML、CSS、JAVASCRIPT等，这些都是符合W3C标准规范的，此外，还使用了JSON数组对象，实现商品信息数据的存储和转换；后台页面则是使用基于J2EE的SSH技术，这些技术也是现在比较流行的。3.3.3操作可行性操作可行性则是为了研究该系统的操作方式在某个应用范围内是否可行，开发一个系统不仅需要了解它的需求，我们还需要换位思考，为用户考虑，从用户的角度出发，体会用户的使用感受。该网上商城的界面设计简洁、大方，让人耳目一新；此外，每一个页面都有相应的导航信息，操作起来方便，用户不需要花费太长时间去熟悉该系统。3.3.4法律可行性法律可行性就是要考虑该系统的开发会不会涉及到侵权等问题，以及这一系列问题可能牵扯到的责任等；我们应该从专利权、版权等一系列权益方面予以慎重考虑。该系统是自己设计完成的，不会涉及到侵权等问题，在法律上是可行的。3.3.5社会环境可行性电子商务系统是暴露在社会环境中进行工作的，我们除了考虑技术、经济和法律等因素之外，我们还需要了解各种社会因素的存在是否会影响该系统的开发，例如：企业的管理制度、用户的文化水平等。现在的电子商务水平处于不断上升的阶段，人们对网络越来越熟悉，而且系统是自己开发，受社会因素的影响并不大。3.4开发环境3.4.1硬件环境表3-1硬件环境硬件配置最低配置推荐配置服务器4CPU：P42.0G4CPU：P42.8GMem：1GMem：2GHD：40GHD：120G客户端1CPU：P41.0G1CPU：P42.0GMem：512MMem：1GHD：40GHD：120G3.4.2软件环境表3-2软件环境名称版本操作系统Windows7数据库平台MySQL1.6语言JAVA6.0以上客户端软件谷歌浏览器、火狐浏览器后台技术SSH框架前端技术DIV+CSSJavaScriptAJAX开发工具MyEclipse10.0Web服务器Tomcat1.7

4系统设计与实现系统的设计主要是要求我们根据需求分析阶段提出来的要求，去完成系统的功能，主要是回答系统应该“怎么做？”，即专注于系统的技术实现方面。4.1概要设计4.1.1总体设计总体设计的任务：划分系统模块；对模块的功能进行确定；对模块和模块之间的调用关系进行确定；该系统从功能上总共可以划分为4大模块：商品类目信息浏览、购物车管理、订单管理、个人中心等模块，其中每个模块又有其对应的下属模块；具体功能模块结构图如下，清晰的表现出模块对应关系，如图4-1：图4-1系统功能模块图功能模块详细说明如下：（1）商品信息的浏览商品的浏览就是在用户登录或者查看一个网上商城时，用户可以根据商品的分类信息去查看相对应的商品，或者根据页面的导航信息去跳转到对应的商品页面，去查看商品；如表4-1：表4-1商品信息的浏览功能概述表名称商品信息的浏览描述用户可通过商品的分类对商品进行筛选，查看商品信息前置条件服务启动输入无（2）订单管理订单管理主要实现的是对订单的创建、修改、查询和删除操作；创建我的订单信息：当用户选择好商品信息，如：商品的颜色、尺寸等信息时，点击购买按钮，然后填写收货地址和收货人信息，确认订单，交易完成之后，一个订单就创建成功了，此时的订单状态为“已完成”；创建成功的订单信息，就会将对应的订单存入到数据库的订单表中。如果用户只是选择了商品信息，并未提交订单，此时的订单状态为“待支付”，如表4-2所示：表4-2创建我的订单信息功能概述表名称创建订单描述用户选择商品信息，点击购买，完成交易，订单就会创建成功前置条件用户注册且登录输入商品详细信息、收货人地址、收货人姓名、电话修改我的订单信息：用户点击我的订单之后，会跳转到我的订单页面，然后选择想要修改的订单信息，点击修改按钮就可以实现对商品信息的修改，如表4-3所示：表4-3修改我的订单信息功能概述表名称修改订单描述选择用户订单，对订单信息进行修改前置条件用户登录、订单存在输入订单号、商品信息查询我的订单信息：点击我的订单，用户就会在我的订单页面查询到所有订单，这个查询操作是通过用户编号userid来查询用户的所有订单，如表4-4所示：表4-4查询我的订单信息功能概述表名称查询订单描述用户通过点击我的订单就可以查询所有订单前置条件用户登录输入订单编号、用户编号删除我的订单信息：根据订单号删除对应的订单，如表4-5所示：表4-5删除我的订单信息功能概述表名称删除订单描述用户可通过订单号，对订单进行删除操作前置条件订单存在、用户登录输入订单号（3）个人中心用户注册成功之后，系统会将用户的信息存储在数据库中，用户登录之后，用户可以查看自己的个人信息，并完善修改相关信息添加个人详细信息：如表4-6所示表4-6添加个人详细信息功能概述表名称添加个人信息描述用户可以添加自己的个人信息，补充个人资料前置条件用户登录输入用户名、密码、邮箱、电话 修改个人详细信息：如表4-7所示表4-7修改个人详细信息功能概述表名称修改个人信息描述用户可以对已经填写好的信息进行修改前置条件用户登录输入用户名、密码、邮箱、电话购物车管理这部分主要实现的是对购物车商品的查询、添加和修改。添加商品：用户选择要购买的商品信息，点击加入购物车，就会传递对应的商品信息，将商品成功加入到购物车中，如表4-8所示：表4-8添加商品功能概述表名称添加商品描述用户选择商品信息，点击加入购物车，商品就被添加成功前置条件用户注册且登录输入商品详细信息删除商品：点击我的购物车，选择要修改的商品进行修改即可，如表4-9所示：表4-9删除商品功能概述表名称删除商品描述选择购物车商品，删除不想要的或者过期商品前置条件用户登录、购物车商品存在输入商品信息，如：商品编号查看商品：点击我的购物车就可以查看对应的所有商品信息，如表4-10所示：表4-10查询商品功能概述表名称查询商品描述用户通过点击我的购物车就可以查看购物车的所有信息前置条件用户登录输入商品编号、用户编号4.1.2数据库设计该系统设计的数据量不是很大，相比较其他数据库而言，Mysql数据库使用起来更为方便，所以完成该系统的数据管理我选择使用Mysql数据库。系统要求实现的是前端系统设计与实现，没有涉及到后台管理员，在完成数据库的设计时，我主要是实现了订单信息表和用户信息表，这两个表涉及到的数据是存在数据库中的，而对于商品信息和购物车信息的管理我使用的是JSON对象数组，将这些数据存储在一个JS文件中来实现的，这些数据是不可以更改的。各个表的描述如下：（1）订单信息表：表中属性：订单号、总金额、创建时间、收货地址、收货人姓名、电话、商品号、状态、用户编号该表中订单号为主键，用户编号为外键，这个外键的设置主要是为了方便用户在查询相应订单时，需要通过用户编号来选择相应的订单信息。如表4-11所示：表4-11订单信息表字段名称字段意义字段类型键值约束id订单号varchar(255)PRIMARYKEYallprice总金额varchar(255)Nullcreatetime创建时间varchar(255)Nullgetaddress收货地址varchar(255)Nullgetname收货人姓名varchar(255)Nullgettel电话varchar(255)Nullgoodid商品号varchar(255)Nullstate状态varchar(255)Nulluserid用户编号bigint(20)Null（2）用户信息表：表中属性：用户编号、邮箱、创建时间、密码、电话、姓名在这个表中，用户编号为主键，在登录时，需要验证用户邮箱的唯一性。表4-12用户信息表字段名称字段意义字段类型键值约束userid用户编号bigint(20)PRIMARYKEYemail邮箱varchar(255)Nullmodifytime创建时间varchar(255)Nullpassword密码varchar(255)Nulltel电话varchar(255)Nullusername姓名varchar(255)Null对于商品信息，我是将这些数据存储在了一个文件中，可以根据页面传进来的商品编号获取商品信息，涉及的属性有商品编号、商品名称、商品价格、商品描述、商品颜色、商品尺寸等，主要的表现形式如下：vargoods=[ { "goodID":1, "goodName":"黑色印花中长款连衣裙", "goodPrice":"￥210.00", "goodDesc":"黑色印花，清晰明朗的线条带来满身的浪漫气息，给你带来新鲜时尚的感觉", "goodColor":"黑色印花", "goodSize":"L", "imgsrc":"img/10.jpg" }]上述的这种形式是定义了一个JSON数组对象集合，每一个对象中又有个自的属性。购物信息表的设计十分简单，只设计了4个属性：商品号、总数量、总金额、创建时间4.1.3系统架构设计对于大型复杂系统，常需要把大量的模型元素用包组织起来，以方便处理。对所选系统的类进行分组，以便更清晰地了解系统的结构。经过分析系统需求阶段所提出的目标来看，系统主要包含以下3个包图，如图4-2所示：图4-2网站包图包跟包之间有一定的依赖关系，从属包依赖于其他包，具体的关系如图4-3所示：图4-3包图之间的依赖关系图4.2详细设计详细设计是软件设计的第二个阶段，该阶段的目的就是确定应该怎么样具体实现所要求的系统，对系统的每个模块给出足够详细的过程性描述，他是对总体设计的细节进行完善。4.2.1系统类图了解了包图之间的关系，我们还需要从包中提取出对应的类，解析类与类之间的关系，具体描述如下图4-4所示：图4-4系统类图4.2.2系统动态模型顺序图顺序图的作用是表示对象之间发送消息的顺序，以创建订单为例，具体的顺序图如4-5所示：图4-5创建订单顺序图顺序图描述：会员在登录界面输入个人邮箱和密码，系统进行验证，若正确，则可以选择商品信息；如果不正确，则返回登录界面，重新输入邮箱和密码进行验证；成功登录系统后，确认商品信息是的正确性，填写收货人信息，等待系统验证，验证成功，则提交订单，完成支付，订单创建成功。活动图活动图主要是为了描述一个系统的业务工作流，这里主要以查看订单为例，如下图4-6所示：图4-6查看订单活动图活动图描述是活动的序列，即从一个活动到另一个活动的控制流，用来分析和验证用例，此活动图即描述了会员从登录状态到查看订单状态的控制流。4.3界面设计与代码实现4.3.1登录和注册界面登录界面和注册界面主要是使用CSS来设计的，采用了蒙板，使用这种方式设计的时候，用户在没有注册和登录时，是不能对主页面进行任何操作的。具体的表现形式如下图4-7所示：（1）登录界面：登录的界面的邮箱和密码格式设计都是采用的正则表达式，然后引用了bootstrap框架，在用户输入信息时就可以采用异步的方式验证信息格式的正确性。图4-7登录界面界面设计：<divclass="dialog"id="logDlg"> <h3>登录</h3> <divclass="login"> <formaction=""method="post"onsubmit="returnfalse"> <inputtype="text"id="email"class="email"placeholder="请输入邮箱"required="required"pattern="^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$"/> <inputtype="password"id="pwd"class="password"placeholder="密码"required="required"pattern=".{6,}"/> <inputtype="button"value="登录"onclick="login()"/> </form> <divclass="forgot"><ahref="#">忘记密码?</a></div> <divclass="create"> <p>新建帐号?<ahref="#register"onclick="showDlg(regObj)">注册</a></p> </div> </div> <divclass="close-btnglyphiconglyphicon-remove-circle"></div></div>（2）注册界面注册界面的邮箱和密码等格式设计都是采用的正则表达式，然后引用了bootstrap框架，在用户输入信息时就可以采用异步的方式验证信息格式的正确性。如下图4-8：图4-8注册界面界面实现：<divclass="dialog"id="register"> <h3>注册</h3> <divclass="register"> <formaction=""method="post"> <inputtype="text"id="name"placeholder="请输入用户名"required="required"pattern=".{3,}"/> <inputtype="email"id="registeremail"class="email"placeholder="请输入邮箱"required="required"pattern="^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$"/> <inputtype="tel"id="tel"class="tel"placeholder="请输入手机号码"required="required"pattern=".{11}"/> <inputtype="password"id="password"placeholder="密码"required="required"pattern=".{6,}"/> <inputtype="submit"value="注册"onclick="register()"/> </form> <divclass="create"> <p>已有帐号?<ahref="#logDlg"onclick="showDlg(loginObj)">登录</a></p> </div> </div> <divclass="close-btnglyphiconglyphicon-remove-circle"></div></div>4.3.2系统主界面系统的主界面就是按照要求展示商品，然后对商品进行分类，单击商品可以获得他相对应的商品详细信息。具体实现如下：主界面主界面的实现主要使用的是前端插件：fullpages.js全屏滚动插件，还使用了其他的一些前端技术，像bootdtrap等。界面如图4-9、4-10所示：图4-9首页界面图4-10首页界面第二部分界面实现：<divclass="section"id="first"> <divclass="top"> <divclass="bg-left"></div> <span><imgsrc="img/logo.png"/></span> <divclass="bg-right"></div> </div> <divclass="s-body"> <divclass="text"> <h1>BUYBEAUTIFUL</h1> <p>到了这里，你就会发现你的与众不同<br/>你的时髦装扮，我们替你做主<br/>还在等什么</p> <span>顶尖设计师，带领你一起向时髦看齐</span> </div> <divclass="image"><imgsrc="img/bg-right.png"/></div> </div> <divclass="nav"> <ul> <liclass="active"><ahref="#first">商品首页</a></li> <li><ahref="#second">今日上新</a></li> <li><ahref="#third">猜你喜欢</a></li> <li><ahref="#forth">淑女专场</a></li> <li><ahref="#fifth">联系我们</a></li> </ul> </div></div><divclass="section"id="second"> <h3><iclass="glyphiconglyphicon-calendar"></i>今日上新</h3> <ulclass="new"> <li> <divclass="m-wrap"> <ahref="single-shop.html?goodID=3"><imgsrc="img/12.jpg"/></a> <h4>拼接修身中长款连衣裙</h4> <span>小黑裙无袖修身显瘦大裙摆</span> </div> <divclass="master">lalalallalal</div> </li> </ul> <divclass="nav"> <ul> <liclass="active"><ahref="#first">商品首页</a></li> <li><ahref="#second">今日上新</a></li> <li><ahref="#third">猜你喜欢</a></li> <li><ahref="#forth">淑女专场</a></li> <li><ahref="#fifth">联系我们</a></li> </ul> </div></div>（2）商品详细页面商品页面设计如图4-11所示：图4-11商品详细信息页面界面实现：<divclass="single-top"> <imgsrc="img/logo.png"/> <divclass="single-activity"> <ahref="#">满200减20</a><ahref="#">满300减50</a> </div></div><divclass="single-msg"> <divclass="single-msg-img"> <a><imgsrc="img/12.jpg"/></a> <ul> <li><a><imgsrc="img/12.jpg"/></a></li> </ul> </div> <divclass="single-msg-detail"> <h3id="name">BUYBEA2016夏装新款韩版修身简约百搭拼接修身中长款连衣裙女8171</h3> <divclass="single-price"><i>价格</i><spanid="price">￥219.00</span> </div> <divclass="destination"> <i>配送</i> <span>北京至 <select><option>北京海淀</option></select> </span> </div> <divclass="single-size"><i>尺寸</i><spanid="size">S</span></div> <divclass="single-color"><i>颜色</i><spanid="color"><imgsrc="img/6.jpg"/></span></div> <divclass="single-buy"> <inputtype="submit"value="立即购买"id="buy"/> <inputtype="submit"value="加入购物车"id="add"/> </div> </div> <divclass="clear"></div></div>其他的界面实现都如上述例子一样，就不一一例举了。基本上都是使用符合W3C标准的前端技术实现的，主要还是使用的HTML、CSS、JavaAcript以及jQuery和bootstrap等。4.4系统功能实现4.4.1登录和注册功能的实现登录和注册与后台之间的传值实现，使用前端技术AJAX。在前端页面使用jQuery技术获取到输入框中的值，然后在AJAX中使用get方法，传入相应的路径，调用对应的Action来实现登录与注册。前端页面传值代码实现：前端页面采用jQuery的AJAX方法，使用JSON对象，获取输入框中传入的值，登录成功之后，将这些值存储在cookie中，登录对话框隐藏，跳转到主页面。functionlogin(){ varemail=$("#email").val(); varpassword=$("#pwd").val(); $.ajax({ url:":8080/meng/admin/login.do?identify="+email+"&password="+password, type:"get", dataType:"json", success:function(data){ if(data.code=="200"){ varuser=data.obj; $("#lg").html(user.username); $("#logDlg").hide(); $(".sign").eq(0).hide(); //用户信息放入cookie $.cookie("user.username",user.username); $.cookie("user.id",user.id); $.cookie("user.modifytime",user.modifytime); $.cookie("user.email",user.email); $.cookie("user.tel",user.tel); window.location.href="./main.html"; }else{ alert("登录失败"); } } });}后台登录验证的代码实现：publicvoidlogin(){ try{ out=response.getWriter(); identify=newString(identify.getBytes("ISO-8859-1"),"UTF-8"); List<SystemUserBean>systemUserBeans=systemUserDao.loginByIdentify(identify,systemUserBean.getPassword()); if(systemUserBeans.size()>0){ rj.setObj(systemUserBeans.get(0)); rj.setMessage("登陆成功!"); }else{ rj.setCode("201"); rj.setMessage("登录失败!"); } }catch(Exceptione){ rj.setCode("300"); rj.setMessage("修改系统用户信息失败!"); systemLogDao.log(UserUtil.getUserName(request),"修改系统用户"+systemUserBean.getUsername()+"信息失败！"); e.printStackTrace(); }finally{ out.write(JsonUtil.toJsonString(rj)); out.flush(); out.close(); }}4.4.2主要功能模块的实现各个功能模块的实现主要是使用SSH框架来实现的，这些框架主要是把一些数据的请求和相应信息封装在一个BaseAction中，这个方式使得代码编写更为简洁；此外，往常的实体类的配置主要是在配置文件中实现的，而现在是通过实现一个ModelDriven接口来进行配置，我们只需要保证实体类名与表名保持一致，且表中字段与实体类中的属性保持一致即可。下面以创建订单为例，举出各个核心代码：生成订单Action层的实现：Action层的主要作用就是根据struts配置文件中的信息，来获取前端数据，然后实现页面的跳转等， publicclassOrderRecordActionextendsBaseActionimplementsModelDriven<OrderRecordBean>{ privateIOrderRecordDaoorderRecordDao; privateISystemLogDaosystemLogDao; privateOrderRecordBeanorderRecordBean;//订单实体的实例化 /** *生成一个订单 */ publicvoidcreateOrder(){ try{ out=response.getWriter(); orderRecordBean.setId(new SimpleDateFormat("yyyyMMddHHmmss").format(newDate())+ (int)((Math.random()*9+1)*100000));//生成订单流水号，也是id Stringaddress=new String(orderRecordBean.getGetaddress().getBytes("ISO-8859-1"),"UTF-8"); orderRecordBean.setGetaddress(address); Stringname=new String(orderRecordBean.getGetname().getBytes("ISO-8859-1"),"UTF-8"); orderRecordBean.setGetname(name); orderRecordBean.setState("0");//默认设置为未支付状态 orderRecordBean.setCreatetime(DateUtil.currentDatetime());; orderRecordDao.saveOrUpdateObject(orderRecordBean); //rj:ResultJson类中定义了message属性 rj.setMessage("创建用户订单成功!"); systemLogDao.log(UserUtil.getUserName(request),"创建用户订单"+orderRecordBean.getId()+"成功！"); }catch(Exceptione){ rj.setCode("300"); rj.setMessage("创建用户订单失败!"); e.printStackTrace(); systemLogDao.log(UserUtil.getUserName(request),"创建用户订单失败!用户id："+orderRecordBean.getUserid()+"，商品id："+orderRecordBean.getGoodid()); }finally{ out.write(JsonUtil.toJsonString(rj)); out.flush(); out.close(); } } }Dao层的实现这段代码主要是调用实体类，来实现对数据库的操作publicinterfaceIOrderRecordDaoextendsIBaseDao<OrderRecordBean>{ /** *根据用户id查找对应的所有订单 *@paramuserid *@return */ ArrayList<OrderRecordBean>getOrderByUserId(Longuserid);}publicclassOrderRecordDaoImplextendsBaseDaoImpl<OrderRecordBean>implementsIOrderRecordDao{ publicClass<OrderRecordBean>getEntryClass(){ returnOrderRecordBean.class; } publicArrayList<OrderRecordBean>getOrderByUserId(Longuserid){ return(ArrayList<OrderRecordBean>)getHibernateTemplate().find("fromOrderRecordBeanowhereo.userid=?",userid); }}Bean层的实现Bean层的主要作用就是创建实体类：订单，然后定义实体类所对应的一些属性信息，包括商品的ID、订单的创建时间、收货地址、收货人姓名、收货电话、订单状态、总金额。@Table(name="OrderRecordBean")@Proxy(lazy=false)publicclassOrderRecordBeanimplementsSerializable{ privatestaticfinallongserialVersionUID=-9121276248980401218L; @Id @Column(name="id") privateStringid; @Column(name="userid") privatelonguserid;//用户id @Column(name="goodid") privateStringgoodid;//商品id，如果多个商品，用英文逗号隔开 privateStringcreatetime;//订单创建时间 @Column(name="state") privateStringstate;//订单状态0表示未支付1表示已支付 2表示放弃订单 @Column(name="getaddress") privateStringgetaddress;//收货地址 @Column(name="getname") privateStringgetname;//收件人姓名 @Column(name="gettel") privateStringgettel;//收货电话 @Column(name="allprice") privateStringallprice;//总金额 //构造方法 publicOrderRecordBean(){} publicOrderRecordBean(Stringid,longuserid,Stringgoodid, Stringcreatetime,Stringstate,Stringgetaddress,Stringgetname,Stringgettel, Stringallprice){ super(); this.id=id; this.userid=userid; this.goodid=goodid; this.createtime=createtime; this.state=state; this.getaddress=getaddress; this.getname=getname; this.gettel=gettel; this.allprice=allprice; } //getter&setter publicStringgetId(){ returnid; } publicvoidsetId(Stringid){ this.id=id; } publiclonggetUserid(){ returnuserid; } publicvoidsetUserid(longuserid){ this.userid=userid; } publicStringgetGoodid(){ returngoodid; } publicvoidsetGoodid(Stringgoodid){ this.goodid=goodid; } publicStringgetCreatetime(){ returncreatetime; } publicvoidsetCreatetime(Stringcreatetime){ this.createtime=createtime; } publicStringgetState(){ returnstate; } publicvoidsetState(Stringstate){ this.state=state; } publicStringgetGetname(){ returngetname; } publicvoidsetGetname(Stringgetname){ this.getname=getname; } publicStringgetGetaddress(){ returngetaddress; } publicvoidsetGetaddress(Stringgetaddress){ this.getaddress=getaddress; } publicStringgetGettel(){ returngettel; } publicvoidsetGettel(Stringgettel){ this.gettel=gettel; } publicStringgetAllprice(){ returnallprice; } publicvoidsetAllprice(Stringallprice){ this.allprice=allprice; }}数据库的连接：这段代码主要是实现数据库的配置，用来连接数据库，包括数据库的驱动名称、url、以及数据库的名称和密码。<beanid="dataSource" class="mons.dbcp.BasicDataSource" destroy-method="close"> <propertyname="driverClassName"> <value>${database.driverclassname}</value> </property> <propertyname="url"> <value>${database.url}</value> </property> <propertyname="username"> <value>${database.username}</value> </property> <propertyname="password"> <value>${database.password}</value> </property> </bean>前后台交互：这段代码主要是通过使用前端技术AJAX方法来实现前后台的数据交互，用过val()方法获取前端页面的订单信息，然后调用创建订单的接口，使用get方法来完成数据的传值，操作成功之后，则实现页面的跳转。functionaddGoods(){ varusername=$("#username").val();//收件人姓名 vartel=$("#usertel").val();//收件人手机号码 vargetaddress=$("#address").html();//收件人地址 varallprice=$("#allprice").html().substr(2);//货物总价 varuserid=$.cookie("user.id"); $.ajax("http://localhost:8080/meng/admin/createOrder.do?userid="+userid+"&goodid="+goodID+"&getaddress="+getaddress+"&getname="+username+"&gettel="+tel+"&allprice="+allprice,{ type:"get", dataType:"json", async:false, success:function(data){ if(data.code=="200"){ window.location.href="./carlist.html"; }else{ alert("注册失败"); } } }); }数据库信息：订单创建成功之后，我们就可以在数据库中查找到对应的数据信息，证明操作的正确性。具体展示如图4-12所示：图4-12数据库订单信息表

5网上商城系统测试在正式的发布该系统之前，对软件进行质量测试已经成为开发一个系统必不可少的一部分。根据软件开发各阶段所整理出的资料和程序等，对软件的质量进行检测，检验系统是否能够运行起来，是我们在这个阶段最重要的任务。此外，需要检测系统界面的友好性，测试用户的体验是否良好，能否满足用户的需求。软件测试只能检查程序中存在什么错误，并不能保证程序中不存在错误。软件测试的原则就是使用最少的数据，检查出尽可能多的错误。5.1系统测试系统测试是对已经开发完成的软件系统进行的测试，验证该系统是否达到预期的要求，跟最初的用户需求是否一致，就是系统测试的最主要目的，只有达到了用户的预期要求，系统能够正常运行，且系统不会经常崩溃，才算达到目的。系统测试的主要内容有：（1）功能测试检查系统各项功能是否与规格说明书中的功能一致，一般的做法是：输入合理的数据和不合理的数据，检查系统是否能够得到期望的结果。（2）性能测试：检测系统是否满足系统分析说明书对性能的要求，主要从网络响应时间、运行速度等方面来进行测试。恢复测试：检测系统的容错性，也就是检测系统在出现故障时，能否从故障中恢复过来，并在预定的时间内开始对事务进行处理，不会伤害系统。5.2基于WEB的系统测试用户界面的测试用于检查系统界面的设计能否满足用户的需求，界面测试主要针对的是界面的正确性、导航性、易用性、规范性来展开测试。现在的界面越来越复杂，为了能让用户很快的访问到他们想要查找的信息，我们对网页的导航性进行测试就显得尤为重要。如表5-1所示：表5-1网上商城界面测试表指标测试内容测试结果正确性界面内容显示是否正确；各种提示信息是否正确；各个操作的返回信息是否正确；符合要求导航性页面是否具有逻辑层次；页面风格是否统一；是否每个页面都有导航条；导航条信息是否直观，导航信息是否一致；链接跳转是否正确；符合要求协调性页面布局是否合理；颜色搭配是否舒适符合要求5.3测试用例及结果分析登录验证：测试数据：输入正确的用户名和密码，用户才可以登录期望结果：当输入的用户名格式错误时，文本框就会变为红色作为提示测试结果：用户信息输入错误时，提示框

人人文库> 全部分类> 毕业设计 > 毕业论文

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论