前后端分离-图书馆管理系统 React+Django+MySQL
项目概况
这个系统以实体图书馆的日常运营为核心场景，解决图书编目、借还书操作、读者管理、逾期追缴、预约服务等完整业务流程，同时通过数据统计分析辅助馆藏优化决策。
- 技术架构：前后端分离（Next.js 14 + Django REST Framework）
- 数据库：MySQL 8.0
网盘资源链接如下，后续随缘更新,
百度网盘链接:pan.baidu.com/s/1UnjtdteN… 提取码:scx2
我用夸克网盘给你分享了「Librarian图书馆管理系统 Django+React」，点击链接或复制整段内容，打开「夸克APP」即可获取。
/
1b933LFTTQ:/
技术选型与理由
前端
| 技术 | 选型理由 |
|---|---|
| Next.js 14 + App Router | 服务端渲染 + 文件路由，SEO 友好，开发体验佳 |
| TypeScript | 类型安全，减少运行时错误 |
| Zustand | 轻量状态管理，相比 Redux 减少大量模板代码 |
| @tanstack/react-query | 服务端状态缓存与同步，自动处理加载/错误状态 |
| Tailwind CSS | 实用优先，配合自定义色板快速构建一致 UI |
| Recharts | 基于 React 的图表库，灵活且文档完善 |
| Framer Motion | 页面过渡与微交互动画 |
后端
| 技术 | 选型理由 |
|---|---|
| Django 5 + DRF | 成熟稳重的 Python Web 框架，ORM 强大，生态完善 |
| djangorestframework-simplejwt | JWT 认证，前后端分离的标准方案 |
| django-filter | 声明式查询过滤，减少重复代码 |
| MySQL 8.0 | 关系型数据库，事务支持好，适合图书馆场景 |
系统架构
整体结构
Library Management System/
├── library-backend/ # Django 后端
│ ├── library/ # 主应用
│ │ ├── authentication/ # 认证模块
│ │ ├── books/ # 图书模块
│ │ ├── loans/ # 借阅模块
│ │ ├── members/ # 会员模块
│ │ ├── fines/ # 罚款模块
│ │ ├── reservations/ # 预约模块
│ │ ├── stats/ # 统计模块
│ │ └── activity_logs/ # 活动日志模块
│ ├── scripts/ # 辅助脚本
│ └── manage.py
│
├── library-frontend/ # Next.js 前端
│ ├── src/
│ │ ├── app/ # App Router 路由页面
│ │ ├── components/ # 组件库
│ │ ├── hooks/ # 自定义 Hooks
│ │ ├── lib/ # 工具函数 + API 封装
│ │ ├── store/ # Zustand 状态管理
│ │ ├── styles/ # 全局样式
│ │ └── types/ # TypeScript 类型
│ └── package.json
│
├── docs/ # 详细文档
└── init.sql # 数据库初始化
前端架构
前端采用 Next.js 14 App Router，目录结构按功能模块划分：
app/dashboard/books/— 图书管理页面app/dashboard/loans/— 借阅管理页面app/dashboard/members/— 会员管理页面app/dashboard/stats/— 统计分析页面
每个页面内部使用 React Query 管理数据获取，组件按领域拆分为独立的目录，UI 基础组件则集中在 components/ui/ 中。
路由守卫通过 middleware.ts 实现，未认证用户自动跳转登录页。
后端架构
后端严格遵循 Django 模块化设计，每个业务领域为一个独立的 Django App：
library/
├── authentication/ # 用户注册/登录/角色管理
├── books/ # 图书 CRUD + 分类管理
├── loans/ # 借书/还书/续借/逾期处理
├── members/ # 读者管理 + 借书证系统
├── fines/ # 罚款计算与缴纳
├── reservations/ # 预约 + 过期自动处理
├── stats/ # 各类统计视图
└── activity_logs/ # 操作审计日志
每个模块包含 models.py（数据模型）、serializers.py（序列化）、views.py（视图逻辑）、urls.py（路由注册），职责清晰。
数据模型设计
系统共有 9 个核心数据模型，以下是核心实体关系：
User (Django用户) ── 1:1 ── Profile (扩展信息)
│
└── Member (会员/读者) ── 1:N ── Loan (借阅记录)
│ │
│ └── Fine (罚款记录)
│
├── Book (图书) ── N:1 ── Category (分类)
│
└── Reservation (预约)
图书模型关键字段
class Book(models.Model):
title = models.CharField(max_length=200) # 书名
author = models.CharField(max_length=100) # 作者
isbn = models.CharField(max_length=13, unique=True) # ISBN
category = models.ForeignKey(Category) # 分类
total_copies = models.IntegerField(default=1) # 总馆藏
available_copies = models.IntegerField(default=1) # 可借数量
status = models.CharField(...) # 在馆/借出/维护/丢失
借阅模型关键逻辑
class Loan(models.Model):
book = models.ForeignKey(Book)
member = models.ForeignKey(Member)
borrowed_date = models.DateField(auto_now_add=True)
due_date = models.DateField() # 到期日
returned_date = models.DateField(null=True) # 实际归还日
renewal_count = models.IntegerField(default=0) # 续借次数（上限2次）
借书时自动扣减 available_copies，还书时加回；逾期自动计算罚款。
核心功能实现
1. 认证与权限体系
系统内置三种角色：
- ADMIN（管理员）— 全部权限
- LIBRARIAN（图书管理员）— 图书/借阅/会员管理
- MEMBER（会员）— 浏览图书、个人借阅与预约
前端通过 Zustand 管理认证状态，结合 cookie 持久化。API 请求通过 Axios 拦截器自动附加 JWT Token。
2. 借阅流程
借书: 会员选择图书 → 检查可借数量 → 创建借阅记录 → 扣减库存
还书: 扫描图书 → 更新归还日期 → 增加库存 → 检查逾期并计算罚款
续借: 检查续借次数(≤2) → 检查有无预约 → 延长到期日
3. 预约管理
当图书被全部借出时，会员可以发起预约。系统提供两个管理命令：
process_expired_reservations— 自动处理过期预约send_reservation_reminders— 发送预约到馆提醒
可通过 crontab 定时执行。
4. 统计与分析
使用 Recharts 实现可视化，支持：
- 月度借阅趋势（折线图）
- 热门图书排行（柱状图）
- 分类分布（环形图）
- 系统概览（核心指标卡片）
UI/UX 设计
项目的视觉设计遵循精心定义的规范：
暖色调色板
--bg-paper: #F7F5F0; /* 纸色背景 */
--brand-green: #3A5A40; /* 墨绿主色 */
--brand-clay: #BC4749; /* 陶土红强调 */
--brand-sand: #D4C5A9; /* 沙色点缀 */
设计原则：
- 没有纯平色背景 — 全局覆盖 SVG 噪点纹理，增强纸张质感
- 禁蓝紫色系 — 统一使用暖色调，营造图书馆的温馨氛围
- 字体搭配 — 英文使用 Manrope / Cinzel，中文使用 Noto Serif SC
- 圆角系统 — sm(4px), md(8px), lg(12px), xl(16px)
页面过渡
使用 Framer Motion 实现路由切换时的淡入淡出动画，提升浏览连贯性。
部署与运维
系统提供完整的部署方案：
- 后端：Gunicorn + Nginx + Supervisor 生产部署
- 前端：Next.js 构建产出部署至 Vercel / Nginx
- 数据库：MySQL 主从备份方案
- 日志：结构化日志 + 按日轮转
- 监控：故障排查清单覆盖常见问题
经验与反思
做得好的地方
- 模块拆分清晰 — 后端每个业务独立 App，前端按领域划分组件，维护成本低
- 文档先行 — 项目初期就建立了完整的 docs/ 目录，API 文档、数据库设计、部署指南一应俱全
- 设计一致性 — 从颜色到字体到间距，建立了完整的设计体系，避免碎片化风格
- 状态管理轻量化 — Zustand + React Query 的组合相比 Redux 大幅减少了样板代码
可以改进的地方
- 测试覆盖不足 — 目前缺少端到端测试，核心流程（借书→还书→罚款）应有 E2E 覆盖
- 搜索能力可增强 — 目前图书搜索基于数据库 LIKE 查询，引入 Elasticsearch 会显著提升体验
- 国际化 — 系统目前仅支持中文，后续可加入 i18n
- 消息通知 — 预约到馆提醒目前依赖定时命令，WebSocket 实时推送会更及时
快速体验
# 1. 后端
cd library-backend
pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple/
# 配置 .env 数据库连接
python manage.py migrate
python manage.py runserver
# 2. 前端
cd library-frontend
pnpm install
# 配置 .env.local
pnpm dev
# 访问 http://localhost:3000
结语
构建一个完整的图书馆管理系统是一次非常有价值的全栈实践。从数据库建模到 API 设计，从组件架构到视觉体系，每个环节都需要仔细权衡。
这个项目目前仍在持续迭代中，如果你有任何建议或想法，欢迎交流探讨。
项目文档目录：docs/ 包含 11 份详细文档，覆盖 API、数据库、部署、测试等全部环节。
期待后续优化，可以转存网盘链接，关注资源更新
