Java + Vue 毕业设计开发效率提升：从脚手架到自动化部署

然后，在 Controller 上使用注解清晰描述接口：

@RestController
@RequestMapping("/api/user")
@Tag(name = "用户管理", description = "用户相关接口") // OpenAPI 标签
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    @Operation(summary = "用户登录") // 接口描述
    public Result<UserVO> login(@RequestBody @Valid LoginDTO loginDTO) {
        // @Valid 开启参数校验
        // ... 业务逻辑
        return Result.success(userVO);
    }

    @GetMapping("/{id}")
    @Operation(summary = "根据 ID 查询用户")
    public Result<UserVO> getUserById(@PathVariable Long id) {
        // ... 业务逻辑
        return Result.success(userVO);
    }
}

启动项目，访问 http://localhost:8080/swagger-ui.html，一个清晰的 API 文档页面就出来了。前端同学可以随时查看接口路径、参数、返回值，甚至可以直接在页面上发起测试调用。这从根本上避免了'口口相传'带来的误差。

3.2 前端 Axios 统一封装

前端需要一套统一的网络请求工具。对 Axios 进行封装，可以统一处理请求拦截（如添加 Token）、响应拦截（如处理通用错误码）、基础 URL 配置等。

// src/utils/request.js
import axios from 'axios';
import { ElMessage } from 'element-plus'; // 示例使用 Element Plus 消息组件
import router from '@/router';

// 创建 axios 实例
const service = axios.create({
    baseURL: import.meta.env.VITE_APP_BASE_API, // 从 .env 文件读取
    timeout: 10000,
});

// 请求拦截器
service.interceptors.request.use(
    (config) => {
        // 从本地存储获取 token
        const token = localStorage.getItem('access_token');
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        return config;
    },
    (error) => {
        return Promise.reject(error);
    }
);

// 响应拦截器
service.interceptors.response.use(
    (response) => {
        const res = response.data;
        // 假设后端统一返回格式为 { code: 200, data: {}, msg: 'success' }
        if (res.code === 200) {
            return res.data; // 直接返回业务数据
        } else {
            // 处理业务错误（如密码错误、权限不足）
            ElMessage.error(res.msg || 'Error');
            // 如果是未认证，跳转到登录页
            if (res.code === 401) {
                router.push('/login');
            }
            return Promise.reject(new Error(res.msg || 'Error'));
        }
    },
    (error) => {
        // 处理 HTTP 错误（如 404, 500）
        ElMessage.error(error.message || '网络请求失败');
        return Promise.reject(error);
    }
);

export default service;

在组件中，你就可以这样清爽地调用接口了：

import request from '@/utils/request';

export function login(data) {
    return request({
        url: '/api/user/login',
        method: 'post',
        data,
    });
}

3.3 JWT 无状态认证

对于毕业设计级别的应用，使用 JWT 做认证是简单高效的选择。用户登录成功后，后端生成一个 JWT Token 返回给前端，前端后续请求在 Header 中携带。后端通过一个过滤器或拦截器来验证 Token 的有效性。

后端核心代码（JWT 工具类 & 拦截器）：

@Component
public class JwtUtil {
    @Value("${jwt.secret}") // 密钥从配置读取
    private String secret;

    @Value("${jwt.expiration}")
    private Long expiration;

    // 生成 Token
    public String generateToken(String username) {
        Date now = new Date();
        Date expiryDate = new Date(now.getTime() + expiration);
        return Jwts.builder()
                .setSubject(username)
                .setIssuedAt(now)
                .setExpiration(expiryDate)
                .signWith(SignatureAlgorithm.HS512, secret)
                .compact();
    }

    // 验证和解析 Token...
}

// 配置拦截器
@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(jwtInterceptor())
                .addPathPatterns("/api/**") // 拦截 /api 开头的请求
                .excludePathPatterns("/api/user/login", "/api/user/register", "/swagger**"); // 放行登录、注册和 Swagger
    }

    @Bean
    public JwtInterceptor jwtInterceptor() {
        return new JwtInterceptor();
    }
}

3.4 跨域配置

在开发阶段，前端运行在 localhost:5173，后端在 localhost:8080，浏览器会因为同源策略而阻止请求。在后端进行全局跨域配置即可解决。

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 对所有接口
                .allowedOriginPatterns("*") // 允许所有源（生产环境应指定具体域名）
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

性能与安全性：让项目更健壮

毕业设计不仅要能跑，还要跑得稳、跑得安全。这里有几个容易被忽视但很重要的点。

1. 防重复提交：在前端，提交按钮点击后可以立即禁用（loading 状态），防止用户连续点击。在后端，可以对关键操作（如支付、下单）利用 Redis 设置一个短时间的用户级或订单级锁（Key 格式如 submit_lock:userId:orderId）。
2. 敏感信息脱敏：在日志或返回前端的用户信息中，对手机号、邮箱、身份证号等进行脱敏处理。例如，手机号 13800138000 显示为 138****8000。可以使用 Hutool 等工具库轻松实现。
3. 生产环境日志分级：使用 Logback 或 Log4j2，在 application-prod.yml 中配置日志级别。通常将 root 级别设为 WARN 或 ERROR，减少无用信息；但对你自己的业务包（如 com.your.project）可以设为 INFO 或 DEBUG 以便排查问题。同时，将日志输出到文件，并配置按日期和大小滚动归档。

生产环境避坑指南

项目开发完，最后一步是部署。这里有几个'坑'提前避开，能省很多事。

1. 后端健康检查：Spring Boot Actuator 提供了 /actuator/health 端点。在部署后，可以通过这个接口快速检查应用状态（数据库连接是否正常等）。确保在生产配置中暴露这个端点（并做好安全限制）。

数据库连接池配置：不要使用默认的连接池配置。以 HikariCP 为例，在 application-prod.yml 中根据你的服务器配置进行调整：

spring:
  datasource:
    hikari:
      maximum-pool-size: 10 # 根据实际负载调整，毕业设计应用 10 个连接通常足够
      minimum-idle: 5
      connection-timeout: 30000
      idle-timeout: 600000
      max-lifetime: 1800000

设置合理的连接数可以避免数据库连接耗尽或浪费。

Nginx 配置静态资源缓存：Vue 项目打包后是静态文件（JS、CSS、图片）。通过 Nginx 配置强缓存，可以极大提升用户再次访问的速度。

server {
    listen 80;
    server_name your-domain.com;
    location / {
        root /usr/share/nginx/html/dist; # Vue 打包文件目录
        index index.html;
        try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式
    }
    # 缓存静态资源
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    # 反向代理到后端 Spring Boot
    location /api/ {
        proxy_pass http://localhost:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

写在最后

通过这一套组合拳——Spring Boot + Vue 3 的标准化模板、Swagger 契约先行、Axios 与 JWT 的封装、以及部署时的优化配置——我们基本上扫清了 Java + Vue 毕业设计开发路上的大部分效率障碍。你会发现，你的时间不再浪费在配置环境和沟通联调上，而是可以专注于思考如何实现更有创意的业务功能，或者打磨更好的用户体验。

我建议你可以基于这个思路，先搭建一个最基础的项目骨架（甚至可以直接搜索一些可靠的开源脚手架），然后在此基础上进行你的毕设功能开发。在完成基本要求后，不妨再思考一下：能否引入 Docker 让环境部署更一致？能否用 GitHub Actions 实现提交代码后自动测试和部署（CI/CD）？这些都将是你简历上不错的亮点。

希望这篇指南能帮助你更顺畅、更高效地完成毕业设计，祝你答辩顺利！