网站设计毕业论文 西华师范大学跳蚤市场网.doc

目 录摘要1Abstract1第一章 绪 论31.1研究背景31.2 历史及现状31.3 发展前景及优势31.4 研究目的41.5开发工具4第二章 系统需求分析52.1功能分析52.1.1用户模块52.1.2一级菜单模块52.1.3商品模块62.1.4购物车模块62.1.5订单模块62.2安全性分析72.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主要界面设计155.1.3其他界面设计165.2关键问题设计185.2.1验证码技术185.2.2左右无缝平移设计195.2.3轮播切换设计205.2.4平移图层205.2.5分页技术215.2.6 邮箱激活21参考文献24致 谢25 II西华师范大学跳蚤市场网 xxx计算机学院软件工程专业xxx级 指导教师：xxx摘要：随着Internet技术的发展，人们的日常生活已经离不开网络。未来社会人们的生活和工作将越来越依赖于数字技术的发展，越来越数字化、网络化、电子化、虚拟化。Internet的发展历程以及目前的应用状况和发展趋势，可以充分地相信网络技术将极大的改变我们的生活方式和工作方式，甚至社会的价值观也会发生某种变化。 本设计尝试用SPRING在网络上架构一个网上二手交易市场，让每一个学生都能在学校内完成二手商品交易，通过交易，不仅可以进行环保、节俭等传统文明教育，还可以让学生在学校内部进行电子商务的演练实训。本文从理论和实践两角度出发，对一个具有基本互动功能的在线二手商品交易网站进行设计与实现分析。论文首先较为详尽地介绍了面向对象分析与设计的有关概念与技术。接着对交易系统的可行性进行了分析，然后对系统的设计思想、设计目标与系统的整体结构进行了明确的规划。最后对系统的主要页面、数据库的设计与实现作了较为详细的讲解。本网上二手商品交易系统是运用SPRING技术来实现的。其主要功能有用户登陆注册，商品查询，订单和购物车等功能。论文在撰写过程中，力求将应用相结合，对各种理论进行阐述的同时配合系统从实际应用和操作技巧上加以说明，希望能够更充分地体现到这些知识与技术在本系统中的应用与实现。关键词：电子商务、SPRING、数据库The Flea Market Website of China West Normal Universityxxx School of Computer Software Engineering 2013 Instructor: xxxAbstract: Along with the development of Internet technology, daily life can not already do without the network. The life and work of the social people of future will depend on the development of digital technology more and more. Digitize more and more, the networking, electronic, virtual. Development course and present application state and development trend of Internet, can believe network technology great change life and working way of us fully, even certain change will take place in the values of the society. This procedure tries to build up a bookshop in the network with SPRING so that every customer neednt go out and can do shopping easily through surfing the Net at home. This article is analyzing the design and realization of an online bookshop with Data Mining function, from the views of theory and practice. Starting with introducing concepts and techniques of OOA and OOP in detail, especially introducing the knowledge which apply for this system, such as the feature and flow of OOA and OOP analyzing the feature structure and using method of developing techniques SPRING and ADO.NET which using in my system. And then, this article analyses the feasibility of the system, then minutely layouts the design thoughts, goals and the system holistic framework. At last, this article minutely explains the design and realization of Web page layout, data base and application program of our system.This online bookstore system uses SPRING technology to realize on Visual Studio.Net platform. Its main function has users login and registration, the commodity system, process of purchase, the comment of the books, etc. During the course of writing this article, I strive to integrate theory and practice. While expatiating the different kind of theories, I illuminate the application and operation skill combining the system so as to fully incarnate the application of these theories and techniques to this system.Key words：Electronic Business, SPRING,DATABASE第一章 绪 论1.1研究背景近几年来互联网的快速发展，“互联网+”的出现，促使多样化信息技术同实体进行联合，以及当代大学生成为网购的主力军，使得各种购物网、快递公司的蓬勃发展；伴随着电子商务的发展，保护环境、节俭节约、循环利用资源的意识在头脑中形成，二手商品交易成为一种发展方向，但是还没有一个专门只为当代大学生提供的一个纯粹的“二手网”。在跳蚤市场中，甩卖的物品多为大四毕业学生在大学四年中的生活、学习、社交等用品。这些是他们无法带走或者舍不得丢掉的，但仍然可以再次利用起来的物品。这些旧物品对学弟学妹们来说可是一些宝贝，它可以为学弟学妹们提供一些方便的、可靠的、有效的学习资料，一些便宜的生活物资以及即将到来的大学毕业提供一些方向。但是，从近几年的状况来看，毕业生大部分的东西是没有得到利用的，往往是以廉价卖给废品回收站，有的学弟学妹却以高额的价格从各个商店买来一些接下来的学习和生活可能需要的物品。1.2 历史及现状跳蚤市场（fleamarket）是欧美等西方国家对旧货地摊市场的别称。由一个个地摊摊位组成，市场规模大小不等。出售商品多是旧货、人们多余的物品及未曾用过但已过时的衣物等，小到衣服上的小装饰物，大到完整的旧汽车、录像机、电视机、洗衣机，一应俱全，应有尽有。价格低廉，仅为新货价格的1030。跳蚤市场的管理松散。有关fleamarket的来源，有两种理论：据语源学家克丽丝汀安默儿说，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.3。图2.3 商品模块图2.1.4购物车模块用户将商品添加到购物车、从购物车中移除商品、清空购物车中所有商品等，见图2.4。图2.4 购物车模块图2.1.5订单模块为用户生成订单，将购物车中信息存入数据库中；为订单付款，在线支付、修改订单状态、修改订单信息；查询用户订单等，见图2.5。图2.5 订单模块图2.2安全性分析安全方面，普通用户只可以查找商品、和卖家留言联系进行商品买卖；注册用户可以更改自己的相关信息、相关商品的管理、同买家留言交流；系统管理员可以对自身和注册用户基本信息进行操作，删除注册用户；可以对新闻、网站管理进行操作的用户，以及其他类型用户的相关权限借可以。系统是在网络上运行的多用户系统，采用了数据库安全性、操作系统安全性、程序安全性三重安全性管理来达到系统要求的安全性3。2.3运行分析支持系统运行的系统需要在Windows xp/7/10下，需要安装火狐浏览器、MySql数据库且数据库密码为123，以及tomcat7.0运行环境并保证接口8080没有被其他的占用。硬件方面需建立维护和使用制度，在硬件选择是要充分考虑硬件的负载和应用环境。软件方面则需对系统进行定期地维护，尽量能够预防各种BUG问题。2.4可行性分析 可行性分析也称可行性研究，是在系统调查的基础上，针对新系统的开发是否具备必要性和可能性，对新系统的开发从技术、经济、社会的方面进行分析和研究，以避免投资失误，保证新系统的开发成功。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。数据库的概念结构设计就是将需求分析得到的用户需求抽象为信息结构，即概念模型。概念模型的种类很多，其中最著名、最实用的一种是ER（实体联系）模型，它将现实世界的信息结构统一用属性、实体以及他们之间的联系来描述3。以下是本数据库系统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首页界面设计用户一打开该网站，就通过客户端的首页对该网站的功能一目了然1。网站采取暖色调背景，促进用户的购物欲望。用户可以根据“图书”、“宿舍生活”、“户外活动”、“电器”、“其他”等不同类别浏览该网站，也可通过首页各个板块浏览商品信息。其中“注册”为注册成为普通用户的功能，“登陆”为有账号的所有类型用户可以操作。其中头部和尾部的设计是一样的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。验证码的实现流程是：服务器端随机生成验证吗字符串，保存在内存中，发送给浏览器显示；浏览器端输入验证码字符串，然后提交服务器端，提交的字符与服务器端保存的字符进行比较，若一致则继续下一步，否则返回提示。验证码主要代码：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分页技术当商品类型过多时，需对商品展示进行分页展示。先统计数据库中商品的总数，在根据页面展示的数量大小进行分页显示10。主要代码如下：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