这次我们来看一个很适合毕业设计、工程实训和技术博客练手的全栈项目基于 SpringBoot3 Vue3 的高校/园区一体化智慧管理平台并且它把 AI 能力也纳入了平台整体设计不是只做一个简单的 CRUD 后台。这类项目的核心价值在于它不只是一套“增删改查”的管理系统而是把校园/园区里的人、事、物、数据统一到同一个平台里做管理同时借助 AI 接口实现智能问答、信息分类、数据分析和辅助决策。简单说就是用 SpringBoot3 做后端服务用 Vue3 做前端界面再接入 AI 能力提升系统的智能化程度。如果你打算用这个题目做毕业论文或者想基于 SpringBoot3 Vue3 完整搭建一个带 AI 的 Web 项目这篇文章可以给你一条清晰的技术路线。我会从项目功能设计、技术选型、环境准备、后端工程搭建、前端工程搭建、AI 接口接入、联调测试、API 设计、问题排查到毕业论文结构完整过一遍。1. 项目核心能力速览先给一张整体速览表帮助你先判断这个项目值不值得做、工作量在哪个量级。能力项说明项目类型前后端分离 Web 管理平台适用于高校、科技园区、产业园区等场景后端技术栈SpringBoot3、Spring Security、MyBatis-Plus、Redis、MySQL前端技术栈Vue3、Vite、Pinia、Vue Router、Element Plus、EChartsAI 能力智能问答、文本分类、内容摘要、数据辅助分析具体取决于接入的 AI 服务或模型核心功能模块用户管理、权限管理、公告管理、楼宇/场地管理、设备管理、访客管理、报修管理、数据可视化大屏、AI 助手硬件要求普通开发电脑即可AI 功能若调云端 API 则无需独显若本地部署模型则需要独立显卡启动方式IDEA 启动后端 npm run dev 启动前端数据库MySQL 8.xRedis 用于缓存和会话是否支持 API支持RESTful 接口设计可独立对接第三方系统或小程序是否支持批量任务支持如批量导入用户、批量导出报表、定时数据统计适合场景毕业论文、课程设计、实习实训、中小型园区管理平台原型这里说明一下AI 部分可以做“轻接入”也可以做“深集成”。轻接入指的是调用云端大模型 API 完成智能问答、摘要、分类等任务深集成指的是在平台里封装一套可替换的 AI 服务层后续可以换成本地模型或更强的模型。毕业论文和实际演示阶段轻接入即可满足要求重点是把技术链路跑通。2. 典型功能模块与技术选型高校/园区一体化智慧管理平台的“一体化”体现在多个管理对象在同一个平台上统一处理数据互通业务联动。从实际需求来看下面这些模块是最常见的也最适合写进毕业论文的功能架构。2.1 用户与权限管理平台涉及的角色一般包括系统管理员、园区管理员、普通用户、访客。每个角色看到的菜单和操作权限不同。技术实现上建议使用 Spring Security JWT 做认证和授权。用户登录成功后签发 JWT前端把 Token 存在 Pinia 或 localStorage 中每次请求在请求头带上 Token。后端通过拦截器或过滤器校验 Token并根据用户角色控制接口访问权限。推荐表结构sys_user用户表字段包括 id、username、password、real_name、phone、avatar、role_id、status、create_time。sys_role角色表。sys_menu菜单表用于动态生成前端路由。sys_user_role用户与角色关联表。前端使用 Vue Router 的动态路由机制根据后端返回的菜单列表注册路由这样不同角色登录系统后看到的菜单就是不一样的。2.2 园区资源管理这是平台的业务核心包括楼宇信息、房间/场地信息、设备信息、场地预约。比如校园场景下就是教学楼、实验室、会议室、体育场馆的统筹管理园区场景下就是办公楼、工位、会议室、公共设备的管理。核心功能是楼宇/场地信息的增删改查。场地预约申请与审批流程。设备信息的录入、状态变更和维修记录。场地使用情况的可视化展示。业务上要处理好“同一时间段同一场地不能被重复预约”的并发问题建议使用 Redis 分布式锁或数据库唯一约束配合事务来解决。2.3 报修与工单管理这个模块非常能体现平台的实际价值。用户提交报修工单系统根据报修类型自动分配给对应的维修人员维修人员处理完成后更新工单状态用户可以对服务进行评价。工单的状态流转建议设计为待受理 - 已派单 - 处理中 - 已完成 - 已评价后端使用状态机或枚举来管理状态流转前端根据状态展示不同的操作按钮。2.4 公告与消息中心系统管理员可以发布公告公告可以指定接收范围。消息中心负责站内消息、工单状态变更通知、审批结果通知的推送。可以在公告发布或工单状态变更时异步生成站内消息记录用户登录后在消息中心查看未读消息。这里可以引入 Spring 的Async或消息队列来降低接口延迟。2.5 数据可视化大屏智慧管理平台通常需要一个数据总览页面用图表展示核心指标今日访客数量、预约数量、报修数量。场地使用率、设备在线率。近 7 天工单处理趋势。用户角色分布。前端使用 ECharts 完成图表渲染后端提供统计数据接口。统计数据建议用定时任务预处理比如每天凌晨统计前一天的数据写入统计表查询时直接查汇总数据避免实时聚合对业务表造成压力。2.6 AI 助手模块AI 助手是平台的亮点模块可以做成一个“智能客服 数据助手”的对话窗口。用户输入自然语言问题AI 返回回答同时支持把平台内的一些数据统计结果以自然语言的形式返回给用户。常见实现方式有三种直接调用云端大模型 API把用户问题发送给大模型并让大模型基于预设的角色和平台知识库回答。这种方式最简单效果稳定。接入向量数据库先把平台的使用文档、政策文件、常见问题做向量化存储用户提问时先检索相关片段再把片段拼入 Prompt 传给大模型。这种方式回答更可控适合做“文档问答”。在本地部署小规模开源模型通过 Ollama、vLLM 等工具提供 OpenAI 兼容接口后端统一封装调用。这种方式不依赖外部网络但对本机硬件有一定要求。如果是毕业论文项目建议用第一种或第二种方式理由有三点开发周期短不需要额外维护模型服务。效果稳定,不容易在答辩演示时翻车。可以把“Prompt 工程设计”作为论文的一个创新点来写。第 3 章我会给出三种方式在后端的具体封装思路。3. 适用场景与使用边界这个项目适合谁我梳理了四类典型人群。目标人群使用方式预期收益计算机相关专业毕业生基于该题目完成毕业论文设计与实现技术栈新、有 AI 亮点、工作量可量化Java 全栈学习者跟随技术路线完成一个完整项目掌握 SpringBoot3 Vue3 前后端分离开发全流程高校/园区信息化建设者作为平台原型进行二次开发快速验证管理需求确定系统边界培训机构/实训讲师作为实训项目或教学案例覆盖后端、前端、AI、数据库等多层技术这个项目能解决的问题也很明确把分散的线下管理流程比如纸质报修、电话预约、人工统计统一到线上平台。打破数据孤岛让用户、场地、设备、工单数据在一个数据库中互通。借助 AI 能力降低信息检索和数据分析的使用门槛普通用户不需要看懂后台报表直接问 AI 就能得到答案。但它不适合做什么也要说清楚它不适合直接作为生产级的大型园区管理系统使用。真正的商用系统需要对接硬件设备、门禁系统、支付系统、短信服务等本项目的定位是平台原型和技术演示。它不适合做成“什么功能都有”的巨型系统。毕业论文项目讲究的是边界清晰、功能完整功能越多越难做深。最后是合规边界这一点必须单独强调平台上涉及用户姓名、手机号、人脸信息等个人敏感数据必须遵循最小化采集原则并做脱敏展示。如果接入了人脸识别或访客拍照功能请确保有明确的用户授权协议并在论文中说明数据保护措施。AI 生成的内容可能存在错误或偏见平台需要在页面上展示“AI 生成内容仅供参考”的提示不要把 AI 输出作为管理决策的唯一依据。如果调用的 AI 模型或 API 来自第三方服务需要确认服务条款和使用边界不要传播或存储违禁内容。项目中使用到的图片素材、开源组件注意保留版权信息和开源协议声明。4. 本地开发环境准备开始编码之前先把开发环境准备好。下面是一份通用清单版本号以你自己机器上实际安装为准。环境项推荐版本用途JDKJDK 17 及以上SpringBoot3 要求最低 Java 17Maven3.8 或更高后端依赖管理Node.js18 或 20 LTS前端工程运行npm / pnpmnpm 9 / pnpm 8前端依赖安装MySQL8.0 或 8.4业务数据存储Redis6.x 或 7.x缓存、Session、分布式锁IDEAIntelliJ IDEA 2023后端开发 IDEVSCode / WebStorm任意较新版本前端开发 IDE浏览器Chrome / Edge前端调试4.1 JDK 与 Maven 配置SpringBoot3 对 JDK 版本有硬性要求需要用 JDK 17 以上。安装好 JDK 后在命令行里执行验证命令java -version确保显示的版本号是 17 或更高。然后检查 Mavenmvn -vMaven 需要配置国内镜像源否则首次下载 SpringBoot3 相关依赖会比较慢。在~/.m2/settings.xml中配置阿里云镜像mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror这里要提醒一句具体仓库地址以阿里云 Maven 官方最新配置为准不同时间段可能调整。4.2 Node.js 与包管理器前端工程使用 Vite 作为构建工具Vite 对 Node.js 版本有要求。安装 Node.js 后执行node -v npm -v如果已经在用 pnpm也可以pnpm -v没有安装 pnpm 的用 npm 即可。4.3 MySQL 与 Redis 准备MySQL 需要提前创建好数据库字符集建议使用utf8mb4CREATE DATABASE IF NOT EXISTS smart_campus DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;Redis 在本地启动一个默认实例即可默认端口 6379。如果你的 Redis 设置了密码在后端配置文件中对应修改。4.4 端口规划前后端分离项目需要提前规划端口避免冲突。我建议这样分配服务端口后端 SpringBoot8080前端 Vite Dev Server5173MySQL3306Redis6379前后端联调时前端通过 Vite 的代理把/api请求转发到后端的 8080 端口这样可以避免跨域问题。5. 后端 SpringBoot3 工程搭建后端工程是整个平台的核心下面从工程结构、依赖配置、核心代码三个层面展开。5.1 创建工程与依赖可以直接在 IDEA 中通过 Spring Initializr 创建 SpringBoot3 项目也可以使用 start.spring.io 生成后导入。需要引入的核心依赖包括dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-redis/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-spring-boot3-starter/artifactId version3.5.7/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies注意MyBatis-Plus 的 3.5.7 版本是当前一个相对稳定的版本其他版本也可以选择标准是兼容 SpringBoot3。实际版本号请以 Maven 中央仓库显示为准。5.2 工程包结构建议采用以下分层结构com.example.smartcampus ├── common │ ├── result统一返回结果 │ ├── exception全局异常处理 │ └── constant常量定义 ├── config安全配置、Redis 配置、跨域配置、AI 配置 ├── controller接口层 ├── service业务层 ├── mapper数据访问层 ├── entity数据库实体 ├── dto请求和响应对象 ├── utils工具类 └── aiAI 服务封装分层的核心思想是Controller 只接收参数和返回结果Service 处理业务逻辑Mapper 负责数据库操作AI 相关的代码单独放在ai包中方便后续替换或升级。5.3 配置文件在src/main/resources/application.yml中完成核心配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_campus?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password data: redis: host: localhost port: 6379 password: database: 0 servlet: multipart: max-file-size: 20MB max-request-size: 100MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto jwt: secret: your-secret-key-please-change-in-production expire: 86400000这里jwt.secret在真实部署时一定要修改并妥善保管。数据库密码、Redis 配置也要按实际环境调整。5.4 统一返回结果与全局异常处理后端接口需要统一返回格式这样前端处理起来比较方便。定义一个通用的返回结果类Data public class RT { private Integer code; private String message; private T data; public static T RT ok(T data) { RT r new R(); r.setCode(200); r.setMessage(操作成功); r.setData(data); return r; } public static T RT fail(String message) { RT r new R(); r.setCode(500); r.setMessage(message); return r; } }全局异常处理使用RestControllerAdvice捕获业务异常和参数校验异常避免错误堆栈直接暴露给前端。5.5 登录认证流程登录接口走的是 Spring Security 的认证流程。核心步骤如下用户提交用户名和密码。后端校验验证码、用户状态、密码。校验通过后签发 JWT并把用户信息存入 Redis设置过期时间。前端拿到 Token 后存入 Pinia 和 localStorage。后续请求在 Authorization 头中携带 Token。后端通过 JWT 过滤器解析 Token并把用户上下文写入SecurityContextHolder。自定义一个 JWT 认证过滤器大致框架如下Component public class JwtAuthenticationFilter extends OncePerRequestFilter { Autowired private JwtUtils jwtUtils; Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { String authHeader request.getHeader(Authorization); if (authHeader ! null authHeader.startsWith(Bearer )) { String token authHeader.substring(7); try { String username jwtUtils.parseToken(token); if (username ! null) { // 查询用户信息和权限构建 Authentication 并放入上下文 } } catch (Exception e) { // Token 无效或过期不做处理由后续拦截逻辑判断 } } filterChain.doFilter(request, response); } }这段代码是一个通用示例实际的用户查询、权限加载逻辑需要按项目结构补全。5.6 场地预约的并发防重场地预约是本项目里比较有技术含量的业务。同一个场地、同一个时间段只能有一个有效预约。处理思路是预约申请时先查询冲突记录。使用数据库唯一索引或 Redis 分布式锁防止并发重复提交。状态变更使用乐观锁版本号。使用 Redisson 实现分布式锁的伪代码RLock lock redissonClient.getLock(lock:room:book: roomId); try { if (lock.tryLock(3, 30, TimeUnit.SECONDS)) { // 检查冲突 // 创建预约 } } finally { if (lock.isHeldByCurrentThread()) { lock.unlock(); } }这样做的好处是即使多个用户同时提交预约请求也能保证同一时间段只有一个请求能成功创建预约记录。6. 前端 Vue3 工程搭建前端使用 Vue3 Vite Pinia Vue Router Element Plus这套组合已经是非常成熟的管理后台开发方案。6.1 初始化工程使用 Vite 创建项目npm create vuelatest smart-campus-web如果使用默认的 create-vue 模板可以按需选择 Router、Pinia、ESLint 等选项。进入项目目录后安装依赖cd smart-campus-web npm install npm install element-plus element-plus/icons-vue axios echarts pinia安装完成后启动开发服务器npm run dev默认访问地址是 http://localhost:5173。6.2 项目目录结构前端工程建议按以下目录划分src ├── api接口请求封装 ├── assets静态资源 ├── components通用组件 ├── layout布局组件 ├── router路由配置 ├── storesPinia 状态管理 ├── views页面组件 ├── utils工具函数 └── App.vue6.3 Axios 封装与请求拦截在src/utils/request.js中封装 Axios 实例统一处理 Token 注入和响应错误import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user import router from /router const request axios.create({ baseURL: /api, timeout: 30000 }) request.interceptors.request.use(config { const userStore useUserStore() if (userStore.token) { config.headers.Authorization Bearer ${userStore.token} } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { const userStore useUserStore() userStore.resetAuth() router.push(/login) } ElMessage.error(error.message || 网络异常) return Promise.reject(error) } ) export default request这里把 baseURL 设置为/api前端开发时通过 Vite 代理转发到后端 8080 端口。在vite.config.js中添加代理配置export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })6.4 动态路由与权限控制管理后台最常见的需求是不同角色登录后看到不同的菜单。实现思路是登录成功后后端返回用户信息和菜单列表。前端把菜单列表保存在 Pinia 中。通过router.addRoute动态添加路由。在路由前置守卫中检查用户是否已登录、是否已加载菜单。在用户 store 中核心逻辑大致如下import { defineStore } from pinia import { loginApi, getUserInfoApi, getUserMenusApi } from /api/user export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null, menus: [] }), actions: { async login(loginForm) { const res await loginApi(loginForm) this.token res.data.token localStorage.setItem(token, this.token) }, async fetchUserInfo() { const res await getUserInfoApi() this.userInfo res.data }, async fetchMenus() { const res await getUserMenusApi() this.menus res.data }, resetAuth() { this.token this.userInfo null this.menus [] localStorage.removeItem(token) } } })6.5 核心页面项目至少需要包含以下页面登录页 / 注册页。首页数据大屏展示核心统计图表。用户管理页支持用户列表、新增、编辑、禁用、批量导入。角色权限页配置角色和菜单权限。楼宇/场地管理页支持地图或列表展示。场地预约页支持按日期和场地查询空闲状态提交预约申请。报修工单页支持用户提交、维修人员处理、管理员分配。公告管理页支持发布、编辑、下线公告。AI 助手页以聊天窗口形式与 AI 交互同时支持预设快捷问题。每个页面的核心组件结构建议保持统一搜索栏 表格 分页 新增/编辑弹窗。6.6 数据可视化页面数据大屏页面使用 ECharts。在 Vue3 中使用 ECharts推荐用echarts核心库配合按需引入避免打包体积过大。一个简单的柱状图组件示例如下template div refchartRef stylewidth: 100%; height: 320px/div /template script setup import { ref, onMounted, onBeforeUnmount } from vue import * as echarts from echarts const chartRef ref(null) let chartInstance null onMounted(() { chartInstance echarts.init(chartRef.value) chartInstance.setOption({ title: { text: 近7日报修趋势, left: center }, xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五, 周六, 周日] }, yAxis: { type: value }, series: [{ type: bar, data: [12, 18, 15, 22, 30, 10, 8] }] }) }) onBeforeUnmount(() { if (chartInstance) { chartInstance.dispose() } }) /script实际项目中的图表数据应该从后端统计接口获取这里展示的是静态数据示例。7. AI 功能的接入方式AI 是项目标题中的亮点词也是毕业论文中可以重点展开的部分。下面给出三种接入方式从简单到复杂排列。7.1 方案一调用云端大模型 API这是最快速、最稳定的方案。后端统一封装一个 AIService 接口通过 HTTP 请求调用云端大模型服务。Service public class OpenAiCompatibleServiceImpl implements AIService { Value(${ai.api-url}) private String apiUrl; Value(${ai.api-key}) private String apiKey; Value(${ai.model}) private String model; Override public String chat(String userMessage, String systemPrompt) { // 构造请求体 MapString, Object requestBody new HashMap(); requestBody.put(model, model); requestBody.put(messages, List.of( Map.of(role, system, content, systemPrompt), Map.of(role, user, content, userMessage) )); requestBody.put(temperature, 0.7); // 发送 HTTP 请求 // 解析响应返回 content 字段 return responseContent; } }这里不绑定具体厂商因为不同厂商的 API 使用方式有差异但整体思路是一致的构造 Messages 数组发给模型服务解析返回文本。在配置文件里增加ai: api-url: https://your-ai-service.example.com/v1/chat/completions api-key: your-api-key model: your-model-name请求示例和响应解析代码可以在项目里进一步封装。7.2 方案二RAG 知识库问答如果希望 AI 的回答基于平台自身的资料比如使用手册、管理制度、常见问题推荐使用 RAG 方案将文档拆分成片段。通过 Embedding 模型将文本片段向量化存入向量数据库如 Milvus、Chroma、Pinecone。用户提问时先对问题进行向量化检索最相关的 Top-K 片段。把检索到的片段和用户问题一起组装成 Prompt发给大模型。大模型基于提供的片段生成回答并在回复中标注信息来源。在后端结构中RAG 的核心流程可以封装成一个独立的组件大致调用顺序如下用户输入 - 向量化 - 向量检索 - 拼接Prompt - 调用大模型 - 返回答案这种方案的论文亮点是“可解释、可溯源”AI 的每条回答都有文档出处这在高校/园区的信息咨询场景中非常有价值。7.3 方案三本地模型接入如果不想依赖外部 API可以在本机部署一个开源模型通过 Ollama 或类似工具暴露 OpenAI 兼容接口后端只需要把 API 地址指向本机即可。ollama pull qwen2.5:7b ollama serve然后后端调用 http://localhost:11434/v1/chat/completions。这种方式的好处是数据不出内网但需要注意硬件要求7B 级别模型建议至少 8GB 以上可用内存或独立显卡实际效果取决于你的设备。7.4 AI 与业务功能的结合AI 不只是做一个独立的聊天窗口还要和平台业务结合起来。可以设计成下面的形式用户问“今天有几个场地预约待审批”AI 先调用后端统计接口获取数据再把结果用自然语言回答。用户问“如何提交报修工单”AI 从知识库中检索使用指南并给出步骤。管理员问“上月工单平均处理时长是多少”AI 调取数据库统计数据并生成分析结论。要在代码里实现这个效果可以在 AIService 中增加工具调用机制或者直接在业务代码中先查询数据再把查询结果作为上下文传给 AI。对于毕业论文项目后者更好实现也更容易演示。8. 系统联调与功能验证前后端工程都创建好之后进入联调与验证阶段。8.1 启动顺序建议按下面的顺序启动启动 MySQL 和 Redis。启动后端 SpringBoot 应用确认 8080 端口正常监听。启动前端 Vite 开发服务器确认 5173 端口可访问。浏览器访问 http://localhost:5173完成登录并验证功能。8.2 核心接口验证列表功能点请求方式接口路径示例预期结果登录POST/api/auth/login返回 Token获取用户信息GET/api/auth/info返回当前用户信息用户分页查询GET/api/user/page返回用户列表和分页数据新增用户POST/api/user创建成功返回 ID场地预约POST/api/reservation创建预约记录检测场地冲突GET/api/reservation/check-conflict返回是否有冲突工单提交POST/api/work-order创建工单工单状态更新PUT/api/work-order/{id}/status更新工单状态统计数据查询GET/api/dashboard/overview返回核心统计指标AI 对话POST/api/ai/chat返回 AI 回答接口路径可以根据项目实际情况调整这里列出的作用是给前后端联调提供一份验证清单。8.3 功能验收步骤逐个模块做验收不要只测登录和一个增删改查就结束。以场地预约为例子完整的验收流程应该是管理员创建楼宇和场地信息。普通用户登录后查看场地列表。用户选择日期和时间段提交预约申请。后端校验是否冲突。用户提交同样的时间再次预约后端应返回冲突提示。管理员进入审核列表审批该预约。用户查看预约状态已经变为“已通过”。同样的思路把用户管理、报修工单、公告发布、数据大屏、AI 助手都按“角色视角 完整链路”过一遍。8.4 使用 curl 验证接口在没有前端页面的情况下也可以用 curl 直接验证后端接口。以登录接口为例curl -X POST http://localhost:8080/api/auth/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}正常响应会返回 Token。拿到 Token 后访问受保护接口curl -X GET http://localhost:8080/api/user/page?pageNum1pageSize10 \ -H Authorization: Bearer your-token如果返回 401优先检查 Token 是否过期、请求头格式是否正确。8.5 AI 助手功能验证AI 功能验证重点看三件事响应速度、回答质量、稳定性。测试用例建议覆盖以下场景普通问候类问题确认 AI 能正常回复。平台业务类问题例如“怎么提交报修单”。数据查询类问题例如“目前有多少个场地待审核”。无意义或违规问题确认系统能拒绝或引导。连续多轮对话确认上下文是否保留。如果使用云端 API要关注接口超时和限流问题重试机制和后端超时时间都需要提前做好。9. 接口 API 设计与批量任务9.1 接口设计规范后端接口建议遵循 RESTful 风格GET 用于查询。POST 用于新增。PUT 用于更新。DELETE 用于删除。统一使用/api前缀。返回格式统一为前面定义的 R 对象。分页接口的通用返回示例{ code: 200, message: 操作成功, data: { records: [ { id: 1, username: zhangsan, realName: 张三, phone: 138****0000 } ], total: 100, pageNum: 1, pageSize: 10 } }这里用户手机号做脱敏处理避免完整敏感信息出现在前端接口响应中。9.2 批量导入用户批量导入是管理后台常见的批量任务。实现思路是前端上传 Excel 文件。后端解析 Excel逐行校验数据。校验通过的数据批量插入数据库。校验失败的行记录错误原因生成错误报告返回给前端。Excel 解析可以使用 EasyExcel 或 Apache POI。EasyExcel 的 API 更简洁推荐使用。批量导入接口的设计示例PostMapping(/user/import) public RString importUsers(RequestParam(file) MultipartFile file) { // 解析 Excel // 逐行校验 // 批量写入 // 返回成功数量和失败原因文件地址 return R.ok(导入完成成功 98 条失败 2 条); }9.3 定时批量任务平台里适合做定时任务的地方包括每天统计一次前一日运营数据。自动关闭超时未处理的预约单。定期清理过期 Token。数据库备份提醒。使用 Spring 自带的Scheduled注解即可Component public class StatisticTask { Scheduled(cron 0 0 2 * * ?) public void dailyStatistics() { // 统计前一日数据写入统计表 } Scheduled(cron 0 0/30 * * * ?) public void closeTimeoutReservation() { // 关闭超时未处理的预约单 } }定时任务执行时要注意线程阻塞问题并尽量通过日志记录执行结果。需要串行或分布式部署环境时可以使用 XXL-Job 或 Quartz但毕业论文项目用Scheduled已经足够。9.4 批量任务的设计要点如果系统需要处理大量图片上传比如批量上传设备照片、用户头像建议把上传任务做成异步处理。前端先把文件传到临时目录后端返回一个任务 ID异步处理完成后回调通知前端。对于毕业论文项目先做好同步上传和文件大小限制异步处理可以作为扩展点。10. 常见问题与排查方法下面这张排查表基本覆盖了全栈项目开发过程中最常遇到的几类问题。问题现象可能原因排查方式解决方案后端启动失败报端口被占用8080 端口被其他进程占用netstat -ano | findstr 8080关闭占用进程或修改server.port前端页面打不开Vite 启动失败或端口被占用查看终端日志检查 5173 端口按提示修改端口或npm run dev -- --port 5174请求/api返回 404后端接口未启动或代理配置错误直接访问后端地址测试接口检查 Vite 代理配置和后端请求路径接口返回 401Token 缺失、过期或无效查看浏览器 Network 面板检查请求头重新登录检查 Token 注入拦截器MyBatis-Plus 查询不到数据表名和实体类映射不一致开启 SQL 日志查看实际执行的 SQL检查TableName注解和字段映射中文乱码数据库连接字符集配置不对检查数据库字符集和连接 URL统一使用utf8mb4重启服务上传文件过大超出 Spring 配置的文件大小限制查看后端日志中的异常信息调整spring.servlet.multipart配置AI 接口超时模型服务响应慢或网络不稳定单独调用 AI API 测试延迟增加超时时间添加重试机制场地预约重复提交并发控制不足查看预约表是否有重复记录增加 Redis 锁或数据库唯一约束前端菜单不显示动态路由未注册或菜单接口未返回数据查看 Network 面板菜单接口响应检查角色权限配置和路由注册逻辑打包后访问页面空白静态资源路径或路由模式问题查看浏览器 Console 报错配置base路径检查 history 路由托管11. 最佳实践与毕业论文写作建议11.1 开发过程中的工程化建议第一次开发先用小参数和最小功能集跑通全链路登录 - 用户管理 - 场地预约 - 数据展示。全链路能跑通再继续拓展其他模块。代码统一格式命名清晰。Entity、DTO、VO 分层使用不要把数据库实体直接暴露给前端。预留一组最小可运行配置包括初始化 SQL、测试账号、README方便换电脑或答辩时快速恢复环境。不要把所有代码都堆在 Service 层接口层、业务层、数据访问层职责要清晰。每次改代码前先在 Git 上建一个分支养成提交习惯。毕业论文写到“系统实现与测试”章节时Git 提交记录本身就能当作开发过程数据。前端页面的 UI 使用 Element Plus 的布局组件别自己写复杂 CSS管理后台最重要的是信息清晰、操作路径短。11.2 关于 AI 模块的开发策略先把 AI 接口封装成独立模块不要在业务代码里到处直接调用第三方 API。使用接口定义 AI 服务例如AIService可以随时替换实现类。在 Prompt 中明确 AI 的角色比如“你是一个校园管理平台的智能助手请基于以下知识回答用户问题”。角色设定对回答质量影响非常大。对 AI 的输出做简单校验至少检查是否为空、是否包含敏感词汇。AI 功能是论文的加分项但不要指望 AI 功能本身撑起整篇论文。论文的核心还是系统设计、实现和测试。11.3 毕业论文写作框架建议如果你准备用这个项目写毕业论文可以参考下面的章节结构章节内容要点对应项目工作绪论研究背景、国内外研究现状、研究意义文献调研平台背景分析相关技术介绍SpringBoot3、Vue3、AI 大模型、RAG、MySQL、Redis技术选型说明系统分析可行性分析、需求分析、用例分析、业务流程功能边界和需求文档系统设计总体架构、功能模块设计、数据库设计、接口设计架构图和数据库表设计系统实现前后端实现细节、AI 功能实现、核心代码展示编码阶段系统测试测试环境、功能测试用例、性能观察、测试结果联调和测试阶段总结与展望成果总结、不足分析、后续改进方向论文撰写论文里不要只贴大量代码重点放在“设计思路”和“关键问题解决方案”上。比如你解决了场地预约并发冲突、设计了动态权限菜单、实现了 RAG 知识库问答这些都是很好的写作素材。11.4 合规与版权提醒项目中使用到的所有图片、图标、字体、开源组件注意确认授权范围。AI 调用中不要输入或输出个人敏感信息测试时使用虚构数据。如果论文中使用了第三方平台的数据要么脱敏处理要么取得授权。涉及用户信息采集时明确隐私政策并在系统页面上展示。12. 总结与下一步这个项目最能锻炼人的地方不是某一个技术点而是把前端、后端、数据库、AI 四层技术栈通过一个完整业务场景串起来。你会在开发过程中同时遇到接口设计、权限控制、数据建模、并发处理、AI 接入、性能观察这些真实工程问题这些问题正是毕业论文和求职面试里最能体现能力的地方。拿到项目后先做两件事第一把登录认证跑通。这是整个系统的地基登录不通后面所有页面都无法验证。第二把场地预约的完整流程走完。这个模块涉及角色、状态流转、并发冲突是最容易在论文里深入分析的业务点。最容易踩的坑有两个一是环境不一致。JDK 版本不够、MySQL 版本不对、Node 版本过老都会造成不必要的启动问题。建议最开始就统一版本。二是前后端联调时接口路径对不上。前端请求的路径和后端 Controller 的映射不一致、参数名不一致是联调阶段最高频的错误。建议用统一的接口文档工具记录所有接口维护一份最新的接口列表。后续可以继续扩展的方向包括用 WebSocket 实现站内消息的实时推送。引入消息队列处理预约提醒和通知。把 AI 对话从单纯的文本问答扩展为支持上下文记忆和工具调用的智能助理。增加移动端适配或小程序端让用户可以在手机上完成场地预约和报修。部署到云服务器使用 Docker Compose 编排前后端、数据库、Redis 和 AI 服务。建议收藏备用。如果你正准备开题或已经进入开发阶段按照上面的顺序先搭骨架再逐模块填充这个题目的完成度会比你想象的更可控。 基于SpringBoot3+Vue3的高校/园区一体化智慧管理平台全栈实践
这次我们来看一个很适合毕业设计、工程实训和技术博客练手的全栈项目基于 SpringBoot3 Vue3 的高校/园区一体化智慧管理平台并且它把 AI 能力也纳入了平台整体设计不是只做一个简单的 CRUD 后台。这类项目的核心价值在于它不只是一套“增删改查”的管理系统而是把校园/园区里的人、事、物、数据统一到同一个平台里做管理同时借助 AI 接口实现智能问答、信息分类、数据分析和辅助决策。简单说就是用 SpringBoot3 做后端服务用 Vue3 做前端界面再接入 AI 能力提升系统的智能化程度。如果你打算用这个题目做毕业论文或者想基于 SpringBoot3 Vue3 完整搭建一个带 AI 的 Web 项目这篇文章可以给你一条清晰的技术路线。我会从项目功能设计、技术选型、环境准备、后端工程搭建、前端工程搭建、AI 接口接入、联调测试、API 设计、问题排查到毕业论文结构完整过一遍。1. 项目核心能力速览先给一张整体速览表帮助你先判断这个项目值不值得做、工作量在哪个量级。能力项说明项目类型前后端分离 Web 管理平台适用于高校、科技园区、产业园区等场景后端技术栈SpringBoot3、Spring Security、MyBatis-Plus、Redis、MySQL前端技术栈Vue3、Vite、Pinia、Vue Router、Element Plus、EChartsAI 能力智能问答、文本分类、内容摘要、数据辅助分析具体取决于接入的 AI 服务或模型核心功能模块用户管理、权限管理、公告管理、楼宇/场地管理、设备管理、访客管理、报修管理、数据可视化大屏、AI 助手硬件要求普通开发电脑即可AI 功能若调云端 API 则无需独显若本地部署模型则需要独立显卡启动方式IDEA 启动后端 npm run dev 启动前端数据库MySQL 8.xRedis 用于缓存和会话是否支持 API支持RESTful 接口设计可独立对接第三方系统或小程序是否支持批量任务支持如批量导入用户、批量导出报表、定时数据统计适合场景毕业论文、课程设计、实习实训、中小型园区管理平台原型这里说明一下AI 部分可以做“轻接入”也可以做“深集成”。轻接入指的是调用云端大模型 API 完成智能问答、摘要、分类等任务深集成指的是在平台里封装一套可替换的 AI 服务层后续可以换成本地模型或更强的模型。毕业论文和实际演示阶段轻接入即可满足要求重点是把技术链路跑通。2. 典型功能模块与技术选型高校/园区一体化智慧管理平台的“一体化”体现在多个管理对象在同一个平台上统一处理数据互通业务联动。从实际需求来看下面这些模块是最常见的也最适合写进毕业论文的功能架构。2.1 用户与权限管理平台涉及的角色一般包括系统管理员、园区管理员、普通用户、访客。每个角色看到的菜单和操作权限不同。技术实现上建议使用 Spring Security JWT 做认证和授权。用户登录成功后签发 JWT前端把 Token 存在 Pinia 或 localStorage 中每次请求在请求头带上 Token。后端通过拦截器或过滤器校验 Token并根据用户角色控制接口访问权限。推荐表结构sys_user用户表字段包括 id、username、password、real_name、phone、avatar、role_id、status、create_time。sys_role角色表。sys_menu菜单表用于动态生成前端路由。sys_user_role用户与角色关联表。前端使用 Vue Router 的动态路由机制根据后端返回的菜单列表注册路由这样不同角色登录系统后看到的菜单就是不一样的。2.2 园区资源管理这是平台的业务核心包括楼宇信息、房间/场地信息、设备信息、场地预约。比如校园场景下就是教学楼、实验室、会议室、体育场馆的统筹管理园区场景下就是办公楼、工位、会议室、公共设备的管理。核心功能是楼宇/场地信息的增删改查。场地预约申请与审批流程。设备信息的录入、状态变更和维修记录。场地使用情况的可视化展示。业务上要处理好“同一时间段同一场地不能被重复预约”的并发问题建议使用 Redis 分布式锁或数据库唯一约束配合事务来解决。2.3 报修与工单管理这个模块非常能体现平台的实际价值。用户提交报修工单系统根据报修类型自动分配给对应的维修人员维修人员处理完成后更新工单状态用户可以对服务进行评价。工单的状态流转建议设计为待受理 - 已派单 - 处理中 - 已完成 - 已评价后端使用状态机或枚举来管理状态流转前端根据状态展示不同的操作按钮。2.4 公告与消息中心系统管理员可以发布公告公告可以指定接收范围。消息中心负责站内消息、工单状态变更通知、审批结果通知的推送。可以在公告发布或工单状态变更时异步生成站内消息记录用户登录后在消息中心查看未读消息。这里可以引入 Spring 的Async或消息队列来降低接口延迟。2.5 数据可视化大屏智慧管理平台通常需要一个数据总览页面用图表展示核心指标今日访客数量、预约数量、报修数量。场地使用率、设备在线率。近 7 天工单处理趋势。用户角色分布。前端使用 ECharts 完成图表渲染后端提供统计数据接口。统计数据建议用定时任务预处理比如每天凌晨统计前一天的数据写入统计表查询时直接查汇总数据避免实时聚合对业务表造成压力。2.6 AI 助手模块AI 助手是平台的亮点模块可以做成一个“智能客服 数据助手”的对话窗口。用户输入自然语言问题AI 返回回答同时支持把平台内的一些数据统计结果以自然语言的形式返回给用户。常见实现方式有三种直接调用云端大模型 API把用户问题发送给大模型并让大模型基于预设的角色和平台知识库回答。这种方式最简单效果稳定。接入向量数据库先把平台的使用文档、政策文件、常见问题做向量化存储用户提问时先检索相关片段再把片段拼入 Prompt 传给大模型。这种方式回答更可控适合做“文档问答”。在本地部署小规模开源模型通过 Ollama、vLLM 等工具提供 OpenAI 兼容接口后端统一封装调用。这种方式不依赖外部网络但对本机硬件有一定要求。如果是毕业论文项目建议用第一种或第二种方式理由有三点开发周期短不需要额外维护模型服务。效果稳定,不容易在答辩演示时翻车。可以把“Prompt 工程设计”作为论文的一个创新点来写。第 3 章我会给出三种方式在后端的具体封装思路。3. 适用场景与使用边界这个项目适合谁我梳理了四类典型人群。目标人群使用方式预期收益计算机相关专业毕业生基于该题目完成毕业论文设计与实现技术栈新、有 AI 亮点、工作量可量化Java 全栈学习者跟随技术路线完成一个完整项目掌握 SpringBoot3 Vue3 前后端分离开发全流程高校/园区信息化建设者作为平台原型进行二次开发快速验证管理需求确定系统边界培训机构/实训讲师作为实训项目或教学案例覆盖后端、前端、AI、数据库等多层技术这个项目能解决的问题也很明确把分散的线下管理流程比如纸质报修、电话预约、人工统计统一到线上平台。打破数据孤岛让用户、场地、设备、工单数据在一个数据库中互通。借助 AI 能力降低信息检索和数据分析的使用门槛普通用户不需要看懂后台报表直接问 AI 就能得到答案。但它不适合做什么也要说清楚它不适合直接作为生产级的大型园区管理系统使用。真正的商用系统需要对接硬件设备、门禁系统、支付系统、短信服务等本项目的定位是平台原型和技术演示。它不适合做成“什么功能都有”的巨型系统。毕业论文项目讲究的是边界清晰、功能完整功能越多越难做深。最后是合规边界这一点必须单独强调平台上涉及用户姓名、手机号、人脸信息等个人敏感数据必须遵循最小化采集原则并做脱敏展示。如果接入了人脸识别或访客拍照功能请确保有明确的用户授权协议并在论文中说明数据保护措施。AI 生成的内容可能存在错误或偏见平台需要在页面上展示“AI 生成内容仅供参考”的提示不要把 AI 输出作为管理决策的唯一依据。如果调用的 AI 模型或 API 来自第三方服务需要确认服务条款和使用边界不要传播或存储违禁内容。项目中使用到的图片素材、开源组件注意保留版权信息和开源协议声明。4. 本地开发环境准备开始编码之前先把开发环境准备好。下面是一份通用清单版本号以你自己机器上实际安装为准。环境项推荐版本用途JDKJDK 17 及以上SpringBoot3 要求最低 Java 17Maven3.8 或更高后端依赖管理Node.js18 或 20 LTS前端工程运行npm / pnpmnpm 9 / pnpm 8前端依赖安装MySQL8.0 或 8.4业务数据存储Redis6.x 或 7.x缓存、Session、分布式锁IDEAIntelliJ IDEA 2023后端开发 IDEVSCode / WebStorm任意较新版本前端开发 IDE浏览器Chrome / Edge前端调试4.1 JDK 与 Maven 配置SpringBoot3 对 JDK 版本有硬性要求需要用 JDK 17 以上。安装好 JDK 后在命令行里执行验证命令java -version确保显示的版本号是 17 或更高。然后检查 Mavenmvn -vMaven 需要配置国内镜像源否则首次下载 SpringBoot3 相关依赖会比较慢。在~/.m2/settings.xml中配置阿里云镜像mirror idaliyunmaven/id mirrorOfcentral/mirrorOf name阿里云公共仓库/name urlhttps://maven.aliyun.com/repository/public/url /mirror这里要提醒一句具体仓库地址以阿里云 Maven 官方最新配置为准不同时间段可能调整。4.2 Node.js 与包管理器前端工程使用 Vite 作为构建工具Vite 对 Node.js 版本有要求。安装 Node.js 后执行node -v npm -v如果已经在用 pnpm也可以pnpm -v没有安装 pnpm 的用 npm 即可。4.3 MySQL 与 Redis 准备MySQL 需要提前创建好数据库字符集建议使用utf8mb4CREATE DATABASE IF NOT EXISTS smart_campus DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;Redis 在本地启动一个默认实例即可默认端口 6379。如果你的 Redis 设置了密码在后端配置文件中对应修改。4.4 端口规划前后端分离项目需要提前规划端口避免冲突。我建议这样分配服务端口后端 SpringBoot8080前端 Vite Dev Server5173MySQL3306Redis6379前后端联调时前端通过 Vite 的代理把/api请求转发到后端的 8080 端口这样可以避免跨域问题。5. 后端 SpringBoot3 工程搭建后端工程是整个平台的核心下面从工程结构、依赖配置、核心代码三个层面展开。5.1 创建工程与依赖可以直接在 IDEA 中通过 Spring Initializr 创建 SpringBoot3 项目也可以使用 start.spring.io 生成后导入。需要引入的核心依赖包括dependencies dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-web/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-security/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-data-redis/artifactId /dependency dependency groupIdorg.springframework.boot/groupId artifactIdspring-boot-starter-validation/artifactId /dependency dependency groupIdcom.baomidou/groupId artifactIdmybatis-plus-spring-boot3-starter/artifactId version3.5.7/version /dependency dependency groupIdcom.mysql/groupId artifactIdmysql-connector-j/artifactId scoperuntime/scope /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-api/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-impl/artifactId version0.11.5/version /dependency dependency groupIdio.jsonwebtoken/groupId artifactIdjjwt-jackson/artifactId version0.11.5/version /dependency dependency groupIdorg.projectlombok/groupId artifactIdlombok/artifactId optionaltrue/optional /dependency /dependencies注意MyBatis-Plus 的 3.5.7 版本是当前一个相对稳定的版本其他版本也可以选择标准是兼容 SpringBoot3。实际版本号请以 Maven 中央仓库显示为准。5.2 工程包结构建议采用以下分层结构com.example.smartcampus ├── common │ ├── result统一返回结果 │ ├── exception全局异常处理 │ └── constant常量定义 ├── config安全配置、Redis 配置、跨域配置、AI 配置 ├── controller接口层 ├── service业务层 ├── mapper数据访问层 ├── entity数据库实体 ├── dto请求和响应对象 ├── utils工具类 └── aiAI 服务封装分层的核心思想是Controller 只接收参数和返回结果Service 处理业务逻辑Mapper 负责数据库操作AI 相关的代码单独放在ai包中方便后续替换或升级。5.3 配置文件在src/main/resources/application.yml中完成核心配置server: port: 8080 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/smart_campus?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: your_password data: redis: host: localhost port: 6379 password: database: 0 servlet: multipart: max-file-size: 20MB max-request-size: 100MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: true log-impl: org.apache.ibatis.logging.stdout.StdOutImpl global-config: db-config: id-type: auto jwt: secret: your-secret-key-please-change-in-production expire: 86400000这里jwt.secret在真实部署时一定要修改并妥善保管。数据库密码、Redis 配置也要按实际环境调整。5.4 统一返回结果与全局异常处理后端接口需要统一返回格式这样前端处理起来比较方便。定义一个通用的返回结果类Data public class RT { private Integer code; private String message; private T data; public static T RT ok(T data) { RT r new R(); r.setCode(200); r.setMessage(操作成功); r.setData(data); return r; } public static T RT fail(String message) { RT r new R(); r.setCode(500); r.setMessage(message); return r; } }全局异常处理使用RestControllerAdvice捕获业务异常和参数校验异常避免错误堆栈直接暴露给前端。5.5 登录认证流程登录接口走的是 Spring Security 的认证流程。核心步骤如下用户提交用户名和密码。后端校验验证码、用户状态、密码。校验通过后签发 JWT并把用户信息存入 Redis设置过期时间。前端拿到 Token 后存入 Pinia 和 localStorage。后续请求在 Authorization 头中携带 Token。后端通过 JWT 过滤器解析 Token并把用户上下文写入SecurityContextHolder。自定义一个 JWT 认证过滤器大致框架如下Component public class JwtAuthenticationFilter extends OncePerRequestFilter { Autowired private JwtUtils jwtUtils; Override protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException { String authHeader request.getHeader(Authorization); if (authHeader ! null authHeader.startsWith(Bearer )) { String token authHeader.substring(7); try { String username jwtUtils.parseToken(token); if (username ! null) { // 查询用户信息和权限构建 Authentication 并放入上下文 } } catch (Exception e) { // Token 无效或过期不做处理由后续拦截逻辑判断 } } filterChain.doFilter(request, response); } }这段代码是一个通用示例实际的用户查询、权限加载逻辑需要按项目结构补全。5.6 场地预约的并发防重场地预约是本项目里比较有技术含量的业务。同一个场地、同一个时间段只能有一个有效预约。处理思路是预约申请时先查询冲突记录。使用数据库唯一索引或 Redis 分布式锁防止并发重复提交。状态变更使用乐观锁版本号。使用 Redisson 实现分布式锁的伪代码RLock lock redissonClient.getLock(lock:room:book: roomId); try { if (lock.tryLock(3, 30, TimeUnit.SECONDS)) { // 检查冲突 // 创建预约 } } finally { if (lock.isHeldByCurrentThread()) { lock.unlock(); } }这样做的好处是即使多个用户同时提交预约请求也能保证同一时间段只有一个请求能成功创建预约记录。6. 前端 Vue3 工程搭建前端使用 Vue3 Vite Pinia Vue Router Element Plus这套组合已经是非常成熟的管理后台开发方案。6.1 初始化工程使用 Vite 创建项目npm create vuelatest smart-campus-web如果使用默认的 create-vue 模板可以按需选择 Router、Pinia、ESLint 等选项。进入项目目录后安装依赖cd smart-campus-web npm install npm install element-plus element-plus/icons-vue axios echarts pinia安装完成后启动开发服务器npm run dev默认访问地址是 http://localhost:5173。6.2 项目目录结构前端工程建议按以下目录划分src ├── api接口请求封装 ├── assets静态资源 ├── components通用组件 ├── layout布局组件 ├── router路由配置 ├── storesPinia 状态管理 ├── views页面组件 ├── utils工具函数 └── App.vue6.3 Axios 封装与请求拦截在src/utils/request.js中封装 Axios 实例统一处理 Token 注入和响应错误import axios from axios import { ElMessage } from element-plus import { useUserStore } from /stores/user import router from /router const request axios.create({ baseURL: /api, timeout: 30000 }) request.interceptors.request.use(config { const userStore useUserStore() if (userStore.token) { config.headers.Authorization Bearer ${userStore.token} } return config }) request.interceptors.response.use( response { const res response.data if (res.code ! 200) { ElMessage.error(res.message || 请求失败) return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { const userStore useUserStore() userStore.resetAuth() router.push(/login) } ElMessage.error(error.message || 网络异常) return Promise.reject(error) } ) export default request这里把 baseURL 设置为/api前端开发时通过 Vite 代理转发到后端 8080 端口。在vite.config.js中添加代理配置export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } } })6.4 动态路由与权限控制管理后台最常见的需求是不同角色登录后看到不同的菜单。实现思路是登录成功后后端返回用户信息和菜单列表。前端把菜单列表保存在 Pinia 中。通过router.addRoute动态添加路由。在路由前置守卫中检查用户是否已登录、是否已加载菜单。在用户 store 中核心逻辑大致如下import { defineStore } from pinia import { loginApi, getUserInfoApi, getUserMenusApi } from /api/user export const useUserStore defineStore(user, { state: () ({ token: localStorage.getItem(token) || , userInfo: null, menus: [] }), actions: { async login(loginForm) { const res await loginApi(loginForm) this.token res.data.token localStorage.setItem(token, this.token) }, async fetchUserInfo() { const res await getUserInfoApi() this.userInfo res.data }, async fetchMenus() { const res await getUserMenusApi() this.menus res.data }, resetAuth() { this.token this.userInfo null this.menus [] localStorage.removeItem(token) } } })6.5 核心页面项目至少需要包含以下页面登录页 / 注册页。首页数据大屏展示核心统计图表。用户管理页支持用户列表、新增、编辑、禁用、批量导入。角色权限页配置角色和菜单权限。楼宇/场地管理页支持地图或列表展示。场地预约页支持按日期和场地查询空闲状态提交预约申请。报修工单页支持用户提交、维修人员处理、管理员分配。公告管理页支持发布、编辑、下线公告。AI 助手页以聊天窗口形式与 AI 交互同时支持预设快捷问题。每个页面的核心组件结构建议保持统一搜索栏 表格 分页 新增/编辑弹窗。6.6 数据可视化页面数据大屏页面使用 ECharts。在 Vue3 中使用 ECharts推荐用echarts核心库配合按需引入避免打包体积过大。一个简单的柱状图组件示例如下template div refchartRef stylewidth: 100%; height: 320px/div /template script setup import { ref, onMounted, onBeforeUnmount } from vue import * as echarts from echarts const chartRef ref(null) let chartInstance null onMounted(() { chartInstance echarts.init(chartRef.value) chartInstance.setOption({ title: { text: 近7日报修趋势, left: center }, xAxis: { type: category, data: [周一, 周二, 周三, 周四, 周五, 周六, 周日] }, yAxis: { type: value }, series: [{ type: bar, data: [12, 18, 15, 22, 30, 10, 8] }] }) }) onBeforeUnmount(() { if (chartInstance) { chartInstance.dispose() } }) /script实际项目中的图表数据应该从后端统计接口获取这里展示的是静态数据示例。7. AI 功能的接入方式AI 是项目标题中的亮点词也是毕业论文中可以重点展开的部分。下面给出三种接入方式从简单到复杂排列。7.1 方案一调用云端大模型 API这是最快速、最稳定的方案。后端统一封装一个 AIService 接口通过 HTTP 请求调用云端大模型服务。Service public class OpenAiCompatibleServiceImpl implements AIService { Value(${ai.api-url}) private String apiUrl; Value(${ai.api-key}) private String apiKey; Value(${ai.model}) private String model; Override public String chat(String userMessage, String systemPrompt) { // 构造请求体 MapString, Object requestBody new HashMap(); requestBody.put(model, model); requestBody.put(messages, List.of( Map.of(role, system, content, systemPrompt), Map.of(role, user, content, userMessage) )); requestBody.put(temperature, 0.7); // 发送 HTTP 请求 // 解析响应返回 content 字段 return responseContent; } }这里不绑定具体厂商因为不同厂商的 API 使用方式有差异但整体思路是一致的构造 Messages 数组发给模型服务解析返回文本。在配置文件里增加ai: api-url: https://your-ai-service.example.com/v1/chat/completions api-key: your-api-key model: your-model-name请求示例和响应解析代码可以在项目里进一步封装。7.2 方案二RAG 知识库问答如果希望 AI 的回答基于平台自身的资料比如使用手册、管理制度、常见问题推荐使用 RAG 方案将文档拆分成片段。通过 Embedding 模型将文本片段向量化存入向量数据库如 Milvus、Chroma、Pinecone。用户提问时先对问题进行向量化检索最相关的 Top-K 片段。把检索到的片段和用户问题一起组装成 Prompt发给大模型。大模型基于提供的片段生成回答并在回复中标注信息来源。在后端结构中RAG 的核心流程可以封装成一个独立的组件大致调用顺序如下用户输入 - 向量化 - 向量检索 - 拼接Prompt - 调用大模型 - 返回答案这种方案的论文亮点是“可解释、可溯源”AI 的每条回答都有文档出处这在高校/园区的信息咨询场景中非常有价值。7.3 方案三本地模型接入如果不想依赖外部 API可以在本机部署一个开源模型通过 Ollama 或类似工具暴露 OpenAI 兼容接口后端只需要把 API 地址指向本机即可。ollama pull qwen2.5:7b ollama serve然后后端调用 http://localhost:11434/v1/chat/completions。这种方式的好处是数据不出内网但需要注意硬件要求7B 级别模型建议至少 8GB 以上可用内存或独立显卡实际效果取决于你的设备。7.4 AI 与业务功能的结合AI 不只是做一个独立的聊天窗口还要和平台业务结合起来。可以设计成下面的形式用户问“今天有几个场地预约待审批”AI 先调用后端统计接口获取数据再把结果用自然语言回答。用户问“如何提交报修工单”AI 从知识库中检索使用指南并给出步骤。管理员问“上月工单平均处理时长是多少”AI 调取数据库统计数据并生成分析结论。要在代码里实现这个效果可以在 AIService 中增加工具调用机制或者直接在业务代码中先查询数据再把查询结果作为上下文传给 AI。对于毕业论文项目后者更好实现也更容易演示。8. 系统联调与功能验证前后端工程都创建好之后进入联调与验证阶段。8.1 启动顺序建议按下面的顺序启动启动 MySQL 和 Redis。启动后端 SpringBoot 应用确认 8080 端口正常监听。启动前端 Vite 开发服务器确认 5173 端口可访问。浏览器访问 http://localhost:5173完成登录并验证功能。8.2 核心接口验证列表功能点请求方式接口路径示例预期结果登录POST/api/auth/login返回 Token获取用户信息GET/api/auth/info返回当前用户信息用户分页查询GET/api/user/page返回用户列表和分页数据新增用户POST/api/user创建成功返回 ID场地预约POST/api/reservation创建预约记录检测场地冲突GET/api/reservation/check-conflict返回是否有冲突工单提交POST/api/work-order创建工单工单状态更新PUT/api/work-order/{id}/status更新工单状态统计数据查询GET/api/dashboard/overview返回核心统计指标AI 对话POST/api/ai/chat返回 AI 回答接口路径可以根据项目实际情况调整这里列出的作用是给前后端联调提供一份验证清单。8.3 功能验收步骤逐个模块做验收不要只测登录和一个增删改查就结束。以场地预约为例子完整的验收流程应该是管理员创建楼宇和场地信息。普通用户登录后查看场地列表。用户选择日期和时间段提交预约申请。后端校验是否冲突。用户提交同样的时间再次预约后端应返回冲突提示。管理员进入审核列表审批该预约。用户查看预约状态已经变为“已通过”。同样的思路把用户管理、报修工单、公告发布、数据大屏、AI 助手都按“角色视角 完整链路”过一遍。8.4 使用 curl 验证接口在没有前端页面的情况下也可以用 curl 直接验证后端接口。以登录接口为例curl -X POST http://localhost:8080/api/auth/login \ -H Content-Type: application/json \ -d {username:admin,password:123456}正常响应会返回 Token。拿到 Token 后访问受保护接口curl -X GET http://localhost:8080/api/user/page?pageNum1pageSize10 \ -H Authorization: Bearer your-token如果返回 401优先检查 Token 是否过期、请求头格式是否正确。8.5 AI 助手功能验证AI 功能验证重点看三件事响应速度、回答质量、稳定性。测试用例建议覆盖以下场景普通问候类问题确认 AI 能正常回复。平台业务类问题例如“怎么提交报修单”。数据查询类问题例如“目前有多少个场地待审核”。无意义或违规问题确认系统能拒绝或引导。连续多轮对话确认上下文是否保留。如果使用云端 API要关注接口超时和限流问题重试机制和后端超时时间都需要提前做好。9. 接口 API 设计与批量任务9.1 接口设计规范后端接口建议遵循 RESTful 风格GET 用于查询。POST 用于新增。PUT 用于更新。DELETE 用于删除。统一使用/api前缀。返回格式统一为前面定义的 R 对象。分页接口的通用返回示例{ code: 200, message: 操作成功, data: { records: [ { id: 1, username: zhangsan, realName: 张三, phone: 138****0000 } ], total: 100, pageNum: 1, pageSize: 10 } }这里用户手机号做脱敏处理避免完整敏感信息出现在前端接口响应中。9.2 批量导入用户批量导入是管理后台常见的批量任务。实现思路是前端上传 Excel 文件。后端解析 Excel逐行校验数据。校验通过的数据批量插入数据库。校验失败的行记录错误原因生成错误报告返回给前端。Excel 解析可以使用 EasyExcel 或 Apache POI。EasyExcel 的 API 更简洁推荐使用。批量导入接口的设计示例PostMapping(/user/import) public RString importUsers(RequestParam(file) MultipartFile file) { // 解析 Excel // 逐行校验 // 批量写入 // 返回成功数量和失败原因文件地址 return R.ok(导入完成成功 98 条失败 2 条); }9.3 定时批量任务平台里适合做定时任务的地方包括每天统计一次前一日运营数据。自动关闭超时未处理的预约单。定期清理过期 Token。数据库备份提醒。使用 Spring 自带的Scheduled注解即可Component public class StatisticTask { Scheduled(cron 0 0 2 * * ?) public void dailyStatistics() { // 统计前一日数据写入统计表 } Scheduled(cron 0 0/30 * * * ?) public void closeTimeoutReservation() { // 关闭超时未处理的预约单 } }定时任务执行时要注意线程阻塞问题并尽量通过日志记录执行结果。需要串行或分布式部署环境时可以使用 XXL-Job 或 Quartz但毕业论文项目用Scheduled已经足够。9.4 批量任务的设计要点如果系统需要处理大量图片上传比如批量上传设备照片、用户头像建议把上传任务做成异步处理。前端先把文件传到临时目录后端返回一个任务 ID异步处理完成后回调通知前端。对于毕业论文项目先做好同步上传和文件大小限制异步处理可以作为扩展点。10. 常见问题与排查方法下面这张排查表基本覆盖了全栈项目开发过程中最常遇到的几类问题。问题现象可能原因排查方式解决方案后端启动失败报端口被占用8080 端口被其他进程占用netstat -ano | findstr 8080关闭占用进程或修改server.port前端页面打不开Vite 启动失败或端口被占用查看终端日志检查 5173 端口按提示修改端口或npm run dev -- --port 5174请求/api返回 404后端接口未启动或代理配置错误直接访问后端地址测试接口检查 Vite 代理配置和后端请求路径接口返回 401Token 缺失、过期或无效查看浏览器 Network 面板检查请求头重新登录检查 Token 注入拦截器MyBatis-Plus 查询不到数据表名和实体类映射不一致开启 SQL 日志查看实际执行的 SQL检查TableName注解和字段映射中文乱码数据库连接字符集配置不对检查数据库字符集和连接 URL统一使用utf8mb4重启服务上传文件过大超出 Spring 配置的文件大小限制查看后端日志中的异常信息调整spring.servlet.multipart配置AI 接口超时模型服务响应慢或网络不稳定单独调用 AI API 测试延迟增加超时时间添加重试机制场地预约重复提交并发控制不足查看预约表是否有重复记录增加 Redis 锁或数据库唯一约束前端菜单不显示动态路由未注册或菜单接口未返回数据查看 Network 面板菜单接口响应检查角色权限配置和路由注册逻辑打包后访问页面空白静态资源路径或路由模式问题查看浏览器 Console 报错配置base路径检查 history 路由托管11. 最佳实践与毕业论文写作建议11.1 开发过程中的工程化建议第一次开发先用小参数和最小功能集跑通全链路登录 - 用户管理 - 场地预约 - 数据展示。全链路能跑通再继续拓展其他模块。代码统一格式命名清晰。Entity、DTO、VO 分层使用不要把数据库实体直接暴露给前端。预留一组最小可运行配置包括初始化 SQL、测试账号、README方便换电脑或答辩时快速恢复环境。不要把所有代码都堆在 Service 层接口层、业务层、数据访问层职责要清晰。每次改代码前先在 Git 上建一个分支养成提交习惯。毕业论文写到“系统实现与测试”章节时Git 提交记录本身就能当作开发过程数据。前端页面的 UI 使用 Element Plus 的布局组件别自己写复杂 CSS管理后台最重要的是信息清晰、操作路径短。11.2 关于 AI 模块的开发策略先把 AI 接口封装成独立模块不要在业务代码里到处直接调用第三方 API。使用接口定义 AI 服务例如AIService可以随时替换实现类。在 Prompt 中明确 AI 的角色比如“你是一个校园管理平台的智能助手请基于以下知识回答用户问题”。角色设定对回答质量影响非常大。对 AI 的输出做简单校验至少检查是否为空、是否包含敏感词汇。AI 功能是论文的加分项但不要指望 AI 功能本身撑起整篇论文。论文的核心还是系统设计、实现和测试。11.3 毕业论文写作框架建议如果你准备用这个项目写毕业论文可以参考下面的章节结构章节内容要点对应项目工作绪论研究背景、国内外研究现状、研究意义文献调研平台背景分析相关技术介绍SpringBoot3、Vue3、AI 大模型、RAG、MySQL、Redis技术选型说明系统分析可行性分析、需求分析、用例分析、业务流程功能边界和需求文档系统设计总体架构、功能模块设计、数据库设计、接口设计架构图和数据库表设计系统实现前后端实现细节、AI 功能实现、核心代码展示编码阶段系统测试测试环境、功能测试用例、性能观察、测试结果联调和测试阶段总结与展望成果总结、不足分析、后续改进方向论文撰写论文里不要只贴大量代码重点放在“设计思路”和“关键问题解决方案”上。比如你解决了场地预约并发冲突、设计了动态权限菜单、实现了 RAG 知识库问答这些都是很好的写作素材。11.4 合规与版权提醒项目中使用到的所有图片、图标、字体、开源组件注意确认授权范围。AI 调用中不要输入或输出个人敏感信息测试时使用虚构数据。如果论文中使用了第三方平台的数据要么脱敏处理要么取得授权。涉及用户信息采集时明确隐私政策并在系统页面上展示。12. 总结与下一步这个项目最能锻炼人的地方不是某一个技术点而是把前端、后端、数据库、AI 四层技术栈通过一个完整业务场景串起来。你会在开发过程中同时遇到接口设计、权限控制、数据建模、并发处理、AI 接入、性能观察这些真实工程问题这些问题正是毕业论文和求职面试里最能体现能力的地方。拿到项目后先做两件事第一把登录认证跑通。这是整个系统的地基登录不通后面所有页面都无法验证。第二把场地预约的完整流程走完。这个模块涉及角色、状态流转、并发冲突是最容易在论文里深入分析的业务点。最容易踩的坑有两个一是环境不一致。JDK 版本不够、MySQL 版本不对、Node 版本过老都会造成不必要的启动问题。建议最开始就统一版本。二是前后端联调时接口路径对不上。前端请求的路径和后端 Controller 的映射不一致、参数名不一致是联调阶段最高频的错误。建议用统一的接口文档工具记录所有接口维护一份最新的接口列表。后续可以继续扩展的方向包括用 WebSocket 实现站内消息的实时推送。引入消息队列处理预约提醒和通知。把 AI 对话从单纯的文本问答扩展为支持上下文记忆和工具调用的智能助理。增加移动端适配或小程序端让用户可以在手机上完成场地预约和报修。部署到云服务器使用 Docker Compose 编排前后端、数据库、Redis 和 AI 服务。建议收藏备用。如果你正准备开题或已经进入开发阶段按照上面的顺序先搭骨架再逐模块填充这个题目的完成度会比你想象的更可控。