SpringBoot+Vue测试项目管理系统毕设开发全指南

1. 项目解剖：这套测试项目管理系统到底在做什么

先说结论：这是一套典型的前后端分离毕设项目，技术栈锁定在 SpringBoot + Vue，业务场景是“测试项目管理”。很多同学一看到“测试”两个字就以为是写自动化测试工具或者性能压测平台，其实不是，这里的“测试”指的是软件测试流程中的项目管理，也就是帮测试团队把用例、缺陷、计划、报告这些琐碎事务线上化。

我做过不少类似的毕设辅导，发现这类系统的核心痛点非常集中：测试用例散落在Excel里、缺陷靠聊天记录传递、测试报告靠手工汇总。这套系统要解决的，就是把这些线下流程搬到Web端，让测试人员能维护用例库，提交和跟踪缺陷，测试组长能创建测试计划和分配任务，项目经理能通过统计报表掌握项目质量进度。

从毕设评分角度看，这个选题有天然优势：业务模型清晰（用例、缺陷、计划三个核心实体），技术难点适中（SpringBoot+MyBatis-Plus+Vue+MySQL），既不会简单到没有工作量，也不会复杂到做不完。更重要的是，它天然具备前后端交互、权限控制、统计报表这些答辩高频考点，属于“性价比”很高的选题方向。

从技术架构看，系统推荐采用经典的三层结构：**Vue前端（端口8080）**负责页面交互，**SpringBoot后端（端口8081）**负责业务逻辑和接口暴露，**MySQL（端口3306）**负责数据持久化。前后端通过JSON格式的RESTful API通信，Token做身份认证。这套架构虽然“经典”，但正因为经典才稳妥，网上资料多、排错方便、答辩好讲。

2. 技术选型与工程初始化：为什么是这套组合拳

2.1 技术栈选型的底层逻辑

选SpringBoot而不是SSH，选Vue而不是JSP，核心原因是开发效率和就业匹配度。SpringBoot让配置变简单，内嵌Tomcat免部署，配合MyBatis-Plus能省掉大量重复的CRUD代码。Vue的组件化开发让前端页面复用率大幅提高，Element UI组件库撑着后台管理界面，不需要你自己写CSS从零抠样式。

后端推荐技术栈是这样的：

选 Spring Boot 2.7.x 而不是 3.x，是因为3.x强制要求JDK 17，且部分老教程、老版本依赖不兼容，毕设阶段没必要在这上面增加踩坑概率。MyBatis-Plus的LambdaQueryWrapper写条件查询非常舒服，比如按缺陷状态筛选、按创建时间倒序，一行代码的事。

安全这块，用Sa-Token做登录鉴权比Spring Security更友好，它的StpUtil工具类封装好了登录、注销、权限校验，对新手极其友好。当然，如果指导老师强调必须用Spring Security，那也可以，只是代码量会多不少。

2.2 后端工程骨架搭建步骤

我建议用手工方式搭建，不要依赖IDE的Spring Initializr一键生成，因为你得清楚每个目录是干什么的。手动建Maven项目，pom.xml里引入核心依赖，然后按controller、service、mapper、entity、config、common六个包划分。

新建Spring Boot项目后，pom.xml的核心依赖如下：

xml复制<parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.7.18</version>
</parent>

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-validation</artifactId>
    </dependency>
    <dependency>
        <groupId>com.baomidou</groupId>
        <artifactId>mybatis-plus-boot-starter</artifactId>
        <version>3.5.5</version>
    </dependency>
    <dependency>
        <groupId>com.mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>cn.dev33</groupId>
        <artifactId>sa-token-spring-boot-starter</artifactId>
        <version>1.37.0</version>
    </dependency>
    <dependency>
        <groupId>cn.hutool</groupId>
        <artifactId>hutool-all</artifactId>
        <version>5.8.25</version>
    </dependency>
</dependencies>

application.yml里的关键配置要提前想清楚，尤其是数据库连接串和后端端口。我在实际项目中测试环境的配置是：

yaml复制server:
  port: 8081

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test_management?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root
    password: 123456

mybatis-plus:
  configuration:
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
    map-underscore-to-camel-case: true
  global-config:
    db-config:
      logic-delete-field: deleted
      logic-delete-value: 1
      logic-not-delete-value: 0

sa-token:
  token-name: Authorization
  timeout: 2592000
  is-concurrent: true
  token-style: uuid

serverTimezone=Asia/Shanghai 这个参数一定要加，否则高版本MySQL驱动会报时区错误。MyBatis-Plus的逻辑删除配置能让“删除”变成“软删除”，这在答辩的时候是加分项，因为真实业务系统很少物理删数据。

2.3 前端工程初始化与依赖安装

前端我推荐 Vue 2 + Vue Router 3 + Pinia/ Vuex + Element UI，因为Vue 3的Composition API对新手稍有门槛，而且Element Plus在很多组件用法上和Element UI有差异，网上能找到的Vue 2 + Element UI实战案例更多，排错成本低。

创建前端项目，我用Vue CLI，注意先确认你安装的是Vue CLI 5.x版本。

bash复制npm install -g @vue/cli
vue --version
vue create test-management-web

创建时选择Manually select features，勾选Router、Babel、Linter，Vue版本选2.x。项目创建完以后，安装Element UI、Axios和ECharts：

bash复制npm install element-ui@2.15.14
npm install axios@1.5.1
npm install echarts@5.4.3
npm install vuex@3.6.2

这里有个极容易踩的坑：Element UI 2.x必须配Vue 2.x，Element Plus必须配Vue 3.x，混用会直接导致页面白屏，控制台报各种莫名其妙的错误。另外，npm install 如果报权限错误，Windows把命令提示符以管理员身份运行，Linux/macOS命令前面加sudo，但本质问题通常是Node版本太高或太低，建议锁定Node 16.x。

2.4 目录结构参考

后端和前端都要有一个清晰的目录结构，这直接影响你写论文时的“系统设计”章节。

后端结构：

code复制com.example.testmanagement
├── controller        // 接口层，接收前端请求
├── service           // 业务逻辑层
├── mapper            // MyBatis-Plus的数据访问层
├── entity            // 数据库实体类
├── dto               // 数据传输对象，避免实体直接暴露
├── common            // 统一返回结果、异常处理、常量
├── config            // 配置类，如跨域、Knife4j
└── utils             // 工具类

前端结构：

code复制src
├── api               // 按模块封装axios请求
├── assets            // 静态资源
├── components        // 公共组件
├── router            // 路由配置
├── store             // Vuex状态管理
├── views             // 页面组件
├── utils             // 封装axios实例、token工具
├── App.vue
└── main.js

这种分包方式在论文里很好描述：前端按“页面-组件-请求”三层组织，后端严格分层，模块之间单向调用，符合高内聚低耦合的设计原则。答辩时老师问“你项目怎么分层的”，你直接拿目录结构讲一遍就能过关。

3. 数据库设计与后端核心实现

3.1 数据模型设计

测试项目管理系统的核心表，我建议先理清业务流转：登录用户可分为管理员、测试人员、开发人员；管理员维护项目和用户，测试人员维护用例、执行用例、提缺陷，开发人员处理缺陷。整个系统的数据流转是围绕这几个角色展开的。

核心表规划为6张，数量不多，但覆盖了主流业务：

为了照顾正常设计需求，我会额外加一张接口信息表用于管理被测系统的接口地址和参数定义，不过它属于扩展模块，做不出来也不影响毕业。如果你的论文需要展示“系统测试”章节，这部分还是能帮你撑一下工作量。

这里强调一个设计细节：用例和缺陷用级联关系，缺陷的status要设计清晰的流转状态。我用的是待处理→处理中→已解决→已关闭四态流转，每次状态变更都记录操作时间和操作人，这样答辩时老师问“缺陷怎么跟踪的”，你可以用状态流转图讲得明明白白。

3.2 后端代码实现的几个关键点

统一返回结果是后端项目里必备的封装，前端只需要判断code字段即可。我的实现里定义了一个Result<T>类，包含code、message、data三个字段，成功返回200，业务异常返回500，未登录返回401。这样做的好处是前后端联调时不用反复沟通返回格式，接口文档也清晰。

Result类里我额外加了一个静态工厂：

java复制public class Result<T> {
    private Integer code;
    private String message;
    private T data;

    public static <T> Result<T> success(T data) {
        Result<T> r = new Result<>();
        r.setCode(200);
        r.setMessage("操作成功");
        r.setData(data);
        return r;
    }

    public static <T> Result<T> error(String message) {
        Result<T> r = new Result<>();
        r.setCode(500);
        r.setMessage(message);
        return r;
    }
}

登录鉴权我直接用Sa-Token的StpUtil.login()，登录成功后拿到token，前端存localStorage，每次请求在Header里带上Authorization。Sa-Token的拦截器注册代码：

java复制@Configuration
public class SaTokenConfig implements WebMvcConfigurer {
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new SaInterceptor(handle -> StpUtil.checkLogin()))
                .addPathPatterns("/**")
                .excludePathPatterns("/user/login", "/doc.html", "/webjars/**", "/v3/api-docs/**");
    }
}

跨域问题是前后端分离项目必踩的门槛。我写了一个CorsConfig，允许前端所有请求跨域访问：

java复制@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

这里有个容易忽略的细节：如果引入了Sa-Token拦截器，跨域预检请求OPTIONS默认会被拦截器拦下来，所以必须把OPTIONS请求也放行。我加上面的allowedMethods之外，还在Sa-Token拦截器里放行了OPTIONS请求，否则前端联调时会出现“跨域通了但还是401”的诡异现象。

3.3 业务接口的状态流转设计

测试用例模块，我设计了以下几个接口：

• POST /testCase/add：新增用例
• PUT /testCase/update：更新用例
• DELETE /testCase/{id}：删除用例
• GET /testCase/page?pageNum=1&pageSize=10&priority=高：分页查询，支持按优先级筛选
• GET /testCase/{id}：查看详情

分页用MyBatis-Plus的Page对象，返回结构里带上total和records，前端配合Element UI的el-pagination无缝对接。

缺陷模块，核心接口：

• POST /bug/add：提交缺陷
• PUT /bug/assign：指派缺陷给开发人员
• PUT /bug/status：更新缺陷状态
• GET /bug/page?status=待处理&severity=严重：按条件分页查询
• GET /bug/statistics：统计各状态数量

这里要说一个业务细节：缺陷的assignee指派人不能随便填，提交缺陷时要通过下拉框选择该项目的开发人员，这需要前端先调用/project/{id}/developers接口把开发人员列表返回。很多同学做系统时忽略了角色联动，导致逻辑上能提交给不存在的开发人员，这在答辩时是硬伤。

统计报表：用ECharts做饼图和柱状图，后端提供聚合数据。最基础的SQL是：

sql复制SELECT status, COUNT(*) AS count FROM bug GROUP BY status;

用MyBatis-Plus的QueryWrapper的select("status, count(*) as count").groupBy("status")实现。有些同学不会写复杂SQL，其实统计类接口不复杂，掌握这一句就能覆盖大半需求。

4. 前端页面实现与前后端联调

4.1 路由设计融合权限控制

前端路由我采用动态路由思路：登录时根据角色返回可访问的菜单，再匹配到对应的路由组件。

静态路由只保留login和404：

javascript复制const routes = [
  { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') },
  { path: '/', redirect: '/dashboard', component: Layout, children: [] },
  { path: '*', component: () => import('@/views/404.vue') }
];

登录成功后，前端根据后端返回的role字段动态组装菜单。管理员能看到用户管理、项目管理、测试计划、用例管理、缺陷管理、统计报表；测试人员能看到测试计划、用例管理、缺陷管理、统计报表；开发人员只能看到缺陷管理。

实现动态路由我用的方案是：路由先定义一个完整的映射表，登录后通过router.addRoutes()按角色注入。这个逻辑在论文里也很容易展开讲，属于“基于角色的访问控制（RBAC）”的典型应用。

4.2 核心功能页面的实现方案

登录页面不用做得太花哨，居中一个卡片，用户名、密码、登录按钮，加上表单校验。登录成功后把token存到localStorage，把用户信息存到Vuex，跳转首页。要注意的是axios拦截器统一处理token：

javascript复制service.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers['Authorization'] = token;
  }
  return config;
});

service.interceptors.response.use(
  res => {
    const code = res.data.code;
    if (code === 401) {
      localStorage.removeItem('token');
      router.push('/login');
    }
    return res.data;
  },
  err => {
    Message.error('网络请求失败');
    return Promise.reject(err);
  }
);

用例管理页面：左侧是搜索栏，右侧是表格，底部是分页器。表格列设置：用例标题、优先级（高/中/低标签显示）、执行状态（未执行/通过/失败）、创建人、操作（编辑/删除/执行）。新增/编辑用Dialog弹窗，表单里有步骤、预期结果的textarea，还支持从Excel批量导入用例——这是我额外加的扩展功能，用了xlsx库解析Excel，建议有能力的同学加上，抢先展示工作量。

缺陷管理页面：表格列包括缺陷标题、严重级别（致命/严重/一般/轻微）、状态（待处理/处理中/已解决/已关闭）、报告人、处理人、创建时间。点击某行弹出行内详情，包括描述、截图附件、操作记录。这里前端有个要点：状态和严重级别用tag标签渲染不同颜色，Element UI的el-tag的type属性配个映射函数就行。

统计报表页面：用ECharts加载两个图表，一个是缺陷状态分布饼图，一个是项目缺陷趋势折线图。核心封装：

javascript复制initChart() {
  this.chart = echarts.init(this.$refs.chartRef);
  const option = {
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: '70%',
      data: this.chartData,
    }],
  };
  this.chart.setOption(option);
}

Vue 版本播放 m3u8这个热词和本系统其实没太大关系，属于独立的前端技术点。如果你有兴趣扩展，可以在“测试报告”模块加一个视频回放功能，测试执行时录制的视频用video.js配合videojs-contrib-hls来播放m3u8格式。但这只是加分项，不做也不影响主线。

4.3 前后端联调的沟通协议

联调阶段最怕的就是“前端说后端接口通了我的页面渲染不出来”，或者“后端说接口明明返回了前端说拿不到数据”。我的习惯是先定接口文档再写代码，用Knife4j自动生成Swagger文档，前端直接访问http://localhost:8081/doc.html看接口定义和参数示例。

具体协作步骤：

1. 后端启动服务后，访问/doc.html确认所有接口调试通过
2. 前端Axios的baseURL指向http://localhost:8081
3. 前端先拿一个最简单接口（如登录）跑通全链路
4. 再按模块逐个对接

联调时最容易出现的错误有两个：第一是字段名不一致，后端实体是createTime，前端写成了create_time，拿不到数据。第二是时间格式，后端返回2024-05-20T12:00:00，前端直接显示ISO字符串很丑，需要加个格式化函数。我建议后端在实体类的时间字段上加@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")，一次性解决。

5. 打包部署：从本地到服务器的完整指南

5.1 后端打包常见方式与配置

本地开发环境跑起来只是第一步，毕设还要考虑部署到服务器上给老师演示，或者打包发给同学。后端打包我推荐两种方式：Maven打包成Jar包直接用java -jar运行，或者打成War包部署到Tomcat。现在基本都是Jar包方式，SpringBoot内嵌了Tomcat，一条命令就能启动。

先确保本地打包成功：

bash复制cd backend
mvn clean package -DskipTests

打包成功后，target目录下会生成xxx.jar。本地先测试：

bash复制java -jar target/test-management-0.0.1-SNAPSHOT.jar

服务器上跑的话，用nohup后台执行：

bash复制nohup java -jar test-management.jar --spring.profiles.active=prod > test-management.log 2>&1 &

这里我建了application-prod.yml，里面的数据库地址指向服务器上的MySQL，其他配置保持一致。好处是本地开发和服务器部署互不干扰，只需要通过--spring.profiles.active=prod切换。

如果服务器内存有限，建议JVM参数限制一下内存：

bash复制java -Xms256m -Xmx512m -jar test-management.jar &

5.2 前端打包与Nginx配置

前端打包前，最好把Axios的baseURL从http://localhost:8081改成相对路径或者服务器的后端地址。我的习惯是用环境变量控制，在.env.production文件里配置VUE_APP_BASE_URL=/api，然后让Nginx把/api前缀的请求转发到后端8081端口。

关键Nginx配置模板：

nginx复制server {
    listen 80;
    server_name your-server-ip;

    location / {
        root /usr/share/nginx/html/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    location /api/ {
        proxy_pass http://127.0.0.1:8081/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

try_files $uri $uri/ /index.html;这行必须写，否则前端路由刷新时会404。这是SPA应用部署最常见的坑，很多同学部署完发现首页能打开，一刷新就白屏或者404，基本都是这一行没配。

前端打包：

bash复制npm run build

生成dist目录后，把整个目录上传到服务器的/usr/share/nginx/html/dist下，重启Nginx就完成了。如果前端用Docker部署，也可以用Nginx镜像加数据卷挂载。

注意：如果服务器上有宝塔面板，直接用宝塔的Nginx可视化配置也能实现上面的效果，甚至对新手更友好。但建议还是理解一下这个配置的含义，答辩时会加分。

5.3 数据库初始化与备份策略

部署时数据库需要初始化，我提供了一份init.sql，包含建库、建表、插入初始数据（默认管理员账号admin/123456），导入用：

bash复制mysql -u root -p < init.sql

服务器上MySQL的编码和时区也要设置好，否则插入中文乱码、时间不对。我在/etc/mysql/my.cnf里加了：

ini复制[mysqld]
character-set-server=utf8mb4
collation-server=utf8mb4_unicode_ci

备份数据库也是必备技能，用mysqldump定时备份，防止演示前数据丢失：

bash复制mysqldump -u root -p test_management > backup_$(date +%Y%m%d).sql

6. 论文写作与答辩准备的实战建议

6.1 论文结构规划

毕设论文一般要求在一万到一万五千字左右。我梳理了一个稳妥的章节结构，直接套用即可：

• 第一章 绪论：研究背景与意义、国内外研究现状、研究内容与论文结构
• 第二章 相关技术介绍：SpringBoot、Vue、MySQL、MyBatis-Plus等
• 第三章 系统分析：可行性分析、需求分析（功能性需求与非功能性需求）、用例分析
• 第四章 系统设计：总体架构设计、功能模块设计、数据库设计（ER图+表结构）
• 第五章 系统实现：环境搭建、各模块的界面展示+核心代码讲解
• 第六章 系统测试：测试环境、功能测试用例表、性能测试结果
• 第七章 总结与展望

6.2 系统测试章节怎么写

我特别想强调系统测试这一章，很多同学草草写完，其实这一章是给老师留好印象的关键。功能测试要列出具体的测试用例表，例如：

性能测试不需要太详细，用JMeter或Postman跑一下登录接口的并发请求，记录响应时间和错误率，证明系统能支撑常规使用场景即可。这一章是“摆事实”的地方，证明你的系统真的能跑、能测、能交付。

6.3 答辩常见考点一览

答辩前一定要把以下几个问题想清楚：

• 为什么选SpringBoot而不是SSM？
• JWT token和Session的区别是什么？
• 数据库表之间怎么关联的？有没有处理外键？
• 项目在高并发情况下怎么优化？
• 你负责的是哪些模块？核心难点在哪里？

这类问题考察的是基础理解和“是不是自己做的”。我的建议是：写代码时每个“为什么”都留个印象，比如为什么用MyBatis-Plus而不是MyBatis原生——因为开发效率高、内置分页插件；为什么用Vuex而不是localStorage存用户信息——因为Vuex响应式，多组件共享状态更方便。这些回答自然、真实，很容易获得老师认可。

6.4 论文降重与查重技巧

论文查重是毕设躲不开的一环。技术介绍的章节最容易中招，因为大家写来写去就那么几句话。我的方法是：技术介绍里少用官方文档原话，多结合项目场景描述，比如“SpringBoot是一个用于简化Spring应用开发的框架，在本系统中用于提供RESTful API接口服务”。核心代码展示部分用图片或调整格式，减少被检测为重复的文本量。

图表要自己画，不要直接截图网上素材。ER图可以用ProcessOn重画，用例图用startUML，流程图用draw.io。图表清晰、原创度高，论文整体观感也会好很多。

7. 高频踩坑实录与解决方案

7.1 常见问题速查表

我整理了一份实战中高频遇到的问题表，按“症状→原因→解决”的格式记录：

7.2 我踩过的一个印象最深的坑

有一次我部署完项目，本地访问一切正常，远程访问却报错，排查了很久发现是服务器防火墙没开8081端口。这个和网速、代码没关系，但很多新手都不知道。解决方法是：

bash复制firewall-cmd --zone=public --add-port=8081/tcp --permanent
firewall-cmd --reload

如果是云服务器，还需要在安全组里放行这个端口。这个细节很基础，但真能卡住你是半天。

7.3 答辩前必须做的三次演练

第一次演练：把项目从零部署到一台全新的服务器上，记录碰到的问题和修改的地方。这一步能暴露很多“本地能跑，换环境就挂”的问题。

第二次演练：按论文的测试用例表完整跑一遍功能，确保每个按钮、每个流程都和论文描述一致。比如论文写缺陷状态有四个流转阶段，系统里就要真的有四个状态，否则答辩现场验证不一致会很难看。

第三次演练：把可能被老师追问的问题整理成文档，一边看一边打开系统验证答案。比如老师问“如果我要加一个用户角色，你需要改哪些地方”，你跟着思路改一遍，既加深理解，又能展示你对自己的代码很熟。

8. 写在最后的经验之谈

这个项目从零到落地，一个月是合理的预期，核心开发时间大概两周到三周。我的建议是：先画清楚数据库表关系，把所有接口列表定下来，再动手写前端页面。顺序乱了，后面很容易返工。

源码和部署文档一定要整理好，按“数据库脚本、后端源码、前端源码、部署文档、演示视频、论文”归档，每个文件命名清晰。这套素材几年后回头看，都是你简历上能写、面试时能讲的实战案例。

我见过太多同学花大量时间纠结技术选型“要不要用微服务”“要不要用Redis做缓存”，在毕设阶段真的不需要过度设计。把SpringBoot+Vue这套核心链路跑通，把业务功能做完整，把论文写扎实，就已经是一份很优秀的毕设了。

最后给你一个很具操作性的建议：每天编码结束后，花十分钟写一下“今天解决了什么问题”，哪怕记在手机备忘录里。这些内容后面就是你论文第三章系统分析、第六章系统测试的第一手素材，写出来还带着真实的排查过程，比百度复制一段强太多了。