本系统分为两个模块,普通读者模块和图书管理员模块。在登录时选择不一样的登陆界面进行身份验证。html
普通读者模块:实现读者的借书、还书、查询书籍、我的信息等功能。ajax
图 1 用户登陆部分代码数据库
管理员模块:实现图书管理员的书籍管理、用户管理、借阅管理。json
图 2 管理员登录部分代码浏览器
图 3 用户借书部分代码服务器
图 4 用户还书部分代码网络
布尔类型返回至json,json数据传至html页面 session
图 5 管理员录入新书部分代码app
图 6 类别查询书籍结果部分代码函数
图 7 查询全部书籍种类部分代码
表现层的实现主要是表格和模态框,经过Thymeleaf模板引擎接收数据和部分js接收来自后台的数据。
①登陆界面:
图 8 用户登陆界面
图 9 管理员登录界面
登陆采用json提交用户名和密码,在后台实现登录用户的查询,若是返回的用户存在(/isUserExist /isAdminExist)则跳入index页面。
图 10 JQuery校验管理员用户名和密码
图 11 JQurey校验普通用户用户名和密码
将身份信息部分存入session中,登录成功:
图 12 登陆状态展现代码
图 13 登陆状态展现
②登陆后的index页面
普通读者端:
图 14 普通读者端登陆界面
侧边导航栏的代码是相同的,经过li标签和js实现开合效果
图 15 左侧导航栏代码
图 16 垂直导航栏子功能代码
③一些功能页面
管理:
图 17 添加书籍界面
图 18 新建类别界面
图 19 查询用户界面
图 20 新增用户界面
图 21 借书记录界面
图 22 用户借书界面
图 23 用户还书界面
图 24 查询书籍界面
图 25 我的信息界面
图 25 修改信息界面
刚开始使用拦截器没有注意静态资源的问题,致使首页jQuery等静态资源尝试从localhost加载产生异常,如图。
图 26 未加载静态资源
图 27 浏览器开发者工具网络加载状态
通过排查发现,拦截器要放开不须要登陆的其余全部能够访问的路径,包括静态资源的路径,通过几番尝试,摸索出来了合适的结果
图 28 资源路径
图 29 过滤器部分代码
图 30 错误代码500/502
JDBC和Mapping配置有误
图 31 静态资源路径src路径
静态资源路径src路径指向有误
以借书还书功能为例:
①用户输入书籍ID后,点击submit提交表单
图 32 用户借书界面
图 33 界面实现代码
②Jquery开始处理submit,调用borrowingBook函数
图 34 借书部分Jquery代码
③borrowingBook实现,ajax发起请求,成功获得json返回的数据,弹窗借书的状态,失败则弹窗失败
图 35 borrowingBook实现代码
④UserController负责接收处理ajax的请求。
图 36 接受处理请求代码
⑤调用service接口中借书处理的API.
图 37 调用service API处理借书代码
⑥借书操做API的具体实现。
首先,从session得到当前用户名。
而后,检查该书是否可借,从借书记录表中查询该书是否已借出,若已借出则返回false。
最后,增长一条借书记录。
完成借书操做,返回true。
图 38 借书操做API实现代码
⑦还书操做API的实现。
首先,从session得到当前用户名。
而后,删除数据库中user_d等于userId,book_id等于bookId的记录。
完成还书操做,返回true。
图 39 还书操做API的实现代码