
简介这是一套面向Java全栈开发者与后台管理框架搭建者的国密前后分离快速开发平台源码基于Vue3、AntDesignVue4、Vite5、SpringBoot3、MyBatis-Plus、HuTool与Sa-Token等开源技术栈构建内置国密加解密能力可保障前后端数据传输安全并适配国产化机型、中间件与数据库适合中高级开发者用于企业级后台、低代码平台或安全合规项目的快速起步。压缩包共1607个文件约11.23MB以751个Java后端源码、556个Vue前端组件、103个JavaScript脚本及62个XML配置为主另含模板文件、SQL脚本、Markdown说明与少量图片资源前后端结构完整。已有51人学习下载。平台还预留工作流、多租户、多数据源、即时通讯等高级插件接入点读者可据此理解国密传输链路、权限认证与代码生成机制快速搭建可商用项目骨架。1. 从一份后台管理框架拆起Vue3 SpringBoot3 全栈骨架到底能省多少事如果你最近在找一个能直接跑起来、前后端都不缺胳膊少腿的后台管理底座这套基于 Vue3 AntDesignVue4 Vite5 SpringBoot3 MyBatis-Plus HuTool Sa-Token 的开源技术栈组合值得花半小时拆一遍。它不是那种只给你几个空页面的脚手架而是把权限、菜单、字典、加解密这些后台系统里最磨人的部分都预置好了尤其内置了国密加解密能力前后端传输敏感字段时不用自己从零搭一套。适合谁适合手上有个中后台项目要快速起盘、又不想在权限模型和加密通道上反复造轮子的团队也适合想系统过一遍 Vue3 组合式 API 和 SpringBoot3 新特性的开发者拿来当参照。下面我按「这是什么 → 怎么跑起来 → 坑在哪 → 怎么用透」的顺序把这份资源拆开讲。2. 技术栈选型拆解为什么是 Vue3 Vite5 SpringBoot3 这套组合2.1 前端为什么押注 Vue3 AntDesignVue4 Vite5先说前端。Vue3 的组合式 API 在这类后台框架里几乎是刚需因为后台页面大量存在「一个页面里塞表格、搜索表单、弹窗、分页」的场景用setup把逻辑按功能聚合比 Options API 那种按选项类型分散的写法好维护太多。AntDesignVue4 是 Ant Design 的 Vue3 版本组件覆盖度在后台场景里基本够用表格、表单、树、穿梭框这些高频组件都成熟省去自己封装基础组件的功夫。Vite5 负责构建冷启动和热更新速度比老一代打包器快一个量级开发时改一行代码几乎秒级反馈这对后台这种页面多、改得勤的项目体感差别很明显。选型上有个容易被忽略的点AntDesignVue4 对 Vue3 的script setup语法支持很自然配合 Vite5 的按需引入插件打包体积能压下来。如果你之前用过 Vue2 ElementUI 那套迁过来最大的思维转变是「逻辑不再按 data/methods 分块而是按业务功能聚合」一开始会别扭写两个页面就顺了。2.2 后端为什么是 SpringBoot3 MyBatis-Plus Sa-Token后端这边SpringBoot3 的基线是 Java 17虚拟线程、GraalVM 原生镜像这些新特性对后台系统不是必需但 Java 17 的语法糖和性能提升是实打实的。MyBatis-Plus 在 MyBatis 基础上补了通用 CRUD、条件构造器、分页插件后台系统里 80% 的单表操作不用手写 SQL这是它比原生 MyBatis 省事的地方。HuTool 是个工具库集合字符串、日期、加密、JSON 这些常用操作都有封装省得项目里到处引零散依赖。Sa-Token 是这套里比较关键的一环它负责认证鉴权。相比 Spring SecuritySa-Token 的 API 更直白登录、踢人下线、权限校验、会话管理都是几行代码的事学习成本低。后台系统里「不同角色看到不同菜单、不同按钮」这种需求用 Sa-Token 的注解式鉴权配合前端动态路由能比较干净地实现。2.3 国密加解密在前后端链路里的位置标题里点名的国密加解密是这套框架区别于普通后台脚手架的地方。国密指 SM2、SM3、SM4 这一套算法SM2 是非对称加密类似 RSA 的角色SM3 是摘要算法类似 SHASM4 是对称加密类似 AES。在前后端传输场景里常见做法是前端用 SM2 公钥加密敏感字段比如登录密码后端用私钥解密或者双方协商一个 SM4 密钥做对称加密SM2 只用来保护密钥交换。框架内置这套能力意味着你不用自己去啃 BouncyCastle 的国密实现直接调封装好的工具类就行。提示国密算法的具体密钥长度、填充模式、编码方式不同实现可能有差异接入前先确认前后端用的是同一套参数否则会出现「前端加密后端解不开」的经典问题。3. 把项目跑起来环境准备、依赖安装与首次启动3.1 前端环境与启动步骤前端跑起来的前提是 Node 版本别太老Vite5 要求 Node 18 以上建议直接用 20 的 LTS。包管理器用 npm、pnpm、yarn 都行但这类项目通常锁了 lock 文件跟着项目里的 lock 走最稳。# 进入前端目录目录名以实际项目为准常见是 web 或 frontend cd web # 安装依赖如果项目带 pnpm-lock.yaml 就用 pnpm pnpm install # 启动开发服务器Vite5 默认端口 5173 pnpm dev装依赖这一步最容易翻车的是网络和镜像源。如果卡在某个包下载不动先换镜像源再重试别硬等。启动成功后终端会打印本地访问地址浏览器打开能看到登录页就说明前端通了。这时候后端还没起登录会报接口错误属于正常现象。3.2 后端环境与数据库初始化后端要 Java 17 或更高Maven 3.8 以上。数据库一般是 MySQL 8项目里通常带一个sql目录里面是建表脚本和初始数据。# 进入后端目录常见是 server 或 backend cd server # 先在 MySQL 里建库字符集用 utf8mb4 # CREATE DATABASE admin_db DEFAULT CHARACTER SET utf8mb4; # 导入初始化脚本脚本路径以项目实际为准 mysql -u root -p admin_db sql/init.sql # 改配置文件里的数据库连接、账号密码 # 文件通常是 src/main/resources/application-dev.yml # 编译并启动 mvn clean package -DskipTests java -jar target/*.jar配置文件里要重点核对三处数据库连接串、Redis 连接Sa-Token 的会话通常存 Redis、以及国密相关的密钥配置。这三处任一没配对启动要么直接报错要么登录后鉴权失败。3.3 前后端联调与登录验证前端开发服务器一般配了代理把/api开头的请求转发到后端端口。确认vite.config里的 proxy 目标端口和后端实际端口一致不一致就会出现跨域或 404。都起来之后用初始化脚本里的默认账号登录能进主页、能看到菜单说明整条链路通了。检查项正常表现异常时先看哪前端启动终端打印本地地址页面可访问Node 版本、依赖是否装全后端启动日志出现 Started 字样端口监听数据库/Redis 连接、端口占用登录接口返回 token跳转主页代理配置、后端鉴权配置菜单加载侧边栏按角色渲染权限数据、动态路由逻辑4. 权限与加解密落地Sa-Token 鉴权链路和国密接口怎么接4.1 Sa-Token 登录鉴权的最小闭环Sa-Token 的核心概念是「会话」登录成功后生成 token后续请求带上 token框架自动校验。后端一个最简登录接口大概长这样PostMapping(/login) public Result login(RequestBody LoginDTO dto) { // 校验账号密码这里省略具体查询逻辑 SysUser user userService.checkLogin(dto.getUsername(), dto.getPassword()); if (user null) { return Result.fail(账号或密码错误); } // 登录Sa-Token 会创建会话并返回 token StpUtil.login(user.getId()); // 把 token 返回给前端 return Result.ok(StpUtil.getTokenInfo()); }StpUtil.login()这一步做了三件事创建会话、生成 token、把 token 和用户 ID 绑定。前端拿到 token 后存起来通常放 localStorage 或 Pinia每次请求在 header 里带上。后端要保护某个接口加个SaCheckLogin注解就行要校验具体权限用SaCheckPermission(user:add)这种。参数说明user.getId()是会话标识一般用用户主键getTokenInfo()返回的 token 值和过期时间前端都要存。4.2 前端请求拦截器怎么带 token前端这边用 axios 拦截器统一处理 token 注入和错误响应import axios from axios const service axios.create({ baseURL: /api, timeout: 10000 }) // 请求拦截自动带上 token service.interceptors.request.use(config { const token localStorage.getItem(token) if (token) { // header 名要和后端约定一致常见是 satoken 或 Authorization config.headers[satoken] token } return config }) // 响应拦截统一处理登录失效 service.interceptors.response.use( res res.data, err { if (err.response?.status 401) { // token 失效清掉本地状态并跳登录 localStorage.removeItem(token) location.href /login } return Promise.reject(err) } ) export default service这里的关键是 header 名必须和后端 Sa-Token 配置的一致默认是satoken如果后端改过配置项前端也要跟着改否则会出现「明明登录了但接口一直说未登录」的问题。4.3 国密加解密的接口接入方式国密这块前端加密、后端解密是常见链路。假设登录密码要用 SM2 加密传输前端大致这样调import { sm2Encrypt } from /utils/sm-crypto // 公钥由后端下发或前端配置注意格式要和加密库匹配 const publicKey 后端下发的SM2公钥 async function login(form) { // 只加密敏感字段不要整个表单都加密没必要还增加开销 const encryptedPwd sm2Encrypt(form.password, publicKey) return service.post(/login, { username: form.username, password: encryptedPwd }) }后端对应解密PostMapping(/login) public Result login(RequestBody LoginDTO dto) { // 用私钥解密前端传来的密文 String rawPwd SmUtil.sm2().decryptStr(dto.getPassword(), KeyType.PrivateKey); SysUser user userService.checkLogin(dto.getUsername(), rawPwd); // ... 后续登录逻辑 }参数说明SM2 加密后的密文是 Base64 或 Hex 编码前后端要约定一致私钥绝对不能下发到前端只留在后端。如果项目里还用了 SM4 做对称加密通常是前端生成随机密钥、用 SM2 加密这个密钥一起传后端解出密钥后再用 SM4 解业务数据这套组合比单纯 SM2 更适合加密大段内容。注意国密加解密对编码格式很敏感密文在传输过程中如果被 URL 编码或 JSON 转义破坏解密就会失败。排查时先把密文原样打印出来对比前后端别一上来就怀疑算法。5. 避坑与排查这套框架最容易翻车的五个地方5.1 登录成功但接口一直返回未登录现象是前端明明拿到了 token后续请求却提示未认证。原因通常是 header 名不匹配或者 token 没被正确带上。Sa-Token 默认从satoken这个 header 读 token如果前端写的是Authorization后端就读不到。解决方式是核对后端application.yml里 Sa-Token 的token-name配置前端拦截器里的 header 名跟它保持一致。还有一种情况是 token 存了但拦截器没生效检查 axios 实例是不是被重新创建过、拦截器挂在了另一个实例上。5.2 国密解密报错或解出乱码现象是后端解密抛异常或者解出来的字符串是乱码。原因一般是前后端密钥不匹配、编码方式不一致或者密文在传输中被转义。先确认前端用的公钥和后端用的私钥是同一对再确认密文的编码Base64 还是 Hex两边一致。如果密文经过 URL 传输检查有没有被编码破坏。解决方式是在前端加密后、后端解密前各打印一次密文逐字节对比差异点就是问题所在。5.3 动态路由刷新后 404现象是登录后菜单正常但刷新页面就白屏或 404。原因是动态路由是登录后异步添加的刷新时路由还没注册页面就先渲染了。常见做法是在路由守卫里判断如果已登录但路由未加载先拉取菜单、注册路由再放行。别在created里直接跳转那时候路由表可能还没准备好。5.4 数据库连上了但查询报字段不存在现象是后端启动正常一查数据就报 Unknown column。原因通常是实体类字段和数据库列名没对上MyBatis-Plus 默认开启驼峰转下划线如果数据库列名不是这个规则就要么改列名要么在实体类上加TableField指定。还有一种情况是初始化脚本没跑全某张表缺字段重新核对建表脚本。5.5 打包后前端资源 404现象是开发环境一切正常打包部署后页面空白、控制台报资源 404。原因是 Vite 打包后的资源路径是绝对路径部署到子目录下就找不到。解决方式是在vite.config里把base改成相对路径./或者改成实际部署的子路径。另外确认后端有没有配静态资源映射前后端分离部署时前端资源通常由 Nginx 托管别指望后端 jar 里直接访问。6. 进阶用法把国密加解密和权限缓存用透的两个技巧先说国密这块的进阶玩法。很多项目只把国密用在登录密码上其实业务里的敏感字段——比如身份证号、手机号、银行卡号——同样值得走一遍加密。我的习惯是封装一个统一的加解密工具类前端在提交前对标记为敏感的字段批量加密后端在入库前解密、出库时按需脱敏。这样业务代码里不用到处写加密逻辑改一处全局生效。要注意的是加密字段没法直接做数据库模糊查询如果业务需要按手机号搜索得额外存一个哈希列用 SM3做等值匹配这是加密和查询之间必须做的取舍。再说权限缓存。Sa-Token 的会话默认存内存多实例部署时会话不共享用户请求打到不同实例就会掉登录。生产环境一定要把会话存到 Redis配置里指定 Redis 连接即可。权限数据同理每次请求都查库校验权限QPS 一高数据库就扛不住常见做法是把用户权限列表缓存到 Redis设置合理过期时间权限变更时主动清缓存。这里有个坑清缓存要清对 key别把整个用户的会话都清了否则用户会被强制下线。验证这套框架有没有接对我一般走一遍这个清单用两个不同角色的账号登录确认菜单和按钮权限不同把 token 手动改坏确认接口返回未登录抓一次登录请求确认密码字段是密文刷新页面确认路由和登录态都还在。这四步走完基本能覆盖权限和加密两条主链路。从那以后我每次接这类后台框架都强制先把登录、鉴权、加密这三条链路各跑通一遍再动业务代码不然等业务堆上去再回头查成本翻好几倍。希望帮到你。本文还有配套的精品资源点击获取