基于Web的书籍借阅系统设计和实现

III摘要在科技日益发展的今天，书籍借阅信息量增长的很快。有效管理和快速检索这些信息成为图书馆等借阅服务机构面临的主要挑战。本论文提出并实现了基于Web的书籍借阅系统，本系统书籍借阅端通过小程序供用户使用，书籍借阅管理端则通过Web网页供管理员访问管理，该系统旨在通过数字化手段优化书籍借阅流程和借阅信息的管理流程并提高查询效率，从而减少书籍借阅的难度和借阅管理的工作量。在系统架构设计上，本系统对前台的设计采用了Java等技术来完成用户访问交互的可视化图形页面，以其强大的跨平台特性，提供了较为良好的用户交互感受。对于后端所需要的数据库相关的技术则选取了被广大开发用户所钟爱的MySQL数据库来存放数据，一定程度上给在存储大量图书数据时的数据提供了稳定性和安全性，并通过有效地数据结构设计，提升了检索和查询的响应速度。最后再从项目需求的分析、不断测试和调整，又根据书籍借阅在真实的环境下所显露出的条件进行微调和契合，确保了系统设计的针对性和实用性，最终设计实现书籍借阅系统。关键词：书籍借阅；用户交互；小程序；Java；MySQL

IVAbstractIntoday'srapidlyevolvingtechnologicallandscape,thevolumeofbooklendinginformationisexperiencingexplosivegrowth.Effectivemanagementandrapidretrievalofthisinformationposemainchallengesforlibraryandborrowingserviceinstitutions.Thispaperproposesandimplementsaweb-basedbooklendingsystem.Thesystemprovidesbooklendingservicestousersthroughamini-programonthebookborrowingendandallowsadministratorstoaccessandmanagebooklendingthroughawebinterfaceontheadministrativeend.Thesystemaimstooptimizethebooklendingprocessandinformationmanagementflowthroughdigitalmeans,therebyenhancingqueryefficiencyandreducingthecomplexityofbookborrowingandtheadministrativeworkload.Inthesystemarchitecturedesign,thesystememploysJavaandothertechnologiesforbasicpagedesignonthefrontend,leveragingitsrobustcross-platformfeaturestoofferefficientandintuitiveuserinteractionexperiences.ThebackenddatabaseutilizeswidelyadoptedMySQL,ensuringstabilityandsecuritywhenhandlinglargevolumesofbookdata.Througheffectivedatastructuredesign,retrievalandqueryresponsetimesareenhanced,providingaconduciveenvironmentforbooklending.Finally,throughrequirementanalysis,testing,andadjustmentsalignedwithactualbookborrowingneeds,thesystemdesignensuresspecificityandpracticality,culminatinginthesuccessfulcreationofthebooklendingsystem.Keywords:booklending;userinteraction;mini-program;Java;MySQL

[4]。（2）技术可行性本系统在技术上使用的是广受欢迎的Java技术、B/S架构技术，并且还用了更优秀的系统策略即模块化部署，所以对平时的管理和修复来说将会更加的方便快捷，与此同时还带来让代码向低耦合的方向契合。（3）管理可行性用户端的小程序设计得易于管理，管理员在连接了学校内网的计算机上通过浏览器验证通过后访问Web网页管理端，就能简单明了地完成各项功能操作。这些功能的操作包括界面首页、用户中心、学生数据管理、书籍类型数据管理、借阅数据管理、还书数据管理、续借数据等进行删除、修改和添加。3.3系统功能分析系统一般来说有业务需求和用户需求两个方面。当我们在了解用户习惯、开发人员技术能力和其他相关因素的基础上，通过调查分析，掌握对系统功能的各种需求。而在了解了系统的基本需求后，我们最终确定了以下的基本功能：功能需求包括业务需求和用户需求，因此在分析用户习惯和开发人员的实际情况后，进行具体分析如下：本系统主要有学生模块，管理员模块。（1）学生模块：学生可以通过系统实现对首页、图书信息和个人信息的访问。在个人信息页面，学生可以管理借书信息、还书信息、续借信息和收藏信息。学生用例如下图所示：图3-1学生用例图（2）管理员模块：管理员主要负责管理系统首页、个人中心、学生信息、图书类型、图书信息、借书信息、还书信息、续借信息和系统设置等相关功能。管理员用例如下图所示：图3-2管理员用例图3.4系统流程分析3.4.1登录流程学生通过注册学校提供的用户名和密码进行登录验证后，进入借阅系统。管理员则通过学校提供的账号进入后台系统，登录过程如下图3-3所示：图3-3登录流程图3.4.2添加信息流程管理层人员有添加角色功能。增加信息的流程如下图3-4所示：图3-4添加信息流程图3.4.3修改信息流程管理员具有更改学生信息的功能权限。具体信息更改过程如下图3-5所示：图3-5修改信息流程图4系统功能与数据库设计4.1系统功能设计系统的基本功能的设计是极为重要的，可以把其比作整个系统的地基，一个好的地基，是通过最初的设计需求再经过不断的完善和改进后经过验证，最后通过计算机系统的方式展现出来。经过对众多类似的图书馆系统的开发经验以及传统图书馆的需求调查分析以及研究，最后总结分析出本系统的大体规划。如下图所示：图4-1总体规划结构图4.2数据库的设计在一个项目中，数据库设计细节是不可以忽略的。本系统中提供的针对数据库的权限有：（1）学生登录权限：能够在前台系统中查看图书借阅系统信息，查看自己的信息，并能修改个人资料等。（2）管理员登录权限，管理员具备本系统的全功能权限，下面简要列举几个常用功能：学生信息管理功能、书籍管理功能、借阅数据管理、还书数据管理和续集信息管理等。4.2.1数据库E-R图目前开发者们较为喜欢使用的也是使用广泛的莫过于关系型数据库，它是面向对象系统而设计。因为本系统的首要目标是完成类的持久化操作，通俗来说通过操作将对象类和关系数据库的二维表相结合。经过分析，当下我们可以选择数据库建模工具来完成这一目标。接下来，我们会根据项目需求，拆分系统的E-R图，获取几种实体-关系模型。下图是主要实体-关系模型的展示。(1)图书信息实体属性图，如下图4-2所示：图4-2图书信息实体属性图(2)学生实体属性图，如下图4-3所示：图4-3学生实体属性图(3)还书信息实体属性图，如下图4-4所示：图4-4还书信息实体属性图(4)借阅信息实体属性图，如下图4-5所示：图4-5借阅信息实体属性图 （5）续借信息实体属性图，如下图4-6所示：图4-6续借信息实体属性图4.2.2数据库表本系统所使用的是众多开发者优先选择的MySQL数据库对用户数据信息进行管理，下面则是本系统所使用的数据表的部分内容展示如下表所示。表4-1：token表字段名称类型长度字段说明主键默认值idbigint主键主键useridbigint用户idusernamevarchar100用户名tablenamevarchar100表名rolevarchar100角色tokenvarchar200密码addtimetimestamp新增时间CURRENT_TIMESTAMPexpiratedtimetimestamp过期时间CURRENT_TIMESTAMP表4-2：关于我们字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPtitlevarchar200标题subtitlevarchar200副标题contentlongtext4294967295内容picture1longtext4294967295图片1picture2longtext4294967295图片2picture3longtext4294967295图片3表4-3：收藏表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPuseridbigint用户idrefidbigint商品idtablenamevarchar200表名namevarchar200名称picturelongtext4294967295图片typevarchar200类型(1:收藏,21:赞,22:踩,31:竞拍参与,41:关注)1inteltypevarchar200推荐类型remarkvarchar200备注表4-4：借书信息字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPshujibiaotivarchar200书籍标题fengmianlongtext4294967295封面tushuleixingvarchar200图书类型zuozhevarchar200作者chubanshevarchar200出版社qijieriqidate起借日期zhongzhiriqidate终止日期jiagevarchar200价格xuehaovarchar200学号xueshengxingmingvarchar200学生姓名jieshuriqidate借书日期jieshuzhuangtaivarchar200借书状态useridbigint用户id表4-5：公告信息字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPtitlevarchar200标题introductionlongtext4294967295简介picturelongtext4294967295图片contentlongtext4294967295内容表4-6：还书信息字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPshujibiaotivarchar200书籍标题fengmianlongtext4294967295封面tushuleixingvarchar200图书类型zuozhevarchar200作者chubanshevarchar200出版社qijieriqivarchar200起借日期zhongzhiriqivarchar200终止日期jiagevarchar200价格xuehaovarchar200学号xueshengxingmingvarchar200学生姓名beizhuvarchar200备注jieshuriqivarchar200借书日期haishuriqidate还书日期haishubeizhuvarchar200还书备注sfshvarchar200是否审核待审核shhflongtext4294967295审核回复useridbigint用户id表4-7：续借信息字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPshujibiaotivarchar200书籍标题fengmianlongtext4294967295封面tushuleixingvarchar200图书类型zuozhevarchar200作者chubanshevarchar200出版社qijieriqivarchar200起借日期zhongzhiriqivarchar200终止日期jiagevarchar200价格表4-7：续字段名称类型长度字段说明主键默认值xuehaovarchar200学号xueshengxingmingvarchar200学生姓名jieshuriqivarchar200借书日期xujietianshuint续借天数shenqingriqidate申请日期xujieyuanyinlongtext4294967295续借原因sfshvarchar200是否审核待审核shhflongtext4294967295审核回复useridbigint用户id表4-8：图书信息评论表字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPrefidbigint关联iduseridbigint用户idavatarurllongtext4294967295头像nicknamevarchar200用户名contentlongtext4294967295评论内容replylongtext4294967295回复内容表4-9：学生字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时CURRENT_TIMESTAMPxuehaovarchar200学号mimavarchar200密码xueshengxingmingvarchar200姓名xingbievarchar200性别youxiangvarchar200邮箱shoujihaomavarchar200手机号码touxianglongtext4294967295头像表4-10：配置文件字段名称类型长度字段说明主键默认值idbigint主键主键namevarchar100配置参数名valuevarchar100配置参数值表4-11：用户表字段名称类型长度字段说明主键默认值idbigint主键主键usernamevarchar100用户名passwordvarchar100密码rolevarchar100角色管理员addtimetimestamp新增时间CURRENT_TIMESTAMP表4-12：图书信息字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPshujibiaotivarchar200书籍标题fengmianlongtext4294967295封面tushuleixingvarchar200图书类型bancivarchar200版次chubanshijiandate出版时间chubanshevarchar200出版社zuozhevarchar200作者loucengshuvarchar200楼层数shujiashuvarchar200书架数shujiacengshuvarchar200书架层数jiagevarchar200价格zhuangtaivarchar200状态neirongjianjielongtext4294967295内容简介clicktimedatetime最近点击时间clicknumint点击次数0表4-13：图书类型字段名称类型长度字段说明主键默认值idbigint主键主键addtimetimestamp创建时间CURRENT_TIMESTAMPtushuleixingvarchar200图书类型

5系统前后台功能实现5.1前台书籍借阅功能实现（1）首先，用户需要双击打开小程序客户端，并确保已经连接到网络。一旦连接成功，系统的登录界面就会显示出来。“登录”页面也就是连接以太网后的小程序的主页面，在进入登录界面后学生用户就能够通过注册或者登录来进入书籍借阅系统体验所有功能。登录界面如下图5-1所示：图5-1登录界面部分关键代码：onRegisterTap(tableName){onRegisterTap(tableName){uni.setStorageSync("loginTable",tableName); this.$utils.jump('../register/register') }, asynconLoginTap(){if(!this.username){ this.$utils.msg('请输入用户名') return }if(!this.password){ this.$utils.msg('请输入用户密码') return } } letres=awaitthis.$api.login(`${this.optionsValues[this.index]}`,{ username:this.username, password:this.password });（2）新生用户打开借阅系统，他们应该根据学校提供的信息比如学号等来进行注册。注册成功后，小程序会自动进入注册页面。在该页面，学生需要把自己的学生信息按要求填写输入栏中。确保信息无误后点击“注册”，程序刷新页面并回到登录主界面。在学生成功登录后，就成功进入系统并使用。注册界面如下图5-2所示：图5-2注册界面部分关键代码：//注册//注册asyncregister(){ if((!this.ruleForm.xuehao)&&`xuesheng`==this.tableName){ this.$utils.msg(`学号不能为空`); return } if((!this.ruleForm.mima)&&`xuesheng`==this.tableName){ this.$utils.msg(`密码不能为空`); return }if(`xuesheng`==this.tableName&&(this.ruleForm.mima!=this.ruleForm.mima2)){this.$utils.msg(`两次密码输入不一致`);return} if((!this.ruleForm.xueshengxingming)&&`xuesheng`==this.tableName){ this.$utils.msg(`学生姓名不能为空`); return } if(`xuesheng`==this.tableName&& awaitthis.$api.register(`${this.tableName}`,this.ruleForm); this.$utils.msgBack('注册成功');;（3）对于已经注册并登录的学生，他们首先会看到的是小程序的首页。学生可以在首页导航栏查询系统推荐的书籍和系统公告或者选择图书信息功能自行搜索查询所需要的图书进行借阅，若是需要查看个人信息则点击“我的”功能选项可以上传头像或者修改密码。具体功能选项样式，如下图5-3所示：图5-3小程序首页界面图//公告信息 //公告信息 res=awaitthis.$api.list('news',{ page:1, limit:6 }); this.news=res.data.listmethods:{ //轮播图跳转 onSwiperTap(e){ },asyncgetAboutUs(){letres=awaitthis.$('aboutus',1)this.aboutUsDetail=res.data;},asyncgetSystemIntroduction(){letres=awaitthis.$('systemintro',1)this.systemIntroductionDetail=res.data;},} if((!this.ruleForm.xueshengxingming)&&`xuesheng`==this.tableName){ this.$utils.msg(`学生姓名不能为空`); return } if(`xuesheng`==this.tableName&& awaitthis.$api.register(`${this.tableName}`,this.ruleForm); this.$utils.msgBack('注册成功');;（4）书籍信息：进入图书信息功能页面以后可以自行搜索书籍名查询所需要的图书进行借阅的同时还能查看所选书籍的各种信息包括但不限于书籍的出借情况以及学生评论和出借次数。如下图5-4所示：图5-4图书信息详情界面图部分关键代码：//类别搜索categoryClick(categoryName){ this.categoryName=categoryName; this.mescroll.resetUpScroll();},asyncupCallback(mescroll){ letparams={ page:mescroll.num, limit:mescroll.size } if(this.categoryName!='全部'){ params.tushuleixing='%'+this.categoryName+'%' } if(this.searchForm.shujibiaoti){ params['shujibiaoti']='%'+this.searchForm.shujibiaoti+'%' } if(this.searchForm.zuozhe){ params['zuozhe']='%'+this.searchForm.zuozhe+'%' } if(this.searchForm.shujiashu){ params['shujiashu']='%'+this.searchForm.shujiashu+'%' } if(this.searchForm.zhuangtai){ params['zhuangtai']='%'+this.searchForm.zhuangtai+'%' }letres={}if(this.userid){res=awaitthis.$api.page(`tushuxinxi`,params);}else{res=awaitthis.$api.list(`tushuxinxi`,params);}（5）学生登录成功后，在个人中心页面即“我的”页面，可以对我的页面提供的各种功能进行详细操作，具体的学生功能界面如下图5-5所示：图5-5学生功能界面图 //跨表 //跨表 this.cross=options.cross; if(options.cross){ varobj=uni.getStorageSync('crossObj'); for(varoinobj){ if(o=='xuehao'){ this.ruleForm.xuehao=obj[o]; this.ro.xuehao=true; continue; } if(o=='mima'){ this.ruleForm.mima=obj[o]; this.ro.mima=true; continue; } if(o=='xueshengxingming'){ this.ruleForm.xueshengxingming=obj[o]; this.ro.xueshengxingming=true; continue; } this.ro.youxiang=true; continue; if(o=='touxiang'){ this.ruleForm.touxiang=obj[o].split(",")[0]; this.ro.touxiang=true; continue;5.2后台书籍借阅管理功能实现（1）当后台管理员登录后，输入正确的账号和密码，点击登录将会成功进入系统，若是输入错误的信息将会触发错误反馈提示登录人员及时查证修改。如下图5-6所示：图5-6管理员登录界面部分关键代码：//登陆//登陆login(){if(!this.rulesForm.username){ this.$message.error("请输入用户名"); return;}if(!this.rulesForm.password){ this.$message.error("请输入密码"); return;}if(this.roles.length>1){ if(!this.rulesForm.role){ this.$message.error("请选择角色"); return;} letmenus=this.menus; for(leti=0;i<menus.length;i++){ if(menus[i].roleName==this.rulesForm.role){ this.tableName=menus[i].tableName; } }}else{ this.tableName=this.roles[0].tableName; this.rulesForm.role=this.roles[0].roleName;}（2）当管理员进入主界面后，他们可以进行一系列的操作。这些操作主要包括对系统首页浏览系统的主页。对学生信息进行查询、新增、删除、查看、修改等操作。管理自己的个人信息，如密码、联系方式等，以及查看书籍的详细信息，记录借书的相关数据，如借书日期。记录还书的相关数据，如还书日期、逾期情况等、续借信息管理等操作。管理员用户主界面如下图5-7所示：图5-7管理员主界面部分关键代码：jieshuxinxiChat1(){jieshuxinxiChat1(){this.$nextTick(()=>{varjieshuxinxiChart1=echarts.init(document.getElementById("jieshuxinxiChart1"),'macarons');this.$http({url:"jieshuxinxi/group/jieshuriqi",method:"get",}).then(({data})=>{if(data&&data.code===0){letres=data.data;letxAxis=[];letyAxis=[];letpArray=[]for(leti=0;i<res.length;i++){xAxis.push(res[i].jieshuriqi);yAxis.push(parseFloat((res[i].total)));pArray.push({value:parseFloat((res[i].total)),name:res[i].jieshuriqi})}（3）学生管理：管理员，在学生管理功能的页面输入学生的主要信息如学号等，然后检索相关学生的信息、添加学校刚报到的学生到学生列表中或从学生列表中移除不需要的学生，并根据需要对学生的信息进行编辑，如更改姓名、联系方式等操作；如下图5-8所示：图5-8学生管理界面methods:{xueshengtouxiangUploadChange(fileUrls){methods:{xueshengtouxiangUploadChange(fileUrls){this.ruleForm.touxiang=fileUrls;},onUpdateHandler(){if((!this.ruleForm.xuehao)&&'xuesheng'==this.flag){this.$message.error('学号不能为空');return}if((!this.ruleForm.mima)&&'xuesheng'==this.flag){this.$message.error('密码不能为空');return}if((!this.ruleForm.xueshengxingming)&&'xuesheng'==this.flag){this.$message.error('学生姓名不能为空');return}if('xuesheng'==this.flag&&this.ruleForm.youxiang&&(!isEmail(this.ruleForm.youxiang))){this.$message.error(`邮箱应输入邮箱格式`);return}（4）书籍管理：管理员点击进入图书类型管理页面。在进入书籍类型页键入图书的类别，检索相关图书的信息，从图书列表中移除不需要的图书类别，也可点击图书类别的名称或编号，查看图书类别的具体信息、或更改书籍名称、描述等；如下图5-9所示：图5-9书籍类型管理界面部分关键代码：//当前页currentChangeHandle(val){this.pageIndex=val;this.getDataList();},//多选selectionChangeHandler(val){this.dataListSelections=val;},//添加/修改addOrUpdateHandler(id,type){this.showFlag=false;this.addOrUpdateFlag=true;this.crossAddOrUpdateFlag=false;if(type!='info'){type='else';}},（5）书籍信息操作功能：管理员//当前页currentChangeHandle(val){this.pageIndex=val;this.getDataList();},//多选selectionChangeHandler(val){this.dataListSelections=val;},//添加/修改addOrUpdateHandler(id,type){this.showFlag=false;this.addOrUpdateFlag=true;this.crossAddOrUpdateFlag=false;if(type!='info'){type='else';}},图5-10书籍信息管理界面部分关键代码：rules:{rules:{ shujibiaoti:[ {required:true,message:'书籍标题不能为空',trigger:'blur'}, ], fengmian:[ ], tushuleixing:[ {required:true,message:'图书类型不能为空',trigger:'blur'}, ], banci:[], chubanshijian:[], chubanshe:[ {required:true,message:'出版社不能为空',trigger:'blur'}, ], zuozhe:[ {required:true,message:'作者不能为空',trigger:'blur'}, ], loucengshu:[ {required:true,message:'楼层数不能为空',trigger:'blur'}, ], shujiashu:[ {required:true,message:'书架数不能为空',trigger:'blur'}, ],（6）借书信息管理：管理员点击借书信息管理。可在借书信息页面选择导出借书信息列表，也可以查看每日借书的人数统计，还能对借书详情信息进行详情、修改、或删除操作；如下图5-11所示：图5-11借书信息管理界面//统计接口chartDialog1(){//统计接口chartDialog1(){this.chartVisiable1=!this.chartVisiable1;this.$nextTick(()=>{varjieshuriqiChart1=echarts.init(document.getElementById("jieshuriqiChart1"),'macarons');this.$http({url:"jieshuxinxi/group/jieshuriqi",method:"get",})（7）还书信息管理：管理员进入还书信息管理。在还书信息页选择是否通过申请还书学生的申请，并根据需要对还书详情信息进行详情操作；如下图5-12所示：图5-12还书信息管理界面//批量审核shBatchHandler(){//批量审核shBatchHandler(){this.$confirm(`确定一键审核操作?`,"提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(()=>{this.$http({url:"haishuxinxi/shBatch?sfsh="+this.shBatchForm.sfsh+"&shhf="+this.shBatchForm.shhf,method:"post",data:this.batchIds}).then(({data})=>{if(data&&data.code===0){this.$message({message:"操作成功",type:"success",duration:1500,onClose:()=>{this.getDataList();this.shBatchDialog()}});}else（8）续借信息管理：管理员在点击并进入续借信息管理功能后。可以在续借信息的功能页面选择通过或者拒绝申请续借的学生的请求，并根据需要对续借详情信息进行详情操作例如在同意学生续借时失误点击拒绝。如下图5-13所示：图5-13续借信息管理界面部分关键代码：xujietianshu:[xujietianshu:[ {required:true,message:'续借天数不能为空',trigger:'blur'}, {validator:validateIntNumber,trigger:'blur'},],（9）系统的管理功能：管理员在登录借阅系统后，可在公告信息页查询、删除或新增公告信息等进行操作，如下图5-14所示：图5-14系统管理界面部分关键代码：this.$http({ url:"systemintro/page", method:"get", this.$http({ url:"systemintro/page", method:"get", params:params}).then(({ data})=>{ if(data&&data.code===0){ if(data.data.total>=crossoptnum){ this.$message.error(this.$storage.get('tips')); returnfalse; } 6系统测试系统开发等项目软件在上市前通常都需要经过严格的系统测试以确保项目的安全性，稳定性以及可靠性。一般采用的主要测试方法是测试访问请求的延迟时间，以及对于一些未知命令的执行和响应等具有一定风险的问题，需要严格的测试和解决方案。6.1系统测试的重要性可以验