jquery csdn 收藏 0

基于SpringBoot从0到1编写一个图书管理系统(附源码)

项目源码地址: https://muzidong.com/productDetail/8ff44c71db6b4b6aa30c71e646b1c557

需求分析基于SSM + MySql + LayUI的图书管理系统。该系统应包含图书信息的添加，删除，修改，查询，上传图书封面、借书，还书功能，用户层面的查看个人 信息，以及登录，注销，修改用户密码功能，以及查询借阅记录功能。该系统区分三种不同的角色：管理员、教师、学生。管理员拥有所有的功能，可查询所有用户的借阅记录，并且可无限借书，且无超期限制。教师拥有图书查询，借书，还书，查询个人借阅记录，并且拥有用户层面的所有功能，最多可借10本书，超期天数为10天。学生拥有图书查询，借书，还书，查询个人借阅记录，并且拥有用户层面的所有功能，最多可借5本书，超期天数为5天。用户登录后可访问有权限的资源，若未登录，重定向到登录页面。借阅记录页面显示用户是否超期，并且提示用户距离超期时间还有多少时间。技术选型：前台 LayUI + jQuery + CSS后台 SpringBoot + MyBatis + MySQL权限控制 Shiro

系统功能模块设计

项目结构

功能实现

输入用户名密码，系统通过shiro进行身份验证后，方可登录成功进入系统。有其他请求进入系统后，会被Shiro拦截，判断是否已经登录，如果已经登录，则允许继续访问，否则，重定向到登录页面，核心代码见下图：

注册

用户填写注册信息，选择相应的角色（本系统有三种角色：管理员、教师、学生），即可注册成功，插入用户表与用户角色对应关系表注销

修改密码

用户登录成功后，方可修改密码

图书查询

提供两个查询条件选择：图书编号、图书名称，均精确查找前台页面使用jQuery发送Ajax请求，请求到达BookController后，由BookController去调用service层，然后service层通过MyBatis去做数据库查询操作，返回给前台，核心代码如下：

图书编辑

只有管理员角色才拥有此操作权限。前台通过jQuery发送Ajax请求到达BookController的updateBook方法，首先校验图书编号、名称、出版社字段信息是否为空，校验通过后，调用service的更新方法，由service层通过MyBatis做数据库更新操作。核心代码如下：

图书删除

只有管理员角色才拥有此操作权限。前台通过jQuery发送Ajax请求到达BookController的deleteBookByNo方法，controller层调用service层，由service层通过MyBatis做数据库删除操作。核心代码如下：

图书入库

只有管理员角色才拥有此操作权限。前台通过jQuery发送Ajax请求到达BookController，字段进行为空校验后，验证编码对否已存在，如果已存在，则不允许新增，保证编码的唯一性，如果不存在，则调用service层的insert方法，service层通过MyBatis做数据库插入操作。插入成功后，将上传的封面图片保存。核心代码如下：

图书信息查看

此功能不涉及后台操作，将行数据展示到弹出层即可。

借书

前台通过jQuery发送Ajax请求到达BorrowController，BorrowController接收到http请求后，首先查询图书的当前库存数量，若库存不足，返回“库存不足，无法借书”；如果库存充足，接着查询登录人的借书未还数量，如果已经达到最大借书数量（管理员没有限制，教师最大数量为10，学生为5），则返回前台“已达到最大借书数量，不允许继续借书”；如果条件都满足后：开启数据库事务，做以下两个操作，两个操作都成功后，将事务提交，如果有一个失败，则将该事务回滚，保证数据的一致性：1、更新图书库存，通过MyBatis操作book表，将该书的库存-1；2、新增借阅记录，通过MyBatis操作borrow_recod表，插入一条借阅记录核心代码如下：

查询借阅记录

管理员角色可以查看所有用户的借阅记录，其他角色只能查询本人的借阅记录。前台通过jQuery发送Ajax请求到达BorrowRecordController，controller接收到http请求后，首先查询用户的借阅记录。查询到借阅记录集合后，做遍历操作，计算每条借阅记录距离超期时刻的时间间隔，并且计算该借阅记录是否超期（管理员没有超期限制，教师最长借书天数为10，学生为5），数据计算完成后，由BorrowRecordController返回前台。核心代码如下：

还书

用户点击还书按钮首先判断该借阅记录是否有还书时间，若有，提示前台“该书已还”。前台jQuery发送ajax请求到BorrowRecordController，controller接收到用户请求后，首先查询当前登录人是否为该借阅记录的借书人，如果不是，则返回前台“不允许替他人还书”；条件满足后，开始事务，做以下两个操作：1、更新图书库存，通过MyBatis操作book表做update操作，将本书的库存+12、更新借阅记录还书时间，通过MyBatis操作borrow_record表做update操作，将该借阅记录的还书时间更新为当前时间这两个操作全部都正确执行后，提交事务，否则将事务回滚，保证数据的一致性核心代码如下：

权限校验

本系统权限校验通过Shiro权限框架实现，分为操作权限和页面权限。非管理员权限无法查看图书管理页面，故无法做图书的新增，修改，删除操作用户登录后，将登陆人所属角色的所有操作权限交由Shiro管理，每一个请求进来后，都会由Shiro进行鉴权，鉴权通过后，方可处理该请求。系统菜单通过数据库进行配置，用户登录后，将登录人所属角色所拥有的的菜单权限查询出来，并展示再前台页面。核心代码如下：

项目总结本项目采用LayUI+ CSS+ SpringBoot+ jQuery + MyBatis + Maven + MySQL架构实现，程序运行结果良好，代码格式工整。

关于跨域GET、POST请求的小结

重点：跨域POST大量数据；

JQuery：$.ajax/$.getJSON支持jsonp格式的跨域，但是只支持GET方式，暂不支持POST；

CORS：w3c关于跨域的新方案，res.setHeader(\’Access-Control-Allow-Origin\’,\’*\’)，兼容IE9+；

so，跨域POST是个值得研究的问题啊！万能的JQuery无法跨域POST；鉴于基本国情，CORS也只是适合在移动端玩玩；

相信有同学这样做过：

实际上chrome的控制台显示却是这样的：

那么，如图是否可以证明jQuery确实无法跨域POST呢？说好的POST呢，jQuery自动将其转为GET了；这样其实就和$.getJSON差不多了，只是$.ajax的跨域直接能回调返回值，而$.getJSON的返回值需要一个全局的callback（可自定义）；

话说我的个人小站在移动端还处于最原始的缩放状态，说好的H5 Response Web呢？原谅我再一次跑偏了：原本计划或者直接在原有样式表里media query；而结果却是我新开了个站点，作为移动端的版本，读取PC端存储的数据；一方面减轻代码量，使移动端更轻量简洁，毕竟只是个博客嘛；另一方面，这样的话，移动端将有更宽广的随意挥洒的空间；再者，基于性能优化，这样也不错；当然，问题也很明显了；两个站点要共享数据，连同一个数据库，要做同步操作，呵呵，我一个小前端，这些貌似目前想太多啊！那么怎么办呢，是的，就是上面说到的问题，前端跨域请求数据；

移动端的库用的是由zepto的一些模块自定义组装的一个版本，bootstrap什么的一边凉快凉快吧，样式手写的，权当练手吧。。。在后端，由Nodejs的http-proxy做代理，判断请求的UA，如果是移动端的访问，则无论host是www.famanoder.com还是m.famanoder.com全都分发到移动端的站点处理，这样在手机问www.famanoder.com就不用做跳转了；

OK，那么要开始跨域请求和提交数据了；如果只是请求远程数据，GET方式足矣；可是如果要提交大量数据，比如，某大侠路过小站，一时兴起，引经据典，古今中外，滔滔不绝，长篇大论一通

，这样的话恐怕GET搞不定啊！先看看最简单的GET方式吧：

然后定义好全局的getmore就OK了，后端处理也简单，我这是Nodejs，其他的自行百度吧：

当然像上图里那样也是可以的，后端同样处理；

前面说了，伟大的JQuery暂时不支持POST方式的跨域；那咋办呢？其实没有想象的那么复杂，是时候证明你不能太依赖JQuery了，有时候没有她，你也要好好过；

基本原理大概是这样的：form表单提交，无论你是post，还是get，无论你提交到哪，只要后端有对应程序处理，都妥妥的，不存在跨域一说；以前无刷新上传、提交表单都是将form的target指向一个空iframe，此处同理；类似：a.com提交表单到b.com，表单的target为一个空iframe；b.com处理请求，在response里执行callback，注意，此处callback是属于那个空iframe的；

后端的处理基本一样；如果不出意料，到此，请求会在控制台出现一片红，是的，要你设置domain；除了页面和对应js要设置domain外，一定别忘啦，response里的callback其实是属于当前页面的，所以response里执行的callback也要设置domain；类似这样：

OK，没有了她，你依然要好好过；这样你就可以POST跨域提交大量数据了；同时也弥补了JQuery只能通过jsonp GET跨域了；当然CORS在移动端也是值得推荐的；小伙伴们可以试一下，或者有其他什么好办法，记得和我分享啊！

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com