SpringBoot+Vue+JavaCV：实现人像后期融合网站全栈开发实战-平芜编程栈

说实话，Java方向的毕设年年都有大量重复题，但凡你打开任何一个毕设网站搜“springboot+vue”，出来的项目十有八九是管理系统、商城、博客这一类。这类题目不是不能做，但答辩时老师一眼就能看出你只是“搬运工”，问到技术细节往往就卡壳。

我今天想聊的这个题目——“基于SpringBoot+Vue的人像后期融合网站”，本质上是一个把人脸图像处理算法和Web开发结合起来的全栈项目。它最大的优势在于：技术栈非常主流（SpringBoot + Vue + MySQL），业务场景又有足够的创新点和想象空间，图像处理部分还能讲出深度。不管你是打算自己动手写，还是找参考项目改造，这篇文章都能帮你把整个项目的核心思路、技术选型、实现细节和踩坑点讲清楚。

这个题目适合谁？适合已经学过Java Web基础、想做一个有区分度的毕设项目的同学，也适合准备做前后端分离项目但不知道选什么方向的开发者。全文我会按照“设计思路→技术拆解→实操过程→问题排查”的顺序来讲，你可以直接照着落地，也可以参考其中的思路做二次改造。

1. 项目整体设计与思路拆解

1.1 人像后期融合到底在做什么

人像后期融合，通俗点讲，就是把两张或者多张人脸照片做“特征合并”——A照片的脸型、五官位置，加上B照片的肤色、光影纹理，最后生成一张看起来自然的新人脸。市面上很多“一键变老”“明星脸合成”的玩法，底层逻辑就是这个方向。

但作为毕设，不能只停留在“调用别人的付费API”这种层面，因为那样答辩根本讲不清楚。你要做的是自己实现或者集成开源的图像算法，把整个流程控制在自己手里。这个项目的核心流程通常是：

用户上传两张人像照片，指定哪张作为底图、哪张作为特征来源
系统对人脸进行检测，提取关键点（眼睛、鼻子、嘴巴、脸部轮廓等）
对两张人脸做对齐和形变，让五官位置匹配
进行图像融合，把肤色、纹理自然过渡
输出合成结果，用户可以预览、下载、保存到历史记录

这个流程听起来不复杂，但每一步都有技术含量，而且每一步都能在答辩时展开讲解。

1.2 为什么是SpringBoot写后端，Vue写前端

这个问题你在答辩时几乎一定会被问到。我的建议是，从三个层面回答：

第一，岗位匹配度。SpringBoot是当前Java后端开发的事实标准，企业里大量项目在用，它的自动配置、starter机制、内嵌Tomcat等特性，让开发效率比传统SSH、SSM架构高很多。Vue作为渐进式前端框架，学习曲线平滑，组件化开发模式非常适合这种需要交互、预览、上传下载功能的网站。

第二，前后端分离是主流架构。前端通过axios调用后端接口，后端通过RESTful API提供服务，职责边界清晰。前端只管页面渲染和用户交互，后端专注业务逻辑和数据处理。这种架构模式本身就是答辩的加分项，你可以在架构图上明确画出前端、后端、数据库三层划分。

第三，生态成熟，资料丰富。SpringBoot的官方文档和社区资料非常多，Vue的生态也有Element UI、Element Plus这些成熟的组件库，出现任何问题都能快速找到解决方案。对于毕设来说，“稳”比“炫”更重要。

1.3 从抽象概念到具体功能模块的转化

“人像后期融合”这个题目听起来很大，但落实成功能模块后，就是一个标准的前后端分离项目。我在设计时把它拆成了这几个模块：

用户模块：注册、登录、个人信息管理，用JWT做身份认证
图片上传模块：接收用户上传的底图和特征图，做格式校验、大小限制、存储路径管理
人像融合模块：核心算法模块，调用图像处理服务完成人脸检测、对齐、融合，返回结果图
历史记录模块：保存用户的融合记录，展示原图和结果图，支持删除
素材库模块（可选）：管理员预置一些公开人像素材，用户可以拿自己的照片与素材做融合

这个功能清单的好处是，每个模块都有独立的业务逻辑，也都有对应的页面和接口，工作量分布均匀，不会出现“最后一个月疯狂补代码”的窘境。

我在实际给几个学生做指导时发现，很多人的毕设其实不是做不出来，而是一开始没有把题目拆开，导致后面开发的时候东一榔头西一棒子。所以拿到题目后，第一件事一定是先画功能树，把每个功能写清楚，再开始建项目。

2. 核心细节解析与实操要点

2.1 数据库设计：五张表的边界划分

数据库设计是这个项目里最不该出错的部分。表结构设计得合理，后面写代码会非常顺畅；设计得混乱，写到后面你会想推倒重来。我当时的设计是五张表：

用户表（user）

字段	类型	说明
id	bigint	主键，自增
username	varchar(50)	用户名，唯一
password	varchar(100)	密码，BCrypt加密存储
nickname	varchar(50)	昵称
avatar	varchar(255)	头像路径
create_time	datetime	创建时间

图片表（image）

字段	类型	说明
id	bigint	主键
user_id	bigint	所属用户
image_url	varchar(255)	图片访问路径
image_type	tinyint	1-底图 2-特征图 3-结果图
create_time	datetime	上传时间

融合记录表（merge_record）

字段	类型	说明
id	bigint	主键
user_id	bigint	执行融合的用户
base_image_id	bigint	底图ID
feature_image_id	bigint	特征图ID
result_image_id	bigint	结果图ID
status	tinyint	0-处理中 1-成功 2-失败
create_time	datetime	创建时间

素材表（material）（可选）

字段	类型	说明
id	bigint	主键
material_name	varchar(100)	素材名称
material_url	varchar(255)	素材图片路径
create_time	datetime	创建时间

这五张表的关系很清楚：一个用户有多张图片，一次融合记录关联三张图片（底图、特征图、结果图）。关键点在于图片表不要存二进制内容，只存路径，文件放在服务器磁盘上，数据库只做索引。这样做的好处是数据库体量小、查询快，也方便后期接入OSS对象存储。

2.2 后端分层与接口设计

后端我采用的是标准的Controller-Service-Mapper三层架构：

Controller层负责接收请求、参数校验、返回统一响应体
Service层写业务逻辑，包括融合流程的编排
Mapper层用MyBatis-Plus操作数据库

接口设计上，我按资源划分RESTful接口，核心接口如下：

POST /api/user/register注册
POST /api/user/login登录，返回JWT token
POST /api/image/upload上传图片，返回图片ID和访问URL
POST /api/merge/execute执行融合，传入底图ID和特征图ID
GET /api/merge/result/{recordId}获取融合结果
GET /api/merge/records获取当前用户的融合历史
DELETE /api/merge/record/{id}删除历史记录

有一个细节要注意：融合处理是耗时操作，不能同步等待。处理一张高清人像可能需要几百毫秒甚至几秒，前端如果同步等待，用户体验很差。我的方案是先用一个线程池异步处理融合任务，接口先返回“处理中”状态，前端轮询查询结果。这个设计在答辩时也是一个亮点——你不仅能做同步业务，还考虑了异步处理和并发控制。

2.3 前端路由与页面结构

前端我用Vue 3 + Vite + Element Plus，路由设计采用动态路由+路由守卫，未登录用户跳转到登录页。页面结构比较清晰：

登录/注册页：表单校验、登录后存token到localStorage
融合工作台（核心页面）：左侧上传底图、右侧上传特征图，底部是“开始融合”按钮，中间展示融合进度和结果
我的作品：展示当前用户的历史融合记录，支持查看大图和删除
素材广场（可选）：展示管理员预先上传的人像素材，点击某张素材可以把它作为特征图带入工作台

前端有一个技术点值得单独说：图片预览和上传控件的状态管理。用Element Plus的el-upload组件时，需要处理上传成功后的图片回显、格式校验（只允许jpg/png）、大小校验（限制5MB以内）。实测下来，用v-model绑定文件列表，加上:on-success回调，把返回的图片URL存到响应式变量里，是最稳妥的做法。

另一个容易忽略的点是axios拦截器。我需要每个请求都自动携带JWT token，所以我封装了axios实例，在请求拦截器里从localStorage取token，添加到请求头。同时，在响应拦截器里处理401状态——token过期时自动跳转到登录页。

2.4 人像融合算法的实现方案

这是整个项目答辩时的核心亮点，也是大多数人最容易卡住的地方。你需要选一个能在Java技术栈里落地的图像处理方案。

方案A：JavaCV封装OpenCV + dlib人脸关键点。JavaCV是OpenCV的Java版本封装，可以在Maven里直接引入依赖。人脸检测用OpenCV自带的Haar Cascade分类器，人脸关键点检测用dlib的Java版本（或者用OpenCV的Facemark）。dlib的68点模型效果最好，能精确定位眼睛、鼻子、嘴巴、下巴等关键轮廓。

方案B：Java调用Python脚本。如果你的图像算法处理部分用Python写更舒服（毕竟OpenCV、dlib、scikit-image的Python生态最成熟），可以用Java的ProcessBuilder调用Python脚本，脚本处理完把结果图写到指定目录，Java再读取返回。这种方式的好处是算法实现简单，坏处是部署时服务器需要装Python环境和依赖库，稍微麻烦一点。

方案C：调用开源人脸融合服务，比如一些开源的人脸融合引擎部署成独立的微服务，Java后端通过HTTP调用。这个方案最省事，但需要额外部署一个服务，而且答辩时老师可能会追问底层原理，你要能讲清楚。

我个人推荐方案A，因为整个项目可以用Java技术栈一以贯之，答辩时讲“如何用JavaCV做人脸关键点提取和图像融合”，比“我用Python脚本处理”显得更有技术深度。融合算法本身，常用的是三角剖分+仿射变换+透明度渐变融合。

具体流程是：

用人脸检测器找到图片中的人脸框
用dlib 68点模型提取两幅图的人脸关键点坐标
对两组关键点做仿射变换，让特征图的人脸对齐到底图人脸的几何位置
用Delaunay三角剖分把人脸区域划分成多个三角形，逐三角形做变形映射
对重叠区域用羽化（feathering）或者泊松融合进行处理，让肤色和纹理过渡自然

这个流程你不用完全从零实现，因为JavaCV里已经封装了大量OpenCV函数，你调用Imgproc相关接口就行。但理解这个流程非常重要，因为老师一定会问“算法流程是什么”“为什么这样做”。

3. 实操过程与核心环节实现

3.1 环境准备与项目初始化

我推荐的环境版本组合是这样一套：

JDK 1.8（稳定，兼容性最好，除非你特别想用JDK 17的新特性）
Apache Maven 3.8+（用3.6以下版本有些依赖解析会出问题，我踩过坑）
Node.js 16+（Vite要求Node 16以上）
MySQL 8.0（5.7也可以，但8.0是主流）
Redis（可选，用于缓存JWT令牌和热点数据）

初始化后端项目时，我推荐用Spring Initializr，选择Spring Boot 2.7.x版本——注意不要选3.x，因为3.x要求JDK 17，而且部分第三方依赖兼容性还有坑。依赖选择这几项：Spring Web、MyBatis-Plus、MySQL Driver、Spring Security（如果做登录加密）、Lombok、Validation。

前端用npm create vite命令初始化，选择Vue + JavaScript模板（不要选TypeScript模板，除非你很熟练TypeScript，毕设阶段JS就够用了），然后安装Element Plus、Axios、Vue Router。

3.2 后端上传接口与融合接口的实现

上传接口的核心代码如下：

@PostMapping("/api/image/upload") public Result upload(@RequestParam("file") MultipartFile file, @RequestParam("type") Integer type, @RequestParam("userId") Long userId) { // 校验文件类型 String originalFilename = file.getOriginalFilename(); String suffix = originalFilename.substring(originalFilename.lastIndexOf(".")); if (!Arrays.asList(".jpg", ".jpeg", ".png").contains(suffix.toLowerCase())) { return Result.error("仅支持jpg、jpeg、png格式的图片"); } // 生成存储文件名 String fileName = UUID.randomUUID().toString() + suffix; // 按日期分目录存储 String datePath = new SimpleDateFormat("yyyyMMdd").format(new Date()); String filePath = uploadDir + "/" + datePath + "/" + fileName; // 保存文件到本地磁盘 file.transferTo(new File(filePath)); // 保存记录到数据库 Image image = new Image(); image.setUserId(userId); image.setImageUrl("/images/" + datePath + "/" + fileName); image.setImageType(type); imageMapper.insert(image); return Result.success(image); }

这里有几个细节我要单独说。第一，文件名一定要用UUID重命名，别直接用用户上传的原文件名，否则会存在重名覆盖和中文乱码问题。第二，按日期分目录存储，方便后期排查和清理。第三，静态资源的访问路径要配置映射，否则前端的<img src="/images/xxx.jpg">会404。你需要写一个WebMvcConfigurer，把/images/**映射到磁盘路径：

@Configuration public class WebConfig implements WebMvcConfigurer { @Value("${upload.dir}") private String uploadDir; @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/images/**") .addResourceHandler("file:" + uploadDir + "/"); } }

融合接口的编排逻辑是这个项目的核心。我的实现是：

@PostMapping("/api/merge/execute") public Result executeMerge(@RequestBody MergeRequest request) { // 查询底图和特征图的存储路径 Image baseImage = imageMapper.selectById(request.getBaseImageId()); Image featureImage = imageMapper.selectById(request.getFeatureImageId()); // 创建融合记录，状态为“处理中” MergeRecord record = new MergeRecord(); record.setUserId(request.getUserId()); record.setBaseImageId(baseImage.getId()); record.setFeatureImageId(featureImage.getId()); record.setStatus(0); mergeRecordMapper.insert(record); // 异步执行融合任务 mergeTaskExecutor.execute(() -> { try { String resultPath = faceMergeService.merge( baseImage.getImageUrl(), featureImage.getImageUrl() ); // 更新记录状态和结果图 record.setStatus(1); Image resultImage = new Image(); resultImage.setUserId(request.getUserId()); resultImage.setImageUrl(resultPath); resultImage.setImageType(3); imageMapper.insert(resultImage); record.setResultImageId(resultImage.getId()); mergeRecordMapper.updateById(record); } catch (Exception e) { record.setStatus(2); record.setErrorMsg(e.getMessage()); mergeRecordMapper.updateById(record); } }); return Result.success(record.getId()); }

在faceMergeService.merge方法里，就是走JavaCV的人脸检测、关键点提取、对齐、融合流程。这一块代码依赖具体算法库，我给出关键流程的骨架：

public String merge(String baseImagePath, String featureImagePath) { // 读取两张图片 Mat baseMat = Imgcodecs.imread(baseImagePath); Mat featureMat = Imgcodecs.imread(featureImagePath); // 人脸检测 Rect baseFace = FaceDetector.detectLargestFace(baseMat); Rect featureFace = FaceDetector.detectLargestFace(featureMat); // 提取68个关键点 List<Point> baseLandmarks = LandmarkDetector.getLandmarks(baseMat, baseFace); List<Point> featureLandmarks = LandmarkDetector.getLandmarks(featureMat, featureFace); // 关键点映射与仿射变换 Mat affineMatrix = Imgproc.estimateAffinePartial2D(featureLandmarks, baseLandmarks); Mat warpedFeature = new Mat(); Imgproc.warpAffine(featureMat, warpedFeature, affineMatrix, baseMat.size()); // 三角剖分与局部变形 // 对关键点做Delaunay三角剖分，逐三角形仿射变换 // 输出结果图 String outputPath = generateOutputPath(); Imgcodecs.imwrite(outputPath, warpedFeature); return outputPath; }

这个骨架代码可以直接跑通“检测+对齐+输出”的基础流程，但要做融合效果，还需要加三角剖分和羽化融合，我会在下一节用问题排查的方式补充细节。

3.3 前端融合工作台实现

前端融合工作台的页面结构我用左右对称布局：左边上传底图，右边上传特征图，底部按钮触发融合，中间区域展示结果。

上传组件我这样配置：

<el-upload class="avatar-uploader" action="/api/image/upload" :data="{ type: 1, userId: currentUser.id }" :show-file-list="false" :on-success="handleBaseImageSuccess" :before-upload="beforeImageUpload" > <img v-if="baseImageUrl" :src="baseImageUrl" class="uploaded-image" /> <div v-else class="upload-placeholder">点击上传底图</div> </el-upload>

beforeImageUpload做格式和大小校验：

const beforeImageUpload = (file) => { const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJpgOrPng) { ElMessage.error('只能上传jpg或png格式图片'); return false; } const isLt5M = file.size / 1024 / 1024 < 5; if (!isLt5M) { ElMessage.error('图片大小不能超过5MB'); return false; } return true; };

注意一个细节：el-upload组件默认用ajax上传，响应会被axios拦截器拦截，如果拦截器处理逻辑不当，上传回调会拿不到数据。我的做法是在上传时给action传入完整接口路径，并且在上传组件的data属性里带上业务参数。如果你用的axios实例配置了baseURL，上传接口不受影响，因为el-upload走的是自己内部的XHR。

融合按钮的逻辑：

const startMerge = async () => { if (!baseImageId.value || !featureImageId.value) { ElMessage.warning('请先上传两张图片'); return; } loading.value = true; const res = await axios.post('/api/merge/execute', { userId: currentUser.value.id, baseImageId: baseImageId.value, featureImageId: featureImageId.value, }); const recordId = res.data.data; // 轮询查询融合结果 pollMergeResult(recordId); }; const pollMergeResult = (recordId) => { const timer = setInterval(async () => { const res = await axios.get(`/api/merge/result/${recordId}`); const record = res.data.data; if (record.status === 1) { loading.value = false; clearInterval(timer); resultUrl.value = record.resultImageUrl; ElMessage.success('融合完成'); } else if (record.status === 2) { loading.value = false; clearInterval(timer); ElMessage.error('融合失败'); } }, 1000); };

轮询间隔我设置的是1秒，实测下来这个频率够用，也不会给服务器太大压力。

3.4 本地联调与测试

前后端联调最关键的是跨域配置。开发环境下Vite默认端口是5173，后端是8080，必然跨域。我的解决方式是在后端写一个CORS配置类：

@Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:5173") .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true); } }

同时前端Vite配置一下开发代理，把/api打头的请求代理到8080：

// vite.config.js export default defineConfig({ server: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, }, }, }, });

这两个配置二选一即可。我一般推荐用Vite代理，因为生产环境打包后前端和后端部署在同一个域名下，根本不需要跨域配置，开发阶段用代理也更接近生产环境。

4. 常见问题与排查技巧实录

我在开发和指导过程中，遇到过一堆问题，这里挑出最有代表性的5个，做成速查表：

问题现象	可能原因	解决方案
JavaCV依赖下载失败	中央仓库没有完整jar包	引入`org.bytedeco:javacv-platform`全量依赖，或者使用阿里云镜像仓库
人脸检测不到	图片太暗、脸太小、侧脸角度太大	先用直方图均衡化增强对比度，检测时把人脸框放宽，或者用HOG+线性SVM方案替代Haar级联
融合结果边缘生硬、皮肤纹理不自然	没有做羽化处理，像素融合时权重是硬切	用`GaussianBlur`生成权重图，边缘区域做高斯模糊过渡，或者用`seamlessClone`泊松融合
后端上传图片报错`FileSizeLimitExceededException`	SpringBoot默认上传限制1MB	在application.yml里配置`spring.servlet.multipart.max-file-size=5MB`，`max-request-size=10MB`
前端图片回显404	静态资源映射没配好	检查WebMvcConfigurer里的`addResourceHandlers`，确认磁盘路径和访问路径前缀匹配

4.1 JavaCV的依赖引入坑

JavaCV的Maven依赖，新手最常见的坑是用错了坐标。要引入的是org.bytedeco:javacv-platform，这个坐标会拉入所有平台相关的JavaCV jar包。如果你的服务器是Linux，运行时还需要确认平台上相关的opencv-platform、ffmpeg-platform等依赖是否完整。

我在Maven里这样配：

<dependency> <groupId>org.bytedeco</groupId> <artifactId>javacv-platform</artifactId> <version>1.5.9</version> </dependency> <dependency> <groupId>org.bytedeco</groupId> <artifactId>opencv-platform</artifactId> <version>4.6.0-1.5.9</version> </dependency>

第一次加载依赖会需要几分钟，因为要下载大量平台的native二进制包，耐心等，不要以为卡死了。

4.2 人脸检测不到或者检测错位置

实测下来，OpenCV的Haar级联检测器对正面人脸效果好，但对侧脸、遮挡、暗光环境下的图片表现很差。如果你想让项目的鲁棒性更强，可以把算法升级为基于HOG特征 + 线性SVM的dlib检测器（49.9KB模型），或者是OpenCV的DNN人脸检测（使用res10_300x300_ssd_iter_140000_fp16.caffemodel模型）。

DNN方案的做法很简单：

Net net = Dnn.readNetFromCaffe(deployProtoPath, modelPath); Mat blob = Dnn.blobFromImage(baseMat, 1.0, new Size(300, 300), new Scalar(104, 177, 123)); net.setInput(blob); Mat detections = net.forward(); // 遍历detections，找到置信度最高的一个框

这个方案对侧脸、小脸的鲁棒性明显好于Haar，缺点是模型文件大约10MB，需要额外下载放资源目录。

另外有个重要预处理：检测前先做直方图均衡化。很多用户的照片是在室内灯光下拍的，对比度不足，检测率会明显下降。用Imgproc.cvtColor转灰度图后，调用Imgproc.equalizeHist增强，再送入检测器。

4.3 融合结果边缘生硬的处理

如果你用了最基础的“关键点对齐→直接覆盖”的方案，结果大概率会看到明显的人脸边缘轮廓线，就像把面具贴在了另一张脸上。这个问题的根源是没有做边缘过渡处理。

我用两个方案解决这个问题：

第一个方案是在融合区域外做一个羽化蒙版。先根据关键点画一个多边形区域，然后用Imgproc.GaussianBlur对这个蒙版做高斯模糊，让蒙版从1渐变到0，最后用Core.addWeighted做按权重的像素混合。

第二个更推荐，直接用OpenCV的泊松融合：

// 取底图和形变后的特征图 Mat base = Imgcodecs.imread(basePath); Mat warped = ...; // 经过仿射变换和对齐的特征图 // 生成掩码：关键点围成的脸部区域 Mat mask = new Mat(warped.size(), CvType.CV_8UC1, new Scalar(0)); // 用 fillPoly 填充脸部区域为255 // 设置融合中心点，取底图人脸的鼻尖位置 Point center = new Point(baseFace.x + baseFace.width / 2.0, baseFace.y + baseFace.height / 2.0); Mat result = new Mat(); Photo.seamlessClone(warped, base, mask, center, result, Photo.NORMAL_CLONE); Imgcodecs.imwrite(outputPath, result);

泊松融合的效果明显好于硬切，因为它会求解一个泊松方程，让融合边界处的梯度场自然过渡。我测试下来，NORMAL_CLONE模式效果最稳定；如果底色差异大，可以考虑MIXED_CLONE模式。

4.4 SpringBoot上传大小限制

SpringBoot 2.x默认的单个文件上传上限是1MB，请求大小上限是10MB。如果用户上传一张高清照片（往往5MB以上），后端会直接抛出MaxUploadSizeExceededException，前端收到的是500错误。

解决方式很简单，在application.yml里改两个配置：

spring: servlet: multipart: max-file-size: 10MB max-request-size: 20MB

同时前端也要做大小校验，别让用户上传超过后端限制的文件，否则体验很差。5MB的图片对融合算法来说完全够用了，人脸关键点提取在300x300像素的检测分辨率下足够精确。

4.5 部署时前端打包后路由404

最后一个常见问题，也是最容易忽略的——前端路由模式。Vue Router默认是createWebHistory模式，也就是HTML5 history模式，这种模式在SpringBoot部署时会遇到一个问题：直接访问http://localhost:8080/system会404，因为SpringBoot没有对应的Controller处理这个路径。

解决方案有两种：

第一种，修改前端路由为createWebHashHistory，使用hash模式，URL会变成http://localhost:8080/#/system，刷新不会404。这种方式简单粗暴，缺点是URL不太好看。

第二种，后端加一个路由转发Controller，把所有非/api开头的请求转发到index.html：

@Controller public class RouteController { @RequestMapping(value = "/{path:[^\\.]*}") public String forward() { return "forward:/index.html"; } }

更稳妥的方案是第二种，既保留了history模式，也兼容了页面刷新。但要注意，这个转发不能拦截/api开头的接口，也不能拦截静态资源（js、css、图片）。用[^\\.]*正则排除带点号的请求，就能避免和静态资源路径冲突。

5. 一点踩坑后的经验总结

最后分享几个我在这个项目上感悟最深的点。

第一个感悟是：别把算法部分看得太神秘。人脸融合听起来高深，实际上就是“人脸检测→关键点匹配→形变→融合”这套固定流程。你不需要从零发明算法，把JavaCV、OpenCV这些成熟工具用好、把流程讲清楚，已经比90%的毕设项目有深度了。答辩老师真正看重的是你理解了这个流程、能说清楚每一步在做什么，而不是看你发明了什么新方法。

第二个感悟是：项目推进顺序很重要。我见过太多同学一上来就研究算法，花了两周搞图像处理，结果项目骨架还没搭好。正确的顺序应该是：先搭好SpringBoot+Vue的骨架，把上传、用户、历史记录这些常规功能做出来，最后再集中精力调融合算法。因为毕设的核心评价维度是“完整能跑”，你有一整套前后端完整的功能体系，就算算法效果不是完美，也是完整的作品；反过来，算法调得再好，登录注册都跑不通，答辩一样会挂。

第三个感悟是：异步处理和失败状态一定要做。我在初版设计时曾经把融合处理做成了同步调用，用户上传图片后页面要转圈好几秒才能收到结果，体验很差。改成异步轮询之后，不仅体验好了，还顺带做了失败重试和错误日志。这个设计在答辩时也是加分项，因为会问“为什么用异步”的面试官，通常是想考察你是否考虑过系统性能和用户体验。

这个项目后续可以扩展的方向也不少。比如给融合结果加滤镜特效，做短视频风格的动态融合动画，甚至接入消息队列让融合任务分布式处理。但对于毕设来说，我建议先把核心功能做扎实，做好前端交互细节，把融合效果调到一个自然可看的程度，你会有充分把握。如果你正在纠结毕设选题，或者已经选了这个题目不知道怎么落地，希望这篇内容能帮你把路走得更顺一些。我在方案选型和踩坑过程里写的每一个细节，都是实打实从代码里跑出来的经验，照着来就行了。