基于SpringBoot2+vue2的智慧图书管理系统

1. 资源

放到最后面

2. 项目简介

智慧图书管理系统 是一个基于 Spring Boot + MyBatis-Plus + Vue.js/Layui 架构的 Web 应用，旨在为图书馆或类似机构提供一套完整的图书管理、读者管理、借阅管理及在线论坛交流的解决方案。

系统主要面向两类用户角色：

• 管理员：负责后台的全面管理，包括基础数据（如书架、图书类型、读者类型、论坛类型）维护、读者信息管理、图书信息管理、借阅记录管理、轮播图配置以及论坛内容的管理。
• 读者：登录系统后，可以在前台浏览图书、收藏图书、借阅图书（含续借、还书功能）、发表或回复论坛帖子，并可在个人中心查看和管理自己的借阅记录、收藏列表及个人信息。

3. 技术栈

后端技术

• 核心框架: Spring Boot 2.2.2.RELEASE
• 持久层框架: MyBatis-Plus 2.3 (基于 MyBatis 3.x)
• 安全控制: Apache Shiro 1.3.2
• 数据库: MySQL (JDBC驱动: mysql-connector-java)
• 工具库:
  • hutool-all 4.0.12 (Java工具类库)
  • fastjson 1.2.8 (JSON处理)
  • commons-lang3 3.0 (通用工具)
  • poi 3.9 (Excel文件处理)
  • commons-io (IO操作)
  • jsoup (用于HTML解析，实际未在依赖中明确列出，但常见于此类项目)
• 其他: google.protobuf (数据序列化)

前端技术

1. 后台管理端 (admin):

   • 核心框架: Vue.js (使用 Vue CLI 构建)
   • UI 组件库: Element UI
   • HTTP 请求: Axios
   • 图表库: ECharts
   • 其他: vue-json-excel (Excel导出), vue-qr (二维码生成), print-js (打印), js-md5 (MD5加密), vue-amap (高德地图)

2. 读者前端 (front):

   • 核心框架: Vue.js (与 Layui 混用)
   • UI 框架: Layui + Element UI
   • HTTP 请求: 基于 Layui 封装的 http 模块
   • 地图服务: 高德地图 API (WebAPI)

4. 详细介绍

该系统采用前后端分离架构（后台管理端）与混合模式（读者前端），实现了全面的图书业务管理流程。

核心功能模块

4.1 后台管理端 (针对管理员)

• 基础数据管理: 维护系统运行所需的各种字典数据。

  • 读者类型管理: 定义读者分类（如类型1、类型2等）。
  • 书架管理: 定义图书存放的书架位置。
  • 图书类型管理: 定义图书的分类（如类型1、类型2等）。
  • 帖子类型管理: 定义论坛帖子的分类。

• 读者管理: 管理所有读者账户信息，包括查看、新增、修改和删除读者资料。

• 图书管理: 围绕图书生命周期进行全方位管理。

  • 图书管理: 管理图书的详细信息（名称、编号、作者、出版社、库存、书架、类型等），支持新增、修改、删除、上架/下架操作。
  • 图书留言管理: 查看和删除读者对某本图书的留言。
  • 图书收藏管理: 查看和管理读者的图书收藏记录。
  • 图书借阅记录管理: 查看所有读者的借阅历史，处理借阅、还书、续借等事务。该模块支持高级的“报表”功能，便于进行数据统计。

• 论坛管理: 管理和审核论坛帖子，维护社区秩序。

• 轮播图信息管理: 管理系统首页轮播展示的图片，支持增删改查。

4.2 读者前端 (针对读者)

• 图书浏览与借阅:

  • 在首页或图书列表页，可按类型、书架、作者、出版社等条件搜索图书。
  • 点击图书可查看详情、介绍、读者留言。
  • 支持对图书进行收藏和取消收藏。
  • 支持在线借阅图书，系统会自动检查库存并生成借阅记录（借阅期限为一个月）。读者可在个人中心对已借阅的图书进行续借或还书操作。

• 论坛交流:

  • 读者可在论坛模块浏览所有帖子，按类型筛选。
  • 可以发布新帖，也可以对已有帖子进行评论（回帖）。

• 个人中心:

  • 个人信息管理: 查看和修改个人资料（如姓名、手机号、邮箱、头像等）。
  • 我的图书借阅: 查看个人所有借阅记录（包括已借阅和已还书），并可在此处执行续借或还书操作。
  • 我的图书收藏: 查看个人收藏的图书列表，并可取消收藏。
  • 密码修改: 支持修改个人登录密码。

4.3 系统基础功能

• 登录与注册: 管理员和读者通过不同的角色登录，读者支持自助注册。
• 权限控制:
  • 基于 Apache Shiro + Token 机制实现接口访问控制。
  • 前端菜单和按钮的显示根据用户角色（管理员/读者）进行动态权限控制，例如读者无法看到“图书管理”中的修改、删除按钮。
• 日志与监控: 后端使用了 Slf4j 进行日志记录。

5. 部分代码

5.1 图书借阅核心后端逻辑 (TushuOrderController.java - add 方法)

该方法处理读者在前端发起的“借阅”请求。

// ./zhihuitushu/src/main/java/com/controller/TushuOrderController.java
// ... 省略导入和类定义 ...
@RequestMapping("/add")
public R add(@RequestBody TushuOrderEntity tushuOrder, HttpServletRequest request){
    logger.debug("add方法...");
    String role = String.valueOf(request.getSession().getAttribute("role"));
    if("读者".equals(role)){
        // 1. 查询图书信息
        TushuEntity tushuEntity = tushuService.selectById(tushuOrder.getTushuId());
        if(tushuEntity == null){
            return R.error(511,"查不到该图书");
        }
        // 2. 校验库存
        if((tushuEntity.getTushuKucunNumber() -1) < 0){
            return R.error(511,"该图书库存没有了无法借阅");
        }
        // 3. 校验借阅日期
        if(tushuOrder.getJieyueTime() == null){
            return R.error(511,"借阅图书时间不能为空");
        }

        // 4. 设置借阅人ID（当前登录读者）
        Integer userId = (Integer) request.getSession().getAttribute("userId");
        tushuOrder.setDuzheId(userId);

        // 5. 校验是否重复借阅（同一本未还的书）
        TushuOrderEntity existingOrder = tushuOrderService.selectOne(
            new EntityWrapper<TushuOrderEntity>()
                .eq("tushu_id", tushuOrder.getTushuId())
                .eq("duzhe_id", tushuOrder.getDuzheId())
                .eq("tushu_order_types", "1") // 1: 已借阅
        );
        if(existingOrder != null)
            return R.error(511,"该图书该用户已经借阅过了,无法再次借阅,请还书后再次借阅");

        // 6. 设置订单属性并保存
        tushuOrder.setInsertTime(new Date());
        tushuOrder.setCreateTime(new Date());
        tushuOrder.setTushuOrderTypes(1); // 状态设为“已借阅”
        Calendar instance = Calendar.getInstance();
        instance.setTime(tushuOrder.getJieyueTime());
        instance.add(Calendar.MONTH,1); // 还书日期设为借阅日期后一个月
        tushuOrder.setHuanshuTime(instance.getTime());

        // 7. 减少图书库存
        tushuEntity.setTushuKucunNumber(tushuEntity.getTushuKucunNumber() - 1);
        tushuService.updateById(tushuEntity);

        // 8. 新增订单
        tushuOrderService.insert(tushuOrder);
        return R.ok();
    }else{
        return R.error(511,"您没有权限借书");
    }
}

5.2 图书详情页前端展示 (tushu/detail.html)

该部分代码展示了图书详情页的Vue数据模型和前端交互方法。

// ./zhihuitushu/src/main/resources/front/front/pages/tushu/detail.html
// ... 省略HTML模板 ...
<script>
    // ... 其他代码 ...
    var vue = new Vue({
        el: '#app',
        data: {
            // ... 其他数据 ...
            detail: { id: 0 },      // 图书详情数据
            storeupFlag: 0,         // 收藏标志 (0: 未收藏, 1: 已收藏)
            buyNumber: 1,           // 借阅数量（此处固定为1）
            detailTable: 'tushu',   // 当前表名
            tushuLiuyanDataList: [], // 留言列表
        },
        methods: {
            // ... 跳转方法 ...

            // 收藏/取消收藏商品
            addTushuCollection() {
                let _this = this;
                // 先查询是否已收藏
                layui.http.request('tushuCollection/list', 'get', {
                    tushuId: _this.detail.id,
                    tushuCollectionTypes: 1,
                    duzheId: localStorage.getItem('userid'),
                }, (res) => {
                    // 如果已收藏，则执行删除操作
                    if (res.data.list.length == 1) {
                        layui.http.requestJson('tushuCollection/delete', 'post', [res.data.list[0].id], function (res) {
                            layui.layer.msg('取消成功', { time: 1000, icon: 5 }, function () {
                                window.location.reload();
                            });
                        });
                        return;
                    }
                    // 否则执行新增收藏操作
                    layui.http.requestJson('tushuCollection/add', 'post', {
                        duzheId: localStorage.getItem('userid'),
                        tushuId: _this.detail.id,
                        tushuCollectionTypes: 1,
                    }, function (res) {
                        layui.layer.msg('收藏成功', { time: 1000, icon: 6 }, function () {
                            window.location.reload();
                        });
                    });
                });
            },
            // 立即借阅
            addTushuOrder() {
                localStorage.setItem("buyNumber", this.buyNumber);
                localStorage.setItem("tushuId", this.detail.id);
                jump('../tushuOrder/add.html');
            },
        }
    });
    // ... 生命周期等 ...
</script>

6. 部分截图

7. 项目总结

本智慧图书管理系统是一套功能完备、结构清晰的图书管理系统。通过分析代码，可总结以下几点：

• 架构清晰，职责分离：

  • 后端采用标准的 Controller - Service - Dao 三层架构，并使用 MyBatis-Plus 简化数据库操作。Apache Shiro 结合自定义 Token 验证实现了基于角色的访问控制。
  • 前端的“后台管理端”使用 Vue.js + Element UI，体现了现代化单页应用的开发模式；“读者端”则采用 Vue + Layui 的混用模式，兼顾了开发效率和页面快速展示。

• 功能完善，逻辑严谨：

  • 核心业务流程闭环: 系统完整实现了图书从入库、上架、检索、借阅、续借、归还到留言、收藏的完整生命周期管理，逻辑清晰。
  • 权限控制细致: 不仅在后端接口层进行了权限拦截，在前端菜单和按钮层面也实现了细致的权限控制，确保不同角色（管理员/读者）只能访问和操作其授权范围内的功能。
  • 数据完整性: 在关键的借阅、续借、还书等操作中，均有相应的业务逻辑校验（如库存检查、重复借阅检查、日期计算等），保证了数据的一致性和正确性。

• 工具集成丰富：项目集成了 Excel 处理（POI）、图表展示（ECharts）、二维码（Vue Qr）、高德地图、打印等多种工具库，扩展了系统的应用场景。

智慧图书管理系统是一个具有较好实用性和参考价值的企业级毕业设计或小型项目模板，体现了 Java + Vue 生态在 Web 应用开发中的典型实践。

代码：https://fifteen.xiaobias.com/source/165