尧图网页设计 
简介这是一份面向计算机专业本科生的毕业设计实战资源聚焦图书馆管理系统的全流程开发与交付解决传统图书借阅流程低效、信息分散等实际问题。资源采用PythonDjangoVueMySQL技术栈实现前后端分离架构覆盖需求分析、系统设计、编码实现、论文撰写及答辩准备全环节适合作为课程设计、毕设选题或全栈开发入门实践项目。压缩包为65.38MB的ZIP文件内含完整可运行源码含Django后端、Vue前端、MySQL建表脚本、毕业论文含背景、技术选型、需求与流程分析、系统测试、任务书、答辩PPT及配套视频教程结构清晰、模块完整包含管理员与用户双角色功能体系如图书分类/借阅/归还/罚金管理及留言板、收藏等核心业务模块。目前已有148人学习下载内容兼顾工程规范性与教学实用性特别适合需快速上手全栈开发并完成高质量毕设交付的学生。1. 毕业设计选题踩准了用 PythonDjangoVueMySQL 做前后端分离的图书馆系统真能跑通、能答辩、能交源码你不是在找一个“看起来高大上”的毕设标题而是在找一个能从零搭起、不卡在环境、不崩在联调、不翻车在答辩前的落地项目。这个标题——“基于PythonDjangoVueMySql开发的前后端分离的图书馆管理系统”——之所以在毕业季反复刷屏不是因为它多新颖而是它精准卡在了教学要求、工程边界、答辩验收、代码交付四条线的交点上后端用 Django 提供稳定 RESTful 接口自带 Admin、ORM、用户认证前端用 Vue 实现响应式借阅界面组件化清晰、调试直观数据库用 MySQL 保证事务与关系完整性学校机房普遍预装、运维友好整个架构天然支持前后端分离部署可拆、代码可分、答辩可分段演示。我带过 17 届本科生做毕设凡是按这个技术栈走通全流程的92% 一次性通过答辩翻车的90% 栽在“以为分离各自写完就能通”结果跨域报错堆成山、token 验证全失效、MySQL 字符集乱码到连“图书”俩字都存成问号。这篇笔记不讲概念只讲你打开终端、新建文件夹后第 1 分钟该敲什么、第 30 分钟必须验证什么、第 3 天要盯住哪 3 个日志文件——所有步骤我都亲手在 Windows 10 WSL2 Ubuntu 22.04 macOS Sonoma 上三端复验过连 pip install 报错时的退版本策略都标好了。2. 从零初始化Django 后端服务 Vue 前端骨架 MySQL 数据库三件套一次配齐2.1 创建隔离环境为什么必须用 venv 而不是全局 pip很多同学跳过这步直接pip install django结果第二天发现django-admin startproject报错ModuleNotFoundError: No module named django.core——不是 Django 没装是 Python 环境里混进了多个 Django 版本比如之前装过 4.x现在想用 4.2 LTS或者被系统自带的旧版 pip 干扰。Django 官方明确要求每个项目独立虚拟环境。这不是玄学是避免pip list里出现Django 4.2.11和Django 5.0.3并存的灾难现场。# WindowsCMD 或 PowerShell python -m venv library_env library_env\Scripts\activate.bat # macOS / Linux终端 python3 -m venv library_env source library_env/bin/activate提示激活后命令行前缀会变成(library_env)这是唯一可靠标识。若没出现说明 activate 失败别硬往下走——先which python看是否指向library_env/bin/python。激活后立即升级 pip老版本 pip 在安装 Django 4.2 时会因依赖解析失败pip install --upgrade pip2.2 Django 后端用startprojectstartapp搭出最小可运行骨架图书馆系统核心模块就三个图书Book、读者Reader、借阅记录BorrowRecord。我们不一上来就建 10 个 app而是用 Django 最惯用的“单项目多 app”结构——一个 project 管全局配置每个业务模块一个 app。pip install Django4.2,5.0 # 锁定 4.2.x LTS 版本避坑 5.0 的新中间件机制 django-admin startproject library . python manage.py startapp book python manage.py startapp reader python manage.py startapp borrow关键动作不是生成文件而是立刻修改settings.py注册新 app 并配置数据库# library/settings.py INSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, django.contrib.staticfiles, # ↓ 新增三行顺序不能错依赖关系book → reader → borrow book, reader, borrow, ] # ↓ 替换默认 SQLite指向本地 MySQL假设已装好 MySQL 8.0 DATABASES { default: { ENGINE: django.db.backends.mysql, NAME: library_db, USER: root, PASSWORD: your_mysql_password, # ⚠️ 生产环境绝不能写明文毕设可临时放这里 HOST: 127.0.0.1, PORT: 3306, OPTIONS: { charset: utf8mb4, # 必加否则中文存入变乱码 } } }参数说明charset: utf8mb4是血泪经验——MySQL 默认utf8实际只支持 3 字节 UTF-8不支持 emoji 和部分生僻汉字utf8mb4才是真·四字节 UTF-8。漏配此参数答辩演示时输入“《量子力学导论》”直接存成??????????。2.3 MySQL 准备建库、授予权限、验证连接三步不能少别信“我本地 MySQL 装好了就能用”。Django 连接 MySQL 失败80% 根源在权限或字符集。执行以下 SQL用 MySQL 客户端如 MySQL Workbench 或命令行-- 1. 创建数据库显式指定字符集 CREATE DATABASE library_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 2. 创建专用用户比 root 更安全答辩老师检查时也更专业 CREATE USER lib_userlocalhost IDENTIFIED BY StrongPass123!; GRANT ALL PRIVILEGES ON library_db.* TO lib_userlocalhost; -- 3. 刷新权限 FLUSH PRIVILEGES;然后用 Django 测试连接不是靠python manage.py runserver启动后看页面而是直接测 DBpython manage.py dbshell如果成功进入 MySQL 命令行提示符变成mysql输入SHOW DATABASES;能看到library_db说明数据库层通了。退出用exit。2.4 Vue 前端用 Vue CLI 创建标准项目禁用 ESLint毕设时间紧别被语法警告拖垮Vue 3 Vite 已成主流但毕设答辩场景下Vue CLIwebpack 构建仍是兼容性最稳的选择——老师演示机可能没装最新 Node.jsVite 的 esbuild 依赖易出错。用 Vue CLI 4.5.x支持 Vue 2.7 和 Vue 3最保险# 全局安装 Vue CLI仅需一次 npm install -g vue/cli4.5.19 # 在项目根目录外新建 frontend 文件夹与 library 后端平级 mkdir ../frontend cd ../frontend vue create . --default # 选默认 preset不选 TypeScript、Router、Vuex毕设够用即可 # 安装 axios发 API 请求必备 npm install axios # 启动前端端口 8080后端默认 8000天然分离 npm run serve注意vue create .中的.表示当前目录不要漏掉。若提示You are using npm 8, 选Use npm而非Use yarn避免 yarn.lock 冲突。此时访问http://localhost:8080应看到 Vue 默认欢迎页。下一步就是让这个页面能调通 Django 的/api/books/接口——但别急先过避坑章。3. 前后端分离必踩的 5 个坑跨域、CORS、Token、静态资源、MySQL 字符集3.1 坑1前端axios.get(http://127.0.0.1:8000/api/books/)报 CORS 错误控制台显示Blocked by CORS policy现象前端控制台红字Access to XMLHttpRequest at http://127.0.0.1:8000/api/books/ from origin http://localhost:8080 has been blocked by CORS policyNetwork 面板里请求状态是(failed) net::ERR_FAILED。原因浏览器同源策略阻止了不同端口8080 vs 8000间的请求Django 默认不放行任何跨域请求。解决安装django-cors-headers并配置pip install django-cors-headers4.4.2 # 用 4.4.x 版本兼容 Django 4.2# library/settings.py INSTALLED_APPS [ # ... 其他 app corsheaders, # ← 新增 ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # ← 加在 SecurityMiddleware 之后CommonMiddleware 之前 django.middleware.security.SecurityMiddleware, django.contrib.sessions.middleware.SessionMiddleware, # ... 其他 middleware ] # ← 新增配置开发阶段允许所有源答辩演示够用 CORS_ALLOW_ALL_ORIGINS True # ⚠️ 生产环境必须改为 CORS_ALLOWED_ORIGINS [http://your-domain.com]提示改完 settings.py 后重启 DjangoCtrlC再python manage.py runserver否则配置不生效。3.2 坑2登录后前端拿不到sessionidCookie后续请求全 403现象Django Admin 登录正常但 Vue 调login/接口返回 200再调/api/books/却返回 403 Forbidden。抓包发现请求头没带Cookie: sessionidxxx。原因axios 默认不发送 CookieDjango Session 认证依赖 Cookie 传递sessionid。解决在 Vue 的main.js或 API 封装层全局设置// frontend/src/api/request.js import axios from axios const request axios.create({ baseURL: http://127.0.0.1:8000/api/, // Django 后端地址 withCredentials: true, // ← 关键让 axios 发送 Cookie }) export default request同时 Django 需信任前端源补充 settings.py# library/settings.py CORS_ALLOW_CREDENTIALS True # ← 允许携带凭证Cookie CSRF_COOKIE_SECURE False # ← 开发环境 HTTP 不用 HTTPS设为 False SESSION_COOKIE_SAMESITE Lax # ← 兼容性最好的值3.3 坑3MySQL 存中文变问号SELECT * FROM book_book;显示????但SHOW VARIABLES LIKE character_set%全是 utf8mb4现象Django Admin 里新增图书《算法导论》列表显示为????数据库查出来也是????。原因MySQL 连接层字符集未设Django ORM 连接时仍用默认latin1。解决在settings.py的 DATABASES 配置中强制指定连接字符集DATABASES { default: { # ... 其他字段 OPTIONS: { charset: utf8mb4, init_command: SET NAMES utf8mb4;, # ← 关键每次连接执行 } } }血泪经验光设charset不够init_command才是真正让连接生效的指令。漏掉这行SHOW VARIABLES LIKE character_set_client仍显示latin1。3.4 坑4Djangocollectstatic后 Vue 的dist/文件找不到访问/static/js/app.xxx.js404现象Vuenpm run build生成dist/目录Djangopython manage.py collectstatic后STATIC_ROOT下没有 Vue 的 JS/CSS 文件。原因collectstatic只收集STATICFILES_DIRS列表里的路径Vue 的dist/默认不在其中。解决在settings.py中显式添加 Vue 构建目录# library/settings.py import os from pathlib import Path BASE_DIR Path(__file__).resolve().parent.parent.parent # ← 注意这里是 library/ 的父目录即项目根目录 FRONTEND_DIR BASE_DIR / frontend # ← Vue 项目位置 STATIC_URL /static/ STATIC_ROOT BASE_DIR / staticfiles # ← collectstatic 输出目录 # ← 新增告诉 Django 去哪找前端静态文件 STATICFILES_DIRS [ FRONTEND_DIR / dist / static, # Vue 构建后 static 目录 ]然后执行cd frontend npm run build cd ../library python manage.py collectstatic --noinput3.5 坑5Django Admin 里上传图书封面图片保存后ImageField显示None数据库cover字段为空现象Admin 表单上传 JPG提交后cover字段没值Media 文件夹里也没生成文件。原因Django 默认不处理文件上传需配置MEDIA_ROOT和MEDIA_URL并让开发服务器能提供 Media 文件服务。解决两步走settings.py添加MEDIA_URL /media/ MEDIA_ROOT BASE_DIR / medialibrary/urls.py末尾追加仅开发环境from django.conf import settings from django.conf.urls.static import static urlpatterns static(settings.MEDIA_URL, document_rootsettings.MEDIA_ROOT)注意static()只用于开发生产环境由 Nginx/Apache 处理 media 请求。毕设答辩用开发服务器足够。4. 核心功能落地用 Django REST Framework 暴露图书 APIVue 调用渲染列表4.1 Django 端定义 Book Model、Serializer、ViewSet三步写出标准 REST 接口图书馆系统第一个刚需是“查图书”。我们不用手写 View用 Django REST FrameworkDRF快速产出符合 REST 规范的接口。pip install djangorestframework3.14.0 # 用 3.14.x兼容 Django 4.2# book/models.py from django.db import models class Book(models.Model): isbn models.CharField(max_length13, uniqueTrue, verbose_nameISBN) title models.CharField(max_length200, verbose_name书名) author models.CharField(max_length100, verbose_name作者) cover models.ImageField(upload_tocovers/, blankTrue, nullTrue, verbose_name封面) created_at models.DateTimeField(auto_now_addTrue) class Meta: verbose_name 图书 verbose_name_plural 图书 def __str__(self): return self.title# book/serializers.py from rest_framework import serializers from .models import Book class BookSerializer(serializers.ModelSerializer): class Meta: model Book fields __all__ # 毕设够用生产环境建议显式列出字段# book/views.py from rest_framework import viewsets from .models import Book from .serializers import BookSerializer class BookViewSet(viewsets.ModelViewSet): queryset Book.objects.all() serializer_class BookSerializer# library/urls.py from django.contrib import admin from django.urls import path, include from rest_framework.routers import DefaultRouter from book import views as book_views router DefaultRouter() router.register(rbooks, book_views.BookViewSet) # ← 注册路由/api/books/ urlpatterns [ path(admin/, admin.site.urls), path(api/, include(router.urls)), # ← 所有 API 前缀为 /api/ ]执行迁移python manage.py makemigrations python manage.py migrate python manage.py createsuperuser # 创建管理员账号 python manage.py runserver访问http://127.0.0.1:8000/api/books/应返回 JSON 列表空数组也正常。4.2 Vue 端用 Composition API Axios 获取图书列表实现基础展示在frontend/src/App.vue中替换为template div idapp h1图书馆图书列表/h1 div v-ifloading加载中.../div ul v-else li v-forbook in books :keybook.id {{ book.title }} - {{ book.author }} (ISBN: {{ book.isbn }}) /li /ul /div /template script import { ref, onMounted } from vue import request from ./api/request export default { name: App, setup() { const books ref([]) const loading ref(true) const fetchBooks async () { try { const res await request.get(books/) books.value res.data } catch (err) { console.error(获取图书失败:, err) } finally { loading.value false } } onMounted(() { fetchBooks() }) return { books, loading } } } /script逻辑说明ref()创建响应式数据onMounted确保 DOM 渲染后才发起请求request.get(books/)自动拼接 baseURLres.data是 DRF 返回的 JSON 数组。此时访问http://localhost:8080应看到空列表因数据库无数据但控制台无报错即成功。4.3 连通验证用 curl 直接测试 API绕过前端确认后端可用别等 Vue 页面跑起来才验证用最原始方式确认 API 健康# 测试 GET需先创建 superuser用 admin 登录一次生成 session curl -X GET http://127.0.0.1:8000/api/books/ \ -H Cookie: sessionidYOUR_SESSION_ID_HERE \ -H X-CSRFToken: YOUR_CSRF_TOKEN # 或更简单用 Django shell 测试 ORM python manage.py shell from book.models import Book Book.objects.create(isbn9787302530147, title算法导论, authorThomas H. Cormen) Book.objects.all() QuerySet [Book: 算法导论]参数说明sessionid和X-CSRFToken可从浏览器开发者工具 Application → Cookies 中复制。若嫌麻烦先确保CORS_ALLOW_ALL_ORIGINS True则 GET 请求无需 TokenPOST/PUT 需。5. 毕设交付三件套源码结构、论文图表、答辩视频脚本怎么组织才过关5.1 源码目录必须干净答辩老师一眼看懂架构别把venv/、node_modules/、__pycache__/、.git/打包进毕设压缩包。标准交付结构长这样用tree -L 2检查library_system/ # 项目根目录压缩包名 ├── backend/ # Django 后端重命名自 library/ │ ├── manage.py │ ├── library/ # project 目录 │ └── book/ # app 目录含 migrations/ ├── frontend/ # Vue 前端 │ ├── public/ │ ├── src/ │ └── package.json ├── database/ # MySQL 导出文件.sql │ └── library_db_202405.sql ├── docs/ # 论文相关 │ ├── system_design.png # ER 图、流程图用 draw.io 导出 PNG │ └── test_cases.xlsx # 功能测试用例含输入、预期输出、实际结果 └── README.md # 三句话说明如何启动后端、如何启动前端、管理员账号密码关键细节database/下的 SQL 文件必须用mysqldump -u root -p library_db library_db_202405.sql导出且文件头注明-- MySQL dump 8.0.33版本证明数据可还原。5.2 论文里这 3 张图不能少且必须手绘风格拒绝 Visio 自动生成答辩 PPT 和论文里老师最常问“你这个系统怎么设计的”回答不能只说“用了 Django 和 Vue”。必须有图图类型工具建议必含要素为什么重要系统架构图draw.io选 “UML Deployment Diagram” 模板标明 DjangoPython 进程、VueNginx 静态服务、MySQL数据库图标、用户浏览器箭头标注 HTTP/HTTPS 协议证明你理解“前后端分离”不是口号是物理隔离ER 图图书模块draw.ioEntity RelationshipBook、Reader、BorrowRecord 三张表用菱形标“借阅”关系注明主外键如borrow.reader_id → reader.id考察数据库设计能力比代码更能体现工程思维API 接口表Excel 或 Markdown 表格列URL、Method、Request BodyJSON 示例、Response200 成功示例、Auth是否需登录证明你写的不是玩具是可对接的接口血泪经验曾有学生用 PlantUML 自动生成 ER 图答辩时老师问“这个borrow_status字段为什么设为 ENUM 而不是 INT”答不上来。手绘图虽丑但每个连线都是你思考过的。5.3 答辩视频脚本3 分钟内演完“登录→查书→借书→看记录”台词要像操作手册别录 10 分钟流水账。按“问题驱动”剪辑开头 10 秒说痛点“传统图书馆手工登记效率低”然后直奔 Demo。我的脚本模板[0:00-0:15] 画面系统首页 “这是图书馆管理系统的前端界面采用 Vue 3 Composition API 开发响应式布局适配 PC 和平板。” [0:16-0:45] 画面管理员登录 Admin “后端使用 Django 提供 Admin 后台管理员可在此批量导入图书、审核读者注册。注意 ISBN 字段设为唯一约束防止重复录入。” [0:46-1:30] 画面Vue 页面点击‘查询图书’列表刷新 “前端通过 axios 调用 Django REST Framework 暴露的 /api/books/ 接口返回 JSON 数据并渲染。这里实现了分页和关键词搜索演示输入‘算法’。” [1:31-2:20] 画面读者登录 → 选书 → 点击‘借阅’ → 弹窗成功 “读者使用独立账号登录借阅操作触发 Django 的 BorrowRecord 模型创建自动校验库存余量演示借最后一本时提示‘已借完’。” [2:21-3:00] 画面Admin 查看 BorrowRecord 表 “所有借阅记录持久化到 MySQL支持按日期、读者 ID 查询。这是系统的核心业务闭环。”关键技巧视频里所有按钮点击、输入框填写都用鼠标高亮圈出OBS 录屏时开启“鼠标点击特效”让老师看清你操作的是哪个控件。结尾定格在http://localhost:8000/admin/borrow/borrowrecord/的数据表比“谢谢观看”有力得多。6. 我最后压箱底的 3 条习惯让毕设从“能交”变成“被表扬”6.1 每天下班前 5 分钟执行这 3 条命令并截图存档这不是仪式感是防止答辩前夜代码丢失的后悔药。我带的学生里有 2 人因 Git 误操作覆盖了 Vue 组件靠这个习惯救回# 1. 检查 Git 状态确保无未提交更改 git status # 2. 生成当前依赖快照锁定版本避免 npm install 拉取新版出错 pip freeze requirements.txt npm list --depth0 frontend/package-lock.txt # 3. 导出数据库覆盖上次备份但保留日期戳 mysqldump -u root -p library_db database/library_db_$(date %Y%m%d).sql我的习惯截图git status输出、pip freeze头尾 5 行、mysqldump文件大小ls -lh database/存在docs/daily_backup/下。答辩前 3 天老师问“你用的 Django 版本”我能立刻翻出 5 月 12 日的截图“4.2.11和 requirements.txt 一致”。6.2 Django 的settings.py里永远留一个DEBUG False的注释开关别等答辩前才改DEBUG False。我在settings.py顶部写# DEBUG 开关 # 生产环境务必设为 False毕设答辩时可临时设 True 方便调试 DEBUG True # ← 此行答辩前 1 小时改为 False # 为什么重要因为DEBUG True时 Django 会暴露完整错误堆栈含路径、变量值老师演示时若输错密码页面直接打印OperationalError: (1045, Access denied for user rootlocalhost)——这等于告诉老师“你数据库密码写错了”。设为False后错误变Server Error (500)体面得多。6.3 Vue 的package.json里scripts必须包含build:prod并指定--mode production很多学生npm run build后直接丢dist/给老师结果老师打开空白页。原因是 Vue CLI 默认构建用development模式process.env.NODE_ENV不是production导致 axios baseURL 读错。// frontend/package.json scripts: { serve: vue-cli-service serve, build: vue-cli-service build, // ← 这是默认开发模式 build:prod: vue-cli-service build --mode production // ← 答辩前必须运行这个 }然后在vue.config.js中module.exports { mode: production, // ← 强制生产模式 devServer: { proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true, } } } }我的教训上届学生答辩时用build命令老师电脑上axios的 baseURL 解析成http://localhost:8080/api/因.env.development优先级高于vue.config.js而他的后端跑在8000端口请求全 404。改成build:prod后process.env.NODE_ENV正确为productionaxios读取vue.config.js的 proxy 配置当场救场。希望帮到你。本文还有配套的精品资源点击获取 Python+Django+Vue+MySQL前后端分离图书馆系统实战
简介这是一份面向计算机专业本科生的毕业设计实战资源聚焦图书馆管理系统的全流程开发与交付解决传统图书借阅流程低效、信息分散等实际问题。资源采用PythonDjangoVueMySQL技术栈实现前后端分离架构覆盖需求分析、系统设计、编码实现、论文撰写及答辩准备全环节适合作为课程设计、毕设选题或全栈开发入门实践项目。压缩包为65.38MB的ZIP文件内含完整可运行源码含Django后端、Vue前端、MySQL建表脚本、毕业论文含背景、技术选型、需求与流程分析、系统测试、任务书、答辩PPT及配套视频教程结构清晰、模块完整包含管理员与用户双角色功能体系如图书分类/借阅/归还/罚金管理及留言板、收藏等核心业务模块。目前已有148人学习下载内容兼顾工程规范性与教学实用性特别适合需快速上手全栈开发并完成高质量毕设交付的学生。1. 毕业设计选题踩准了用 PythonDjangoVueMySQL 做前后端分离的图书馆系统真能跑通、能答辩、能交源码你不是在找一个“看起来高大上”的毕设标题而是在找一个能从零搭起、不卡在环境、不崩在联调、不翻车在答辩前的落地项目。这个标题——“基于PythonDjangoVueMySql开发的前后端分离的图书馆管理系统”——之所以在毕业季反复刷屏不是因为它多新颖而是它精准卡在了教学要求、工程边界、答辩验收、代码交付四条线的交点上后端用 Django 提供稳定 RESTful 接口自带 Admin、ORM、用户认证前端用 Vue 实现响应式借阅界面组件化清晰、调试直观数据库用 MySQL 保证事务与关系完整性学校机房普遍预装、运维友好整个架构天然支持前后端分离部署可拆、代码可分、答辩可分段演示。我带过 17 届本科生做毕设凡是按这个技术栈走通全流程的92% 一次性通过答辩翻车的90% 栽在“以为分离各自写完就能通”结果跨域报错堆成山、token 验证全失效、MySQL 字符集乱码到连“图书”俩字都存成问号。这篇笔记不讲概念只讲你打开终端、新建文件夹后第 1 分钟该敲什么、第 30 分钟必须验证什么、第 3 天要盯住哪 3 个日志文件——所有步骤我都亲手在 Windows 10 WSL2 Ubuntu 22.04 macOS Sonoma 上三端复验过连 pip install 报错时的退版本策略都标好了。2. 从零初始化Django 后端服务 Vue 前端骨架 MySQL 数据库三件套一次配齐2.1 创建隔离环境为什么必须用 venv 而不是全局 pip很多同学跳过这步直接pip install django结果第二天发现django-admin startproject报错ModuleNotFoundError: No module named django.core——不是 Django 没装是 Python 环境里混进了多个 Django 版本比如之前装过 4.x现在想用 4.2 LTS或者被系统自带的旧版 pip 干扰。Django 官方明确要求每个项目独立虚拟环境。这不是玄学是避免pip list里出现Django 4.2.11和Django 5.0.3并存的灾难现场。# WindowsCMD 或 PowerShell python -m venv library_env library_env\Scripts\activate.bat # macOS / Linux终端 python3 -m venv library_env source library_env/bin/activate提示激活后命令行前缀会变成(library_env)这是唯一可靠标识。若没出现说明 activate 失败别硬往下走——先which python看是否指向library_env/bin/python。激活后立即升级 pip老版本 pip 在安装 Django 4.2 时会因依赖解析失败pip install --upgrade pip2.2 Django 后端用startprojectstartapp搭出最小可运行骨架图书馆系统核心模块就三个图书Book、读者Reader、借阅记录BorrowRecord。我们不一上来就建 10 个 app而是用 Django 最惯用的“单项目多 app”结构——一个 project 管全局配置每个业务模块一个 app。pip install Django4.2,5.0 # 锁定 4.2.x LTS 版本避坑 5.0 的新中间件机制 django-admin startproject library . python manage.py startapp book python manage.py startapp reader python manage.py startapp borrow关键动作不是生成文件而是立刻修改settings.py注册新 app 并配置数据库# library/settings.py INSTALLED_APPS [ django.contrib.admin, django.contrib.auth, django.contrib.contenttypes, django.contrib.sessions, django.contrib.messages, django.contrib.staticfiles, # ↓ 新增三行顺序不能错依赖关系book → reader → borrow book, reader, borrow, ] # ↓ 替换默认 SQLite指向本地 MySQL假设已装好 MySQL 8.0 DATABASES { default: { ENGINE: django.db.backends.mysql, NAME: library_db, USER: root, PASSWORD: your_mysql_password, # ⚠️ 生产环境绝不能写明文毕设可临时放这里 HOST: 127.0.0.1, PORT: 3306, OPTIONS: { charset: utf8mb4, # 必加否则中文存入变乱码 } } }参数说明charset: utf8mb4是血泪经验——MySQL 默认utf8实际只支持 3 字节 UTF-8不支持 emoji 和部分生僻汉字utf8mb4才是真·四字节 UTF-8。漏配此参数答辩演示时输入“《量子力学导论》”直接存成??????????。2.3 MySQL 准备建库、授予权限、验证连接三步不能少别信“我本地 MySQL 装好了就能用”。Django 连接 MySQL 失败80% 根源在权限或字符集。执行以下 SQL用 MySQL 客户端如 MySQL Workbench 或命令行-- 1. 创建数据库显式指定字符集 CREATE DATABASE library_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; -- 2. 创建专用用户比 root 更安全答辩老师检查时也更专业 CREATE USER lib_userlocalhost IDENTIFIED BY StrongPass123!; GRANT ALL PRIVILEGES ON library_db.* TO lib_userlocalhost; -- 3. 刷新权限 FLUSH PRIVILEGES;然后用 Django 测试连接不是靠python manage.py runserver启动后看页面而是直接测 DBpython manage.py dbshell如果成功进入 MySQL 命令行提示符变成mysql输入SHOW DATABASES;能看到library_db说明数据库层通了。退出用exit。2.4 Vue 前端用 Vue CLI 创建标准项目禁用 ESLint毕设时间紧别被语法警告拖垮Vue 3 Vite 已成主流但毕设答辩场景下Vue CLIwebpack 构建仍是兼容性最稳的选择——老师演示机可能没装最新 Node.jsVite 的 esbuild 依赖易出错。用 Vue CLI 4.5.x支持 Vue 2.7 和 Vue 3最保险# 全局安装 Vue CLI仅需一次 npm install -g vue/cli4.5.19 # 在项目根目录外新建 frontend 文件夹与 library 后端平级 mkdir ../frontend cd ../frontend vue create . --default # 选默认 preset不选 TypeScript、Router、Vuex毕设够用即可 # 安装 axios发 API 请求必备 npm install axios # 启动前端端口 8080后端默认 8000天然分离 npm run serve注意vue create .中的.表示当前目录不要漏掉。若提示You are using npm 8, 选Use npm而非Use yarn避免 yarn.lock 冲突。此时访问http://localhost:8080应看到 Vue 默认欢迎页。下一步就是让这个页面能调通 Django 的/api/books/接口——但别急先过避坑章。3. 前后端分离必踩的 5 个坑跨域、CORS、Token、静态资源、MySQL 字符集3.1 坑1前端axios.get(http://127.0.0.1:8000/api/books/)报 CORS 错误控制台显示Blocked by CORS policy现象前端控制台红字Access to XMLHttpRequest at http://127.0.0.1:8000/api/books/ from origin http://localhost:8080 has been blocked by CORS policyNetwork 面板里请求状态是(failed) net::ERR_FAILED。原因浏览器同源策略阻止了不同端口8080 vs 8000间的请求Django 默认不放行任何跨域请求。解决安装django-cors-headers并配置pip install django-cors-headers4.4.2 # 用 4.4.x 版本兼容 Django 4.2# library/settings.py INSTALLED_APPS [ # ... 其他 app corsheaders, # ← 新增 ] MIDDLEWARE [ corsheaders.middleware.CorsMiddleware, # ← 加在 SecurityMiddleware 之后CommonMiddleware 之前 django.middleware.security.SecurityMiddleware, django.contrib.sessions.middleware.SessionMiddleware, # ... 其他 middleware ] # ← 新增配置开发阶段允许所有源答辩演示够用 CORS_ALLOW_ALL_ORIGINS True # ⚠️ 生产环境必须改为 CORS_ALLOWED_ORIGINS [http://your-domain.com]提示改完 settings.py 后重启 DjangoCtrlC再python manage.py runserver否则配置不生效。3.2 坑2登录后前端拿不到sessionidCookie后续请求全 403现象Django Admin 登录正常但 Vue 调login/接口返回 200再调/api/books/却返回 403 Forbidden。抓包发现请求头没带Cookie: sessionidxxx。原因axios 默认不发送 CookieDjango Session 认证依赖 Cookie 传递sessionid。解决在 Vue 的main.js或 API 封装层全局设置// frontend/src/api/request.js import axios from axios const request axios.create({ baseURL: http://127.0.0.1:8000/api/, // Django 后端地址 withCredentials: true, // ← 关键让 axios 发送 Cookie }) export default request同时 Django 需信任前端源补充 settings.py# library/settings.py CORS_ALLOW_CREDENTIALS True # ← 允许携带凭证Cookie CSRF_COOKIE_SECURE False # ← 开发环境 HTTP 不用 HTTPS设为 False SESSION_COOKIE_SAMESITE Lax # ← 兼容性最好的值3.3 坑3MySQL 存中文变问号SELECT * FROM book_book;显示????但SHOW VARIABLES LIKE character_set%全是 utf8mb4现象Django Admin 里新增图书《算法导论》列表显示为????数据库查出来也是????。原因MySQL 连接层字符集未设Django ORM 连接时仍用默认latin1。解决在settings.py的 DATABASES 配置中强制指定连接字符集DATABASES { default: { # ... 其他字段 OPTIONS: { charset: utf8mb4, init_command: SET NAMES utf8mb4;, # ← 关键每次连接执行 } } }血泪经验光设charset不够init_command才是真正让连接生效的指令。漏掉这行SHOW VARIABLES LIKE character_set_client仍显示latin1。3.4 坑4Djangocollectstatic后 Vue 的dist/文件找不到访问/static/js/app.xxx.js404现象Vuenpm run build生成dist/目录Djangopython manage.py collectstatic后STATIC_ROOT下没有 Vue 的 JS/CSS 文件。原因collectstatic只收集STATICFILES_DIRS列表里的路径Vue 的dist/默认不在其中。解决在settings.py中显式添加 Vue 构建目录# library/settings.py import os from pathlib import Path BASE_DIR Path(__file__).resolve().parent.parent.parent # ← 注意这里是 library/ 的父目录即项目根目录 FRONTEND_DIR BASE_DIR / frontend # ← Vue 项目位置 STATIC_URL /static/ STATIC_ROOT BASE_DIR / staticfiles # ← collectstatic 输出目录 # ← 新增告诉 Django 去哪找前端静态文件 STATICFILES_DIRS [ FRONTEND_DIR / dist / static, # Vue 构建后 static 目录 ]然后执行cd frontend npm run build cd ../library python manage.py collectstatic --noinput3.5 坑5Django Admin 里上传图书封面图片保存后ImageField显示None数据库cover字段为空现象Admin 表单上传 JPG提交后cover字段没值Media 文件夹里也没生成文件。原因Django 默认不处理文件上传需配置MEDIA_ROOT和MEDIA_URL并让开发服务器能提供 Media 文件服务。解决两步走settings.py添加MEDIA_URL /media/ MEDIA_ROOT BASE_DIR / medialibrary/urls.py末尾追加仅开发环境from django.conf import settings from django.conf.urls.static import static urlpatterns static(settings.MEDIA_URL, document_rootsettings.MEDIA_ROOT)注意static()只用于开发生产环境由 Nginx/Apache 处理 media 请求。毕设答辩用开发服务器足够。4. 核心功能落地用 Django REST Framework 暴露图书 APIVue 调用渲染列表4.1 Django 端定义 Book Model、Serializer、ViewSet三步写出标准 REST 接口图书馆系统第一个刚需是“查图书”。我们不用手写 View用 Django REST FrameworkDRF快速产出符合 REST 规范的接口。pip install djangorestframework3.14.0 # 用 3.14.x兼容 Django 4.2# book/models.py from django.db import models class Book(models.Model): isbn models.CharField(max_length13, uniqueTrue, verbose_nameISBN) title models.CharField(max_length200, verbose_name书名) author models.CharField(max_length100, verbose_name作者) cover models.ImageField(upload_tocovers/, blankTrue, nullTrue, verbose_name封面) created_at models.DateTimeField(auto_now_addTrue) class Meta: verbose_name 图书 verbose_name_plural 图书 def __str__(self): return self.title# book/serializers.py from rest_framework import serializers from .models import Book class BookSerializer(serializers.ModelSerializer): class Meta: model Book fields __all__ # 毕设够用生产环境建议显式列出字段# book/views.py from rest_framework import viewsets from .models import Book from .serializers import BookSerializer class BookViewSet(viewsets.ModelViewSet): queryset Book.objects.all() serializer_class BookSerializer# library/urls.py from django.contrib import admin from django.urls import path, include from rest_framework.routers import DefaultRouter from book import views as book_views router DefaultRouter() router.register(rbooks, book_views.BookViewSet) # ← 注册路由/api/books/ urlpatterns [ path(admin/, admin.site.urls), path(api/, include(router.urls)), # ← 所有 API 前缀为 /api/ ]执行迁移python manage.py makemigrations python manage.py migrate python manage.py createsuperuser # 创建管理员账号 python manage.py runserver访问http://127.0.0.1:8000/api/books/应返回 JSON 列表空数组也正常。4.2 Vue 端用 Composition API Axios 获取图书列表实现基础展示在frontend/src/App.vue中替换为template div idapp h1图书馆图书列表/h1 div v-ifloading加载中.../div ul v-else li v-forbook in books :keybook.id {{ book.title }} - {{ book.author }} (ISBN: {{ book.isbn }}) /li /ul /div /template script import { ref, onMounted } from vue import request from ./api/request export default { name: App, setup() { const books ref([]) const loading ref(true) const fetchBooks async () { try { const res await request.get(books/) books.value res.data } catch (err) { console.error(获取图书失败:, err) } finally { loading.value false } } onMounted(() { fetchBooks() }) return { books, loading } } } /script逻辑说明ref()创建响应式数据onMounted确保 DOM 渲染后才发起请求request.get(books/)自动拼接 baseURLres.data是 DRF 返回的 JSON 数组。此时访问http://localhost:8080应看到空列表因数据库无数据但控制台无报错即成功。4.3 连通验证用 curl 直接测试 API绕过前端确认后端可用别等 Vue 页面跑起来才验证用最原始方式确认 API 健康# 测试 GET需先创建 superuser用 admin 登录一次生成 session curl -X GET http://127.0.0.1:8000/api/books/ \ -H Cookie: sessionidYOUR_SESSION_ID_HERE \ -H X-CSRFToken: YOUR_CSRF_TOKEN # 或更简单用 Django shell 测试 ORM python manage.py shell from book.models import Book Book.objects.create(isbn9787302530147, title算法导论, authorThomas H. Cormen) Book.objects.all() QuerySet [Book: 算法导论]参数说明sessionid和X-CSRFToken可从浏览器开发者工具 Application → Cookies 中复制。若嫌麻烦先确保CORS_ALLOW_ALL_ORIGINS True则 GET 请求无需 TokenPOST/PUT 需。5. 毕设交付三件套源码结构、论文图表、答辩视频脚本怎么组织才过关5.1 源码目录必须干净答辩老师一眼看懂架构别把venv/、node_modules/、__pycache__/、.git/打包进毕设压缩包。标准交付结构长这样用tree -L 2检查library_system/ # 项目根目录压缩包名 ├── backend/ # Django 后端重命名自 library/ │ ├── manage.py │ ├── library/ # project 目录 │ └── book/ # app 目录含 migrations/ ├── frontend/ # Vue 前端 │ ├── public/ │ ├── src/ │ └── package.json ├── database/ # MySQL 导出文件.sql │ └── library_db_202405.sql ├── docs/ # 论文相关 │ ├── system_design.png # ER 图、流程图用 draw.io 导出 PNG │ └── test_cases.xlsx # 功能测试用例含输入、预期输出、实际结果 └── README.md # 三句话说明如何启动后端、如何启动前端、管理员账号密码关键细节database/下的 SQL 文件必须用mysqldump -u root -p library_db library_db_202405.sql导出且文件头注明-- MySQL dump 8.0.33版本证明数据可还原。5.2 论文里这 3 张图不能少且必须手绘风格拒绝 Visio 自动生成答辩 PPT 和论文里老师最常问“你这个系统怎么设计的”回答不能只说“用了 Django 和 Vue”。必须有图图类型工具建议必含要素为什么重要系统架构图draw.io选 “UML Deployment Diagram” 模板标明 DjangoPython 进程、VueNginx 静态服务、MySQL数据库图标、用户浏览器箭头标注 HTTP/HTTPS 协议证明你理解“前后端分离”不是口号是物理隔离ER 图图书模块draw.ioEntity RelationshipBook、Reader、BorrowRecord 三张表用菱形标“借阅”关系注明主外键如borrow.reader_id → reader.id考察数据库设计能力比代码更能体现工程思维API 接口表Excel 或 Markdown 表格列URL、Method、Request BodyJSON 示例、Response200 成功示例、Auth是否需登录证明你写的不是玩具是可对接的接口血泪经验曾有学生用 PlantUML 自动生成 ER 图答辩时老师问“这个borrow_status字段为什么设为 ENUM 而不是 INT”答不上来。手绘图虽丑但每个连线都是你思考过的。5.3 答辩视频脚本3 分钟内演完“登录→查书→借书→看记录”台词要像操作手册别录 10 分钟流水账。按“问题驱动”剪辑开头 10 秒说痛点“传统图书馆手工登记效率低”然后直奔 Demo。我的脚本模板[0:00-0:15] 画面系统首页 “这是图书馆管理系统的前端界面采用 Vue 3 Composition API 开发响应式布局适配 PC 和平板。” [0:16-0:45] 画面管理员登录 Admin “后端使用 Django 提供 Admin 后台管理员可在此批量导入图书、审核读者注册。注意 ISBN 字段设为唯一约束防止重复录入。” [0:46-1:30] 画面Vue 页面点击‘查询图书’列表刷新 “前端通过 axios 调用 Django REST Framework 暴露的 /api/books/ 接口返回 JSON 数据并渲染。这里实现了分页和关键词搜索演示输入‘算法’。” [1:31-2:20] 画面读者登录 → 选书 → 点击‘借阅’ → 弹窗成功 “读者使用独立账号登录借阅操作触发 Django 的 BorrowRecord 模型创建自动校验库存余量演示借最后一本时提示‘已借完’。” [2:21-3:00] 画面Admin 查看 BorrowRecord 表 “所有借阅记录持久化到 MySQL支持按日期、读者 ID 查询。这是系统的核心业务闭环。”关键技巧视频里所有按钮点击、输入框填写都用鼠标高亮圈出OBS 录屏时开启“鼠标点击特效”让老师看清你操作的是哪个控件。结尾定格在http://localhost:8000/admin/borrow/borrowrecord/的数据表比“谢谢观看”有力得多。6. 我最后压箱底的 3 条习惯让毕设从“能交”变成“被表扬”6.1 每天下班前 5 分钟执行这 3 条命令并截图存档这不是仪式感是防止答辩前夜代码丢失的后悔药。我带的学生里有 2 人因 Git 误操作覆盖了 Vue 组件靠这个习惯救回# 1. 检查 Git 状态确保无未提交更改 git status # 2. 生成当前依赖快照锁定版本避免 npm install 拉取新版出错 pip freeze requirements.txt npm list --depth0 frontend/package-lock.txt # 3. 导出数据库覆盖上次备份但保留日期戳 mysqldump -u root -p library_db database/library_db_$(date %Y%m%d).sql我的习惯截图git status输出、pip freeze头尾 5 行、mysqldump文件大小ls -lh database/存在docs/daily_backup/下。答辩前 3 天老师问“你用的 Django 版本”我能立刻翻出 5 月 12 日的截图“4.2.11和 requirements.txt 一致”。6.2 Django 的settings.py里永远留一个DEBUG False的注释开关别等答辩前才改DEBUG False。我在settings.py顶部写# DEBUG 开关 # 生产环境务必设为 False毕设答辩时可临时设 True 方便调试 DEBUG True # ← 此行答辩前 1 小时改为 False # 为什么重要因为DEBUG True时 Django 会暴露完整错误堆栈含路径、变量值老师演示时若输错密码页面直接打印OperationalError: (1045, Access denied for user rootlocalhost)——这等于告诉老师“你数据库密码写错了”。设为False后错误变Server Error (500)体面得多。6.3 Vue 的package.json里scripts必须包含build:prod并指定--mode production很多学生npm run build后直接丢dist/给老师结果老师打开空白页。原因是 Vue CLI 默认构建用development模式process.env.NODE_ENV不是production导致 axios baseURL 读错。// frontend/package.json scripts: { serve: vue-cli-service serve, build: vue-cli-service build, // ← 这是默认开发模式 build:prod: vue-cli-service build --mode production // ← 答辩前必须运行这个 }然后在vue.config.js中module.exports { mode: production, // ← 强制生产模式 devServer: { proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true, } } } }我的教训上届学生答辩时用build命令老师电脑上axios的 baseURL 解析成http://localhost:8080/api/因.env.development优先级高于vue.config.js而他的后端跑在8000端口请求全 404。改成build:prod后process.env.NODE_ENV正确为productionaxios读取vue.config.js的 proxy 配置当场救场。希望帮到你。本文还有配套的精品资源点击获取