图书借阅管理系统(前后台)

1 需求分析

图书借阅管理系统是模拟学校图书馆实现的一个具有前后台的 Web 系统.对于读者,能够提供全文检索,个性化推荐,借阅等功能.对于管理员,能够提供可视化数据分析,信息管理等功能.

2 技术栈

前端: Layui,jQuery,echarts

后端:Spring Boot,MyBatis,elasticsearch,thymeleaf(一个模板引擎,代替 jsp)

开发工具:IDEA,HBuilder,postman,Navicat for MySQL

项目管理工具:Maven

3 总体设计

3.1 系统功能概述

3.1.1 前台系统

(1) 读者登录,注册,修改密码

(2) 基本资料查看,修改

(3) 图书查询(复杂查询),仿京东商城以图片卡片形式分页展示,可点击每本书的评价数进行评价,点击卡片查看详细图书信息以及借阅

(4) 个性化推荐图书:根据读者的兴趣爱好,每本书对应读者的浏览量,每本书的借阅量,每本书的评论数进行多重排序,展示在读者面前

(5) 历史记录浏览,查询

(6) 基于 Elasticsearch 搜索引擎的全文检索

3.1.2 后台系统

(1) 管理员登录,修改密码

(2) 读者管理:查看,添加,编辑,删除

(3) 管理员管理:查看,添加,删除

(4) 角色管理

(5) 统计分析:

A.分别以树状图,饼图展示图书分类占比

B.以折线图加饼图展示每年的图书类型借阅情况

C.查询每年的热门图书排名以及借阅次数

(6) 历史记录管理

(7) 图书管理:查看,添加,删除

3.2 E-R 模型

3.3 系统流程图

4 详细设计

4.1 前台系统

分页查询:当图书数量达到一定程度,分页显示就显得很重要了.通过使用 pagination.js 和 AJAX 向后端发起请求返回数据,每次点击页码执行回调函数.

多重检索:可通过 ID,书名,作者,出版社,分类,出版时间范围进行搜索,然后表单提交到后端接口,后端执行动态 MySQL 查询语句,然后返回数据,最后分页展示出来.

个性化推荐:在基本资料里可设置自己的兴趣爱好,此后推荐的图书符合自己设置的兴趣爱好.同时基于点击量,评论数,借阅量,出版时间进行多级排序,这点可通过 MySQL 的左连接实现,再通过 AJAX 请求后端接口返回数据.

全文检索:使用 Elasticsearch 搜索引擎,模仿 Google 浏览器实现对图书进行全文检索,并高亮显示出来.

其他: 基本资料修改,输入头像地址,头像可相应地改变,可修改密码.

核心代码:

function do_add() {
    $.ajax({
        type: "post",
        url: "/book/add",
        data: {
            "_bookId": $("#new_bookId").val(),
            "_bookName": $("#new_bookName").val(),
            "_author": $("#new_author").val(),
            "_press": $("#new_press").val(),
            "_bookDate": $("#new_bookDate").val(),
            "_bookType": $("#new_bookType").val(),
            "_bookDesc": $("#new_bookDesc").val(),
            "_bookImage": $("#new_bookImage").val()
        },
        success: function (data) {
            if (data = "OK") {
                alert("新书入库成功");
                window.location.reload();
            } else {
                alert("新书入库失败");
                window.location.reload();
            }
        }
    });
}

// 个性化推荐 MySQL语句
SELECT book.*,cnt FROM book
LEFT JOIN recommend ON recommend.bookId=book.bookId AND recommend.userId=#{userId}
LEFT JOIN (SELECT `comment`.bookId,COUNT(*) AS cnt FROM `comment` GROUP BY `comment`.bookId) as t ON t.bookId=book.bookId
LEFT JOIN (SELECT record.bookId,COUNT(*) AS num FROM record GROUP BY record.bookId) as tt ON tt.bookId=book.bookId
LEFT JOIN (SELECT recommend.bookId,SUM(clickNum) as s FROM recommend GROUP BY recommend.bookId) as ttt ON ttt.bookId=book.bookId
WHERE bookType in (SELECT myInterest FROM interest WHERE userId=#{userId})
ORDER BY clickNum DESC,cnt DESC,num DESC,s DESC

图 1 全文检索界面

图 2 图书复杂查询界面

图 3 基本资料修改界面

图 4 分页查询展示界面

4.2 后台系统

用户管理: 管理员分为管理员,超级管理员,运营人员等多种角色,那么就牵涉到权限问题,只有超级管理员才能添加和删除管理员,以及删除读者.用户管理模块实现了基本的增删改查功能以及分页展示.

历史记录: 对于网站用户的每次操作就展示在历史记录模块当中,可搜索某一年的记录,并分页展示.

图书管理: 基于 AJAX 实现的增删改查功能,并对查询功能进行了优化,可进行复杂的搜索功能.

图书分析: 按年份对每本书的借阅次数进行排序,可选择年份进行分页展示.对库存中图书类型以柱状图和饼图的形式展示出来,并显示出占比,这样管理员即可一目了然地了解图书的分类占比.

仪表盘(后台主页): 以卡片形式展示出访问量,用户量,库存量,活跃用户这四个指标.这样管理员登录后即可知悉系统现状.当然这部分由于时间关系来不及实现,后期再补上.此外,利用百度的 echarts 对每一年的每种图书类型借阅情况以折线图和饼图的形式清晰地展现出来,管理员通过观察折线图的趋势走向进行数据分析.

其他: 基本资料修改,输入头像地址,头像即可相应地及时改变.可修改密码.

核心代码:

// 分页查询 图书管理 后端代码
@ResponseBody
@GetMapping("/all")
public Object findAllBook(
    @RequestParam(name = "page", required = false, defaultValue = "1") int pageNum,
    @RequestParam(name = "limit", required = false, defaultValue = "10") int pageSize,
    Integer bookId, String bookName, String author, String press, String bookType, String date1, String date2) {
    if (!bookName.equals("#")) bookName = "%" + bookName + "%";
    System.out.println(bookId + " " + bookName + " " + author + " " + press + " " + bookType + " " + date1 + " " + date2);
    return bookService.findAllBook(pageNum, pageSize, bookId, bookName, author, press, bookType, date1, date2);
}

// 分页查询 图书管理 mybatis+pagehelper+动态查询
SELECT book.* FROM book
        <where>
            <if test="bookId!=0">
                book.bookId=#{bookId}
            </if>
            <if test="bookName!='#'.toString()">
                and bookName like #{bookName}
            </if>
            <if test="author!='#'.toString()">
                and author=#{author}
            </if>
            <if test="press!='#'.toString()">
                and press=#{press}
            </if>
            <if test="bookType!='#'.toString()">
                and bookType=#{bookType}
            </if>
            <if test="date1!='#'.toString()">
                and bookDate &gt;= #{date1}
            </if>
            <if test="date2!='#'.toString()">
                and bookDate &lt;= #{date2}
            </if>
        </where>

图 5 Dashboard 界面

图 6 图书分析界面

图 7 图书管理界面

5 总结

首先,非常感谢学院给予我们课设两周的时间,这两周和同专业的同学在机房完成任务,氛围非常好,时间也很充裕,这两周个人独立开发,coding 期间遇到问题自行 google,参考官网文档,仔细阅读官网给的 demo,在经过这两周的课设确确实实感到非常充实,也觉得在实践 coding 方面提到了很大的提升.平时上课老师讲授的是 jsp,但 Spring 官网推荐使用的模板引擎是 thymeleaf,由此我在课设前的周末花时间去了解并掌握基本语法,才发现 thymeleaf 确实比 JSP 好用,无需写 JSP 文件,而且在无网络的环境下也可运行.

由于平时接触前端的时间很少,于是想着做一个后台管理系统就不用花大部分时间去折腾前端布局而把重心放在后端.可是过了一个星期后,后台做完了还有很多时间就想着一个系统只有后台是不完整的,于是去折腾弄个前台.得益于 Layui 前端框架,前台布局很快就做好了.模仿京东商城,在每本书的展示卡片上显示了评价数,点击可进行评价.由于我希望这次的 Web 课设与上学期的数据库课设不一样,想添加些许新颖的想法,例如个性化推荐和数据可视化以及全文搜索.前台的个性化推荐基于兴趣,点击量,评论数,借阅量,出版时间进行多级排序,写 MySQL 查询语句较为复杂.后台的数据可视化是基于百度的 echarts,通过仔细阅读官网 demo 案例实现.前台的全文搜索是基于 Elasticsearch 搜索引擎,这是开源的分布式搜索引擎,并对匹配到的内容进行高亮展示,目前已实现.

这次的课设收获蛮大的.前端方面学会 ajax,jQuery,Layui,pagination,echarts,以及通过 Google 控制台 debug 前端布局.后端学会使用 Spring boot,mybatis,thymeleaf,elasticsearch,以及写复杂的 MySQL 语句并且掌握利用 postman 测试后端接口.