基于FastAPI与Vue3的图书馆管理系统全栈开发实战

如果你正在寻找一个完整的、可运行的毕业设计项目或者想学习如何用现代技术栈构建一个实用的管理系统那么这篇文章就是为你准备的。今天要拆解的是一个基于 Python 后端FastAPI和 Vue3 前端并集成了微信小程序的图书馆管理系统。它不仅仅是一个“玩具项目”而是一个涵盖了前后端分离、API设计、数据库操作、微信小程序开发等多个核心技能点的综合实战案例。很多同学在做毕业设计或练手项目时常常陷入几个困境要么是找来的源码环境复杂、依赖缺失根本跑不起来要么是技术栈老旧学了也用不上再或者就是功能过于简单缺乏完整的业务流程。这个“图书馆管理系统”项目恰好能避开这些坑。它使用当前主流且高效的 FastAPI 和 Vue3代码结构清晰并且模拟了真实的图书借阅、归还、查询、用户管理等核心场景。更重要的是它提供了微信小程序作为移动端入口这让你能接触到更贴近实际业务的应用形态。本文将带你从零开始彻底搞懂这个项目的技术选型理由、环境搭建步骤、核心代码逻辑以及如何将它部署运行起来。无论你是想直接复用完成毕设还是想深入学习这套技术栈的整合都能在这里找到清晰的路径。1. 为什么这个“图书馆管理系统”值得你花时间在开始看代码之前我们先要搞清楚这个项目的价值点在哪里。市面上管理系统模板很多但这个项目之所以适合学习和毕设是因为它在技术组合和业务完整性上做了一个很好的平衡。首先技术栈选型非常“新”且“实用”。后端没有用传统的 Django 或 Flask而是选择了FastAPI。FastAPI 的优势在于异步支持好、性能高、自动生成交互式 API 文档Swagger UI这对于前后端协作和 API 调试极其友好。前端则采用了Vue 3的 Composition API 写法这是当前 Vue 生态的主流和未来方向。数据库方面通常搭配SQLAlchemyORM 和MySQL/SQLite兼顾了开发效率和学习价值。微信小程序端则让你体验如何将后端 API 服务于移动端应用。其次业务逻辑完整覆盖典型 CRUD 和状态流转。一个完整的图书馆系统远不止增删改查。它需要处理图书的生命周期入库、上架、借出、归还、下架。用户的状态管理注册、登录、借阅权限、借阅历史。借阅业务规则可借数量限制、借阅期限、超期处理、预约机制。管理员功能数据统计、用户管理、图书分类管理。这个项目基本涵盖了这些核心流程为你提供了一个理解业务建模的绝佳样本。最后项目结构清晰易于学习和扩展。一个好的项目源码其目录结构本身就在传授最佳实践。你会看到如何组织路由Routers、数据模型Models、请求响应模型Schemas、依赖注入等。这种结构化的代码比一堆写在一个文件里的“面条代码”更有学习价值也更容易在此基础上添加新功能比如引入 Redis 缓存热门图书、增加 Elasticsearch 实现全文检索等。所以这个项目不仅是一个“能跑通”的毕设更是一个可以深入挖掘的现代 Web 全栈开发学习范本。2. 技术栈核心概念与项目架构解析在动手之前我们需要对用到的几个关键技术有一个清晰的认识理解它们在这个项目中扮演的角色。2.1 后端FastAPI —— 不仅仅是另一个 Web 框架FastAPI 是一个用于构建 API 的现代、快速高性能的 Web 框架。它的核心优势在于类型提示与自动验证利用 Python 的类型提示Type HintsFastAPI 可以自动校验请求数据无效数据在进入你的函数之前就会被拦截并返回清晰的错误信息。自动交互式 API 文档基于 OpenAPI 标准框架会自动生成/docsSwagger UI和/redoc文档。前端开发者可以直接在浏览器里查看和测试所有接口极大提升联调效率。异步支持原生支持async/await让你能轻松编写高性能的异步代码处理高并发 I/O 操作如数据库查询、调用外部 API时更高效。依赖注入系统提供了一套优雅的依赖注入机制可以很方便地管理数据库会话、用户认证等需要共享的资源或逻辑。在这个图书馆系统中FastAPI 负责提供所有数据操作的 RESTful API比如GET /api/books获取图书列表、POST /api/borrow借阅图书。2.2 前端Vue 3 与 Composition APIVue 3 是 Vue.js 的最新主要版本其最大的变化是引入了Composition API。与 Vue 2 的 Options API 相比Composition API 允许你根据逻辑功能来组织代码而不是根据选项data, methods, computed。这使得代码在复杂组件中更容易理解和复用。例如管理“借阅记录”的所有逻辑数据获取、状态、方法可以封装在一个独立的useBorrowRecord函数中然后在组件里直接使用。这对于管理图书馆系统中相对复杂的用户状态和图书状态非常有利。2.3 微信小程序微信小程序作为移动端入口其开发与 Web 前端Vue有相似之处都是组件化、数据驱动但也有其特殊规范如 WXML/WXSS、小程序生命周期、微信 API 调用。在本项目中小程序端主要负责提供移动化的用户界面通过 wx.request 调用后端 FastAPI 提供的接口实现扫码查书、个人借阅记录查看等功能。理解如何设计供小程序调用的 API通常需要处理登录态如 token是关键。2.4 项目架构概览一个典型的前后端分离项目结构如下library-management-system/ ├── backend/ # FastAPI 后端项目 │ ├── app/ │ │ ├── api/ # 路由端点 │ │ │ ├── endpoints/ # 具体路由文件 (books.py, users.py, borrow.py) │ │ │ └── deps.py # 依赖项如获取当前用户 │ │ ├── core/ # 核心配置 (config.py, security.py) │ │ ├── models/ # SQLAlchemy 数据模型 (book.py, user.py) │ │ ├── schemas/ # Pydantic 请求/响应模型 │ │ ├── crud/ # 数据库增删改查操作 │ │ └── main.py # 应用入口 │ ├── requirements.txt # Python 依赖 │ └── .env # 环境变量 ├── frontend/ # Vue 3 前端项目 │ ├── src/ │ │ ├── views/ # 页面组件 (Home.vue, BookList.vue) │ │ ├── components/ # 可复用组件 (BookCard.vue) │ │ ├── router/ # 路由配置 │ │ ├── stores/ # 状态管理 (Pinia) │ │ ├── api/ # 封装后端接口请求 │ │ └── App.vue │ └── package.json └── miniprogram/ # 微信小程序项目 ├── pages/ # 小程序页面 ├── utils/ # 工具函数如 request 封装 └── app.js # 小程序入口这种结构清晰地将不同职责的代码分开是构建可维护应用的基础。3. 环境准备搭建你的开发战场在运行任何代码之前一个正确、隔离的开发环境是成功的第一步。我们将分别搭建后端、前端和小程序的环境。3.1 后端 (FastAPI) 环境准备1. 安装 Python确保你的电脑安装了 Python 3.7 及以上版本。在终端输入python --version或python3 --version检查。2. 创建虚拟环境虚拟环境可以隔离项目依赖避免包冲突。强烈建议为每个项目单独创建。# 进入你的项目目录 cd path/to/library-management-system/backend # 创建虚拟环境假设使用 venv python -m venv venv # 激活虚拟环境 # Windows: venv\Scripts\activate # macOS/Linux: source venv/bin/activate激活后终端提示符前会出现(venv)字样。3. 安装依赖将项目提供的requirements.txt文件放在backend目录下然后安装。pip install -r requirements.txt一个典型的requirements.txt内容可能包含fastapi0.104.1 uvicorn[standard]0.24.0 sqlalchemy2.0.23 pymysql1.1.0 pydantic2.5.0 python-jose[cryptography]3.3.0 passlib[bcrypt]1.7.4 python-multipart0.0.6注意具体版本请以你获取的项目源码为准。如果项目没有提供上述版本是一个较新且兼容性较好的组合。4. 数据库准备项目可能使用 SQLite文件数据库无需安装或 MySQL。如果是 MySQL你需要先安装并启动 MySQL 服务然后创建一个数据库。CREATE DATABASE library_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;然后在后端的配置文件如app/core/config.py中修改数据库连接字符串。3.2 前端 (Vue 3) 环境准备1. 安装 Node.js 和 npm前往 Node.js 官网下载并安装 LTS 版本。安装后在终端检查node --version npm --version2. 创建 Vue 项目如果项目未提供源码如果你拿到的是完整的项目源码可以跳过此步。如果需要从头创建可以使用 Vue 官方脚手架 Vite。# 进入前端目录 cd path/to/library-management-system/frontend # 使用 Vite 创建 Vue 项目 npm create vuelatest . # 按照提示选择需要的功能Router, Pinia, ESLint等3. 安装项目依赖进入frontend目录安装依赖包。npm install项目可能会用到axios网络请求、element-plusUI组件库、pinia状态管理等。3.3 微信小程序环境准备1. 下载开发者工具前往微信公众平台下载并安装微信开发者工具。2. 导入项目打开微信开发者工具选择“导入项目”定位到miniprogram目录。你需要一个 AppID如果没有可以使用测试号。3. 配置服务器域名在小程序后台或开发者工具的“详情”-“项目配置”中配置request合法域名指向你将要运行的后端服务器地址如http://localhost:8000。注意本地开发时需要在微信开发者工具中开启“不校验合法域名”选项。4. 核心流程拆解从数据库到页面展示理解了环境我们来看系统是如何运转的。我们以“用户借阅一本图书”这个核心业务流程为例拆解其前后端协作的全过程。流程概览前端Vue/小程序触发动作用户在图书列表页点击“借阅”按钮。前端发送请求前端代码组织请求数据如图书ID、用户Token调用对应的后端 API如POST /api/borrow。后端FastAPI处理请求 a.路由接收FastAPI 的路由器将请求导向对应的处理函数。 b.依赖验证通过依赖注入系统验证用户 Token获取当前用户信息。 c.数据验证使用 Pydantic 模型验证请求体的数据格式。 d.业务逻辑在 CRUD 层或服务层执行复杂的业务逻辑检查图书是否存在且状态为“可借”。检查用户是否已达最大借阅数量。检查用户是否有超期未还记录。 e.数据库操作通过 SQLAlchemy 创建一条新的借阅记录并更新图书的状态为“已借出”。 f.返回响应将操作结果成功或失败原因封装成 JSON 返回给前端。前端更新界面前端收到成功响应后更新页面状态例如将按钮变为“已借阅”并刷新借阅记录列表。这个流程清晰地展示了前后端分离架构下数据是如何通过 API 流动并驱动界面变化的。每一个环节都有对应的代码模块负责。5. 关键代码实现与讲解接下来我们深入到代码层面看看几个核心功能是如何实现的。这里会提供关键代码片段并加以解释。5.1 后端FastAPI 数据模型与路由数据模型 (SQLAlchemy)首先我们定义数据库中的“图书”表长什么样。在backend/app/models/book.py中from sqlalchemy import Column, Integer, String, Text, DateTime, Enum from sqlalchemy.sql import func from app.db.base_class import Base # 假设有一个基类 class Book(Base): __tablename__ books id Column(Integer, primary_keyTrue, indexTrue) isbn Column(String(13), uniqueTrue, indexTrue, nullableFalse) title Column(String(200), nullableFalse) author Column(String(100)) publisher Column(String(100)) publish_date Column(String(20)) category Column(String(50)) location Column(String(50)) # 馆藏位置 status Column(Enum(available, borrowed, maintenance, namebook_status), defaultavailable) cover_image Column(String(500)) # 封面图片链接 description Column(Text) created_at Column(DateTime(timezoneTrue), server_defaultfunc.now()) updated_at Column(DateTime(timezoneTrue), onupdatefunc.now())解释这里用 SQLAlchemy 的Column定义了字段。Enum类型用于限定图书状态。server_default和onupdate用于自动管理时间戳。请求/响应模型 (Pydantic)在backend/app/schemas/book.py中我们定义 API 接口“收”和“发”的数据格式。from pydantic import BaseModel, Field from typing import Optional from datetime import datetime class BookBase(BaseModel): isbn: str Field(..., min_length10, max_length13, descriptionISBN号) title: str Field(..., min_length1, max_length200, description书名) author: Optional[str] None publisher: Optional[str] None class BookCreate(BookBase): 创建图书时使用的模型 pass class BookUpdate(BaseModel): 更新图书时使用的模型允许部分更新 title: Optional[str] None author: Optional[str] None status: Optional[str] None class BookInDB(BookBase): 从数据库读取的完整模型 id: int status: str created_at: datetime updated_at: Optional[datetime] None class Config: from_attributes True # 兼容旧版 orm_mode允许从ORM对象转换解释BookCreate用于接收创建请求BookInDB用于向客户端返回数据。Pydantic 会自动进行数据验证和序列化。API 路由端点在backend/app/api/endpoints/books.py中实现获取图书列表的接口from fastapi import APIRouter, Depends, HTTPException, Query from sqlalchemy.orm import Session from typing import List, Optional from app.db.session import get_db from app import crud, schemas router APIRouter() router.get(/, response_modelList[schemas.BookInDB]) def read_books( db: Session Depends(get_db), skip: int Query(0, ge0), limit: int Query(100, le200), title: Optional[str] None, author: Optional[str] None, ): 获取图书列表。 - **skip**: 跳过多少条记录用于分页 - **limit**: 返回的最大记录数 - **title**: 按书名模糊搜索 - **author**: 按作者名模糊搜索 # 调用 CRUD 层的函数 books crud.book.get_multi(db, skipskip, limitlimit, titletitle, authorauthor) return books解释router.get(“/”)定义了一个 GET 请求的路由。Depends(get_db)是 FastAPI 的依赖注入用于获取数据库会话。Query用于定义查询参数及其验证规则。response_model确保了返回的数据格式符合BookInDB模型。5.2 前端Vue 3 组件与状态管理封装 API 请求在frontend/src/api/book.js中我们使用 axios 封装对后端图书接口的调用。import request from /utils/request // 一个基于 axios 封装的实例 export function getBookList(params) { return request({ url: /api/books, method: get, params // 包含 skip, limit, title 等参数 }) } export function borrowBook(bookId) { return request({ url: /api/borrow/${bookId}, method: post }) }Vue 组件中使用在frontend/src/views/BookList.vue组件中template div el-input v-modelsearchTitle placeholder搜索书名 inputhandleSearch / el-table :databookList stylewidth: 100% el-table-column proptitle label书名 / el-table-column propauthor label作者 / el-table-column propstatus label状态 template #defaultscope el-tag :typescope.row.status available ? success : info {{ scope.row.status available ? 可借阅 : 已借出 }} /el-tag /template /el-table-column el-table-column label操作 template #defaultscope el-button sizesmall :disabledscope.row.status ! available clickhandleBorrow(scope.row.id) 借阅 /el-button /template /el-table-column /el-table el-pagination current-changehandlePageChange :current-pagecurrentPage :page-sizepageSize :totaltotal layoutprev, pager, next / /div /template script setup import { ref, onMounted } from vue import { getBookList, borrowBook } from /api/book import { ElMessage } from element-plus const bookList ref([]) const searchTitle ref() const currentPage ref(1) const pageSize ref(10) const total ref(0) const fetchBooks async () { try { const params { skip: (currentPage.value - 1) * pageSize.value, limit: pageSize.value, title: searchTitle.value || undefined } const res await getBookList(params) bookList.value res.data total.value res.headers[x-total-count] // 假设后端返回总数 } catch (error) { ElMessage.error(获取图书列表失败) } } const handleBorrow async (bookId) { try { await borrowBook(bookId) ElMessage.success(借阅成功) fetchBooks() // 刷新列表 } catch (error) { ElMessage.error(error.response?.data?.detail || 借阅失败) } } const handleSearch () { currentPage.value 1 fetchBooks() } const handlePageChange (page) { currentPage.value page fetchBooks() } onMounted(() { fetchBooks() }) /script解释这是一个典型的 Vue 3 Composition API 组件。script setup语法更简洁。我们使用ref创建响应式数据onMounted生命周期钩子在组件挂载后调用fetchBooks获取数据。handleBorrow函数展示了如何调用 API 并处理成功/失败反馈。5.3 微信小程序调用后端 API在小程序的页面 JS 文件中调用借阅接口// miniprogram/pages/bookDetail/bookDetail.js Page({ data: { bookId: , bookInfo: null, canBorrow: false }, onLoad(options) { this.setData({ bookId: options.id }) this.fetchBookDetail() }, // 获取图书详情 fetchBookDetail() { const that this wx.request({ url: http://your-backend-domain/api/books/${this.data.bookId}, method: GET, header: { Authorization: Bearer ${wx.getStorageSync(token)} // 携带 token }, success(res) { if (res.statusCode 200) { that.setData({ bookInfo: res.data, canBorrow: res.data.status available }) } } }) }, // 借阅图书 handleBorrow() { const that this wx.showModal({ title: 提示, content: 确认借阅这本书吗, success(res) { if (res.confirm) { wx.request({ url: http://your-backend-domain/api/borrow/${that.data.bookId}, method: POST, header: { Authorization: Bearer ${wx.getStorageSync(token)} }, success(res) { if (res.statusCode 201) { wx.showToast({ title: 借阅成功 }) that.fetchBookDetail() // 刷新页面状态 } else { wx.showToast({ title: res.data.detail || 借阅失败, icon: none }) } }, fail() { wx.showToast({ title: 网络错误, icon: none }) } }) } } }) } })解释小程序使用wx.request发起网络请求。注意需要在header中携带认证 Token如果接口需要。通过setData更新页面数据使用wx.showModal和wx.showToast进行用户交互。6. 如何运行与验证项目假设你已经按照第3步准备好了环境并拿到了完整的项目源码。第一步启动后端服务确保在backend目录下虚拟环境已激活。初始化数据库如果项目使用 Alembic 管理迁移alembic upgrade head或者如果项目提供了初始化 SQL 脚本则在数据库中执行它。启动 FastAPI 开发服务器uvicorn app.main:app --reload --host 0.0.0.0 --port 8000--reload参数使得代码修改后服务器会自动重启便于开发。验证后端打开浏览器访问http://localhost:8000/docs。你应该能看到自动生成的 Swagger UI 接口文档并可以在这里直接测试各个 API。第二步启动前端服务进入frontend目录。安装依赖如果尚未安装并启动开发服务器npm install npm run dev根据终端输出访问对应的本地地址通常是http://localhost:5173。你应该能看到前端页面。第三步配置并连接前后端前端需要知道后端 API 的地址。通常在frontend/.env.development或frontend/vite.config.js中配置代理将/api开头的请求转发到后端。// vite.config.js (Vite) export default defineConfig({ server: { proxy: { /api: { target: http://localhost:8000, changeOrigin: true, } } } })这样前端代码中请求/api/books就会被转发到http://localhost:8000/api/books。第四步运行微信小程序用微信开发者工具打开miniprogram目录。在开发者工具的“详情”-“本地设置”中勾选“不校验合法域名、web-view业务域名、TLS 版本以及 HTTPS 证书”。修改小程序代码中的请求 URL将其指向你的本地后端地址如http://localhost:8000。注意微信小程序要求线上环境必须使用 HTTPS本地开发时可临时使用 HTTP。点击编译即可在模拟器或真机上预览小程序。验证核心功能在 Swagger UI (/docs) 或使用 Postman 测试POST /api/auth/login登录获取 token。在前端或小程序登录。在前端图书列表页尝试搜索、翻页。找到状态为“可借”的图书点击“借阅”按钮。观察页面状态变化按钮禁用、图书状态更新并在 Swagger UI 中调用GET /api/borrow/records查看借阅记录是否生成。7. 常见问题与排查思路在运行过程中你几乎一定会遇到一些问题。下面是一些常见问题及其解决方法。问题现象可能原因排查方式解决方案后端启动报错ModuleNotFoundError1. 虚拟环境未激活。2. 依赖未安装。3. Python 路径问题。1. 检查终端是否有(venv)前缀。2. 运行pip list查看关键包fastapi, sqlalchemy是否存在。3. 检查PYTHONPATH。1. 激活虚拟环境。2. 在项目根目录执行pip install -r requirements.txt。访问localhost:8000/docs无响应1. 后端服务未成功启动。2. 端口被占用。3. 防火墙阻止。1. 检查终端 uvicorn 是否有成功启动的日志。2. 使用netstat -ano | findstr :8000(Win) 或lsof -i :8000(Mac/Linux) 查看端口占用。1. 根据错误日志修复代码或依赖问题。2. 更换端口如--port 8001。3. 检查防火墙设置。前端启动报错Cannot find module1.node_modules缺失。2. 包版本冲突。1. 检查frontend目录下是否有node_modules文件夹。2. 查看终端报错信息看是哪个模块找不到。1. 删除node_modules和package-lock.json重新运行npm install。2. 根据错误信息尝试安装特定版本包。前端页面能打开但列表为空/请求失败1. 后端 API 地址配置错误。2. 跨域问题CORS。3. 后端接口本身有错误。1. 打开浏览器开发者工具F12查看“网络(Network)”标签页请求是否404或500。2. 查看控制台是否有 CORS 错误。3. 直接在 Swagger UI 中测试对应接口。1. 检查前端代理或 API 基础 URL 配置。2. 在后端 FastAPI 应用中添加 CORS 中间件。3. 根据后端日志修复接口逻辑。微信开发者工具报“不在以下 request 合法域名列表中”小程序未配置服务器域名或未开启不校验选项。检查开发者工具“详情”-“项目配置”中的域名列表。开发阶段勾选“不校验合法域名...”。上线前必须在小程序后台配置正式的 HTTPS 域名。数据库操作失败sqlalchemy.exc.OperationalError1. 数据库服务未启动。2. 连接字符串错误。3. 表不存在。1. 检查 MySQL 或 SQLite 服务是否运行。2. 核对config.py中的数据库 URL。3. 检查是否执行了数据库迁移或初始化脚本。1. 启动数据库服务。2. 修正连接字符串用户名、密码、主机、数据库名。3. 运行alembic upgrade head或执行建表 SQL。登录成功但后续接口返回 401 未授权1. Token 未正确传递。2. Token 过期。3. 后端认证逻辑有误。1. 检查请求头Authorization是否正确格式化为Bearer token。2. 检查 Token 生成时的有效期设置。1. 确保前端在请求头中正确设置了 Token。2. 实现 Token 刷新机制。3. 检查后端依赖项get_current_user的逻辑。8. 最佳实践与项目扩展建议当你成功运行基础项目后可以考虑从以下几个方向进行优化和扩展这会让你的项目从“毕业设计水平”提升到“接近生产可用水平”。1. 安全性增强密码存储确保使用passlib的bcrypt对用户密码进行哈希存储绝对不要明文存储。SQL 注入防护坚持使用 SQLAlchemy ORM 或参数化查询不要手动拼接 SQL 字符串。API 限流对登录、借阅等关键接口引入限流如使用slowapi防止恶意请求。输入验证充分利用 Pydantic 模型进行严格的输入验证和清理。2. 性能优化数据库索引为经常用于查询和排序的字段如books.isbn,books.title,borrow_records.user_id添加索引。分页查询所有列表接口都必须支持分页避免一次性拉取大量数据。后端应在返回数据的同时返回数据总数如使用X-Total-Count头。缓存对于不经常变动的数据如图书分类、热门图书列表可以引入 Redis 进行缓存。3. 代码结构与可维护性服务层 (Service Layer)在 CRUD 和路由之间引入服务层处理复杂的业务逻辑如借阅规则校验、库存扣减使路由函数更简洁。集中化错误处理使用 FastAPI 的异常处理器 (app.exception_handler) 统一处理常见异常返回结构化的错误信息。日志记录配置完整的日志系统记录请求信息、错误堆栈便于线上排查问题。4. 功能扩展毕业设计加分项图书预约功能当图书被借出时允许其他用户预约归还后通知预约者。超期提醒定时任务检查借阅超期的记录通过模拟邮件或站内信提醒用户。数据统计看板为管理员提供数据可视化看板展示借阅趋势、热门图书、用户活跃度等。扫码入库/借阅利用微信小程序的扫码能力实现通过扫描图书 ISBN 条形码快速录入或借阅。多端适配基于同一套后端 API不仅可以开发微信小程序还可以用 Uni-App 快速生成 H5 和 App或使用 Flutter 开发另一个移动端。5. 部署上线后端部署可以考虑使用 Docker 容器化然后部署到云服务器如阿里云 ECS或 PaaS 平台如 Heroku, Railway。使用 Gunicorn 或 Uvicorn 配合 Nginx 作为生产环境服务器。前端部署执行npm run build生成静态文件部署到 Nginx 或对象存储如阿里云 OSS CDN。小程序上线在微信公众平台提交审核配置好生产环境的 HTTPS API 域名。通过这个基于 Python FastAPI 和 Vue3 的图书馆管理系统项目你实践了一个现代 Web 全栈应用从零到一的核心流程。它不仅帮你完成了毕业设计更重要的是它为你串联起了后端 API 设计、前端交互开发、数据库操作和移动端适配等一系列关键技能。建议你在理解现有代码的基础上尝试实现一个扩展功能比如“预约系统”或“数据看板”这能让你对业务逻辑和代码架构有更深的理解。项目中的许多模式如依赖注入、Composition API、RESTful 设计是通用的掌握它们能让你在面对其他框架或业务时也游刃有余。