# 9-图书管理系统 - 功能说明
# 项目概述
本项目是基于 Django 3.2 + Vue 3 的图书管理系统工程项目,目前处于基础框架搭建阶段。工程已完成前后端分离的通用后台框架、账号体系(管理员 / 普通用户双角色)、JWT 认证、文件上传与公共组件,并接入了 Java 版代码生成器(CodeGenerator,可依据数据库表批量生成 Django + Vue3 的 CRUD 代码);但图书业务模块尚未生成——project/apps 下当前只有 admin、common、pet、test、user 五个应用,其中 pet 为代码生成器生成的示例模块。数据库配置文件仍沿用模板默认库名 django_template,初始化脚本 sql/sql.sql 只包含 admin、user 两张基础表。因此本项目当前可演示的是"框架能力 + 示例模块",图书、借阅等业务功能需在后续依据业务表生成。
# 项目概览
# ✨ 创新点
# 1. 模块化独立 App 架构
- 要点:每个功能模块独立为一个 Django App(
apps/admin、apps/user、apps/pet),各自持有models.py、views.py、urls.py、XxxSerializer.py,互不耦合。 - 要点:
apps/admin通过自定义CustomAdminConfig并设置label = 'custom_admin',避免与django.contrib.admin的应用标签冲突。 - 要点:各 App 的路由在
project/urls.py中统一 include,模块增删不影响其他模块。
# 2. 自定义 JWT 认证体系
- 要点:
utils/jwt_auth.py用 PyJWT 的 HS256 算法、以 DjangoSECRET_KEY为盐签发 Token,默认有效期timeout=60*24*30分钟。 - 要点:Token 不走标准
Authorization头,而是通过自定义请求头token传递(request.META.get('HTTP_TOKEN')),前端 axios 请求拦截器统一注入。 - 要点:
middleware/TokenInterceptorMiddleware.py做全局拦截,命中精确白名单(/common/login、/common/register、/common/retrievePassword等)或前缀白名单(/uploads/、/static/、/swagger/、/django-admin/)才放行,否则校验 Token 并注入request.id、request.username、request.type。
# 3. 一键生成前后端 CRUD 代码
- 要点:
CodeGenerator基于 MyBatis-Plus Generator + Velocity 模板,读取数据库表结构后生成 Django 的models.py、Serializer、views.py、urls.py与 Vue3 管理页面。 - 要点:生成后自动注册到
settings.py的INSTALLED_APPS、project/urls.py、前端router/index.js以及AdminLayout.vue菜单,且带重复检测。 - 要点:模板支持按字段 COMMENT 识别图片、富文本、状态等类型,并自动为序列化器加上
read_only_fields = ['id', 'create_time', 'update_time']。
# 4. 统一响应格式与全局异常处理
- 要点:
apps/common/ResponseMessage.py提供success/failed/other/jump四个静态方法,统一返回{"code": ..., "msg": ..., "data": ...}。 - 要点:
utils/custom_exception.py定义CustomException及NotFoundException、PermissionDeniedException、UnauthorizedException、ValidationException、BusinessException五类业务异常。 - 要点:
utils/exception_handler.py按"自定义异常 → Django 内置异常(ObjectDoesNotExist、Http404、PermissionDenied)→ DRF 异常 → 未知异常"的顺序统一转换为标准响应体。
# 5. 通用工具与自动填充机制
- 要点:
utils/current_user.py用threading.local()实现 ThreadLocal 用户上下文,配合middleware/CurrentUserMiddleware.py在请求开始设置、请求结束清除,可在任意位置取当前登录用户。 - 要点:
apps/common/signals.py的pre_save_timestamp_handler通过pre_save信号在保存时自动补create_time、刷新update_time,各模型在models.py末尾统一pre_save.connect(...)注册。
# ✨ 项目亮点
# 一、 业务功能亮点
- 多角色账号体系:系统按
ADMIN(管理员)与USER(普通用户)两类角色划分,登录时由前端传入type,后端分别查询admin表或user表校验,并把角色写入 JWT 的type字段。 - 注册、登录与找回密码:提供注册(
PUT /common/register)、登录(POST /common/login)、找回密码(POST /common/retrievePassword,按手机号定位账号后重置)三条公开接口,均位于中间件白名单。 - 个人信息与密码自助修改:
POST /common/currentUser获取当前用户、POST /common/updateCurrentUser修改头像/邮箱/联系方式、POST /common/updatePassword校验旧密码后改密,并在后端校验user_id != request.id时拒绝越权修改。 - 后台数据管理与示例模块:管理员可管理管理员账号(
/admin/*)、普通用户账号(/user/*),并可使用代码生成器产出的示例模块——宠物分类管理(PetCategory.vue)与宠物信息(Pet.vue)。
# 二、 技术实现亮点
- 现代化前端技术栈:采用 Vue 3.4.29 + Element Plus 2.8.4 + Vite 5.3.1 + Vue Router 4.4.3 + Pinia 2.2.2 + Axios 1.7.5,并集成
@element-plus/icons-vue2.3.1、@wocwin/t-ui-plus1.4.13、ECharts 5.5.1、@wangeditor/editor5.1.14 等组件库。 - 稳定可靠的后端架构:Django 3.2(
requirements.txt为Django~=3.2,settings.py头部注释显示项目由 Django 3.2.20 的startproject生成)+ Django REST Framework 3.14.0,视图统一使用 DRF 的APIView/GenericAPIView;通过project/__init__.py中pymysql.install_as_MySQLdb()以 PyMySQL 1.1.0 连接 MySQL。 - 完善的数据库设计:
sql/sql.sql中建表 2 张(admin、user),模型层共映射 3 张业务表(admin、user、pet);表间不建物理外键,pet表的category_id、user_id仅存关联 ID,属逻辑外键设计;ID 统一bigint自增,状态类信息直接以中文字段值存储。 - 代码生成器支持:集成 Java 版
CodeGenerator(Spring Boot 2.5.6 + MyBatis-Plus Generator 3.5.2 + Velocity 2.3),配置库表清单与项目路径后即可批量产出 Django 后端与 Vue3 前端 CRUD 代码,并自动完成应用注册、路由注册与后台菜单注册。 - 安全性设计:
- 认证:PyJWT 2.7.0 签发 HS256 Token,
utils/jwt_auth.py对解码失败、过期、非法 Token 分别给出明确错误;Token 失效时中间件返回code=401提示重新登录。 - 越权防护:修改个人信息与密码时校验目标
id是否为当前登录用户;ResetPasswordAPIView重置密码要求当前用户type == "ADMIN"。 - 跨域与请求头管控:
django-cors-headers4.2.0 配置CORS_ORIGIN_ALLOW_ALL = True,并在CORS_ALLOW_HEADERS中显式加入自定义头token。 - 密码存储现状:按项目设计原则,密码以明文存于
varchar(25)字段并在登录时直接比对(if password != db_user_password),仅适用于开发与学习环境,部署前需改造。
- 认证:PyJWT 2.7.0 签发 HS256 Token,
# 三、 用户体验亮点
- 双界面设计:
FrontLayout.vue为普通用户前台(顶部横向导航 + 个人中心),AdminLayout.vue为管理员后台(左侧黑色侧边菜单 + 顶部用户下拉),两套界面按角色互斥跳转。 - 响应式布局:
FrontLayout.vue内置@media (max-width: 768px)断点,小屏下隐藏用户名与菜单文字;PersonalCenter.vue使用:xs="24" :sm="6" :md="5"栅格自适应;列表页统一使用min-width而非固定宽度,保证操作列按钮单行显示。 - 交互优化:
- 友好的加载提示和错误提示:Axios 响应拦截器按业务码 200/401/409/500 与 HTTP 状态码 401/404/500/502/503 分别给出
ElMessage提示,网络不通时提示"网络连接失败,请检查网络"。 - 重要操作的确认弹窗:删除与批量删除统一使用
ElMessageBox.confirm,取消时提示"已取消删除"并清空表格勾选。 - 及时的全局消息提示:新增、编辑、删除、注册、登录、改密等操作完成后均弹出成功或失败消息。
- 严谨的前后端表单验证:前端用
el-form的rules(如"不能为空""验证失败,请检查必填项!")做必填校验,后端用 DRF 序列化器的is_valid()再次校验并返回failed。
- 友好的加载提示和错误提示:Axios 响应拦截器按业务码 200/401/409/500 与 HTTP 状态码 401/404/500/502/503 分别给出
- 文件上传体验:封装
components/MyUpload.vue,支持imageCard、image、video、audio、file五种类型,可按类型限定accept;上传时自动携带token请求头;limit=1时超额上传自动替换原文件;支持图片/视频/音频弹窗预览与附件直接下载。
# 管理员
# 系统管理
管理员管理:管理员在后台"管理员管理"菜单(路由 /admin/admin,页面 Admin.vue)中分页查看账号列表,支持按用户名、手机号搜索,可新增、编辑、单个删除、批量删除,并可对选中行一键"重置密码"。对应后端接口为 GET /admin/page、GET /admin/list、POST /admin/add、PUT /admin/update、DELETE /admin/delete、GET /admin/detail;新增时若不传密码则后端默认写入 123456。需注意:apps/admin/views.py 中的这些接口实际读写的是 apps/user/models.py 的 User 模型(AdminPageAPIView 注释为"查询所有用户(不再使用 role_type 过滤)")。
普通用户管理:管理员在后台"用户管理"菜单(路由 /admin/user,页面 User.vue)中维护普通用户账号,功能与管理员管理一致(搜索、新增、编辑、删除、批量删除、重置密码)。对应后端接口为 GET /user/page、GET /user/list、POST /user/save(有 id 即编辑、无 id 即新增)、POST /user/delete(请求体为 ID 数组)、POST /user/register、POST /user/login。
# 示例模块
宠物分类管理:后台"宠物分类管理"菜单(路由 /admin/pet,页面 PetCategory.vue)提供分类名称、分类描述的搜索与增删改查(新增、编辑、批量删除、分页)。该页面调用 GET /pet/page、POST /pet/add、PUT /pet/update、DELETE /pet/delBatch。需注意:apps/pet/models.py 中未定义 PetCategory 模型(仅 Pet),apps/pet/PetCategorySerializer.py 引用了该不存在的模型;且后端 apps/pet/urls.py 提供的删除路由是 delete 而非 delBatch。
宠物信息:代码生成器产出的宠物信息管理页(Pet.vue)包含宠物名称、分类 ID、年龄(月)、性别、品种、毛色、健康状况、宠物照片、详细描述、来源类型、发布用户 ID、创建时间等字段的搜索、分页、新增、编辑、批量删除。后端 apps/pet/views.py 提供 PetPageAPIView(支持按名称模糊查询)、PetAddAPIView、PetUpdateAPIView(partial=True)、PetDeleteAPIView(按 ID 数组批量删除)、PetDetailAPIView、PetListAPIView。需注意:Pet.vue 当前未配置前端路由与后台菜单(router/index.js 中 /admin/pet 指向的是 PetCategory.vue)。
# 普通用户
# 账号功能
注册/登录:普通用户在登录页(Login.vue)选择"用户"类型后输入账号密码登录,登录成功后 Token 与用户信息写入 localStorage,并跳转前台首页;也可从"没有账号?去注册"进入注册页(Register.vue),填写头像、用户类型、用户名、密码、昵称后调用 PUT /common/register 完成注册,注册成功后跳回登录页。需注意:/common/register 会移除 type 字段并将账号统一写入 user 表。
找回密码:在找回密码页(RetrievePassword.vue)选择类型并填写手机号、验证码、新密码,调用 POST /common/retrievePassword;后端按 contact(手机号)定位 user 表账号并写入新密码,若手机号未注册则提示"该手机号未注册"。代码中对该流程留有注释说明——验证码校验为简化处理(TODO: 添加短信验证码验证逻辑)。
# 个人中心
个人信息:前台导航"个人中心"下的个人信息页(PersonalCenter.vue → personalCenter/Profile.vue)只读展示用户名、昵称、邮箱、联系方式;点击"编辑信息"进入 EditCurrentUser.vue,可修改头像与联系方式,提交后调用 POST /common/updateCurrentUser,再通过 GET /common/currentUser 刷新本地缓存的用户信息。后台顶部下拉菜单中的"个人信息"复用同一页面(/admin/editCurrentUser)。
修改密码:EditPassword.vue 提供"旧密码 + 新密码"表单,调用 POST /common/updatePassword;后端校验 user_id 必须为当前登录用户本人、且旧密码必须与库中一致,成功后前端清空 localStorage 并要求重新登录。
# 功能权限对照表
| 功能模块 | 管理员 | 普通用户 |
|---|---|---|
| 登录 | ✓ | ✓ |
| 注册 | ✓ | ✓ |
| 找回密码 | ✓ | ✓ |
| 后台首页(/admin/home) | ✓ | - |
| 前台首页(/index) | - | ✓ |
| 个人信息查看 / 修改 | ✓ 仅自己的 | ✓ 仅自己的 |
| 修改密码 | ✓ 仅自己的 | ✓ 仅自己的 |
| 管理员管理(/admin/admin) | ✓ | - |
| 用户管理(/admin/user) | ✓ | - |
| 宠物分类管理(/admin/pet) | ✓ | - |
| 重置他人密码 | ✓ | - |
| 文件上传(/file/upload) | ✓ | ✓ |
| 退出登录 | ✓ | ✓ |
| Swagger 接口文档(/swagger/) | ✓ 免登录 | ✓ 免登录 |
| Django 自带后台(/django-admin/) | ✓ 免登录 | ✓ 免登录 |
说明:上表中"✓"依据前端菜单与页面(
AdminLayout.vue、FrontLayout.vue、router/index.js)及后端接口的角色校验(/common/resetPassword要求type == "ADMIN")判定;"仅自己的"依据UpdateCurrentUserAPIView、UpdatePasswordAPIView中if user_id != request.id的校验判定。/django-admin/与/swagger/在中间件白名单中放行,未接入 JWT 校验。
# 默认账号
初始化数据来自 project/sql/sql.sql,其中密码为脚本中直接写入的明文值(varchar(25) 字段,未做哈希)。
# 管理员
用户名: admin
密码: 123456
2
(对应 admin 表记录:id=1,昵称"系统管理员",联系方式 13800000000,邮箱 admin@example.com)
# 测试用户
用户名: user
密码: 123456
2
(对应 user 表记录:id=1,昵称"管理员",联系方式 13800000000,邮箱 user@qqq.com)
# 核心业务流程
# 用户注册流程
1. 用户在前台登录页点击"没有账号?去注册",进入 Register.vue
2. 填写头像(MyUpload 组件上传,走 POST /file/upload)、用户类型、用户名、密码、昵称
3. 前端 el-form 做必填校验后调用 PUT /common/register
4. 后端 RegisterAPIView 先按 username 查重,重复返回"用户名重复";
否则移除 type 字段,用 UserSerializer 校验并写入 user 表
5. 前端提示"注册成功,正在跳转"并跳回 /login
2
3
4
5
6
# 登录与 Token 认证流程
1. 用户在 Login.vue 选择"管理员"或"用户"类型,提交 POST /common/login
2. 后端 LoginAPIView 校验 type 必须是 ADMIN 或 USER;
ADMIN 查 admin 表、USER 查 user 表,取库中密码与传入密码直接比对
3. 比对通过后组装 {id, username, type},由 utils/jwt_auth.create_token 签发 HS256 Token
4. 前端把 token 与用户信息写入 localStorage,
并按 type 跳转:USER → /(前台),ADMIN → /admin(后台)
5. 后续请求由 axios 请求拦截器在请求头写入 token;
TokenInterceptorMiddleware 校验 Token 并将 id/username/type 注入 request
2
3
4
5
6
7
8
# 代码生成器生成业务模块流程
1. 在数据库中按规范建表(含 COMMENT 中文备注,ID 用 bigint 自增)
2. 修改 DjangoProjectPathConfig 中的 PROJECT_ROOT 项目根目录
3. 在 CodeGeneratorMain 中配置数据库连接与待生成表清单(表名、中文名、app 名)
4. 运行 CodeGeneratorMain.main,生成 Django 的 models/Serializer/views/urls 与 Vue3 管理页面
5. 生成器自动把新 App 注册到 settings.py 的 INSTALLED_APPS、project/urls.py、
前端 router/index.js 与 AdminLayout.vue 菜单(均带重复检测)
6. 手工核对代码后执行 makemigrations / migrate,并启动前后端联调
2
3
4
5
6
7
# 技术说明
# 系统架构
- 前端:Vue 3.4.29 + Element Plus 2.8.4 + Vite 5.3.1
- 后端:Django 3.2(
Django~=3.2)+ Django REST Framework 3.14.0 - 数据库:MySQL(库名
django_template,字符集 utf8mb4) - 认证:自定义 JWT Token
# 访问地址
- 后端API:http://localhost:8000(开发环境前端
.env.development中VITE_APP_API_URL='http://127.0.0.1:8000';settings.py中HTTP_PICTURE = "http://127.0.0.1:8000/uploads/") - 前端页面:http://localhost:5173(开发环境,Vite 默认端口)
- 接口文档:http://localhost:8000/swagger/
- Django 自带后台:http://localhost:8000/django-admin/
# 数据库
- 数据库名:
django_template(沿用模板默认值,尚未按项目重命名) - 字符集:utf8mb4(
sql/sql.sql中SET NAMES utf8mb4,各表CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci) - 总表数:
sql/sql.sql建表 2 张(admin、user);模型层共映射 3 张业务表(admin、user、pet,其中pet表的建表语句未包含在sql/sql.sql中) - 其他配置:连接地址
118.89.93.2:3306,用户root,init_command设置sql_mode='STRICT_TRANS_TABLES',USE_TZ = False,时区Asia/Shanghai
# API接口规范
RESTful风格:
GET /module/page # 分页查询(参数 pageNum,后端分页大小固定为 settings.PAGE_SIZE = 10)
GET /module/list # 查询全部(不分页)
GET /module/detail?id= # 查询详情
POST /module/add # 新增
PUT /module/update # 更新
DELETE /module/delete # 批量删除(请求体为 ID 数组)
GET /file/upload # 文件上传(POST 到 /file/upload)
响应格式:
{
"code": 200,
"msg": "操作成功",
"data": {...}
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
实际响应由
apps/common/ResponseMessage.py生成:success返回code=200, msg="操作成功";failed返回code=500, msg="操作失败";other(data)返回code=500, msg=data;jump(code, data)用于 401 未授权跳转。
# 系统特色
# 统一响应与全局异常处理
- 统一响应:所有接口通过
ResponseMessage返回{code, msg, data}三段式结构,前端http.js拦截器只需按code分支处理。 - 全局异常:
utils/exception_handler.py按自定义异常 → Django 内置异常 → DRF 异常 → 未知异常四级顺序兜底,统一转换为相同结构(404"资源不存在"、403"权限不足"、500"服务器内部错误"等)。 - 自定义异常:
utils/custom_exception.py提供NotFoundException、PermissionDeniedException、UnauthorizedException、ValidationException、BusinessException五种异常,携带对应 HTTP 状态码。
# 认证与用户上下文
- JWT 工具:
utils/jwt_auth.py提供create_token(payload, timeout=60*24*30)、get_payload(token),并附带JwtQueryParamAuthentication、JwtHeaderAuthentication两个 DRF 认证类。 - 拦截中间件:
middleware/TokenInterceptorMiddleware.py统一校验请求头token,白名单外未携带或无效 Token 一律返回code=401。 - 用户上下文:
utils/current_user.py+middleware/CurrentUserMiddleware.py用 ThreadLocal 保存当前请求用户,提供get_current_user()、get_current_user_id()、get_current_username()。
# 公共组件与工具
- 图片/文件上传组件:
components/MyUpload.vue,支持图片、视频、音频、附件,自动携带 Token,支持替换、预览与下载,上传结果回传父组件使用。 - 富文本编辑器组件:
components/MyEditor.vue,基于@wangeditor/editor5.1.14 与@wangeditor/editor-for-vue5.1.12,内置图片、视频上传到/file/upload。当前Admin.vue、User.vue中已 import 该组件但尚未实际使用。 - 前端工具库:
utils/tools.js提供isLogin()、getCurrentUser()、getToken()、formatDateToYYYYMMDD();utils/http.js封装 axios 实例(timeout: 5000)与请求/响应双拦截器。 - 后端工具类:
utils/DateUtil.py提供get_date()与get_last_seven_days()(返回最近七天的日期字符串列表)。
# 文件上传
- 接口:
POST /file/upload(apps/common/views.py的FileUploadAPIView) - 支持格式:不限制扩展名,服务端以原文件名后缀拼接 UUID 生成新文件名(
str(uuid.uuid4()) + ext);前端组件按类型限定image/*、video/*、audio/* - 单文件限制:
settings.py与上传代码中未配置统一的上传大小限制(仅有MyEditor.vue中 wangEditor 的视频配置maxFileSize: 100 * 1024 * 1024) - 存储方式:保存到
settings.UPLOAD_PATH = "uploads\\"(相对项目根目录),目录不存在时自动创建;MEDIA_URL = '/uploads/'、MEDIA_ROOT = BASE_DIR/uploads,DEBUG=True时由project/urls.py追加静态路由对外提供访问 - 访问格式:
http://127.0.0.1:8000/uploads/<uuid文件名>
# 代码生成器
- 位置:项目根目录
CodeGenerator(Java,Spring Boot 2.5.6 + MyBatis-Plus Generator 3.5.2 + Velocity 2.3) - 入口:
CodeGeneratorMain.main,在DjangoProjectPathConfig.PROJECT_ROOT配置项目根目录,在CodeGeneratorMain中配置数据库连接与待生成表清单 - 产出:Django 侧
models.py、XxxSerializer.py、views.py、urls.py;Vue3 侧frontend/src/views/admin/*.vue管理页面(模板templates/page.vue.vm) - 自动化:
BatchCodeGenerator自动注册INSTALLED_APPS、project/urls.py、router/index.js、AdminLayout.vue菜单,均带重复检测
# 项目当前状态说明
重要提示:本项目目前为基础框架版本,图书管理相关的业务模块(如图书信息、借阅归还、续借、罚款、库存管理等)尚未在代码中实现,
project/apps下不存在任何图书/借阅相关 App,sql/sql.sql中也没有相应数据表。文档中不含任何图书业务功能的描述。框架已具备:账号体系(管理员 / 普通用户)、登录注册与找回密码、个人信息与密码修改、管理员与用户管理、示例模块(宠物分类、宠物信息)、JWT 认证与中间件拦截、文件上传、统一响应与全局异常处理、公共组件、代码生成器。
后续可基于
CodeGenerator,先设计图书业务数据表(含中文 COMMENT),再批量生成对应的 Django + Vue3 模块代码,只需在CodeGeneratorMain中登记表名、中文名称与 App 名称即可。
已知实现细节与不一致(如实记录,供后续修复参考):
apps/admin/views.py的管理员接口实际读写User模型(UserSerializer),并未操作admin表。- 前端
User.vue调用/user/add、/user/update,而apps/user/urls.py只提供/user/save(新增/编辑合一)。 - 前端
Pet.vue、PetCategory.vue调用/pet/delBatch,而apps/pet/urls.py提供的是/pet/delete。 apps/pet/PetCategorySerializer.py引用了apps/pet/models.py中并不存在的PetCategory模型。Pet.vue已存在但尚未在router/index.js与AdminLayout.vue中注册;/admin/pet指向的是PetCategory.vue。- 前端表单中的头像字段为
avatarUrl,而user/admin表的字段名是avatar,序列化器fields = "__all__"不会输出avatarUrl。 apps/test目录下仅有__pycache__缓存文件、没有.py源码,但settings.py的INSTALLED_APPS中仍注册了'apps.test',project/urls.py中仍include("apps.test.urls")。apps/common未注册到INSTALLED_APPS(settings.py注释说明"common 模块仅用于工具类"),其models.py中的Test、A、B、C为字段类型学习示例。middleware/TokenInterceptorMiddleware.py的白名单中仍保留/goods/uPage、/love、/goods/getGoodsByCategoryId、/category/list等已删除模块的路径。frontend/src/views/admin/Home.vue与frontend/src/views/front/Index.vue目前仅显示"首页"文字,尚未实现统计图表;echarts5.5.1 已列入package.json依赖但未被引用。- 前端分页参数会同时提交
pageNum与pageSize,而后端分页大小固定取自settings.PAGE_SIZE = 10,pageSize未生效。