Spring Boot 3 + Vue 3 学生就业信息管理系统全栈开发实战指南

1. 这个系统到底要做什么：先理清需求边界

"springboot+vue学生就业信息管理系统"是近两年毕业设计和课程设计里非常典型的一个题目，也是我接触学生咨询时被问得最多的组合之一。它的热度来源很直接：Spring Boot 是 Java 后端求职的标配技能，Vue 是前端市场的主流框架，而"就业信息管理"又天然带着一个完整业务闭环——学生要找工作、企业要发岗位、老师要看就业率，三方都有自己的操作诉求，正好能撑起一套前中后端的完整项目。

但正因为这个题太常见，反而容易做成"空壳子"：登录注册加一个 CRUD 表格，数据库里堆几张表，看起来该有的都有了，一答辩就问倒——"你这统计图表的就业率口径是什么？简历投递的状态流转怎么设计的？用户权限怎么控制的？"我在帮人看项目代码时，至少一半的"就业管理系统"死在这几个问题上。

所以这篇博客我不打算只贴一套能跑的代码，而是把这个题拆清楚：你要实现的最小功能集合是什么、表该怎么设计、Spring Boot 后端和 Vue 前端各自的重点在哪里、联调和部署有哪些坑，以及我实际测试过程中踩过的版本兼容问题。无论你是准备拿它当毕设、还是想练手全栈，按这个思路做下来，至少是一个逻辑自洽、能答辩、能演示的完整项目。

1.1 核心角色与功能列表

先建立一个基本认知：就业信息管理系统本质上是一套"招聘信息中转站 + 就业数据台账"。围绕这个定位，通常需要三类用户角色：

功能清单不建议一上来就贪大求全，先抓住两端关键链路：

• 学生链路：注册登录 → 完善简历 → 浏览招聘信息 → 投递简历 → 查看企业反馈
• 就业数据链路：学生登记就业去向 → 教师审核 → 系统自动汇总就业率 → 按专业/年级生成统计图表

这两条链路跑通了，系统的"信息管理"属性就立住了。什么校园招聘会报名、在线笔试、Offer 比价器之类的，都属于加分项，等基础功能稳定了再加不迟。

1.2 一个常见的选择：要不要做企业端

我见过不少同学在设计时纠结要不要加一个"企业登录"的角色。我的建议是：如果是毕设，尽量加，但只做轻量级企业端。理由很实际——加了企业端就能形成三方角色闭环，答辩时讲"权限设计"和"业务流程"会丰满很多；而企业端本身不复杂，无非就是发布岗位、查看收到的简历、标记投递状态，后端逻辑比重很小。

如果你确实想掐时间，只做学生端 + 教师端 + 管理端也完全能毕业，很多课程设计就是这个规模。后续提供的接口设计里我会把企业端的部分单独标注出来，方便你按需裁剪。

1.3 功能模块的优先级排序

按照"先跑通、再完善"的原则，我给一份开发顺序建议，按此推进能避免做到后面发现地基没打牢：

1. 登录与权限：JWT Token 认证 + 基于角色的菜单/接口权限（先做，所有功能都依赖它）。
2. 学生简历管理：基础资料的增删改查（简历是投递的前置条件）。
3. 招聘信息模块：岗位发布、分页检索、条件筛选（系统的内容核心）。
4. 投递记录：学生投递、企业/教师更新状态、列表查询（打通业务闭环）。
5. 就业登记与审核：学生登记就业去向、教师审核、数据落库。
6. 统计报表：按专业、年级、时间维度统计就业率和岗位热度（用于答辩展示与收尾）。

这样排的好处是前四步做完，项目就已经"看起来像一个完整的业务系统"了，后面两步属于锦上添花但又是答辩时最容易出彩的部分。

2. 技术选型与版本兼容问题：为什么那么多人在 Spring Boot 版本上翻车

这个标题不是我吓唬人，而是不管在技术社区还是学生作品里，"Spring Boot 版本太高导致项目跑不起来"是我见过频率最高的故障。搜索热词里赫然列着"springboot版本太高"一条，足以说明这不是个别现象。

2.1 Spring Boot 2.x 与 3.x 的本质差异

Spring Boot 3.x相比2.x是一次大的版本跃迁，表面上看只是升级了框架，实际涉及不少底层变更：

• JDK 基线提升：Spring Boot 3 要求 JDK 17 及以上，而 2.x 用 JDK 8 就能跑。如果你的电脑上还是习惯用的 JDK 8，直接拿 3.x 的教程代码会连启动都报UnsupportedClassVersionError。
• javax.变成了 jakarta.**：这个是最致命、也最隐蔽的变化。老教程里import javax.servlet.*、javax.validation.*这些包在 3.x 里全部改名为jakarta.servlet.*、jakarta.validation.*。一旦你用老代码 + Spring Boot 3，编译就会报"找不到符号"。
• 第三方中间件的适配问题：比如分页插件 PageHelper、一些老版本的 MyBatis-Plus、某些模板引擎，如果版本停在 2021 年左右，并不支持 Spring Boot 3 的自动配置机制。你照着别人 2.x 的配置写好，启动时可能直接抛BeanCreationException。

那到底选 2.x 还是 3.x？我的建议是：如果你做毕设，直接选 3.x + JDK 17。原因很简单——Spring Boot 2.x 的官方维护窗口已经关闭得很彻底了，现在新项目、新教程、新版本插件基本默认适配 3.x。与其学好旧技术再二次迁移，不如从源头踩在最新稳定版上。后面我给出的工程配置也都以 Spring Boot 3.x 为准。

2.2 Vue 3 + Vite，而不是 Vue 2 + Webpack

前端技术栈的选择其实比后端简单粗暴：直接用 Vue 3 + Vite + Element Plus。

Vue 2 官方维护也已停止，新项目没有理由再走老路。Vite 相比 Webpack 的启动速度提升是体验级别的——Webpack 开发服务器冷启动可能要二三十秒，Vite 几秒就能起来。对于学生项目这种频繁保存、频繁刷新看效果的场景，Vite 的 HMR（热更新）是真的省时间。

至于 Element Plus 组件库，它专为 Vue 3 设计，表单、表格、弹窗、分页组件齐全，省去了大量造轮子时间。你在网上搜到的大部分"Vue 后台管理系统"模板项目也都是这一套，遇坑时搜索资料更方便。

2.3 数据库与持久层选型

数据库选 MySQL 8.0 基本没有争议，这个不展开。

持久层我推荐 MyBatis-Plus，而不是 Spring Data JPA。理由有三点：

1. SQL 可见性：MyBatis-Plus 的代码走的是"实体类 + 条件构造器"模式，它的 CRUD 方法都是封装好的，但底层生成的 SQL 逻辑清楚，写复杂查询时可以直接在 Mapper 里加 XML，不会像 JPA 那样出现"方法名很长还是不会写查询"的尴尬。
2. 毕设代码好解释：用 MyBatis-Plus 写的数据访问层，你答辩时说"这里用了 LambdaQueryWrapper 实现动态条件查询"，导师一听就懂。
3. 分页插件支持：PaginationInnerInterceptor一行配置接好，返回Page对象里直接带总数和分页数据，前端的表格分页对接非常省事。

2.4 推荐版本组合（实测稳定）

以下是我在一个可运行的就业管理演示项目里实际测过的组合，直接照着装问题不大：

注意：不要盲目追求"最新版本"。比如 Spring Boot 3.5 刚出时，一些插件兼容还跟不上。选用生态已经跟进的版本，能避开很多不可控的坑。

3. 数据库设计：就业数据的核心关系

搞清楚了功能模块和角色，第二步就是把数据模型落地。数据库设计质量决定你后面写代码能不能痛快。很多同学喜欢把一堆字段堆在一张表里，我见过一张student_info表里塞 30 个字段的，后期改需求想死的心都有。

3.1 核心表结构设计

这个项目我建议拆成 7 张核心表，它们之间的关系非常清楚：

• sys_user：所有登录账号的统一认证表，通过role字段区分学生、教师、管理员、企业。
• student_info：学生档案信息，和sys_user一对一关联。
• enterprise_info：企业档案，和sys_user一对一关联（如果做轻量企业端）。
• job_info：招聘岗位信息，归属企业。
• resume：学生简历主表，归属学生。简历内容复杂的部分，可以存 JSON 字段或单独的子表。
• job_application：投递记录，连接简历、岗位、学生三方。
• employ_record：就业去向登记，用于生成就业率统计。

下面给出简化但不失完整性的建表 SQL。注意我刻意设计了几个容易忽略但很实用的字段，比如del_flag（逻辑删除）和status（业务状态）。

-- 用户表 CREATE TABLE sys_user ( id BIGINT PRIMARY KEY AUTO_INCREMENT COMMENT '主键', username VARCHAR(50) NOT NULL UNIQUE COMMENT '登录名', password VARCHAR(100) NOT NULL COMMENT 'BCrypt加密后的密码', nickname VARCHAR(50) COMMENT '显示昵称', role VARCHAR(20) NOT NULL COMMENT '角色: STUDENT/TEACHER/ADMIN/ENTERPRISE', status TINYINT DEFAULT 1 COMMENT '状态: 1正常 0禁用', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, del_flag TINYINT DEFAULT 0 COMMENT '逻辑删除标记' ); -- 学生档案表 CREATE TABLE student_info ( id BIGINT PRIMARY KEY AUTO_INCREMENT, user_id BIGINT NOT NULL COMMENT '关联sys_user.id', student_no VARCHAR(20) NOT NULL UNIQUE COMMENT '学号', real_name VARCHAR(50) COMMENT '真实姓名', gender TINYINT COMMENT '性别: 1男 2女', major VARCHAR(100) COMMENT '专业', grade VARCHAR(10) COMMENT '年级，如2024届', phone VARCHAR(20) COMMENT '手机号', email VARCHAR(100) COMMENT '邮箱', graduation_year INT COMMENT '毕业年份', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, del_flag TINYINT DEFAULT 0 ); -- 招聘岗位表 CREATE TABLE job_info ( id BIGINT PRIMARY KEY AUTO_INCREMENT, enterprise_id BIGINT NOT NULL COMMENT '关联企业用户id', title VARCHAR(100) NOT NULL COMMENT '岗位名称', category VARCHAR(50) COMMENT '岗位类别: 技术/销售/运营等', city VARCHAR(50) COMMENT '工作城市', salary_min INT COMMENT '薪资下限(K)', salary_max INT COMMENT '薪资上限(K)', education_require VARCHAR(20) COMMENT '学历要求', description TEXT COMMENT '岗位描述', status TINYINT DEFAULT 1 COMMENT '状态: 0下架 1在招 2待审核', view_count INT DEFAULT 0 COMMENT '浏览次数', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, del_flag TINYINT DEFAULT 0 ); -- 简历表 CREATE TABLE resume ( id BIGINT PRIMARY KEY AUTO_INCREMENT, student_id BIGINT NOT NULL COMMENT '关联学生档案id', title VARCHAR(100) DEFAULT '我的简历' COMMENT '简历标题', education_exp TEXT COMMENT '教育经历，可存JSON', work_exp TEXT COMMENT '实习/工作经历', skill TEXT COMMENT '技能特长', self_eval TEXT COMMENT '自我评价', status TINYINT DEFAULT 1 COMMENT '是否默认简历', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, del_flag TINYINT DEFAULT 0 ); -- 投递记录表 CREATE TABLE job_application ( id BIGINT PRIMARY KEY AUTO_INCREMENT, job_id BIGINT NOT NULL, student_id BIGINT NOT NULL, resume_id BIGINT NOT NULL COMMENT '投递时使用的简历', status VARCHAR(20) DEFAULT 'PENDING' COMMENT '状态: PENDING待处理/ACCEPTED已通过/REJECTED已拒绝', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, UNIQUE KEY uk_job_student (job_id, student_id) ); -- 就业去向登记表 CREATE TABLE employ_record ( id BIGINT PRIMARY KEY AUTO_INCREMENT, student_id BIGINT NOT NULL, enterprise_name VARCHAR(100) COMMENT '签约公司', job_title VARCHAR(100) COMMENT '签约岗位', salary VARCHAR(50) COMMENT '薪资待遇', sign_date DATE COMMENT '签约日期', status TINYINT DEFAULT 0 COMMENT '0待审核 1已通过 2已驳回', audit_remark VARCHAR(200) COMMENT '审核意见', create_time DATETIME DEFAULT CURRENT_TIMESTAMP, update_time DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP );

3.2 容易被忽视的字段：逻辑删除与业务状态

很多新手会忽略del_flag，删除数据直接DELETE FROM物理删除。这样做的问题在于：就业管理系统里，用户、岗位、简历都存在历史追溯诉求。比如学生投递过的岗位被删了，投递记录里的岗位信息就成了空洞；企业账号被误删，所有岗位和投递关系全部断裂。

用逻辑删除（del_flag=1）配合 MyBatis-Plus 的@TableLogic注解，可以让删除操作自动转成UPDATE，查询时自动过滤已删除数据。对答辩来说，这也是很好的加分点——你不仅实现了删除，还用逻辑删除保护了业务数据链的完整性。

status状态字段也是同理。岗位有"待审核、在招、下架"三个状态，投递有"待处理、已通过、已拒绝"三个状态，就业记录有"待审核、已通过、已驳回"三个状态。有了状态字段，你的前端就能展示流程节点，后端也能基于状态做权限控制——比如只有教师能审核就业记录，不能让状态自己乱跳。

3.3 表关系总结

把上面的表串起来，逻辑是这样的：sys_user是人的登录身份；student_info和enterprise_info是业务身份；resume归属学生；job_info归属企业；job_application把学生、简历、岗位三者关联成投递行为；employ_record独立记录签约结果。每次查询但凡涉及列表页，都要带着关联关系去查，例如投递记录页要同时展示学生姓名、岗位名称、企业名称和状态——这就要用到多表联查或嵌套查询。

4. 后端实现：Spring Boot 接口的核心落地思路

到了编码环节，我见过大量翻车案例集中在同一个点：把所有代码塞进 Controller 里，直接对着 Mapper 操作数据库。这就是传说中的"超级 Controller 反模式"。用这套写法做 CRUD 确实最快，但到了登录鉴权、多条件查询、跨表数据组装时，代码会迅速失控。

4.1 工程目录与分层：照着搭不会错

推荐采用经典的三层结构 + 统一扩展包的工程布局：

src/main/java/com/example/jobplatform/ ├── controller/ # 只负责接收参数、返回结果 ├── service/ # 业务逻辑处理（接口 + impl实现） ├── mapper/ # MyBatis-Plus 的 Mapper 接口 ├── entity/ # 数据库实体类 ├── dto/ # 前后端交互的数据传输对象（登录请求、投递请求等） ├── vo/ # 视图对象（如就业率统计 VO） ├── config/ # 全局配置：MyBatis-Plus分页、CORS、拦截器 ├── common/ │ ├── Result.java # 统一返回结果 │ ├── JwtUtil.java # JWT 工具类 │ └── GlobalExceptionHandler.java # 全局异常处理

分层的理由不复杂：Controller 负责把 HTTP 参数转成 Java 对象，Service 负责真正的业务判断和事务控制，Mapper 负责和数据库打交道。这样你答辩时被问到"登录流程怎么做的"，可以顺着"Controller 接收请求 → JwtUtil 校验用户名密码 → Service 调 Mapper 查用户 → 返回 Token"这条路讲得清清楚楚。

4.2 登录认证与 JWT 的实现细节

登录是这个系统所有接口的前置能力，不做好它，其他接口全裸奔。Spring Boot 3 里我推荐用 JWT + 拦截器实现，不引入重型的 Spring Security 体系——毕设项目引入 Security 配置成本高、学习曲线陡，略微有点大炮打蚊子。

依赖只加一个jjwt：

<dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-api</artifactId> <version>0.12.5</version> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-impl</artifactId> <version>0.12.5</version> <scope>runtime</scope> </dependency> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt-jackson</artifactId> <version>0.12.5</version> <scope>runtime</scope> </dependency>

登录接口逻辑大致是三步：查询用户 → 校验密码 → 签发 Token。密码存储用 BCrypt 加密（Spring Security Crypto 包里提供，单独引入即可），千万不能明文存密码。

@PostMapping("/login") public Result<String> login(@RequestBody LoginDTO dto) { // 1. 通过用户名查用户（注意逻辑删除过滤） SysUser user = sysUserService.getOne( new LambdaQueryWrapper<SysUser>() .eq(SysUser::getUsername, dto.getUsername()) .eq(SysUser::getDelFlag, 0) ); if (user == null) { return Result.error("用户不存在"); } if (user.getStatus() != 1) { return Result.error("账号已被禁用"); } // 2. 校验 BCrypt 密码 if (!BCryptPasswordEncoder.matches(dto.getPassword(), user.getPassword())) { return Result.error("密码错误"); } // 3. 生成 JWT，把用户 id 和角色放进去 String token = JwtUtil.generateToken(user.getId(), user.getRole()); return Result.success(token); }

拦截器负责拦截除登录接口外的所有请求，从Authorization头里取 Token 并校验，校验通过就把用户信息放到ThreadLocal或请求 Attribute 中，后续 Controller 取出 userId 和 role 使用。

这里有一个新手容易踩的坑：JWT 的 secret 不要写在代码里。放到配置文件application.yml，用@Value注入，免得每次改 key 都要重新编译。

4.3 MyBatis-Plus 条件构造器：多条件筛选这样写

岗位列表页是最典型的多条件查询页面：按城市、关键字、薪资范围、学历要求筛选。如果用拼接 SQL 的方式，写起来繁琐容易错；用 MyBatis-Plus 的LambdaQueryWrapper则非常清爽：

@Override public Page<JobInfo> queryJobPage(int current, int size, JobQueryDTO dto) { Page<JobInfo> page = new Page<>(current, size); LambdaQueryWrapper<JobInfo> wrapper = new LambdaQueryWrapper<>(); wrapper.eq(StringUtils.hasText(dto.getCity()), JobInfo::getCity, dto.getCity()) .eq(dto.getEducationRequire() != null, JobInfo::getEducationRequire, dto.getEducationRequire()) .ge(dto.getMinSalary() != null, JobInfo::getSalaryMax, dto.getMinSalary()) .like(StringUtils.hasText(dto.getKeyword()), JobInfo::getTitle, dto.getKeyword()) .eq(JobInfo::getStatus, 1) .orderByDesc(JobInfo::getCreateTime); return jobInfoMapper.selectPage(page, wrapper); }

这里有个细节值得注意：wrapper.eq(condition, column, value)中的第一个参数是布尔值，控制要不要把该条件拼进 SQL。前端传参时可传可不传，后端不用写一堆if判断。这种写法在答辩讲解时也特别方便。

分页配置放在MybatisPlusConfig里，加上分页拦截器即可：

@Configuration public class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; } }

4.4 统一返回结果与全局异常处理

前后端分离项目，最忌讳后端接口返回结构不一致。一会儿是{code: 200, data: ...}，一会儿是裸的true或List，前端 Axios 就要写一堆容错逻辑。

统一返回类很简单：

@Data public class Result<T> { private Integer code; // 200 成功，500 失败 private String message; private T data; public static <T> Result<T> success(T data) { Result<T> r = new Result<>(); r.code = 200; r.message = "操作成功"; r.data = data; return r; } public static <T> Result<T> error(String msg) { Result<T> r = new Result<>(); r.code = 500; r.message = msg; return r; } }

再配一个@RestControllerAdvice做全局异常处理，把业务异常、参数校验异常、兜底异常分别映射到统一的Result结构。这样前端 Axios 响应拦截器里只用判断code === 200即可，其余全部走统一错误弹窗。

5. 前端实现：Vue 页面从零到能跑

前端这块，最大的问题不是写不出页面，而是工程化配置绕不过来。搜索热词里"vue安装依赖"、"vue项目源码怎么发给别人"、"idea开发vue项目"、"vue样式冲突"都在说明同一个事情：很多人在 Vue 项目初始化、依赖安装、工程化配置上出现了大量问题。这一节我只挑对项目起步最关键的几点讲。

5.1 用 Vite 初始化项目与环境配置

创建 Vue 3 项目的标准动作如下，我实测用 npm 创建比用vue create（Vue CLI）更贴合当前生态：

npm create vue@latest

脚手架会问你启用哪些特性，对就业管理这类项目，勾选Vue Router和Pinia即可，TS 可勾可不勾——如果对 TypeScript 不熟，建议先别勾，纯 JavaScript 能把精力集中在业务逻辑上，否则需要同时语言课三座大山。

项目生成后，接着安装组件库和网络请求库：

npm install element-plus axios npm install @element-plus/icons-vue

然后改前端开发服务器端口与代理配置，在项目根目录的vite.config.js下添加：

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [vue()], server: { port: 5173, proxy: { // 前端请求 /api 开头的接口，都转发到后端 8080 '/api': { target: 'http://localhost:8080', changeOrigin: true, // 如果后端接口本来就带 /api 前缀，不要重写；反之可以去掉 // rewrite: (path) => path.replace(/^\/api/, '') } } } })

联调阶段这个代理极其重要。不配置代理的话，前端页面访问/api/xx会直接请求前端自己的5173端口，接口必然 404。配置后，浏览器里看到的请求地址仍是localhost:5173/api/xx，但 Vite 会把它转发到localhost:8080/api/xx，从而绕开跨域问题。

5.2 路由守卫与菜单权限

路由设计上，我按角色做两级控制：

• 一级是登录路由与访客路由：未登录只能进登录页。
• 二级是角色路由：学生、教师、管理员进入系统后看到不同的侧边菜单。

Vue Router 里用meta.roles标记该路由允许哪些角色访问：

{ path: '/student/jobs', name: 'JobList', component: () => import('@/views/student/JobList.vue'), meta: { roles: ['STUDENT'] } }

然后在全局前置守卫里做判断：

router.beforeEach((to, from, next) => { const token = localStorage.getItem('token') if (!token && to.path !== '/login') { next('/login') return } const role = localStorage.getItem('role') if (to.meta.roles && !to.meta.roles.includes(role)) { next('/403') // 无权限页 return } next() })

为什么路由不能用后端数据动态生成？因为这是一个中小型管理系统，菜单是静态写死的，按角色显隐即可。动态路由主要服务于后台管理类平台（不同用户自定义菜单），对你这个系统来说收益不高，反而增加复杂度。

5.3 Axios 封装：请求拦截与响应处理

Axios 封装的目标是做到"每个页面只写业务请求，不重复处理 Token 和错误码"。我通常建一个utils/request.js：

import axios from 'axios' import { ElMessage } from 'element-plus' import router from '@/router' const request = axios.create({ baseURL: '/api', // 配合 Vite 代理 timeout: 10000 }) // 请求拦截：自动携带 Token request.interceptors.request.use(config => { const token = localStorage.getItem('token') if (token) { config.headers.Authorization = `Bearer ${token}` } return config }) // 响应拦截：统一处理错误码 request.interceptors.response.use( res => { const data = res.data if (data.code === 200) { return data.data } ElMessage.error(data.message || '请求失败') return Promise.reject(new Error(data.message)) }, err => { if (err.response && err.response.status === 401) { localStorage.removeItem('token') router.push('/login') } else { ElMessage.error('网络异常，请稍后重试') } return Promise.reject(err) } ) export default request

这样每个业务接口就非常干净。比如岗位列表页：

import request from '@/utils/request' export function fetchJobs(params) { return request({ url: '/job/page', method: 'get', params }) }

5.4 核心页面实现要点

前端页面的工作量主要集中在以下几个页面：

• 登录页：表单校验 + 登录后根据角色跳转不同的默认首页。这里有个我踩过的小坑：登录返回的 Token 只代表身份认证，但你要展示学生姓名、学号、专业时，还需要再调一次getUserInfo接口拿详细信息并存入 Pinia。不要试图把姓名塞进 JWT，因为 JWT 本来就不适合承载频繁变动的业务数据。
• 岗位列表页：筛选条件栏 + 表格 + 分页。分页组件绑定currentPage和pageSize，监听事件重新请求接口。需要注意的是，切换页码时要保持筛选条件，所以页码状态和筛选状态最好放在同一个响应式对象里。
• 简历编辑页：这是表单控制最复杂的页面，教育经历、工作经历、技能特长、自我评价多个区块，推荐直接用 Element Plus 的el-tabs拆分成多个部分，每个 Tab 一个子表单，最后统一提交。
• 就业统计页：后端返回按月/按专业聚合的数组，前端用 ECharts 渲染柱状图和饼图。ECharts 的安装和引入很简单，重点是后端聚合 SQL 要写对，这是统计页成败的关键。

关于"vue项目源码怎么发给别人"这个经常被搜的问题，其实值得在这里多说一句：发源码时不要拖带node_modules目录，否则解压一个几百 MB 的压缩包，光等就等半天。正确做法是删掉node_modules，把整个工程目录压缩打包，对方拿到后执行npm install即可恢复依赖。如果你只需要给对方看运行效果，直接在本地执行npm run build生成dist目录，把dist放到任何静态服务器上就能访问。

6. 前后端联调与部署：从本地跑通到交付源码

6.1 本地联调最常见的三类问题

本地联调这一步，多数人不是倒在代码上，而是倒在环境协作上。我按出现频率排个序：

第一类：后端端口没对准。Spring Boot 默认端口 8080，Vite 代理目标如果写成了 8081，怎么调都不通。先确认application.yml里server.port和vite.config.js的target一致，再谈其他。

第二类：CORS 跨域没配置。如果你不用 Vite 代理，而是直接让前端请求后端接口，那么浏览器会因跨域策略拦截。解决方式有两种：后端加全局 CORS 配置，或者前端走 Vite 代理。二选一即可，不要混用——混用时配置冲突会让请求莫名失败。

第三类：Token 没带上或过期了。请求拦截器里如果没带Authorization头，后端 401 就不可避免。调试建议用浏览器开发者工具的 NetWork 面板直接看请求头里面Authorization是否存在，比一次次打印日志更直接。

6.2 演示用的部署方式：Spring Boot 打包 + Vue 静态资源

毕设答辩通常需要在本地演示，或者让老师在自己的电脑上打开系统。最省事的方式是把 Vue 构建产物放进 Spring Boot 的静态资源目录，打成单个 Jar 包。

具体步骤：

1. 前端构建：npm run build，生成dist目录。
2. 将dist目录整个复制到后端工程的src/main/resources/static/下。
3. 后端 Maven 打包：mvn clean package，产出可执行 Jar。
4. 运行java -jar job-platform.jar，浏览器访问http://localhost:8080，前端页面和后端接口都在同一个服务上，不需要再单独处理跨域。

注意：采用这种方式后，Vite 代理不再生效，前端请求的baseURL得改成不带/api前缀重写的方式，或者在后端 Controller 里统一加/api前缀并在前端保留。简单起见，后端所有接口类可以统一使用@RequestMapping("/api/xxx")，前端构建时保持/api前缀，请求会自动命中同源后端接口。

如果觉得java -jar太简单展示不出工程能力，再去折腾 Nginx + Docker 部署。但作为毕设演示，单体 Jar 方式足够稳定，也省钱省事。

6.3 源码交付与 README 文档

源码交付这件事，许多同学不够上心，导致留给老师的第一印象极差。我建议在交付前多做两步：

1. 写一份完整的 README。内容包括 JDK 版本、Node 版本、MySQL 初始化脚本路径、后端启动步骤、前端安装依赖步骤、默认账号密码。老师拿到手不用问就知道怎么跑起来，体验会好很多。
2. 初始化数据库脚本。把建库建表 + 初始账号数据的 SQL 文件单独放出来，名称写成init.sql或者数据库初始化脚本.sql。有很多项目交付时数据库表是开发时边写边改的，没有一份干净的一键初始化脚本，那对方跑项目前得先从一堆接口报错里猜表结构，灾难现场。

7. 实操中踩过的坑与避坑经验

最后汇个总，把我在做同类项目时实际遇到、帮别人排查过的高频问题列出来。这些问题不解决，你整个开发周期可能要在环境折腾上浪费一半时间。

7.1 Spring Boot 版本陷阱的排查链路

如果你启动 Spring Boot 项目时遇到"无法找到符号javax.servlet.*"或某些第三方自动配置类报错，按这个顺序排查：

1. 查看pom.xml里 Spring Boot 父版本；如果是 3.x，代码里的javax.*一定要改成jakarta.*。
2. 查看所有第三方依赖的版本。MyBatis-Plus 低于 3.5.3 的版本不兼容 Boot 3，PageHelper 需要 6.x 才能配合 Boot 3。
3. 确认 JDK 版本是 17+。IDEA 的 Project Structure 里有一处，Maven 的 JDK for Importer 设置里另有一处，两处不一致都可能启动失败。

这套路径我帮人排查时重复走过很多遍，每次基本都是上面三个点里的某一个。

7.2 Vue 安装依赖报错的处理

npm install时报ERESOLVE unable to resolve dependency tree是经典老问题，多发生在依赖版本冲突场景。处理办法是使用--legacy-peer-deps参数：

npm install --legacy-peer-deps

如果是网络问题导致的下载失败，就配置国内镜像源：

npm config set registry https://registry.npmmirror.com

还有一个想提醒的：开发环境和生产环境的 Node 版本不要差别太大，否则npm run build可能出现奇怪的语法报错，比如Top-level await is not available之类的。建议大家都在 Node 18 或 20 LTS 版上操作。

7.3 启动失败时不要慌，看第一行报错

很多人运行项目时控制台刷一堆 Info 日志，然后盯着最后的 Exception 大块看半天，越看越乱。我的经验是直接看第一次出现的 ERROR 或者 Caused by。Spring Boot 启动失败的根因不会只在最后一条，往往在中间某个Caused by里就已经把答案写明白了。

比如最常见启动失败级联：

APPLICATION FAILED TO START Description: Failed to configure a DataSource: 'url' attribute is not specified...

这说明数据库连接配置没写好。继续往下翻可能还有一条Caused by: java.sql.SQLException: Access denied for user 'root'@'localhost'，这就是数据库账号密码问题。按这个套路看报错，效率会高很多。

7.4 我个人的一点经验

做这类全栈管理系统，最难的不是某一段代码写得有多巧，而是把跑通闭环的时间压缩下来。我第一次做类似项目时，光是折腾 Spring Boot 3 和 MyBatis-Plus 的版本兼容就花了两天。后来我养成了一个习惯：任何技术选型先查"最新稳定版本 + 官方文档 + 社区已知问题"，不要等依赖报错再去翻 Stack Overflow。

还有一个小技巧分享给你：项目初始化阶段就先跑通"最小闭环"——学生登录 → 发布一条岗位 → 投递一次 → 后台管理页看到这条投递记录。四步跑通之后，剩下的功能都是在这个闭环上加页面、加接口、加查询条件而已。先把骨架立起来，其他只是时间问题。