毕业论文-西华师范大学跳蚤市场网的设计与实现.docx

目 录摘要1Abstract1第一章 绪 论31.1研究背景31.2 历史及现状31.3 发展前景及优势31.4 研究目的41.5开发工具4第二章 系统需求分析52.1功能分析52.1.1用户模块52.1.2一级菜单模块52.1.3商品模块52.1.4购物车模块62.1.5订单模块62.2安全性分析62.3运行分析72.4可行性分析72.4.1技术可行性72.4.2经济可行性7第三章 系统总体设计83.1设计概述83.2总体结构83.3各个模块功能8第四章 系统数据库设计104.1数据库需求分析104.2概念结构设计104.3逻辑结构设计11第五章 系统详细设计135.1前台界面设计135.1.1首页界面设计135.1.2主要界面设计145.1.3其他界面设计145.2关键问题设计145.2.1验证码技术145.2.2左右无缝平移设计145.2.3轮播切换设计145.2.4平移图层145.2.5分页技术145.2.6 邮箱激活14参考文献14致 谢14 II西华师范大学跳蚤市场网的设计与实现陈祖梅计算机学院软件工程专业2013级 指导教师：李艳梅摘要：随着Internet技术的发展，网络已经侵入人们的日常生活。将来人们的日常生活和工作将越来越仰赖于发展的数字技术，越来越数字化、网络化、电子化、虚拟化。Internet的发展历程以及目前的应用状况和发展趋势，将极大的改变我们的生活方式和工作方式，甚至影响社会价值观发生变化。 本设计试图利用SPRING将一个网上二手交易市场架构在网络上，让每一个同学都能在校内实现二手商品交易。通过交易，不仅体现环保、勤俭等传统，还可以进行电子商务的实战演练。本文从理论和实际两个角度出发，以西华师范大学跳蚤市场网为例对一个具有基本互动性能的在线二手商品交易网站进行设计与实现分析。设计首先采用面向对象分析与设计方式介绍。其次对系统进行的可行性分析，然后根据设计思想、设计目标以及整体结构对系统进行精确的策划。最后对系统的主要界面、数据库、交互实现做出较为具体的说明。采用SPRING技术来实现该二手商品交易系统。其主要性能有用户登陆注册，商品查询，订单和购物车等功能。设计在编辑过程中，争取理论和应用合二为一，系统从实际应用到操作技巧上进行阐述。希望能够更充分将所学知识与技术体现运用本次设计网站中。关键词：电子商务；SPRING；数据库Design and Implementation of Flea Market Website of China West Normal UniversityZumei Chen Software Engineering, Computer School Grade 2013 Instructor: Yanmei LiAbstract: With the development of Internet technology, the Internet has invaded peoples daily life. In the future, peoples life and work will depend more and more on the development of digital technology, and become more and more digital, networked, electronic and virtualized. The development process of Internet and its current application situation and development trend will greatly change our lifestyle and work style, and even affect social values change. This design attempts to use SPRING to construct an online secondary market in the network, so that each student can complete the secondary commodity transaction in the school. Through the transaction, not only embodies environmental protection, thrift and other traditions, but also can carry out actual combat exercises of e-commerce. From the two angles of theory and practice, this paper expounds the design and implementation of an online second-hand commodity trading website of China West Normal University with basic interactive function. The design is first introduced by object oriented analysis and design. Secondly, the feasibility of the system is analyzed, and then the system is planned accurately according to the design idea, the design goal and the overall structure. Finally, the systems main interface, database, interactive implementation of a more specific description.SPRING technology is used to realize the second-hand commodity trading system. Its main functions are user login, registration, commodity inquiries, orders and shopping cart and other functions. In the process of editing, the theory and application are combined, and the system is expounded from practical application to operation skill. I hope that I will be able to apply the knowledge and technology in this design website more fully.Key words：Electronic Business; SPRING; DATABASE第一章 绪 论1.1研究背景近几年来互联网的快速发展，“互联网+”的出现，促使多样化信息技术同实体进行联合，以及当代大学生成为网购的主力军，使得各种购物网、快递公司的蓬勃发展；伴随着电子商务的发展，保护环境、节俭节约、循环利用资源的意识在头脑中形成，二手商品交易成为一种发展方向，但是还没有一个专门只为当代大学生提供的一个纯粹的“二手网”。在跳蚤市场中，甩卖的物品多为大四毕业学生在大学四年中的生活、学习、社交等用品。这些是他们无法带走或者舍不得丢掉的，但仍然可以再次利用起来的物品。这些旧物品对学弟学妹们来说可是一些宝贝，它可以为学弟学妹们提供一些方便的、可靠的、有效的学习资料，一些便宜的生活物资以及即将到来的大学毕业提供一些方向。但是，从近几年的状况来看，毕业生大部分的东西是没有得到利用的，往往是以廉价卖给废品回收站，有的学弟学妹却以高额的价格从各个商店买来一些接下来的学习和生活可能需要的物品。1.2 历史及现状跳蚤市场（fleamarket）是西方国家对旧货地摊市场的称呼。由一个个地摊摊位组成，市场规模大小不等。发售商品多是旧货、人们多余的物品及不曾用过但已过时的衣物等，小到衣服上的小装饰物，大到完好的旧汽车、录像机、电视机、洗衣机，一应俱全，应有尽有。价格低廉，仅为新货价格的1030。跳蚤市场的治理松懈。关于fleamarket的起源，现有两种说法。一是来源于纽约的FlyMarket，FlyMarket是纽约下曼哈顿地区的一个固定市场，这一市场从美国独立战争(1775年)之前一直持续到大约1816年；二是，Fly这个词来源于荷兰语称号Vly或Vile，原意为 “山谷”，由于它在荷兰语中的发音正好和英语中的flea一样，所以就形成了如今的fleamarket。目前市场上有众多二手网，基本可分为二手房、二手车、二手书、二手日常用品这几大类；按地域则几乎每个地区都有本地的二手交易网。二手商品皆有一个破损率、折旧率的概念，因此不可能像新商品一样采用标明商品性能的方式，所以其信任度有待而估以及大都采用线下交易方式。另外这些网站基本上全是会的都掺杂一些无聊广告、游戏推送，并没有一个很好专属于校园的二手网，页面无法很好的根据师生需求进行物品搜素。1.3 发展前景及优势首先，学校扩招，师生人数不断的增加，用户群将不断的更新扩大；其次，各个高校并没有专属于自己的跳蚤市场网，市场前景广阔；然后，学校、国家、社会对大学生创业的各个方面的引导以及支持；最为重要的是，现在网络的时代的快速发展，互联网涉及生活中每个角落，人们文化素质的提高，科技运用的普及等等5。其次，最近年轻人惰性增加，对需要体力的事情拒之千里，从心里面产生抵触。另外，二手市场给予用户一个指路牌，直接将用户带到所要搜寻的商品面前，节省了用户在市场中心急如焚、汗流浃背、口干舌燥地寻找与砍价。依赖于品种丰富，购买者选择余地较大；购买方便、售价便宜等优势。从侧面给电子商务增加潜在市场。然后，该网站开发会逐步更新；管理涉及西华师范大学师生，管理经费较少。预计在近五年里Flea Market将快速占有四川高校市场，直到最后占有全国市场的大部分甚至更远。1.4 研究目的以西华师范大学一年一度的跳蚤市场为背景，让废旧物品得到充分的利用；不但方便了同学们，同时也营建节约光荣，浪费可耻的校园文明气氛；为老师和同学提供平台，所有注册用户不仅可以在网上放上自己不需要的东西，同时也可以在网上找到自己需要的东西，物有所值，互利共享；其次是间接性的为学弟学妹从中找到自己以后可能发展方向，并为之而努力奋斗。 1.5开发工具开发工具：JerBrains WebStorm10 、MyEclipse 10开发语言：JAVA运行环境：Windows XP/7/10数据库：MySqlJerBrains WebStorm的介绍：JerBrains WebStorm中文名为：网络风暴，享有WEB前端开发神器的名誉。功能上：具有JavaScript功能，例如：基于DOM，特定浏览器完成、编码导航和用法查询、支持结点、重构、单元测试等；具有批量代码分析、编辑语言混合、拼写检查、重复代码检测器的功能；支持H5、CSS/JS、显示内容及应用风格；具有便捷的环境，可以远程同步、集成版本控制系统、本地记录等。另外，具有强烈的智能代码补全、代码优化、html提示、联想查询、代码重构，以及代码检查和快速修复、调试、结构浏览、折叠等等功能优势。第二章 系统需求分析2.1功能分析为解决不同用户的不同需求，该网站主要功能有：用户模块、一级菜单分类模块、商品模块、购物车模块、订单模块等1。2.1.1用户模块根据对用户简单分析，得出用户基本功能2，见图2.1。注册：前台的JS校验、使用AJAX完成对用户名异步校验、 后台Struts 2校验、验证码、发送激活邮件、将用户信息存入数据库里面。激活：根据激活码查询用户是否存在，激活或者修改用户状态。登陆：输入用户名和密码进行数据校验，验证码校验进行用户登陆。退出：销毁session。图2.1 用户模块图2.1.2一级菜单模块查询一级分类及商品类型，并将分类存入到session范围类，同时查询到每个一级分类所属的二级分类，以及查询所有商品分类下面的所有商品，并采用分页方式显示，见图2.2。 图2.2 一级菜单模块图2.1.3商品模块对商品的展示，查询热门商品、查询最新商品、根据ID查询商品,见图2.32。图2.3 商品模块图2.1.4购物车模块首先用户把商品添加到购物车、然后从购物车中移除商品、最后清空购物车中所有商品等，见图2.4。图2.4 购物车模块图2.1.5订单模块生成订单，将购物车中信息存入数据库中，具有订单付款，在线支付、修改订单状态、修改订单信息，查询用户订单等，见图2.5。图2.5 订单模块图2.2安全性分析安全方面，普通用户只可以查找商品、和卖家留言联系进行商品买卖；注册用户可以更改自己的相关信息、相关商品的管理、同买家留言交流；系统管理员可以对自身和注册用户基本信息进行操作，删除注册用户；可以对新闻、网站管理进行操作的用户，以及其他类型用户的相关权限借可以。系统是在网络上运行的多用户系统，采用了数据库安全性、操作系统安全性、程序安全性三重安全性管理来达到系统要求的安全性2。2.3运行分析支持系统运行的系统需要在Windows xp/7/10下，需要安装火狐浏览器、MySql数据库且数据库密码为123，以及tomcat7.0运行环境并保证接口8080没有被其他的占用。硬件方面需建立维护和使用制度，在硬件选择是要充分考虑硬件的负载和应用环境。软件方面则需对系统进行定期地维护，尽量能够预防各种BUG问题。2.4可行性分析 可行性分析另一个称呼是可行性研究，即在系统考察基础上，针对新系统开发判断其是否具有必要性和可能性，从技术、经济、社会的方面进行开发分析和研究，以防止投资失误，保障新系统的顺利开发3。2.4.1技术可行性前端采用HTML5、CSS3布局,JS、JQuery技术页面动画效果, AJAX页面数据的交互,代码分段、分类，重用率高，可维护性强4。后台SSH框架，着重struts和spring进行业务分层描写；代码层次清晰可维护性强。后端数据库采用SQL编写，轻便且功能强大，数据处理快、权限设置准确、数据安全性高。2.4.2经济可行性经济可行性主要对系统的经济效益进行评价，该系统的设计与开发不需要特殊硬件，使用的软件为开源免费的，不会产生技术专利问题，同在开发过程中的经费低5。第三章 系统总体设计3.1设计概述根据需求将网站划分为不同的模块，每个模块将完成特定功能，最后将每个模块链接起来，组成一个整体6。3.2总体结构根据需求分析，Flea Market网可以划分为：用户模块、商品模块、订单模块、购物车模块等。用户模块包括用户注册、登陆、激活、退出等功能；商品模块可以分为商品的查询、浏览；订单模块包括商品信息、订单信息、支付信息；购物车模块有商品信息、商品支付状态、商品添加删除等。详见图3.1。图3.1 总体模块功能划分图3.3各个模块功能各个模块功能如下用户模块：用户注册、用户激活、登陆、注销等功能。图3.2 用户管理模块功能图注册主要有，用户名(唯一标识)、密码、邮箱、姓名、性别、电话、地址，以及需要激活的验证码。激活主要应用在用户登录时，将用户的状态修改。登录和注销用来管理用户的回话信息，登录时，网站会保留用户的基本信息，包括用户ID、用户名等。退出时用户信息会清除。商品模块：根据热卖状态对商品的浏览，或者根据分类状态浏览商品。每个用户皆可以根据一定的条件对全部或部分商品搜索后浏览，并可以看到商品的一些基本信息。例如：商品名称、从不同角度展现出的图片、商品作用、购买时间、原价、现价等信息。购物车模块：添加、移除、查询、清空等功能。添加商品，用户根据商品ID将商品添加到购物车中。移除商品，只能根据商品ID移除单个商品。查询购物车，查询购物车中商品的各种信息，包括商品种类、数量、单价以及总价。清空购物车，一次性将购物车中所有的商品全部移除。图3.3 购物车模块功能图订单模块：商品添加后自动生成订单，用户根据需求查询订单、对商品进行支付等功能。图3.4 订单模块功能图第四章 系统数据库设计4.1数据库需求分析在整个动态网站设计中，数据库设计具有重要位置，数据库设计质量直接影响到数据库数据的冗余度，数据的一致性，数据丢失等问题。系统开发中数据可设计至关重要，它将影响整个系统的执行效率和可靠性，关系到系统管理员的操作、运行等的可靠性。该网站开发过程中使用MySql数据库，数据库名为将j2ee，用户名root，数据库密码123 。4.2概念结构设计数据库的概念结构设计就是将需求分析得到的用户需求抽象为信息结构，即概念模型3。概念模型作为概念结构设计的表达工具，为数据库提供一个说明性结构，是设计数据库逻辑结构即逻辑模型的基础3。它种类繁多，其中最著名、最适用的一种是ER（实体联系）模型，它将现实世界的信息结构统一用属性、实体以及他们之间的联系来描述。以下是本数据库系统E-R模型：图4.1 数据库E-R模型图4.3逻辑结构设计该网站主要数据表有：用户信息表user、一级菜单表goodstitle、商品信息表product、二级菜单表goodstitlesecond、订单信息表orderitem、定单表order。用户表user存放的为用户登录、注册信息，具体表结构设计见图4.2。图4.2 用户信息表一级菜单表goodstitle存放商品类型信息，具体表结构见图4.3。图4.3 用户信息表二级菜单表goodstitlesecond存放商品分类信息，具体表结构见图4.4。图4.4 二级菜单表商品信息表product存放商品各种基本信息，具体表结构见图4.5。图4.5 商品信息表订单信息表orderitem存放订单各种状态信息，具体表结构见图4.6。图4.6 订单信息表定单表order存放用户订购商品信息，具体表结构见图4.7。图4.7 订单表第五章 系统详细设计5.1前台界面设计界面是网站的门面，以达到美观、舒适、操作方便、信息准确、结构合理为标准。5.1.1首页界面设计用户一打开该网站，就通过客户端的首页对该网站的功能一目了然7。网站采取暖色调背景，促进用户的购物欲望。用户可以根据“图书”、“宿舍生活”、“户外活动”、“电器”、“其他”等不同类别浏览该网站，也可通过首页各个板块浏览商品信息。其中“注册”为注册成为普通用户的功能，“登陆”为有账号的所有类型用户可以操作。其中头部和尾部的设计是一样的7。首页界面如下所示：(a) 头部(b) 热卖(c) 限时抢购(d) 促销区(e) 其他(f) 底部图5.1 网站首页5.1.2主要界面设计商品展示界面为用户浏览商品信息的主要界面。按不同的分类浏览，不同的分类器商品信息不同，但功能风格相同。这里将展示出其界面。每种商品都以小图或者简介的形式展示，单击可以查看其详细信息和放大图片，以直观的方式介绍商品。另外，在每个页面中用户都可直接注册和登陆，商品类型，从而为用户操作提供方便。商品界面如下所示：(a) 商品头部(b) 商品分页图5.2 商品展示界面 登陆界面如下：图5.3 用户登录界面注册界面图5.4 用户注册界面5.1.3其他界面设计 用户查看所点击的商品的相关信息，并根据需求添加到购物车实行商品购买。(a) 商品详细 (b) 商品推荐图5.5 商品详情页界面图5.6 购物车界面 (a) 支付方式 (b) 未支付图5.7 订单界面5.2关键问题设计 该网站采用MVC模型设计，设计到一些常用的技术手段8。5.2.1验证码技术避免用户采用机器人自动注册、登陆、灌水，利用验证码技术。所谓验证码，就是将一串随机产生的数字或字符，生成一个特定的字符串，用户辨别其验证码信息，输入表单提交验证，验证成功后才可以使用其中特定的功能9。验证码的实现过程：验证码字符串在服务器端随机生成，在内存中保存，发送在浏览器界面显示；浏览器端输入验证码字符串，然后提交服务器端，提交的字符与服务器端保存的字符进行对比，若一致则继续下一步，否则返回提示8。验证码主要代码：BufferedImage img=new BufferedImage(150,30,BufferedImage.TYPE_INT_BGR);Graphics g=img.getGraphics(); g.setColor(Color.black);g.fillRect(0, 0, 150,30);g.setFont(new Font(楷体,Font.BOLD,25);Random ran=new Random();String strs=1234567890asdfghjklzxcvbnmqwertyuiop;StringBuffer sb=new StringBuffer();for(int i=1;i=4;i+)char a=strs.charAt(ran.nextInt(strs.length();int r=ran.nextInt(255);int g1=ran.nextInt(255);int b=ran.nextInt(255);g.setColor(new Color(r,g1,b);switch (i) case 1: g.drawString(a+,20,15); break;case 2: g.drawString(a+,60,25);break;case 3:g.drawString(a+,90,15); break;case 4: g.drawString(a+,130,20); break;default:break;sb.append(a);ServletActionContext.getRequest().getSession().setAttribute(validateCodeSession,sb.toString();for(int i=0;i0) var i=document.cookie.indexOf(l); if(i!=-1) i+=l.length;var I=document.cookie.indexOf(;,i); if(I=-1)I=document.cookie.length; o=unescape(document.cookie.substring(i,I) ; return o; , writeCookie:function(i,l,o,c) var O=,I=; if(o!=null) O=new Date(new Date).getTime()+o*3600000); O=; expires=+O.toGMTString() ; if(c!=null) I=;domain=+c; ; document.cookie=i+=+escape(l)+O+I; , readStyle:function(I,l) if(I.stylel) return I.stylel else if(I.currentStyle) return I.currentStylel; else if(document.defaultView&document.defaultView.getComputedStyle) var i=document.defaultView.getComputedStyle(I,null); return i.getPropertyValue(l); else return null; 5.2.3轮播切换设计 图层轮播切换技术采用纯JS技术编写，实现页面动画效果。主要代码如下：NextPrev:function(e) var btnClass =$(e.target | e.event).attr(class); /alert(btnClass); btnClass=prev?tag = -1:tag = 1; var src = $(.product-img img).attr(src); var newSrc = src.slice(0,-5); var n = parseInt(src.slice(-5,-4); n+=tag; nthis.max?n=this.min:n; /alert(n); $(.product-img img).attr(src,newSrc+n+.jpg); 5.2.4平移图层图层平移一般应用在详情页面，当用户需要对象应商品进行更深层次的了解时，需仔细查看图层的各个细节，其平移位置根据鼠标的位置而定。部分代码如下：maskMove:function(e) var x = e.offsetX; var y = e.offsetY; var left = x - this.MSize/2 ; var top = y - this.MSize/2 ; left = left=this.MaxLft?this.MaxLft:left; top = top=this.MaxTop?this.MaxTop:top; $(#mask).css( left:left+110, top:top+170 ); 5.2.5分页技术当商品类型过多时，需对商品展示进行分页展示。先统计数据库中商品的总数，在根据页面展示的数量大小进行分页显示0。主要代码如下：PageSet pageSetBean=new PageSet();pageSetBean.setType(1);pageSetBean.setPage(page); /设置当前页数int limit=8; /设置当前显示记录数pageSetBean.setLimit(limit);int numberCount=0; /总记录数numberCount=productDao.findnumberCount(gid);pageSetBean.setNumberCount(numberCount);int pageCount=0; /总页数if(numberCount%limit=0)pageCount=numberCount/limit;elsepageCount=(numberCount/limit)+1;pageSetBean.setPageCount(pageCount);int begin=(page-1)*limit;/设置数据集合List list=productDao.findProductPage(gid,begin,limit); pageSetBean.setList(list);return pageSetBean; 5.2.6 邮箱激活用户注册时进行验证码激活。主要代码如下：public static void sendEmail(String into,String codeNumber) Properties p=new Properties();p.setProperty(mail.host,localhost);Session session=Session.getInstance(p,new Authenticator()Overrideprotected javax.mail.PasswordAuthentication getPasswordAuthentication() return new PasswordAuthentication(, 123););Message message =new MimeMessage(session); try message.setFrom(new InternetAddress();message.addRecipient(RecipientType.TO, new InternetAddress(into);message.setSubject(email);message.setContent(emailcode, text/html;charset=UTF-8);Transport.send(message); catch (AddressException e) / TODO