毕业设计6基于WEB图书换购平台的设计与实现.docx
《毕业设计6基于WEB图书换购平台的设计与实现.docx》由会员分享，可在线阅读，更多相关《毕业设计6基于WEB图书换购平台的设计与实现.docx（30页珍藏版）》请在冰豆网上搜索。
毕业设计6基于WEB图书换购平台的设计与实现
2015届毕业生
毕业设计说明书
题目:
基于WEB图书换购平台的设计与实现
院系名称：
信息科学与工程专业班级：
计科1101
学生姓名：
陈宏恩学号：
201116910519
指导教师：
马宏琳教师职称：
讲师
2015年05月29日
摘要
生活中存在着一些严重的书籍浪费现象。
比如，每年都会有大量毕业生将手中的图书论斤贱卖给废品收购或直接丢弃。
这并不意味着，我国人均藏书量达到了饱和，而是一种供需失衡，那些需要公益计划帮助下才能勉强看上书的孩子们就说明了这点。
如今，互联网行业技术发展趋势之迅速有目共睹。
国内出现了很多大型的网上书店和小型的二手书店，但往往只能通过在线支付或者货到付款方式才能得到想看的图书。
而没有一个有规模的平台支持区域性范围内图书借阅，图书交换。
因此，本毕业设计从以上实际需求和现状出发，搭建基于Spring+SpringMVC+Mybatis三大框架的图书信息共享系统。
适当结合各种JS插件，达到更佳的用户体验。
主要供用户能够在线发布自己的藏书信息，实现图书借阅，交换和购买功能。
不局限于金钱购买方式，通过免费借阅和以物换物使闲置图书变废为宝，丰富人们获取书籍途径以满足阅读需求。
关键词：
SpringSpringMVCMybatis图书
TitleDesigningandImplementingaBookExchangingAndPurchasingSystembasedonWEB
Abstract
Seriousbookwasteisrife.Forexample,plentyofbooksareturnedintoafiresaletojunkcollectorsordiscardeddirectlybygraduatesannually.Itdoesn’tmeanthatpercapitabookshavereachedsaturationpointinourcountry.It’samismatchinsupplyanddemand.Onlywiththehelpofnon-profitorganizations,canchildrenreadbookwhichturnsoutthat.
Asaresultofthe12thNationalReadingSurveybyChinaInstituteofPress,percapitareadingofpaperbooksis4.56amongChinesepeople.Morethan40percentofadultsthhikthemselveslackingofreading,andabout70percenthopethattherewillbemoreactivitiesofreadingorganizedbylocalauthorities.So,it’snecessityofprovidingwithaBookSharingWebSystemfornationwidereading.
Nowadays,therapiddevelopmentofInternetisobvious.Plentyoflarge-scaleonlinebookStoresandsmallsecond-handbookstorehaveemerged.However,mostofthemalwayssupportingonlinepaymentorpaymentafterarrivalofgoodsonly.Thereisnotacertainscaleplatformallowbookborrowingandbookexchanginginregional.
So,mygraduationprojecttriestobuildaBookSharingWebSystembasedonSpring,SpringMVCandMybatisframeworkstomeetingaboverequirementandpresentsituation.It’stargetedprimarilyforuserstosharetheirbooksonline，thenotheruserscanborrow,exchangeorpurchaseofthem.Don’tlimittopayformoney,richingthewayofgetbooktomeetreadingdemandbythemeansoffreelendingandbarter.
KeywordsSpringMVCMybatisbook
目次
1引言………………………………………………………………………………1
1.1开发背景…………………………………………………………………………1
1.2主要技术简介………………………………………………………………………1
1.3开发准备………………………………………………………………………2
1.4全文内容………………………………………………………………………3
2分析与设计………………………………………………………………………4
2.1需求分析………………………………………………………………………4
2.2模块设计………………………………………………………………………5
2.3DB设计………………………………………………………………………7
2.4个性化设计………………………………………………………………………8
3难点技术实现………………………………………………………………………10
3.1登陆验证…………………………………………………………………………10
3.2读物信息展示……………………………………………………………………12
3.3实时消息推送………………………………………………………………………13
3.4热门搜索…………………………………………………………………………14
3.5图片存储标识……………………………………………………………………14
4主要功能测试……………………………………………………………………16
4.1换书业务……………………………………………………………………16
4.2关注功能……………………………………………………………………22
4.3评论功能……………………………………………………………………23
结论……………………………………………………………………………………25
致谢……………………………………………………………………………………26
参考文献………………………………………………………………………………27
1引言
介绍毕业设计开发初衷，应用到的主要技术和项目基本环境搭建。
1．1开发背景
“全民阅读”一词，可追溯至2006年由原国家新闻出版总署在借鉴国际经验基础上首次提出，并会同教育部、中宣部等十一个主要部门联合发表了《关于开展全民阅读活动的倡议书》。
随着《关于制定实施国家全民阅读战略的提案》于2013年备受瞩目的全国两会上引起社会反响，全民阅读纳入立法计划提上日程。
如今，在中共中央国务院的高度重视与地方群众的积极参与下的第九个年头，诸如《江苏省人民代表大会常务委员会关于促进全民阅读的决定》、《深圳经济特区全民阅读促进条例》、《湖北省关于促进全民阅读的决定》等一项项政策的推进，全民阅读呈可喜之势。
然而，放眼看人均阅读情况统计数据就会发现，全民阅读现与建设文化强国所要求的水准相距甚远。
阅读资源不足问题尤为突出。
截至2013年，我国共有县以上公共图书馆3112个，人均拥有公共图书馆藏书0.55册，与国际图联和联合国教科文组织推荐的人均1.5至2.5册图书馆藏书量、图书馆最佳覆盖半径和服务读者数量等标准相比，存在悬殊差距[1]。
近些年来，手机、Pad、Kindle等移动设备丰富电子阅读途径，但电子阅读内容大多来自于网络，内容良莠不齐，总体阅读生态不容乐观。
一边是高涨的阅读热情，一边是堪忧的阅读资源。
借助迅速普及的互联网平台搭建一个读物资源信息分享系统将会是一种有效的解决方案。
本毕业设计就此应用场景展开项目开发。
1．2主要技术简介
1.2.1Spring
Spring是一个为简化企业级应用开发而生轻量级开源框架。
原本通过EJB才能实现的功能，运用Spring技术后，使用简单的JavaBean便能实现。
Spring具有AOP（面向切面编程）和IOC（DI）（控制反转或依赖注入）核心特性[12]。
在IOC和AOP的基础上可以整合各种企业应用的开源框架和优秀的第三方类库。
1.2.2SpringMVC
SpringMVC框架，顾名思义是基于MVC设计理念的，但比其他MVC框架更加灵活，可拔插、可拓展。
通过注解方式，使POJO变成能够处理请求的控制器，通过可配置的数据绑定（handlermappings）、视图解析（viewresolution）、本地化（locale）及静态资源处理（themeresolution）处理请求并且跳转至对应的视图。
虽然原理上与Struts、Struts2有相似之处，但可以说性能等多方面超越了以往的MVC框架。
1.2.3Mybatis
MyBatis被称为全球最为流行的SQL映射框架。
不同于另一种ORM框架Hibernate之处在于，MyBatis使用者需要在对应的xml文件中编写SQL文来实现具体的SQL操作，使得数据库移植更加方便，也给数据持久化操作提供了较大的自由空间。
MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索。
1．3开发准备
1.3.1开发工具
编程软件：
MyEclipseProfessional2014
数据库及管理软件：
MySQL、NavicatforMySQL
建模工具：
PowerDesigner
服务器：
Apachetomcat7.0.61
项目管理工具：
Maven
系统环境：
WIN7
1.3.2项目环境搭建
创建Maven项目：
从Apache官网下载maven并配置电脑环境变量path路径（如：
F：
\rebook\maven\bin）。
利用cmd指令mvn-v检测是否成功安装maven。
将“..\apache-maven-3.0.5\conf”目录下的setting.xml文件复制至电脑用户目录下的.m2文件夹下（如：
“C:
\Users\che\.m2”），并可修改setting.xml文件中的配置信息，从而来指定仓库路径，不修改则为默认值（如：
“D:
/softsetup/Java/pro”）
通过MyEclipse-New-MavenProject，填写相应选项后及创建完成。
框架整合配置：
通过编写pom.xml引入所需各种jar包依赖。
使用GenerateMybatis插件自动生成Mybatis相关表信息的POJO。
在src/main/resources创建spring的配置文件applicationContext.xml,创建连接池配置信息在config.properties中，创建mybatis的配置信息文件spring-mybatis.xml，创建日志配置文件logback.xml。
由于使用了Spring4+中的webSocket技术，所以必须要求web.xml中的web-app是3+版本。
脚本样式引入：
基础js库使用jquery-1.9.1.min.js；系统整体样式以Twitter推出的前端开发的开源工具包Bootstrap为基础，因此，需引入bootstrap.min.js和bootstrap.min.css；为了实现弹出层效果,需增加bootstrap-popover.js和bootstrap-tooltip.js；为实现日期选择框引入bootstrap-datetimepicker.min.js和bootstrap-datetimepicker.min.css；为了实现九宫格解锁功能，需引入patternLock.js和patternLock.css；为了实现毛玻璃滤镜兼容效果，需引入StackBlur.js；为了实现瀑布流效果，需引入masonry.pkgd.min.js、jquery.infinitescroll.min.js和imagesloaded.pkgd.min.js；表单校验需求引入jquery.validate.min.js。
1．4全文内容
本系统主要允许用户上传分享个人读物信息并管理，供一定区域范围内其他用户浏览，借阅，交换或购买该用户读物。
本文主要分为5个部分：
第1章，引入话题，介绍开发背景、主要应用技术简介、开发准备与全文结构；第二章，通过系统需求分析抽象为系统具体实现功能，结合图表、文字详细说明整体系统设计。
具体包括系统个性化元素设计、数据库设计等；第三章，具体功能实现和系统特色设计原理分析；第四章，系统测试；第五章，总结毕业设计，展望未来工作。
2分析与设计
通过项目需求分析，完成模块设计，数据库设计与个性化设计。
2．1需求分析
2.1.1用户的基本功能
非注册用户仅具有浏览网页资格，而不能进行其他进一步细化操作（如：
借阅、交换等）。
若需进一步操作，提示用户登陆或注册。
注册成功后则具有相应权限，登陆后则允许体验网站功能。
注册用户能修改自己的头像，联系方式等个人信息。
2.1.2读物信息上传与展示
注册用户可上传个人合法读物信息至系统，信息包括图片、名称、所属分类、描述等。
上传的读物信息在个人中心可见可管理。
首页将汇总整理后排序（根据读物热度，用户信用度，发布时间等）展出用户上传的读物信息，以“瀑布流”形式呈现。
通过首页分类点击进入，可见该类下的读物信息展示。
通过检索可见检索结果下的读物信息。
通过个人读物管理中心可见自己上传的读物信息展示。
2.1.3借阅读物功能
注册用户在浏览到钟意供借阅的读物信息后，可以点击借阅按钮并填写借阅申请单，提交后，书主会收到“借阅申请”。
若审批通过，系统通知申请用户并提供物主联系方式。
若不通过，系统同样予以消息提醒。
特殊情况：
若读物已借出，可选择继续申请等待或放弃申请。
2.1.4交换读物功能
注册用户在浏览到喜欢供交换的读物信息后，可以点击交换按钮并填写交换申请单，信息必须包含自己提供用来交换的读物，且该读物已上传至本系统，向物主提出交换申请。
提交后等待物主审批。
若审批通过，系统通知用户换物时间地点以及物主联系方式。
若不通过，系统同样予以提醒。
特殊情况：
若读物已换出，可选择继续申请等待或放弃申请。
2.1.5购买读物功能
注册用户在浏览到钟意供购买的读物信息后，可以点击购买按钮下单。
提交后等待物主接单。
若接单成功，系统通知用户线下交易时间地点以及物主联系方式，并默认下架该读物。
若不成功，系统同样予以提醒。
2.1.6关注读物、用户或活动
注册用户可通过“关注/取消关注”按钮，添加关注的读物、用户或平台活动。
所有关注的信息可在“个人中心-关注”查看管理。
在有读物展示界面和书主展示的界面都应有“关注/取消关注”按钮。
被一个用户关注，粉丝数累计一个。
同理，取消关注，粉丝数减去一。
2.1.7读物、申请、关注管理
可按不同类型分类型（借/换/购）分页查看自己录入本系统的读物，可对读物进行增删改操作。
借阅/交换申请单与订单根据状态分TAB页分页显示查看，可进行接受与拒绝操作。
关注能够分页查看，并能通过点击跳转查看对象详情，支持取消关注操作。
2．2模块设计
以首页为起点发散，各主要功能模块业务流程如图2.1所示：
图2.1主要业务流程图
由读物详细界面发散，借阅/交换/购买等主要功能流程设计如图2.2所示：
图2.2读物详细界面流程图
由个人中心界面发散，读物/消息/关注中心模块设计如图2.3所示：
图2.3个人中心流程图
2．3DB设计
表2.1数据库主要表与功能对照
序号
表名
作用
1
rb_goods
读物基本信息（名称、类别、价格等）
2
rb_userInfo
用户基本信息（昵称、账号、密码等）
3
rb_ex_apply
借书申请、换书申请和购书订单
4
rb_sort
读物分类表
5
rb_attachment
读物图片、内容简介等附属信息
6
rb_like
关注信息表
7
rb_msg
评论/消息表
8
rb_hot
搜索关键字表（热门）
9
rb_record
交易记录表
实现系统功能所需数据库表结构以及每个表详细字段如图2.1所示。
箭头指向哪个表，表示被哪个表引用。
此外，每个表均设有备用字段，为了方便日后业务扩充使用。
图2.4整体表结构
2．4个性化设计
2.4.1主题色调
系统整体色调组成：
#F39C12#1ABC9C#2D3E50
2.4.2品牌域名
为了方便推广，系统取名“ReBook”，寓意让书循环使用。
域名地址为：
www.rebook.cc。
2.4.3Logo设计说明
Logo整体线条由品牌“ReBook”中的字母“R”和“B”抽象化而来。
同时，组成了中文字“书”，直切系统内容主旨。
整体以绿色为主，突出读物循环使用环保思想。
图2.5网站LOGO标志
3难点技术实现
系统主要功能实现难点原理分析及主要功能效果展示。
3．1登陆验证：
九宫格鼠标滑动验证码
3.1.1采用原因
①提高验证效率，改善用户体验：
传统“码式验证码”通常由一些线条（或星点）和不规则字符组成，用户通过手动输入所见字样完成验证。
当组合图案过于复杂到用户看不清时，只能被迫刷新。
而九宫格滑动解锁通过鼠标“点击-指定顺序滑动”图案即可完成验证，使用方法类似移动端产品的九宫格解锁。
②融合产品元素，推广产品认知：
经过个人改编后的源码，将产品图标、Logo等元素融入验证，使用户更快了解到系统相关内容，达到宣传效果。
3.1.2实现策略
为了缩短用户校验时间，方便用户登录，将正确答案的坐落范围由3x3缩小为2x2范围。
即表3.1中B字母开头所在格子区域。
为了实现结合网站主题元素，通过css与js将“借换购”图标和“REBOOK”字母图标与九宫格绑定（如图3.1所示），设“7-8-9”表示借换购,“6”表示“K”，将其与B区数字随机配对生成键值对，如{B5：
6，B6：
9，B7：
8，B8：
7}，界面定要求如“按借换购顺序连接解锁”，那么此时“7-8-9”值对应的键“B8-B7-B6”即为滑动九宫格正确的滑动顺序（如图3.2所示）。
表3.1九宫格模拟表
A1
A2
A3
A4
B5
B6
A7
B8
B9
图3.1九宫格验证效果图A
图3.2九宫格验证效果图B
3.1.3主要实现代码
vararr1=getArrayItems（[1,2,3,4,5],5）;
vararr2=getArrayItems（[6,7,8,9],4）;
varjson1={"1":
arr1[0],"2":
arr1[1],"3":
arr1[2],"7":
arr1[3],"4":
arr1[4]};
varjson2={"5":
arr2[0],"6":
arr2[1],"8":
arr2[2],"9":
arr2[3]};
//获取答案串
for（variinjson2）{
if（json2[i]==7）{rightAnswer=rightAnswer+i;
for（variinjson2）{
if（json2[i]==8）{rightAnswer=rightAnswer+i;
for（variinjson2）{
if（json2[i]==9）{rightAnswer=rightAnswer+i;}
}}}}}
//初始化九宫格
varlock=newPatternLock（"#patternContainer"）;
lock.checkForPattern（rightAnswer,function（）{...},function（）{..}）;
3．2读物信息展示：
瀑布流布局
3.2.1采用原因
①高效的视觉搜索效率：
至上而下（或从左到右）的逐一浏览适合人类的视觉习惯，在浏览庞大信息量数据时，无需点击“下一页”，向下滚动便能得到无穷尽的信息，用户可蜻蜓点水式的获取想要的信息。
②合理的网页空间占用：
支持参差补齐的补位多栏布局，解决不同长宽比的图片显示的不友好性问题。
3.2.2实现策略
通过滚动滚动条至底部一定距离时，触发加载数据函数。
每次从数据库查出N条（自定义）数据以JSON数据形式返回给js临时变量imgs，通过循环取值拼接html片段后加入界面底部（如图3.3所示）。
当滚动条再次向下滚动到一定距离时，再次触发，以此类推。
图3.3瀑布流展示演示
3.2.3主要代码实现
functioninitMasonry（）{
varitems=getNewItems（）.css（'opacity',0）;//取新的空对象数组
processNewItems（items）;//加上详细信息（图片，名称等）
wfc.imagesLoaded（function（）{//布局参数设定
wfc.append（items）;
msnry=newMasonry（wfc[0],{
columnWidth:
190,//每列的宽度，不设就按第一个计算
gutter:
20,//每列的间隙
itemSelector:
'.post',isFitWidth:
true,transitionDuration:
'0.8s',
hiddenStyle:
{opacity:
0},visibleStyle:
{opacity:
1}
}）;
items.animate（{'opacity':
1},300）;
}）;
}
3．3实时消息推送：
Spring4下的WebSocket
3.3.1采用原因
实时消息推送，即用户进行特定操作后，触发客户端发送一定格式的请求，服务器端接收来自浏览器的请求并进行指定的处理，返回所需格式的结果呈现给用户。
WebSocket技术诞生前，实现实时消息推送通常采用轮询、长轮询和流的技术来模拟实时交互，还有地方采用了以Flash为基础的的数据交换方式。
虽然实现了相同的效果，但实现过程极其繁杂且开销不可小觑。
为了满足高频率且低延迟的实时消息反馈需求，WebSocket解决方案应用而生。
性
升级会员 