尧图网站建设 
简介基于Spring Boot与Vue实现前后端分离的开源开发框架源码包包含完整项目工程适合计算机、数学、电子信息等专业的课程设计、期末大作业或毕业设计参考借鉴。包内共有1020个文件核心代码以Java后端服务、Vue前端组件和JavaScript脚本为主同时包含SQL数据库脚本、Markdown说明文档、XML/yml等配置文件以及less/scss/css样式和SVG图标素材整体压缩包约10.58MB便于快速下载与本地部署。源码目录结构清晰前后端分层明确并带有环境配置示例与依赖锁定文件可直接导入主流开发工具运行调试。资源目前已有3152人学习下载对于有一定Java与Vue基础、希望参照开源框架搭建管理后台或理解前后端交互逻辑的开发者具有较高的参考价值。1. 拿到这个 springbootvue 前后端分离开源框架源码先分清三层刚下载的这份「基于springbootvue开发前后端分离的开源开发框架源码.zip」解压后八成是前端目录、后端目录、数据库脚本三块。别急着双击 index.html前后端分离的项目压根不是这么跑的。这种源码的价值不在“能登录”而在于它把 springboot 的接口分层、vue 的路由与状态管理、还有两者之间的 token 认证串成了一条可复制的生产线。做内部管理系统、毕业设计、产品原型直接在上面接业务表就能省下大半个月的脚手架时间。这篇按“架构分层 → 跑通环境 → 认证链路 → 二次开发”的顺序讲适合刚拿到这类源码不知道从哪个文件看起的人也适合准备把老项目改造成前后端分离的开发者。2. 前后端分离的职责划分与 springbootvue 的选型逻辑为什么业务不写在模板里2.1 springboot 管数据、vue 管页面那行 JSON 就是契约前后端分离的第一原则是springboot 只返回 JSONvue 只负责把 JSON 渲染成页面中间不夹带任何模板引擎。你在这类源码的后端里找不到.jsp或者thymeleaf的页面文件Controller 层统一返回Result对象里面包着 code、message、data前端拿到这行数据结构再做展示。这类 Result 通常长这样Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(success); result.setData(data); return result; } }这个类的 code 是业务状态码200 表示成功、401 表示未认证、500 表示服务端异常data 泛型存放真正的业务数据。前端所有请求统一按这个结构解包所以“前后端分离项目实战”里第一步永远是先对齐这个返回结构而不是急着调接口。业务校验留在 springboot 的 Service 层vue 里只做展示逻辑和跳转否则一旦前端页面重写业务判定就要跟着重写一遍。2.2 从 JSP 到分离会话方式从 HttpSession 迁到 token老项目用 JSP 时登录状态是后端在 HttpSession 里存一份页面跳转时靠 Cookie 里的 JSESSIONID 来回认。前后端分离后前端是独立应用springboot 以无状态方式提供 API会话不能再依赖服务端 session。于是这类源码普遍换成 token 方案登录成功发一个 JWT前端存起来之后每个请求在 Authorization 头里带回来。这个迁移带来的改动非常具体环节传统 JSP 方案springbootvue 分离方案登录凭证HttpSession CookieJWT / Token页面渲染服务端模板引擎vue 组件渲染 JSON权限判断服务端过滤器网关/拦截器 前端路由守卫部署形态单体应用打 WAR后端 jar 前端静态文件/镜像从架构上看springboot 的拦截器职责不变但判断依据从“session 里有没有用户”变成“token 能不能解析出用户”vue 则新增了路由守卫层进页面之前先问一句 token 在不在。这两个改动是整个认证链路的地基。做前后端分离项目实战时先把这套链路想清楚再动手写代码后面遇到的 401 问题会少一大半。2.3 这类框架的目录结构约定与开源生态目前市面上能搜到的 springbootvue 前后端分离开源开发框架目录约定高度统一。典型代表是以若依框架前后端分离RuoYi-Vue为底子衍生出来的各类脚手架后端按controller / service / mapper / entity分包前端按api / views / router / store分目录。你手上的源码大概率也是这种结构├── backend │ ├── src/main/java/com/xxx │ │ ├── controller │ │ ├── service │ │ ├── mapper │ │ └── entity │ ├── src/main/resources │ │ ├── mapper # MyBatis XML │ │ └── application.yml │ └── pom.xml ├── frontend │ ├── src │ │ ├── api # axios 请求封装 │ │ ├── views # 页面组件 │ │ ├── router # vue-router 配置 │ │ └── store # pinia / vuex │ ├── vite.config.js │ └── package.json └── sql # 初始化脚本这个结构的价值在于约定。新人对着一堆源码时只要看到api目录就知道去哪找接口定义看到views就知道去哪加页面看到sql就知道先执行哪个脚本。这类开源框架的实际使用成本也在这里——用熟一层就能向后端或前端任意一侧深入不需要从零设计工程结构。3. 把源码.zip 跑起来vue 安装及环境配置、springboot 配置与最小启动步骤3.1 环境版本先对齐JDK、Maven、Node、MySQL这类源码在本地跑不起来八成不是代码的问题是环境版本不对。springboot 2.x 和 3.x 对 JDK 的要求不同vue 老项目用的依赖对 Node 版本也敏感。动手前先看项目里的pom.xml和package.json再对着下面的常见版本矩阵确认本地环境组件常见要求说明JDK8 / 11 / 17springboot 2.x 用 8 或 113.x 必须 17Maven3.6 及以上低于 3.6 可能解析不了部分依赖Node.js16 / 18老项目配 16新项目配 18 或 20MySQL5.7 / 8.0注意 8.0 的驱动类名和时区配置Redis可选若源码启用了 redis 缓存则必须装用 java -version 和 node -v 各确认一次版本再用 mvn -v 看 Maven。版本跨度大时建议装一个 Node 版本管理工具在项目目录里切到对应版本即可。3.2 数据库初始化先建库再改 springboot 的 yml源码包里的sql目录一般放着初始化脚本按文件名顺序执行即可。用命令行导入最快mysql -uroot -p -e CREATE DATABASE dev_framework DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; mysql -uroot -p dev_framework sql/dev_framework.sql第一条命令把数据库建出来指定 utf8mb4 字符集是为了避免中文乱码第二条命令把表结构和初始数据导入。之后打开后端resources下的application.yml改数据源这一段server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/dev_framework?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driverurl 末尾的serverTimezoneAsia/Shanghai必须保留不加它在 MySQL 8.0 下会报时区错误useSSLfalse是本地调试用的生产环境应改回 true 或交给云数据库处理。如果项目还配置了 Redis把spring.redis.host和port一并核对。3.3 后端启动Maven 依赖与启动日志的关键行回到backend目录执行启动命令mvn spring-boot:run第一次启动会下载大量依赖时间长短取决于网络。看到日志里出现Tomcat started on port(s): 8080就说明后端起来了。如果报错优先看两类问题一是mapper-locations配置找不到 XML 文件检查application.yml里的mybatis.mapper-locations是否指向classpath*:mapper/**/*.xml二是数据库账号密码错误改完 yml 必须重启进程。提示Maven 依赖下载慢时在settings.xml里配置阿里云镜像替换为https://maven.aliyun.com/repository/public即可。用浏览器或 curl 验证一个公开接口确认后端返回 JSON 而不是报错页面curl http://localhost:8080/api/auth/captcha3.4 前端启动npm install 慢、版本冲突与 dev 代理前端目录下执行npm install npm run devnpm install是 vue 安装及环境配置里最耗时的一步。老项目锁定的依赖版本可能在新 Node 下编译失败报错信息里出现node-sass时优先在package.json里搜有没有node-sass有就在项目根目录加.npmrc文件sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/ registryhttps://registry.npmmirror.com/装完依赖启动后前端默认跑在 3000 或 5173 端口。打开浏览器访问登录页按 F12 看 Network 面板登录请求如果能返回数据说明代理转发生效。vite 项目的代理在vite.config.js里确认server.proxy把/api转发到了http://localhost:8080。跑通登录页是“前后端分离项目实战”的第一个里程碑。到这一步数据库、后端、前端三条线已经连上接下来要解决的是认证这个贯穿所有请求的核心问题。4. vue 前后端分离请求 token 处理与跨域配置登录认证的完整链路4.1 登录成功后的那串 token 存在哪登录流程是这样的vue 把用户名密码 POST 给 springboot 的登录接口后端校验通过后生成一段 JWT 返回vue 拿到后同时写入 Pinia或 Vuex和 localStorage。内存里的那份负责当前页面状态localStorage 里的那份负责刷新页面后不丢登录态。登录方法的核心代码长这样import { defineStore } from pinia import { loginApi } from /api/auth import { getToken, setToken } from /utils/auth export const useUserStore defineStore(user, { state: () ({ token: getToken() || , name: }), actions: { async login(userInfo) { const { username, password } userInfo const res await loginApi({ username, password }) this.token res.data.token setToken(res.data.token) return res } } })setToken内部封装了localStorage.setItem对上层隐藏存储细节。不要把localStorage的读写散落在业务组件里后续要换成sessionStorage或者 Cookie 时只改一个文件。注意res.data.token这层结构依赖后端 Result 包装类如果你手上的源码返回结构不一样以实际返回值为准改这一行。4.2 axios 拦截器请求头带 token 与 401 统一处理vue 里每个请求都在拦截器里种 token不要在业务代码里手动设置Authorization头。拦截器放在src/utils/request.js所有页面请求都走这一个实例import axios from axios import { getToken, removeToken } from /utils/auth import router from /router const service axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 15000 }) service.interceptors.request.use( config { const token getToken() if (token) { config.headers[Authorization] Bearer token } return config }, error Promise.reject(error) ) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { if (res.code 401) { removeToken() router.push(/login) } return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { removeToken() router.push(/login?redirect encodeURIComponent(router.currentRoute.value.fullPath)) } return Promise.reject(error) } ) export default serviceBearer前缀是 JWT 的惯例写法后端过滤器会按这个前缀解析 tokentimeout: 15000防止网络抖动时请求挂死。请求拦截器负责加 token响应拦截器负责收 401——注意业务 code 为 401 和 HTTP 状态码 401 是两条路径都要处理少一条就会出现“明明结果里报了未认证但页面不跳登录”的怪现象。redirect参数让用户重新登录后跳回原页面省得每次都要手工导航回去。4.3 路由守卫与 vue 路由参数beforeEach 里读 token前端路由守卫是防护的第二道闸进页面之前先问一句“token 在不在”。配置在src/router/index.jsrouter.beforeEach((to, from, next) { const token getToken() if (to.path /login) { next() } else if (!token !to.meta.public) { next({ path: /login, query: { redirect: to.fullPath } }) } else { next() } })to.meta.public标记不需要登录的页面比如注册页和 404 页登录后访问/login直接放行避免来回跳。这个守卫处理的是“没有 token”而 4.2 节拦截器处理的是“token 无效”两层配合才算完整。这里顺带说一下 vue 路由参数因为登录跳转里已经用到。路由传参有两种方式query 是 URL 后面跟?keyvalue刷新页面参数还在适合redirect这种需要书签的场景params 配合动态路径/detail/:id使用刷新后容易丢失适合页面内部传递 id。源码里如果看到this.$route.query.redirect和this.$route.params.id对应的就是这两种。后者的坑在于页面刷新后参数拿不到查这类问题先看 URLURL 里有参数就怪 paramsURL 里没有就该用 query。4.4 跨域的三层防线dev 代理、后端 CORS、生产 Nginx前后端分离必然碰到跨域。开发环境用 Vite 代理最省事vite.config.js里这样配server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }前端请求/api/auth/login时vite 把请求转发到http://localhost:8080/api/auth/login浏览器只看到同源请求不触发 CORS。changeOrigin: true让代理服务器把 Host 头改成 target 的域名否则部分后端会按 Host 做校验导致请求被拒。生产环境这套就失效了。常见做法是用 Nginx 把静态文件和 API 请求放在同一个站点下location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }proxy_pass末尾带/是关键http://localhost:8080/会把/api前缀剥掉再转发后端接口就收不到多余的/api。后端默认也要开一层 CORS 做兜底Spring Boot 里用配置类解决Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedHeader(*); config.addAllowedMethod(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }addAllowedOriginPattern(*)是 springboot 新版写法addAllowedOrigin已经过期setAllowCredentials(true)表示允许携带 Cookie但注意这个配置和通配符域名配合在旧版会有冲突用AllowedOriginPattern就是为了规避这个问题。三层配齐后开发、生产、直连三种场景的跨域都不再是瓶颈。5. 二次开发与安全加固新增业务模块、yml 密文与部署前自检5.1 新增一个模块的完整链路刚拿到这类源码时最怕的就是往现有结构里硬塞代码。新增一个业务模块有固定顺序数据库建表 → 实体类 → Mapper → Service → Controller → 前端 api 封装 → 页面和路由。以订单模块为例建表语句和实体类先行CREATE TABLE biz_order ( id BIGINT AUTO_INCREMENT PRIMARY KEY, order_no VARCHAR(64) NOT NULL, user_id BIGINT NOT NULL, amount DECIMAL(10,2), created_at DATETIME DEFAULT CURRENT_TIMESTAMP );Data TableName(biz_order) public class BizOrder { TableId(type IdType.AUTO) private Long id; private String orderNo; private Long userId; private BigDecimal amount; private LocalDateTime createdAt; }后端代码都放在与订单相关的包里Controller 只做接收参数和返回 Result查询逻辑下沉到 ServiceCRUD 直接继承 MyBatis-Plus 的BaseMapper。前端在api目录加一个order.js页面组件放在views/order/最后在路由表里注册。这套链路走熟之后每个模块的增删改查都是同样的节奏源码里带代码生成器的项目比如若依类框架还能省掉手工写实体和 Mapper 的步骤。5.2 数据库账号不在 yml 里裸奔jasypt 密文配置源码里的application.yml通常写着明文密码推到生产环境前必须先处理。常用方案是 jasypt-spring-boot-starter把配置文件里的密码替换成密文spring: datasource: password: ENC(加密后的密文字符串) jasypt: encryptor: password: 你的盐值 algorithm: PBEWithMD5AndDES盐值放在启动参数里传不写进配置文件。用 jasypt 提供的工具类生成密文后把明文替换掉。启动时加-Djasypt.encryptor.password你的盐值springboot 启动时自动解密日志和备份文件里都不再出现真实密码。5.3 部署前用 curl 验证接口链路前端页面能点通不代表接口闭环。部署前用 curl 走一遍认证链路确认 token 从哪来、带上之后能不能访问业务接口curl -X POST http://localhost:8080/api/auth/login \ -H Content-Type: application/json \ -d {username:admin,password:admin123} curl http://localhost:8080/api/order/list \ -H Authorization: Bearer 上一步返回的token第一条命令拿到登录接口返回的 JWT粘贴到第二条命令的token位置。返回 200 且带业务数据链路才算通返回 401 说明 token 解析或拦截器配置有问题返回 403 说明权限层没放行——排查时先看后端日志的异常堆栈再从前端 Console 的报错反向定位拦截器。最后确认两件事一是生产环境把server段的port改成 8080 以外的随机端口避免默认端口被扫描二是检查spring.profiles.active指向的是prod配置不是本地调试的dev。这两个检查做掉springboot 的关键配置就基本没有裸奔的地方了。本文还有配套的精品资源点击获取 SpringBoot+Vue前后端分离框架源码解析：环境配置、Token认证与二次开发
简介基于Spring Boot与Vue实现前后端分离的开源开发框架源码包包含完整项目工程适合计算机、数学、电子信息等专业的课程设计、期末大作业或毕业设计参考借鉴。包内共有1020个文件核心代码以Java后端服务、Vue前端组件和JavaScript脚本为主同时包含SQL数据库脚本、Markdown说明文档、XML/yml等配置文件以及less/scss/css样式和SVG图标素材整体压缩包约10.58MB便于快速下载与本地部署。源码目录结构清晰前后端分层明确并带有环境配置示例与依赖锁定文件可直接导入主流开发工具运行调试。资源目前已有3152人学习下载对于有一定Java与Vue基础、希望参照开源框架搭建管理后台或理解前后端交互逻辑的开发者具有较高的参考价值。1. 拿到这个 springbootvue 前后端分离开源框架源码先分清三层刚下载的这份「基于springbootvue开发前后端分离的开源开发框架源码.zip」解压后八成是前端目录、后端目录、数据库脚本三块。别急着双击 index.html前后端分离的项目压根不是这么跑的。这种源码的价值不在“能登录”而在于它把 springboot 的接口分层、vue 的路由与状态管理、还有两者之间的 token 认证串成了一条可复制的生产线。做内部管理系统、毕业设计、产品原型直接在上面接业务表就能省下大半个月的脚手架时间。这篇按“架构分层 → 跑通环境 → 认证链路 → 二次开发”的顺序讲适合刚拿到这类源码不知道从哪个文件看起的人也适合准备把老项目改造成前后端分离的开发者。2. 前后端分离的职责划分与 springbootvue 的选型逻辑为什么业务不写在模板里2.1 springboot 管数据、vue 管页面那行 JSON 就是契约前后端分离的第一原则是springboot 只返回 JSONvue 只负责把 JSON 渲染成页面中间不夹带任何模板引擎。你在这类源码的后端里找不到.jsp或者thymeleaf的页面文件Controller 层统一返回Result对象里面包着 code、message、data前端拿到这行数据结构再做展示。这类 Result 通常长这样Data public class ResultT { private Integer code; private String message; private T data; public static T ResultT success(T data) { ResultT result new Result(); result.setCode(200); result.setMessage(success); result.setData(data); return result; } }这个类的 code 是业务状态码200 表示成功、401 表示未认证、500 表示服务端异常data 泛型存放真正的业务数据。前端所有请求统一按这个结构解包所以“前后端分离项目实战”里第一步永远是先对齐这个返回结构而不是急着调接口。业务校验留在 springboot 的 Service 层vue 里只做展示逻辑和跳转否则一旦前端页面重写业务判定就要跟着重写一遍。2.2 从 JSP 到分离会话方式从 HttpSession 迁到 token老项目用 JSP 时登录状态是后端在 HttpSession 里存一份页面跳转时靠 Cookie 里的 JSESSIONID 来回认。前后端分离后前端是独立应用springboot 以无状态方式提供 API会话不能再依赖服务端 session。于是这类源码普遍换成 token 方案登录成功发一个 JWT前端存起来之后每个请求在 Authorization 头里带回来。这个迁移带来的改动非常具体环节传统 JSP 方案springbootvue 分离方案登录凭证HttpSession CookieJWT / Token页面渲染服务端模板引擎vue 组件渲染 JSON权限判断服务端过滤器网关/拦截器 前端路由守卫部署形态单体应用打 WAR后端 jar 前端静态文件/镜像从架构上看springboot 的拦截器职责不变但判断依据从“session 里有没有用户”变成“token 能不能解析出用户”vue 则新增了路由守卫层进页面之前先问一句 token 在不在。这两个改动是整个认证链路的地基。做前后端分离项目实战时先把这套链路想清楚再动手写代码后面遇到的 401 问题会少一大半。2.3 这类框架的目录结构约定与开源生态目前市面上能搜到的 springbootvue 前后端分离开源开发框架目录约定高度统一。典型代表是以若依框架前后端分离RuoYi-Vue为底子衍生出来的各类脚手架后端按controller / service / mapper / entity分包前端按api / views / router / store分目录。你手上的源码大概率也是这种结构├── backend │ ├── src/main/java/com/xxx │ │ ├── controller │ │ ├── service │ │ ├── mapper │ │ └── entity │ ├── src/main/resources │ │ ├── mapper # MyBatis XML │ │ └── application.yml │ └── pom.xml ├── frontend │ ├── src │ │ ├── api # axios 请求封装 │ │ ├── views # 页面组件 │ │ ├── router # vue-router 配置 │ │ └── store # pinia / vuex │ ├── vite.config.js │ └── package.json └── sql # 初始化脚本这个结构的价值在于约定。新人对着一堆源码时只要看到api目录就知道去哪找接口定义看到views就知道去哪加页面看到sql就知道先执行哪个脚本。这类开源框架的实际使用成本也在这里——用熟一层就能向后端或前端任意一侧深入不需要从零设计工程结构。3. 把源码.zip 跑起来vue 安装及环境配置、springboot 配置与最小启动步骤3.1 环境版本先对齐JDK、Maven、Node、MySQL这类源码在本地跑不起来八成不是代码的问题是环境版本不对。springboot 2.x 和 3.x 对 JDK 的要求不同vue 老项目用的依赖对 Node 版本也敏感。动手前先看项目里的pom.xml和package.json再对着下面的常见版本矩阵确认本地环境组件常见要求说明JDK8 / 11 / 17springboot 2.x 用 8 或 113.x 必须 17Maven3.6 及以上低于 3.6 可能解析不了部分依赖Node.js16 / 18老项目配 16新项目配 18 或 20MySQL5.7 / 8.0注意 8.0 的驱动类名和时区配置Redis可选若源码启用了 redis 缓存则必须装用 java -version 和 node -v 各确认一次版本再用 mvn -v 看 Maven。版本跨度大时建议装一个 Node 版本管理工具在项目目录里切到对应版本即可。3.2 数据库初始化先建库再改 springboot 的 yml源码包里的sql目录一般放着初始化脚本按文件名顺序执行即可。用命令行导入最快mysql -uroot -p -e CREATE DATABASE dev_framework DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; mysql -uroot -p dev_framework sql/dev_framework.sql第一条命令把数据库建出来指定 utf8mb4 字符集是为了避免中文乱码第二条命令把表结构和初始数据导入。之后打开后端resources下的application.yml改数据源这一段server: port: 8080 spring: datasource: url: jdbc:mysql://localhost:3306/dev_framework?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: root password: 你的密码 driver-class-name: com.mysql.cj.jdbc.Driverurl 末尾的serverTimezoneAsia/Shanghai必须保留不加它在 MySQL 8.0 下会报时区错误useSSLfalse是本地调试用的生产环境应改回 true 或交给云数据库处理。如果项目还配置了 Redis把spring.redis.host和port一并核对。3.3 后端启动Maven 依赖与启动日志的关键行回到backend目录执行启动命令mvn spring-boot:run第一次启动会下载大量依赖时间长短取决于网络。看到日志里出现Tomcat started on port(s): 8080就说明后端起来了。如果报错优先看两类问题一是mapper-locations配置找不到 XML 文件检查application.yml里的mybatis.mapper-locations是否指向classpath*:mapper/**/*.xml二是数据库账号密码错误改完 yml 必须重启进程。提示Maven 依赖下载慢时在settings.xml里配置阿里云镜像替换为https://maven.aliyun.com/repository/public即可。用浏览器或 curl 验证一个公开接口确认后端返回 JSON 而不是报错页面curl http://localhost:8080/api/auth/captcha3.4 前端启动npm install 慢、版本冲突与 dev 代理前端目录下执行npm install npm run devnpm install是 vue 安装及环境配置里最耗时的一步。老项目锁定的依赖版本可能在新 Node 下编译失败报错信息里出现node-sass时优先在package.json里搜有没有node-sass有就在项目根目录加.npmrc文件sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass/ registryhttps://registry.npmmirror.com/装完依赖启动后前端默认跑在 3000 或 5173 端口。打开浏览器访问登录页按 F12 看 Network 面板登录请求如果能返回数据说明代理转发生效。vite 项目的代理在vite.config.js里确认server.proxy把/api转发到了http://localhost:8080。跑通登录页是“前后端分离项目实战”的第一个里程碑。到这一步数据库、后端、前端三条线已经连上接下来要解决的是认证这个贯穿所有请求的核心问题。4. vue 前后端分离请求 token 处理与跨域配置登录认证的完整链路4.1 登录成功后的那串 token 存在哪登录流程是这样的vue 把用户名密码 POST 给 springboot 的登录接口后端校验通过后生成一段 JWT 返回vue 拿到后同时写入 Pinia或 Vuex和 localStorage。内存里的那份负责当前页面状态localStorage 里的那份负责刷新页面后不丢登录态。登录方法的核心代码长这样import { defineStore } from pinia import { loginApi } from /api/auth import { getToken, setToken } from /utils/auth export const useUserStore defineStore(user, { state: () ({ token: getToken() || , name: }), actions: { async login(userInfo) { const { username, password } userInfo const res await loginApi({ username, password }) this.token res.data.token setToken(res.data.token) return res } } })setToken内部封装了localStorage.setItem对上层隐藏存储细节。不要把localStorage的读写散落在业务组件里后续要换成sessionStorage或者 Cookie 时只改一个文件。注意res.data.token这层结构依赖后端 Result 包装类如果你手上的源码返回结构不一样以实际返回值为准改这一行。4.2 axios 拦截器请求头带 token 与 401 统一处理vue 里每个请求都在拦截器里种 token不要在业务代码里手动设置Authorization头。拦截器放在src/utils/request.js所有页面请求都走这一个实例import axios from axios import { getToken, removeToken } from /utils/auth import router from /router const service axios.create({ baseURL: import.meta.env.VITE_APP_BASE_API, timeout: 15000 }) service.interceptors.request.use( config { const token getToken() if (token) { config.headers[Authorization] Bearer token } return config }, error Promise.reject(error) ) service.interceptors.response.use( response { const res response.data if (res.code ! 200) { if (res.code 401) { removeToken() router.push(/login) } return Promise.reject(new Error(res.message)) } return res }, error { if (error.response error.response.status 401) { removeToken() router.push(/login?redirect encodeURIComponent(router.currentRoute.value.fullPath)) } return Promise.reject(error) } ) export default serviceBearer前缀是 JWT 的惯例写法后端过滤器会按这个前缀解析 tokentimeout: 15000防止网络抖动时请求挂死。请求拦截器负责加 token响应拦截器负责收 401——注意业务 code 为 401 和 HTTP 状态码 401 是两条路径都要处理少一条就会出现“明明结果里报了未认证但页面不跳登录”的怪现象。redirect参数让用户重新登录后跳回原页面省得每次都要手工导航回去。4.3 路由守卫与 vue 路由参数beforeEach 里读 token前端路由守卫是防护的第二道闸进页面之前先问一句“token 在不在”。配置在src/router/index.jsrouter.beforeEach((to, from, next) { const token getToken() if (to.path /login) { next() } else if (!token !to.meta.public) { next({ path: /login, query: { redirect: to.fullPath } }) } else { next() } })to.meta.public标记不需要登录的页面比如注册页和 404 页登录后访问/login直接放行避免来回跳。这个守卫处理的是“没有 token”而 4.2 节拦截器处理的是“token 无效”两层配合才算完整。这里顺带说一下 vue 路由参数因为登录跳转里已经用到。路由传参有两种方式query 是 URL 后面跟?keyvalue刷新页面参数还在适合redirect这种需要书签的场景params 配合动态路径/detail/:id使用刷新后容易丢失适合页面内部传递 id。源码里如果看到this.$route.query.redirect和this.$route.params.id对应的就是这两种。后者的坑在于页面刷新后参数拿不到查这类问题先看 URLURL 里有参数就怪 paramsURL 里没有就该用 query。4.4 跨域的三层防线dev 代理、后端 CORS、生产 Nginx前后端分离必然碰到跨域。开发环境用 Vite 代理最省事vite.config.js里这样配server: { port: 3000, proxy: { /api: { target: http://localhost:8080, changeOrigin: true } } }前端请求/api/auth/login时vite 把请求转发到http://localhost:8080/api/auth/login浏览器只看到同源请求不触发 CORS。changeOrigin: true让代理服务器把 Host 头改成 target 的域名否则部分后端会按 Host 做校验导致请求被拒。生产环境这套就失效了。常见做法是用 Nginx 把静态文件和 API 请求放在同一个站点下location /api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; }proxy_pass末尾带/是关键http://localhost:8080/会把/api前缀剥掉再转发后端接口就收不到多余的/api。后端默认也要开一层 CORS 做兜底Spring Boot 里用配置类解决Configuration public class CorsConfig { Bean public CorsFilter corsFilter() { CorsConfiguration config new CorsConfiguration(); config.addAllowedOriginPattern(*); config.addAllowedHeader(*); config.addAllowedMethod(*); config.setAllowCredentials(true); UrlBasedCorsConfigurationSource source new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration(/**, config); return new CorsFilter(source); } }addAllowedOriginPattern(*)是 springboot 新版写法addAllowedOrigin已经过期setAllowCredentials(true)表示允许携带 Cookie但注意这个配置和通配符域名配合在旧版会有冲突用AllowedOriginPattern就是为了规避这个问题。三层配齐后开发、生产、直连三种场景的跨域都不再是瓶颈。5. 二次开发与安全加固新增业务模块、yml 密文与部署前自检5.1 新增一个模块的完整链路刚拿到这类源码时最怕的就是往现有结构里硬塞代码。新增一个业务模块有固定顺序数据库建表 → 实体类 → Mapper → Service → Controller → 前端 api 封装 → 页面和路由。以订单模块为例建表语句和实体类先行CREATE TABLE biz_order ( id BIGINT AUTO_INCREMENT PRIMARY KEY, order_no VARCHAR(64) NOT NULL, user_id BIGINT NOT NULL, amount DECIMAL(10,2), created_at DATETIME DEFAULT CURRENT_TIMESTAMP );Data TableName(biz_order) public class BizOrder { TableId(type IdType.AUTO) private Long id; private String orderNo; private Long userId; private BigDecimal amount; private LocalDateTime createdAt; }后端代码都放在与订单相关的包里Controller 只做接收参数和返回 Result查询逻辑下沉到 ServiceCRUD 直接继承 MyBatis-Plus 的BaseMapper。前端在api目录加一个order.js页面组件放在views/order/最后在路由表里注册。这套链路走熟之后每个模块的增删改查都是同样的节奏源码里带代码生成器的项目比如若依类框架还能省掉手工写实体和 Mapper 的步骤。5.2 数据库账号不在 yml 里裸奔jasypt 密文配置源码里的application.yml通常写着明文密码推到生产环境前必须先处理。常用方案是 jasypt-spring-boot-starter把配置文件里的密码替换成密文spring: datasource: password: ENC(加密后的密文字符串) jasypt: encryptor: password: 你的盐值 algorithm: PBEWithMD5AndDES盐值放在启动参数里传不写进配置文件。用 jasypt 提供的工具类生成密文后把明文替换掉。启动时加-Djasypt.encryptor.password你的盐值springboot 启动时自动解密日志和备份文件里都不再出现真实密码。5.3 部署前用 curl 验证接口链路前端页面能点通不代表接口闭环。部署前用 curl 走一遍认证链路确认 token 从哪来、带上之后能不能访问业务接口curl -X POST http://localhost:8080/api/auth/login \ -H Content-Type: application/json \ -d {username:admin,password:admin123} curl http://localhost:8080/api/order/list \ -H Authorization: Bearer 上一步返回的token第一条命令拿到登录接口返回的 JWT粘贴到第二条命令的token位置。返回 200 且带业务数据链路才算通返回 401 说明 token 解析或拦截器配置有问题返回 403 说明权限层没放行——排查时先看后端日志的异常堆栈再从前端 Console 的报错反向定位拦截器。最后确认两件事一是生产环境把server段的port改成 8080 以外的随机端口避免默认端口被扫描二是检查spring.profiles.active指向的是prod配置不是本地调试的dev。这两个检查做掉springboot 的关键配置就基本没有裸奔的地方了。本文还有配套的精品资源点击获取