SpringBoot+Vue+MySQL毕业设计系统全栈开发实战-代码聚汇网

SpringBoot+Vue+MySQL毕业设计系统全栈开发实战

DR阿福

1. 毕业设计系统平台全栈开发实战

去年指导学弟完成毕业设计时，我完整走通了SpringBoot+Vue+MySQL的技术栈组合。这个看似标准的架构方案在实际落地时，会遇到不少教科书上没写的"坑"。今天就从工程化角度，拆解这个毕业设计系统平台的完整实现方案。

这个系统典型包含学生选题、导师审核、进度管理、论文提交、答辩安排等模块。前端用Vue 3组合式API开发管理后台，后端采用SpringBoot 2.7 + MyBatis Plus架构，数据库使用MySQL 8.0。整套方案特别适合需要快速交付的毕业设计类项目，我在部署文档中会重点说明多环境配置技巧。

2. 技术栈选型深度解析

2.1 SpringBoot后端设计要点

采用2.7.x版本而非最新的3.0，主要考虑校园环境JDK版本兼容性问题。基础依赖包括：

spring-boot-starter-web（Web模块）
mybatis-plus-boot-starter（ORM工具）
hutool-all（Java工具包）
lombok（代码简化）

数据库连接池对比测试后选用HikariCP，在application.yml中关键配置如下：

yaml复制spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/graduation?useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    hikari:
      maximum-pool-size: 20
      minimum-idle: 5

特别注意：校园网环境MySQL建议关闭SSL，否则可能因证书问题导致连接失败

2.2 Vue前端工程化实践

使用Vue CLI 5.x搭建项目时，推荐选择以下配置：

Babel + TypeScript
Vue Router + Pinia
ESLint + Prettier
不选Vuex（Pinia更轻量）

axios封装示例：

typescript复制const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 10000,
  withCredentials: true
})

// 请求拦截器
service.interceptors.request.use(config => {
  if (store.state.user.token) {
    config.headers['Authorization'] = `Bearer ${store.state.user.token}`
  }
  return config
})

3. 数据库设计与优化

3.1 核心表结构设计

主要包含6张核心表：

用户表(sys_user)
角色表(sys_role)
课题表(subject)
选题记录(selection)
进度记录(progress)
论文表(paper)

课题表建表SQL示例：

sql复制CREATE TABLE `subject` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `title` varchar(100) NOT NULL COMMENT '课题名称',
  `description` text COMMENT '课题描述',
  `teacher_id` bigint NOT NULL COMMENT '指导教师ID',
  `max_student` int DEFAULT '1' COMMENT '最大可选人数',
  `selected` int DEFAULT '0' COMMENT '已选人数',
  `status` tinyint DEFAULT '0' COMMENT '状态(0待审核 1已通过 2已驳回)',
  PRIMARY KEY (`id`),
  KEY `idx_teacher` (`teacher_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

3.2 性能优化实践

为所有外键字段添加索引
状态字段使用tinyint而非varchar
文本内容单独建表（如论文内容表）
采用datetime(3)存储精确时间戳

4. 前后端关键交互实现

4.1 文件上传解决方案

采用分片上传方案处理论文文件：

java复制@PostMapping("/upload")
public R upload(@RequestParam("file") MultipartFile file,
                @RequestParam("chunkNumber") int chunkNumber,
                @RequestParam("totalChunks") int totalChunks) {
    String chunkPath = "/tmp/chunks/" + file.getOriginalFilename();
    FileUtils.writeByteArrayToFile(
        new File(chunkPath + "." + chunkNumber),
        file.getBytes());
    
    if (chunkNumber == totalChunks) {
        // 合并分片逻辑
    }
    return R.ok();
}

前端配合使用vue-simple-uploader组件：

vue复制<template>
  <uploader :options="options" class="uploader-example">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
      <p>拖拽论文文件到此处</p>
      <uploader-btn>选择文件</uploader-btn>
    </uploader-drop>
  </uploader>
</template>

5. 部署实战与避坑指南

5.1 多环境打包配置

使用Maven Profile实现环境隔离：

xml复制<profiles>
  <profile>
    <id>dev</id>
    <activation>
      <activeByDefault>true</activeByDefault>
    </activation>
    <properties>
      <env>dev</env>
    </properties>
  </profile>
  <profile>
    <id>prod</id>
    <properties>
      <env>prod</env>
    </properties>
  </profile>
</profiles>

5.2 前端部署常见问题

路由history模式Nginx配置：

nginx复制location / {
  try_files $uri $uri/ /index.html;
}

跨域问题解决方案：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("*")
            .allowedMethods("*")
            .maxAge(3600);
    }
}

6. 论文与文档编写技巧

6.1 数据库设计说明书

建议包含：

E-R图（使用PowerDesigner绘制）
物理表结构清单
索引设计说明
典型SQL示例

6.2 部署文档要点

环境要求明细（JDK/MySQL/Node版本）
初始化SQL脚本
配置文件修改位置说明
启动顺序（先启后端再启前端）

我在实际部署中发现，校园网环境经常需要特殊处理：

MySQL可能需要配置skip-grant-tables
前端打包后需要配置publicPath
Windows环境注意文件路径转义

7. 扩展功能实现思路

7.1 接入钉钉通知

使用钉钉机器人推送审核通知：

java复制public void sendDingTalkMsg(String webhook, String content) {
    StringEntity entity = new StringEntity(
        "{\"msgtype\":\"text\",\"text\":{\"content\":\"" + content + "\"}}",
        ContentType.APPLICATION_JSON);
    
    HttpClientBuilder.create().build().execute(
        new HttpPost(webhook).setEntity(entity));
}

7.2 论文查重接口对接

调用第三方API示例：

java复制public CheckResult checkDuplicate(String fileUrl) {
    String url = "https://api.check.com/duplicate";
    HttpPost post = new HttpPost(url);
    post.setHeader("Authorization", "Bearer YOUR_KEY");
    
    StringEntity params = new StringEntity(
        "{\"file\":\""+fileUrl+"\"}", 
        ContentType.APPLICATION_JSON);
    
    HttpResponse response = HttpClientBuilder
        .create()
        .build()
        .execute(post.setEntity(params));
    
    return JSON.parseObject(
        EntityUtils.toString(response.getEntity()),
        CheckResult.class);
}

开发这类系统时，我强烈建议使用Git进行版本控制。曾经有学弟因为直接修改服务器文件导致代码丢失，最后不得不通宵重写。现在我的部署流程一定是：本地测试 → 推送到GitLab → 服务器pull更新。这个习惯至少帮我避免了三次重大事故。