# library-management-system

**Repository Path**: sunjulee/library-management-system

## Basic Information

- **Project Name**: library-management-system
- **Description**:  Spring Boot + Vue 3 图书管理系统
🎨 现代化UI：基于 Element Plus 的美观界面设计
🔐 安全认证：JWT + Spring Security 无状态认证
👥 多角色支持：读者、图书管理员、系统管理员三种角色
📊 数据可视化：ECharts 实现借阅统计图表
📱 响应式设计：适配不同屏幕尺寸
🔄 前后端分离：RESTful API 设计，易于扩展和维护
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-03-24
- **Last Updated**: 2026-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📚 图书管理系统

[![Spring Boot](https://img.shields.io/badge/Spring%20Boot-2.6.13-green.svg)](https://spring.io/projects/spring-boot)
[![Vue.js](https://img.shields.io/badge/Vue.js-3.3.4-brightgreen.svg)](https://vuejs.org/)
[![Element Plus](https://img.shields.io/badge/Element%20Plus-2.3.14-blue.svg)](https://element-plus.org/)
[![MySQL](https://img.shields.io/badge/MySQL-5.7-orange.svg)](https://www.mysql.com/)
[![License](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)

> 一个基于 Spring Boot + Vue 3 的现代化图书管理系统，采用前后端分离架构，支持多角色权限管理。

## ✨ 项目特色

- 🎨 **现代化UI**：基于 Element Plus 的美观界面设计
- 🔐 **安全认证**：JWT + Spring Security 实现无状态认证
- 👥 **多角色支持**：读者、图书管理员、系统管理员三种角色
- 📊 **数据可视化**：ECharts 实现借阅统计图表
- 📱 **响应式设计**：适配不同屏幕尺寸
- 🔄 **前后端分离**：RESTful API 设计，易于扩展和维护

## 🛠️ 技术栈

### 后端技术
| 技术 | 版本 | 说明 |
|------|------|------|
| JDK | 1.8 | Java开发环境 |
| Spring Boot | 2.6.13 | 应用框架 |
| Spring Security | 5.6 | 安全框架 |
| JWT | 0.11.5 | 身份认证 |
| MyBatis Plus | 3.5.2 | ORM框架 |
| MySQL | 5.7 | 数据库 |
| EasyExcel | 3.1.1 | Excel处理 |
| Maven | 3.6+ | 构建工具 |

### 前端技术
| 技术 | 版本 | 说明 |
|------|------|------|
| Vue.js | 3.3.4 | 前端框架 |
| Vue Router | 4.2.4 | 路由管理 |
| Vuex | 4.1.0 | 状态管理 |
| Element Plus | 2.3.14 | UI组件库 |
| ECharts | 5.4.3 | 图表库 |
| Axios | 1.5.0 | HTTP客户端 |
| Sass | 1.97.3 | CSS预处理器 |

## 📸 系统截图

### 登录页面
系统支持三种角色登录：读者、图书管理员、系统管理员
<img src="./readme-images/image-20260307151541299.png" width="1080" />

### 读者端
- 公告查看<img src="./readme-images/image-20260307151057248.png" width="1080" />
- 图书查看<img src="./readme-images/image-20260307151123300.png" width="1080" />
- 借阅记录<img src="./readme-images/image-20260307151133897.png" width="1080" />
- 违章记录<img src="./readme-images/image-20260307151153399.png" width="1080" />
- 我的留言<img src="./readme-images/image-20260307151235509.png" width="1080" />
- 借阅规则<img src="./readme-images/image-20260307151240380.png" width="1080" />
- 借阅证申请<img src="./readme-images/image-20260307151245917.png" width="1080" />
- 个人信息<img src="./readme-images/image-20260307151251422.png" width="1080" />

### 图书管理员端
- 借书<img src="./readme-images/image-20260307151332939.png" width="1080" />
- 还书<img src="./readme-images/image-20260307151337566.png" width="1080" />
- 借阅记录管理<img src="./readme-images/image-20260307151346380.png" width="1080" />
- 公告发布<img src="./readme-images/image-20260307151350368.png" width="1080" />
- 读者留言回复<img src="./readme-images/image-20260307151401927.png" width="1080" />
- 借阅证申请审批<img src="./readme-images/image-20260307151422908.png" width="1080" />
- 违章处理<img src="./readme-images/image-20260307151429359.png" width="1080" />
- 个人信息<img src="./readme-images/image-20260307151434043.png" width="1080" />

### 系统管理员端
- 图书信息管理<img src="./readme-images/image-20260307150901821.png" width="1080" />
- 分类管理<img src="./readme-images/image-20260307150917636.png" width="1080" />
- 借阅证管理<img src="./readme-images/image-20260307150932701.png" width="1080" />
- 借阅规则管理<img src="./readme-images/image-20260307150958356.png" width="1080" />
- 借阅查询<img src="./readme-images/image-20260307151010177.png" width="1080" />
- 图书管理员<img src="./readme-images/image-20260307151020040.png" width="1080" />
- 借阅统计<img src="./readme-images/image-20260307151030983.png" width="1080" />

## 🚀 快速开始

### 环境要求
- JDK 1.8+
- MySQL 5.7+
- Node.js 16+
- Maven 3.6+

### 1️⃣ 数据库配置

```bash
# 1. 安装 MySQL 5.7
# 2. 创建数据库
create database library_db character set utf8mb4 collate utf8mb4_unicode_ci;

# 3. 执行初始化脚本
# 使用 MySQL 客户端或图形化工具执行：
# library-backend/library_db.sql
```

### 2️⃣ 后端启动

```bash
# 进入后端目录
cd library-backend

# 编译项目
mvn clean install

# 启动服务
mvn spring-boot:run
```

后端服务将运行在 http://localhost:8081

### 3️⃣ 前端启动

```bash
# 进入前端目录
cd library-frontend

# 安装依赖
npm install

# 启动开发服务器
npm run serve
```

前端服务将运行在 http://localhost:8080

### 4️⃣ 访问系统

打开浏览器访问：http://localhost:8080

## 👤 默认账号

| 角色 | 用户名 | 密码 | 说明 |
|------|--------|------|------|
| 读者 | reader01~reader15 | 123456 | 可注册新账号 |
| 图书管理员 | librarian1、librarian2 | 123456 | 处理借阅业务 |
| 系统管理员 | admin | 123456 | 系统管理权限 |

## 📁 项目结构

```
library-management-system/
├── 📂 library-backend/                 # 后端项目
│   ├── 📂 src/main/java/com/library/
│   │   ├── 📂 common/                  # 通用类（结果封装、分页）
│   │   ├── 📂 config/                  # 配置类
│   │   ├── 📂 controller/              # 控制器层（REST API）
│   │   ├── 📂 service/                 # 业务逻辑层
│   │   ├── 📂 mapper/                  # 数据访问层（MyBatis）
│   │   ├── 📂 entity/                  # 实体类
│   │   ├── 📂 dto/                     # 数据传输对象
│   │   ├── 📂 security/                # 安全相关（JWT、权限）
│   │   └── 📄 LibraryApplication.java  # 启动类
│   ├── 📂 src/main/resources/
│   │   ├── 📂 db/
│   │   │   └── 📄 schema.sql           # 数据库初始化脚本
│   │   └── 📄 application.yml          # 应用配置文件
│   └── 📄 pom.xml                      # Maven配置
│
├── 📂 library-frontend/                # 前端项目
│   ├── 📂 src/
│   │   ├── 📂 views/                   # 页面组件
│   │   │   ├── 📂 user/                # 读者端页面
│   │   │   ├── 📂 librarian/           # 图书管理员端页面
│   │   │   └── 📂 admin/               # 系统管理员端页面
│   │   ├── 📂 router/                  # 路由配置
│   │   ├── 📂 store/                   # Vuex状态管理
│   │   ├── 📂 utils/                   # 工具类
│   │   ├── 📂 components/              # 公共组件
│   │   ├── 📂 styles/                  # 样式文件
│   │   ├── 📄 App.vue                  # 根组件
│   │   └── 📄 main.js                  # 入口文件
│   ├── 📄 package.json                 # npm配置
│   └── 📄 vue.config.js                # Vue配置
│
└── 📄 README.md                        # 项目说明
```

## 📚 功能模块详解

### 读者模块
- 📢 **公告查看**：浏览图书馆最新公告
- 🔍 **图书查询**：支持按书名、作者、分类模糊搜索
- 📖 **借阅记录**：查看个人历史借阅和当前借阅状态
- ⚠️ **违章查询**：查看逾期、损坏等违章记录
- 💬 **留言反馈**：向图书馆提交意见或建议
- 📋 **规借阅则**：了解借阅规则和注意事项
- 📖  **申请借阅证**：先图书管理员申请借阅证
- 👤 **个人信息**：管理个人资料和密码

### 图书管理员模块
- 📤 **借书处理**：验证读者身份，办理借书手续
- 📥 **还书处理**：办理还书，自动计算逾期费用
- 📋 **借阅记录**：查询所有读者的借阅记录
- 📢 **公告管理**：发布、编辑、删除图书馆公告
- 💬 **留言管理**：查看和回复读者留言
- 📖 **借阅证审批**：借阅证审批管理
- ⚠️ **违章处理**：记录和处理读者违章行为
- 👤 **个人信息**：管理个人资料和密码

### 系统管理员模块
- 📚 **图书管理**：图书信息的增删改查
- 🏷️ **分类管理**：图书分类的增删改查
- 🎫 **借阅证管理**：管理读者借阅证，设置借阅规则
- 📋 **借阅规则**：配置不同读者类型的借阅规则
- 📋 **借阅查询**：查询书籍借出信息
- 👤 **图书管理员**：管理图书管理员
- 📊 **借阅统计**：按时间维度统计借阅数据，可视化展示



## ⚙️ 配置说明

### 后端配置 (application.yml)

```yaml
server:
  port: 8081  # 服务端口

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/library_db?useUnicode=true&characterEncoding=utf-8
    username: root      # 修改为你的数据库用户名
    password: 123456    # 修改为你的数据库密码
    driver-class-name: com.mysql.cj.jdbc.Driver

jwt:
  secret: your-secret-key  # JWT密钥
  expiration: 86400000     # Token过期时间（毫秒）
```

### 前端配置 (vue.config.js)

```javascript
module.exports = {
  devServer: {
    port: 8080,  // 前端端口
    proxy: {
      '/api': {
        target: 'http://localhost:8081',  // 后端地址
        changeOrigin: true
      }
    }
  }
}
```

---

> 💡 **提示**：如果这个项目对你有帮助，请给个 ⭐ Star 支持一下！