1、I目 录摘 要 1Abstract .1第一章 绪 论 .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 各个模块功能 .8II第四章 系统数据库设
2、计 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致 谢 251西华师范大学跳蚤市场网xxx计算机学院软件工程专业 xxx 级 指导教师：xxx摘 要：随着 Internet 技术的发展，人们的日
3、常生活已经离不开网络。未来社会人们的生活和工作将越来越依赖于数字技术的发展，越来越数字化、网络化、电子化、虚拟化。Internet 的发展历程以及目前的应用状况和发展趋势，可以充分地相信网络技术将极大的改变我们的生活方式和工作方式，甚至社会的价值观也会发生某种变化。本设计尝试用 SPRING 在网络上架构一个网上二手交易市场，让每一个学生都能在学校内完成二手商品交易，通过交易，不仅可以进行环保、节俭等传统文明教育，还可以让学生在学校内部进行电子商务的演练实训。本文从理论和实践两角度出发，对一个具有基本互动功能的在线二手商品交易网站进行设计与实现分析。论文首先较为详尽地介绍了面向对象分析与设计的
4、有关概念与技术。接着对交易系统的可行性进行了分析，然后对系统的设计思想、设计目标与系统的整体结构进行了明确的规划。最后对系统的主要页面、数据库的设计与实现作了较为详细的讲解。本网上二手商品交易系统是运用 SPRING 技术来实现的。其主要功能有用户登陆注册，商品查询，订单和购物车等功能。论文在撰写过程中，力求将应用相结合，对各种理论进行阐述的同时配合系统从实际应用和操作技巧上加以说明，希望能够更充分地体现到这些知识与技术在本系统中的应用与实现。关键词：电子商务、SPRING、数据库The Flea Market Website of China West Normal Universityxx
5、x School of Computer Software Engineering 2013 Instructor: xxx2Abstract: 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
6、 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 trie
7、s 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 w
8、ith 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 t
9、hen, 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 s
10、ystem 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
11、 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,DATABASE3第一章 绪 论1.1 研究背景近几年来互联网的快速发展， “互联网+”的出现，促使多样化信息技术同实体进行联合，以及当代大
12、学生成为网购的主力军，使得各种购物网、快递公司的蓬勃发展；伴随着电子商务的发展，保护环境、节俭节约、循环利用资源的意识在头脑中形成，二手商品交易成为一种发展方向，但是还没有一个专门只为当代大学生提供的一个纯粹的“二手网” 。在跳蚤市场中，甩卖的物品多为大四毕业学生在大学四年中的生活、学习、社交等用品。这些是他们无法带走或者舍不得丢掉的，但仍然可以再次利用起来的物品。这些旧物品对学弟学妹们来说可是一些宝贝，它可以为学弟学妹们提供一些方便的、可靠的、有效的学习资料，一些便宜的生活物资以及即将到来的大学毕业提供一些方向。但是，从近几年的状况来看，毕业生大部分的东西是没有得到利用的，往往是以廉价卖给废
13、品回收站，有的学弟学妹却以高额的价格从各个商店买来一些接下来的学习和生活可能需要的物品。1.2 历史及现状跳蚤市场（flea market ）是欧美等西方国家对旧货地摊市场的别称。由一个个地摊摊位组成，市场规模大小不等。出售商品多是旧货、人们多余的物品及未曾用过但已过时的衣物等，小到衣服上的小装饰物，大到完整的旧汽车、录像机、电视机、洗衣机，一应俱全，应有尽有。价格低廉，仅为新货价格的1030。跳蚤市场的管理松散。有关 flea market 的来源，有两种理论： 据语源学家克丽丝汀安默儿说，flea market 最初来源于纽约的Fly Market， Fly Market 是纽约下曼哈顿地
14、区的一个固定市场，这一市场从美国独立战争(1775 年) 之前一直延续到大约 1816 年。Fly 这个词来源于该市场的荷兰语名称 Vly 或 Vile，这个词在荷兰语的意思是“ 山谷” ，很巧的是，它在荷兰语中的发音正好和英语中的 flea 一样，所以就形成了英语中的 flea market。目前市场上有众多二手网，基本可分为二手房、二手车、二手书、二手日常用品这几大类；按地域则几乎每个地区都有本地的二手交易网。二手商品皆有一个破损率、折旧率的概念，因此不可能像新商品一样采用标明商品性能的方式，所以其信任度有待而估以及大都采用线下交易方式。另外这些网站基本上全是会的都掺杂一些无聊广告、游戏推
15、送，并没有一个很好专属于校园的二手网，页面无法很好的根据师生需求进行物品搜素。41.3 发展前景及优势首先，学校扩招，师生人数不断的增加，用户群将不断的更新扩大；其次，各个高校并没有专属于自己的跳蚤市场网，市场前景广阔；然后，学校、国家、社会对大学生创业的各个方面的引导以及支持；最为重要的是，现在网络的时代的快速发展，互联网涉及生活中每个角落，人们文化素质的提高，科技运用的普及等等 5。其次，最近年轻人惰性增加，对需要体力的事情拒之千里，从心里面产生抵触。另外，二手市场给予用户一个指路牌，直接将用户带到所要搜寻的商品面前，节省了用户在市场中心急如焚、汗流浃背、口干舌燥地寻找与砍价。依赖于品种丰
16、富，购买者选择余地较大；购买方便、售价便宜等优势。从侧面给电子商务增加潜在市场。然后，该网站开发会逐步更新；管理涉及西华师范大学师生，管理经费较少。预计在近五年里 Flea Market 将快速占有四川高校市场，直到最后占有全国市场的大部分甚至更远。1.4 研究目的以西华师范大学一年一度的跳蚤市场为背景，让废旧物品得到充分的利用；方便了同学也营造了节约光荣，浪费可耻的校园文化氛围；为在校师生提供一个供需平台，所有注册用户都可以将自己不用的东西放在网上，同时也可以在网上找到自己需要的东西，物美价廉，达到双赢；其次是间接性的为学弟学妹从中找到自己以后可能发展方向，并为之而努力奋斗。 1.5 开发工
17、具开发工具：JerBrains WebStorm10 、MyEclipse 10开发语言：JAVA运行环境：Windows XP/7/10数据库：MySqlJerBrains WebStorm 的介绍：JerBrains WebStorm 中文名为：网络风暴，享有 WEB 前端开发神器的名誉。功能上：具有 JavaScript 功能，例如：基于 DOM，特定浏览器完成、编码导航和用法查询、支持结点、重构、单元测试等；具有批量代码分析、编辑语言混合、拼写检查、重复代码检测器的功能；支持 H5、CSS/JS 、显示内容及应用风5格；具有便捷的环境，可以远程同步、集成版本控制系统、本地记录等。另外，
18、具有强烈的智能代码补全、代码优化、html 提示、联想查询、代码重构，以及代码检查和快速修复、调试、结构浏览、折叠等等功能优势。6第二章 系统需求分析2.1 功能分析为解决不同用户的不同需求，该网站主要功能有：用户模块、一级菜单分类模块、商品模块、购物车模块、订单模块等 1。2.1.1 用户模块根据对用户简单分析 2，得出用户基本功能，见图 2.1。注册：前台的 JS 校验、使用 AJAX 完成对用户名异步校验、 后台 Struts 2校验、验证码、发送激活邮件、将用户信息存入数据库里面。激活：根据激活码查询用户是否存在，激活或者修改用户状态。登陆：输入用户名和密码进行数据校验，验证码校验进行
19、用户登陆。退出：销毁 session。图 2.1 用户模块图2.1.2 一级菜单模块查询一级分类及商品类型，并将分类存入到 session 范围类，同时查询到每个一级分类所属的二级分类，以及查询所有商品分类下面的所有商品，并采用分页方式显示，见图 2.2。 7图 2.2 一级菜单模块图2.1.3 商品模块对商品的展示，查询热门商品、查询最新商品、根据 ID 查询商品，见图2.3。图 2.3 商品模块图2.1.4 购物车模块用户将商品添加到购物车、从购物车中移除商品、清空购物车中所有商品等，见图 2.4。8图 2.4 购物车模块图2.1.5 订单模块为用户生成订单，将购物车中信息存入数据库中；为
20、订单付款，在线支付、修改订单状态、修改订单信息；查询用户订单等，见图 2.5。图 2.5 订单模块图2.2 安全性分析安全方面，普通用户只可以查找商品、和卖家留言联系进行商品买卖；注册用户可以更改自己的相关信息、相关商品的管理、同买家留言交流；系统管理员可以对自身和注册用户基本信息进行操作，删除注册用户；可以对新闻、网站管理进行操作的用户，以及其他类型用户的相关权限借可以。系统是在网络上运行的多用户系统，采用了数据库安全性、操作系统安全性、程序安全性三重安全性管理来达到系统要求的安全性 3。2.3 运行分析支持系统运行的系统需要在 Windows xp/7/10 下，需要安装火狐浏览器、MyS
21、ql 数据库且数据库密码为 123，以及 tomcat7.0 运行环境并保证接口 8080没有被其他的占用。硬件方面需建立维护和使用制度，在硬件选择是要充分考9虑硬件的负载和应用环境。软件方面则需对系统进行定期地维护，尽量能够预防各种 BUG 问题。2.4 可行性分析可行性分析也称可行性研究，是在系统调查的基础上，针对新系统的开发是否具备必要性和可能性，对新系统的开发从技术、经济、社会的方面进行分析和研究，以避免投资失误，保证新系统的开发成功。2.4.1 技术可行性前端采用 HTML5、CSS3 布局；JS、JQuery 技术页面动画效果； AJAX 页面数据的交互；代码分段、分类，重用率高，
22、可维护性强 4。后台 SSH 框架，着重 struts 和 spring 进行业务分层描写；代码层次清晰可维护性强。后端数据库采用 SQL 编写，轻便且功能强大，数据处理快、权限设置准确、数据安全性高。2.4.2 经济可行性经济可行性主要对系统的经济效益进行评价，该系统的设计与开发不需要特殊硬件，使用的软件为开源免费的，不会产生技术专利问题，同在开发过程中的经费低 5。10第三章 系统总体设计3.1 设计概述根据需求将网站划分为不同的模块，每个模块将完成特定功能，最后将每个模块链接起来，组成一个整体 6。3.2 总体结构根据需求分析，Flea Market 网可以划分为：用户模块、商品模块、订
23、单模块、购物车模块等。用户模块包括用户注册、登陆、激活、退出等功能；商品模块可以分为商品的查询、浏览；订单模块包括商品信息、订单信息、支付信息；购物车模块有商品信息、商品支付状态、商品添加删除等。详见图 3.1。图 3.1 总体模块功能划分图3.3 各个模块功能各个模块功能如下用户模块：用户注册、用户激活、登陆、退出等功能。11图 3.2 用户管理模块功能图注册主要有，用户名(唯一标识)、密码、邮箱、姓名、性别、电话、地址，以及需要激活的验证码。激活主要应用在用户登录时，将用户的状态修改。登录和注销用来管理用户的回话信息，登录时，网站会保留用户的基本信息，包括用户 ID、用户名等。退出时用户信
24、息会清除。商品模块：根据热卖状态对商品的浏览，或者根据分类状态浏览商品。每个用户皆可以根据一定的条件对全部或部分商品搜索后浏览，并可以看到商品的一些基本信息。例如：商品名称、从不同角度展现出的图片、商品作用、购买时间、原价、现价等信息。购物车模块：添加、移除、查询、清空等功能。添加商品，用户根据商品 ID 将商品添加到购物车中。移除商品，只能根据商品 ID 移除单个商品。查询购物车，查询购物车中商品的各种信息，包括商品种类、数量、单价以及总价。清空购物车，一次性将购物车中所有的商品全部移除。12图 3.3 购物车模块功能图订单模块：商品添加后自动生成订单，用户根据需求查询订单、对商品进行支付等
25、功能。图 3.4 订单模块功能图13第四章 系统数据库设计4.1 数据库需求分析在整个动态网站设计中，数据库设计具有重要位置，数据库设计质量直接影响到数据库数据的冗余度，数据的一致性，数据丢失等问题。系统开发中数据可设计至关重要，它将影响整个系统的执行效率和可靠性，关系到系统管理员的操作、运行等的可靠性。该网站开发过程中使用 MySql 数据库，数据库名为将 j2ee，用户名 root，数据库密码 123 。4.2 概念结构设计数据库的概念结构设计就是将需求分析得到的用户需求抽象为信息结构，即概念模型。概念模型作为概念结构设计的表达工具，为数据库提供一个说明性结构，是设计数据库逻辑结构即逻辑模
26、型的基础 3。数据库的概念结构设计就是将需求分析得到的用户需求抽象为信息结构，即概念模型。概念模型的种类很多，其中最著名、最实用的一种是 ER （实体联系）模型，它将现实世界的信息结构统一用属性、实体以及他们之间的联系来描述 3。以下是本数据库系统 E-R 模型：14图 4.1 数据库 E-R 模型图4.3 逻辑结构设计该网站主要数据表有：用户信息表 user、一级菜单表 goodstitle、商品信息表 product、二级菜单表 goodstitlesecond、订单信息表 orderitem、定单表order。用户表 user 存放的为用户登录、注册信息，具体表结构设计见图 4.2。15
27、图 4.2 用户信息表一级菜单表 goodstitle 存放商品类型信息，具体表结构见图 4.3。图 4.3 用户信息表二级菜单表 goodstitlesecond 存放商品分类信息，具体表结构见图 4.4。图 4.4 二级菜单表商品信息表 product 存放商品各种基本信息，具体表结构见图 4.5。16图 4.5 商品信息表订单信息表 orderitem 存放订单各种状态信息，具体表结构见图 4.6。图 4.6 订单信息表定单表 order 存放用户订购商品信息，具体表结构见图 4.7。图 4.7 订单表1718第五章 系统详细设计5.1 前台界面设计界面是网站的门面，以达到美观、舒适、操
28、作方便、信息准确、结构合理为标准。5.1.1 首页界面设计用户一打开该网站，就通过客户端的首页对该网站的功能一目了然 1。网站采取暖色调背景，促进用户的购物欲望。用户可以根据“图书” 、 “宿舍生活” 、“户外活动” 、 “电器” 、 “其他”等不同类别浏览该网站，也可通过首页各个板块浏览商品信息。其中“注册”为注册成为普通用户的功能， “登陆”为有账号的所有类型用户可以操作。其中头部和尾部的设计是一样的 7。首页界面如下所示：(a) 头部19(b) 热卖(c) 限时抢购20(d) 促销区(e) 其他(f) 底部图 5.1 网站首页5.1.2 主要界面设计商品展示界面为用户浏览商品信息的主要界
29、面。按不同的分类浏览，不同21的分类器商品信息不同，但功能风格相同。这里将展示出其界面。每种商品都以小图或者简介的形式展示，单击可以查看其详细信息和放大图片，以直观的方式介绍商品。另外，在每个页面中用户都可直接注册和登陆，商品类型，从而为用户操作提供方便。商品界面如下所示：(a) 商品头部(b) 商品分页图 5.2 商品展示界面登陆界面如下：22图 5.3 用户登录界面注册界面图 5.4 用户注册界面5.1.3 其他界面设计用户查看所点击的商品的相关信息，并根据需求添加到购物车实行商品购买。23(a) 商品详细(b) 商品推荐图 5.5 商品详情页界面图 5.6 购物车界面24(a) 支付方式
30、(b) 未支付图 5.7 订单界面5.2 关键问题设计该网站采用 MVC 模型设计，设计到一些常用的技术手段 8。5.2.1 验证码技术防止用户利用机器人自动注册、登陆、灌水，皆采用验证码技术。所谓验证码，就是将一串随机产生的数字或字符，生成一个特定的字符串，用户识别其验证码信息，输入表单提交验证，验证成功后才可以使用其中特定的功能 9。验证码的实现流程是：服务器端随机生成验证吗字符串，保存在内存中，发送给浏览器显示；浏览器端输入验证码字符串，然后提交服务器端，提交的25字符与服务器端保存的字符进行比较，若一致则继续下一步，否则返回提示。验证码主要代码：BufferedImage img=ne
31、w 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;i0)var i=d
32、ocument.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()28;if(c
33、!=null)I=“;domain=“+c;document.cookie=i+“=“+escape(l)+O+I;,readStyle:function(I,l)if(I.stylel)return I.stylelelse if(I.currentStyle)return I.currentStylel;else if(document.defaultViewreturn i.getPropertyValue(l);elsereturn null;5.2.3 轮播切换设计图层轮播切换技术采用纯 JS 技术编写，实现页面动画效果。主要代码如下：NextPrev:function(e)var btnClass =$(e.target | e.event).attr(“class“);/alert(btnClass);btnClass=“prev“?tag = -1:tag = 1;
