Vue+SpringBoot前后端分离项目从解压到部署的完整教程

简介2022毕业设计Vue_SpringBoot.zip是一份面向毕业设计场景的前后端分离项目资料技术栈包括Vue.js前端框架与SpringBoot后端框架通过RESTful API完成前后端交互适合计算机相关专业学生在毕设选题、项目实训或框架学习时参考。压缩包共包含98个文件其中35个Vue组件负责页面交互与组件化开发34个Java类实现后端接口与业务逻辑13个JavaScript脚本处理前端功能另有SQL数据库脚本、yml/xml配置及Word/Markdown说明文档整体包体仅3.46MB结构清晰便于按目录阅读和分析。项目从登录、数据展示到接口调用均有可复用的分层模式读者可以对照前后端代码理解Vue如何请求数据、SpringBoot如何组织Controller-Service-Mapper同时借助SQL脚本快速还原数据库表结构。目前已有122人学习了该资源若您正在设计基于Vue和SpringBoot的毕设可将此包作为完整样例节省环境搭建与架构设计的时间并在此基础上扩展业务模块完成自己的毕设方案。1. 收到这份 Vue_SpringBoot 毕设压缩包之后2022毕业设计Vue_SpringBoot.zip这类压缩包在网盘、U 盘和 QQ 传输记录里出现频率极高一个 Vue 写的前端目录一个 SpringBoot 写的后端目录再加一份数据库脚本和语焉不详的 README。接手的人无论是补交课题还是被拉去评审第一反应都是解压后直接启动然后卡在 Node 版本、Maven 依赖和接口连不上这三道坎上。这篇就按我平时接毕设评审、帮人排错的思路把前后端分离项目从解压、环境对齐、联调到打包验收的完整路径讲清楚。新手能照步骤把项目跑起来有几年经验的同事也能快速定位这批项目里最容易埋雷的版本和路径配置。2. 解压后先读后端 SpringBoot 与前端 Vue 的目录边界2.1 从目录名判断工程归属解压之后先别急着点开用文件管理器看一眼顶层节点。常见做法是前端叫 frontend、web后端叫 backend、server 或 api-service两份代码彻底分开。少数不讲究的压缩包把前端直接堆在根目录后端放在 service 子目录里也不要紧判断依据从来不是目录名而是各自的配置文件前端认 package.json后端认 pom.xml。2022毕业设计Vue_SpringBoot/ ├── frontend/ # Vue 前端工程 │ ├── src/ │ │ ├── views/ # 页面组件 │ │ ├── router/ # vue-router 路由表 │ │ └── api/ # axios 请求封装 │ ├── package.json │ └── vue.config.js # 端口与接口转发配置 ├── backend/ # SpringBoot 后端工程 │ ├── src/main/java/ │ ├── src/main/resources/ │ │ ├── application.yml │ │ └── mapper/ # MyBatis XML 文件 │ ├── pom.xml │ └── sql/ # 数据库初始化脚本 └── 数据库脚本.sql上面这套结构对应的是典型前后端分离设计前端靠 Vue 路由切换页面后端只暴露 REST 接口两者之间只传 JSON。如果解压后发现缺了 backend 目录多半是对方把后端打成了 jar 包而不是源码先在压缩包里找 .jar 文件别急着重写。Windows 下看完整目录用 tree 最省事Git Bash 或 macOS 用 find两条都给你# Windows CMD/F 表示显示文件/A 表示用 ASCII 符号避免中文乱码 tree /F /A # Git Bash / macOS-maxdepth 2 只下探两层避免刷屏 find . -maxdepth 2 -type d | sort参数上 /F 是让 tree 把文件也列出来光列目录看不出主工程在第几层-maxdepth 2 控制 find 的递归深度毕设项目一般两层就能看清父子关系。列完后把注意力放到 2.2 说的三个文件上别急着双击启动。2.2 用 grep 先读 package.json 和 pom.xml拿到目录我先抓版本信息不急着开 IDE。命令行一次能把前端核心依赖捞出来判断 Vue 2 还是 Vue 3、用了哪套 UI 库比在可视化界面里翻快得多grep -E vue|element-ui|element-plus|axios|vue-router frontend/package.json抓后端则看 parent 和 java.version 两处grep -E spring-boot-starter-parent|java.version backend/pom.xmlgrep 的 -E 表示扩展正则管道符分隔多个候选词一条命令扫完一组关键词。看完输出记三个判断vue 版本主号是 2 还是 3决定整个前端环境SpringBoot parent 版本决定 JDK 要求和包名体系java.version 决定本机要装哪个 JDK。这三个信息直接决定后面环境怎么搭比 README 靠谱。顺手给一个对照表拿到陌生工程时快速归类目录或文件大概率技术栈确认方式frontend/package.jsonVue 2 Element UIdependencies 里有 vue、element-uibackend/pom.xmlSpringBoot 2.xparent 是 spring-boot-starter-parentmapper/*.xmlMyBatis / MyBatis-PlusXML 里有 namespace 和 resultMap数据库脚本.sqlMySQL 5.7 / 8.0建表语句里的 ENGINEInnoDB这张表不是猜的而是 2022 年前后毕设项目的统计规律前端几乎被 Vue 2 加 Element UI 覆盖后端集中在 SpringBoot 2.x 配 MyBatis-Plus。如果真有 Spring Security、Redis 这些中间件pom.xml 里一定会有对应依赖grep 时顺手扫一遍grep -E security|redis|rabbit backend/pom.xml就能确认工程复杂度。2.3 数据库脚本先过一遍再谈启动数据源是前后端联调的第一道关卡。打开 SQL 脚本看三处create database 的库名、建表语句里的字符集、初始管理员账号。很多压缩包里密码是 admin/123456地址写死 localhost:3306这些先记下来后面和 application.yml 核对。# 导入数据库-p 会让你输入数据库密码 mysql -uroot -p 数据库脚本.sql导入后执行show databases;确认库存在。常见翻车是脚本里 create database 用的是 graduation而 application.yml 的 url 写的是 spring_boot_demo启动才报 Unknown database所以导入前就把库名统一掉。SQL 文件编码也值得扫一眼用记事本打开乱码的多半是 GBK 导出导入前转成 UTF-8 再执行中文表数据才不会丢。3. 前端 Vue 工程Node 环境、依赖安装与接口转发3.1 先分清 Vue 2 还是 Vue 3再决定 Node 版本前端能不能一次启动八成取决于 Node 版本和依赖的匹配。2.2 已经拿到 vue 版本号这里只需要决策Vue 2.6 配 vue-cli 4/5依赖里有 node-sass 时对 Node 版本最敏感Vue 3.2 配 element-plus整体对 Node 要求宽松一些。我一般参考下面的对应关系而不是无脑装最新版。前端技术栈推荐 Node典型依赖Vue 2.6 vue-cli 414.x / 16.xnode-sass、webpack 4Vue 2.7 vue-cli 514.x ~ 18.xsass、webpack 5Vue 3.2 vite / cli16.x ~ 18.xelement-plus、viteNode 装错最典型的报错长这样error:0308010C:digital envelope routines::unsupported。原因是 Node 17 起 OpenSSL 3.0 默认不再支持旧的加密摘要算法Vue 2 老工程一打包就炸。最快的临时解法是给 Node 加参数不用立刻重装环境# Git Bash / Linux / macOS export NODE_OPTIONS--openssl-legacy-provider # Windows CMD 用 set 而不是 export set NODE_OPTIONS--openssl-legacy-provider npm run serveNODE_OPTIONS是 Node 读取的全局环境变量--openssl-legacy-provider让 OpenSSL 回调老 provider这条只对老 webpack 项目有效。Vue 3 Vite 项目不需要它硬加反而可能打出警告。长期来看给老毕设配一个 nvm 管理的 Node 16 才是正解临时参数只用来应急演示。3.2 npm 安装依赖容易翻车的两处依赖安装被问得最多的报错有两种node-sass 编译失败和 ERESOLVE 依赖树冲突。node-sass 在 Node 16 之后基本处于无人维护状态编译时拉 node-gyp 经常失败ERESOLVE 是 npm 7 对依赖树要求更严老项目的依赖塞进来就报警。# 先清理再重装比一项项试快 rm -rf node_modules package-lock.json npm config get registry npm config set registry https://registry.npmmirror.com npm install第一步把 node_modules 和锁文件一起删干净避免残留的二进制和当前 Node 不匹配。npm config get registry是查看当前 npm 源指向官方源时下载慢且容易超时换成 npmmirror 的地址后npm install会快很多。装完立刻npm run serve看到Compiled successfully再往下走。如果 node-sass 实在装不上有个更省事的替代方案把 package.json 里的node-sass改成sass然后删掉旧产物重装。sass 是 Dart 版不需要本地编译语法上和 node-sass 的 scss 基本兼容Element UI 主题定制也不受影响。改完后再跑一次npm run serve报的 scss 警告只要不是 error 都能忽略。提示如果项目里 sass-loader 版本小于 10直接换 sass 可能编译不过此时优先降 Node 版本而不是降 sass-loader。3.3 vue.config.js 决定端口和接口转发前后端开发期能不能互通全看这个文件。很多人把 axios 的 baseURL 写成http://localhost:8081然后被跨域问题卡住。其实 vue-cli 内置的 devServer 支持接口转发页面和接口走同一个域名跨域这个坑直接绕开const { defineConfig } require(vue/cli-service) module.exports defineConfig({ transpileDependencies: true, // 将 element-ui 等依赖转译 devServer: { port: 8080, // 前端页面地址 proxy: { // 接口转发规则 /api: { target: http://localhost:8081, // 后端 SpringBoot 地址 changeOrigin: true, // 让后端收到的是转发方 host pathRewrite: { ^/api: } // 去掉 /api 前缀再转发 } } } })transpileDependencies控制哪些 node_modules 里的包要过 Babelelement-ui 转译后兼容老浏览器port是页面端口和后端端口别写重proxy 里的/api是匹配前缀target把匹配上的请求转给后端pathRewrite里的正则^/api表示删掉路径开头的 /api。如果后端接口本身带 /api 前缀把那行注释掉即可不用改后端代码。对应的 axios 封装一般长这样baseURL 直接写/api和转发规则配对// src/api/request.js import axios from axios const service axios.create({ baseURL: /api, // 走 devServer 转发开发期不写完整域名 timeout: 10000 // 10 秒超时防止接口卡死 }) export default servicebaseURL: /api的妙处在于开发期由 devServer 转发到 8081打包部署后由服务器接管同一路径前端代码一行不用改。顺手确认一下路由传参写法毕设里常见的两种跳转别混用// 方式一queryURL 里可见 ?id10刷新不丢 this.$router.push({ path: /detail, query: { id: 10 } }) // 方式二params配合路由 name 使用刷新后参数会丢 this.$router.push({ name: Detail, params: { id: 10 } })query适合详情页这类需要刷新后保留参数的场景params适合不想让参数暴露在地址栏的场景。毕设答辩时演示刷新数据不丢用query最稳。前端工程我习惯用 VSCode 打开配合 vue devtools 插件调试组件状态和路由比看控制台直观得多。4. 后端 SpringBootMaven、数据源与鉴权配置4.1 先确认 SpringBoot 版本和 JDK 的匹配关系拿到后端工程第一件事看 pom.xml 里的 parent 版本。2022 年的毕设集中在 2.4 到 2.7 之间配 JDK 8 基本不会错。新机器默认的 JDK 17 或 21 打开它IDEA 会直接报源发行版错误这时候千万别手滑把 SpringBoot 升到 3.x——3.x 换成了 jakarta 包名代码里所有javax.servlet都要改工作量等于重构。SpringBoot 版本推荐 JDK常见注意点2.3.x8写法偏老注意 WebMvcConfigurer 用法2.5.x8覆盖面最广样本最多2.6.x / 2.7.x8 或 11Security 放行写法有小变化正确做法是给本机补一个 JDK 8 或 11在 IDEA 的 Project Structure 里把 Project SDK 和 Modules 的 language level 都切到对应版本。想拿 IDEA 新建空后端项目做对照实验时Spring Initializr 里选 2.7.x 即可但不建议把原项目整体重做接口和业务逻辑搬起来容易出错。Maven 配置确认后开发阶段不用打 jar直接用插件跑cd backend mvn spring-boot:run -Dspring-boot.run.profilesdevspring-boot:run是 SpringBoot 插件提供的启动目标-Dspring-boot.run.profilesdev指定激活的 profile对应application-dev.yml。如果工程里只有 application.yml 没有分环境文件这个参数去掉就行加了反而提示找不到 profile。首次运行会下载大量依赖等日志走到Started Application才算起成功。4.2 application.yml 里最常配错的三处后端启动报错八成集中在这个文件。我把毕设里出现频率最高的配置段列出来每一行都值得核对server: port: 8081 # 后端端口与前端转发 target 对应 spring: datasource: url: jdbc:mysql://localhost:3306/graduation_db?useUnicodetruecharacterEncodingutf8serverTimezoneAsia/Shanghai username: root password: 改成你的密码 driver-class-name: com.mysql.cj.jdbc.Driver servlet: multipart: max-file-size: 50MB # 文件上传大小上限 max-request-size: 50MB mybatis-plus: mapper-locations: classpath*:mapper/**/*.xml configuration: map-underscore-to-camel-case: trueserverTimezoneAsia/Shanghai不写MySQL 8 连接会报时区错误这是第一个坑driver-class-name在 MySQL 8 下必须是com.mysql.cj.jdbc.Driver如果写的是com.mysql.jdbc.Driver说明驱动版本偏旧map-underscore-to-camel-case控制数据库列名 user_name 能不能自动映射成 Java 的 userName关掉的话实体类可能查不出值。multipart 那段是给头像、附件上传准备的没有配置会被默认大小限制拦下。还有一类坑不在 yml 而在代码里上传路径被写死成D:/upload或/root/upload换台机器目录不存在接口直接报错。排错时全局搜一下 upload 关键字把绝对路径改成相对路径或者启动前手动把目录建好。提示YAML 里密码含特殊字符如 #、: 时必须加引号否则解析会截断这是连不上数据库的隐蔽原因。4.3 登录鉴权拦截器和 Spring Security 二选一大多数毕设后端有登录功能实现分两派自己写拦截器加 token 的轻量派和引入 Spring Security 的重量派。轻量派排错容易先看拦截器放行了哪些路径Configuration public class WebConfig implements WebMvcConfigurer { Resource private LoginInterceptor loginInterceptor; Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(loginInterceptor) .addPathPatterns(/**) .excludePathPatterns(/login, /register, /file/**, /static/**); } }addPathPatterns(/**)表示拦截所有接口excludePathPatterns罗列不需要登录就能访问的路径。最常见的翻车是前端页面静态资源也被拦截导致页面能开但接口全是 401把/static/**、/file/**放行就行。Configuration让这个类被 Spring 容器拾取WebMvcConfigurer是 SpringBoot 定制 MVC 的入口这也是 SpringBoot 自动装配原理的实际体现——SpringBootApplication里的EnableAutoConfiguration会加载一批 MVC 自动配置类你写的配置类相当于在自动配置之上追加规则。用 Spring Security 的项目注意 2.7.x 的 lambda 放行写法老写法会有弃用警告但不影响运行。面试常问的自动装配原理排错时的实际意义是某个依赖配了但没生效去META-INF/spring.factories或AutoConfiguration.imports里查对应自动配置类比如数据源报错就找DataSourceAutoConfigurationyml 里的配置项就是由它逐一读入。5. Vue 打包产物与 SpringBoot 的合并部署5.1 开发期联调转发优先于后端开 CORS联调阶段的原则是前端能走转发就不动后端。转发在 devServer 层面完成后端拿到的请求头是浏览器视角的完全不触发跨域。如果图省事把 baseURL 改成完整后端地址那才需要后端配合开 CORSConfiguration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOrigins(http://localhost:8080) .allowedMethods(GET, POST, PUT, DELETE); } }addMapping(/**)匹配所有路径allowedOrigins写页面的来源地址端口必须写对错一个数字请求照样被拦。allowedMethods列出允许的 HTTP 方法漏了 PUT 或 DELETE 会导致对应接口在浏览器里调不通。两种方式选一种即可同时配也不会冲突但联调时先确认走的是哪条链路别两边都对不上号。5.2 vue 打包后布局异常路径和路由模式是两大根因生产包这块vue 打包后布局异常是被搜得最多的词之一根因通常是两个。第一publicPath默认是/打包后所有 CSS、JS 引用都是绝对路径部署到 SpringBoot 的 static 目录或任意子路径下资源 404样式全丢。第二路由用了 history 模式刷新页面直接 404。// vue.config.js 中追加打包路径配置 module.exports defineConfig({ publicPath: ./, // 相对路径部署到任何子目录都行 outputDir: dist, assetsDir: static, indexPath: index.html })publicPath: ./让生成的 index.html 用相对路径引用资源assetsDir把静态资源归到 static 子目录outputDir指定输出目录名。处理后 dist 目录拷到任何位置只要保持相对结构样式和脚本都能加载。路由模式的问题更快的解法是直接改回 hash 模式// Vue Router 4 写法 import { createRouter, createWebHashHistory } from vue-router const router createRouter({ history: createWebHashHistory(), // 地址里带 #刷新不丢 routes })createWebHashHistory对应 hash 模式URL 形如/#/detail刷新时不会向服务器发真实路径请求静态部署下最省心。答辩场景没有 SEO 需求hash 模式性价比最高要保留 history 模式就得在服务器端配置回退规则把不存在的路径都指向 index.html工作量立刻上去。5.3 把 dist 合进 SpringBoot 的收尾流程答辩前最常见的部署方式是把前端打包产物合进后端一个 jar 跑完演示。步骤如下# 前端构建产出 dist 目录 npm run build ls dist # 把产物合并到 SpringBoot 静态目录 cp -r dist/* ../backend/src/main/resources/static/ls dist确认结构目录顶层必须直接是 index.html 和 static 文件夹如果外面还包着一层 dist路径就不对了。拷贝时用cp -r dist/*把内容铺到 static 下而不是把整个 dist 文件夹放进去。两种收尾方式可以按场景选部署方式改动点适合场景dist 合进 SpringBoot拷贝到 static 目录答辩演示单进程启动dist 交给 nginx 托管配置前端回退规则前后端独立部署、要扩容最后打整包并启动cd ../backend mvn clean package -Dmaven.test.skiptrue java -jar target/graduation-0.0.1-SNAPSHOT.jar-Dmaven.test.skiptrue跳过单元测试毕设项目的测试往往依赖数据库跳过能让打包更稳java -jar指定启动 jar默认读取 jar 内 application.yml。启动后浏览器直接访问http://localhost:8081/能看到前端页面就说明合并部署成功整个演示只需要跑这一个进程。6. 验收前用三个检查点给 Vue_SpringBoot 项目收尾答辩前的收尾我压成三个十分钟内能验证完的检查点跑通一项划掉一项比临时翻 README 可靠。6.1 视频模块用 hls.js 处理 m3u8毕设里带视频课程模块的不少浏览器 video 标签直接播 mp4 没问题但播放 m3u8 格式必须借助抽流库。hls.js 是这场景下的标配安装npm install hls.js后接入import Hls from hls.js if (Hls.isSupported()) { const hls new Hls() hls.loadSource(/api/video/lesson01.m3u8) // 走接口转发 hls.attachMedia(this.$refs.video) }Hls.isSupported()先探测浏览器是否支持 MSEloadSource加载 m3u8 索引attachMedia把流挂到 video 元素上。注意 loadSource 的地址要能通过前面配的转发路径访问否则拉流时报网络错误。平台只存 mp4 的话直接用this.$refs.video.src /file/lesson.mp4就行不用引入额外库。6.2 用 curl 验证接口和敏感端点验收时带着命令行测比点按钮效率高重点验证鉴权和监控端点暴露问题# 未带 token 访问受保护接口预期返回 401 或 403 curl -i http://localhost:8081/order/list # 查看是否开放了 heapdump 端点 curl -s http://localhost:8081/actuator | grep -o heapdump第一条-i同时输出响应头看状态码是否符合预期第二条如果返回了 heapdump 字符串说明敏感端点还开着。heapdump 会把 JVM 内存快照导出内存里可能包含数据库密码和登录 token属于答辩时容易被评委当场点出来的问题。处理方式是在配置里关掉非必要端点只留 health 和 info。6.3 演示前固定三步操作顺序最后一步不写代码定操作顺序先导数据库脚本再启后端最后启前端。后端日志出现 Started、前端出现 Compiled successfully是两个可用的信号到达之前不进页面操作。顺序固定成一条命令链mysql 导入、mvn spring-boot:run、npm run serve演示时逐条敲哪一步报错就定位到哪一层比在 IDEA 里点按钮可控得多。本文还有配套的精品资源点击获取