基于SpringBoot+Vue的校企实习管理系统毕业设计实战指南

最近几年，带过不少计算机专业的毕业设计，发现一个很有意思的现象：很多同学在选题和需求构思阶段花费的时间，远远超过了实际编码的时间。他们往往卡在“我要做一个什么系统”这个问题上，反复纠结，迟迟无法动手。最后要么选一个网上泛滥的“图书管理系统”，要么硬着头皮写一个自己都说不清楚需求的应用，导致整个毕设过程痛苦且成果单薄。

如果你也正为此发愁，那么今天讨论的这个“校企实习管理系统”，或许能给你提供一个全新的思路。它不是一个让你照抄的模板，而是一个从真实业务场景出发，帮你快速构建完整、合理、有深度的毕业设计项目的实战指南。它的核心价值在于：你不用再凭空“构思”需求，而是基于一个成熟、通用的业务模型，去理解、拆解和实现它。这不仅能让你快速启动项目，更能让你在过程中真正理解一个企业级应用是如何从需求到落地的。

为什么实习管理系统是个好选题？因为它介于“过于简单”和“过于复杂”之间。它不像“学生信息管理”那样基础，也不像“电商平台”那样庞大。它具备清晰的业务角色（学生、企业、学校管理员）、完整的业务流程（岗位发布、投递、审核、过程管理、评价）和适中的技术复杂度，非常适合用来展示你对SpringBoot、Vue、数据库设计、前后端交互等核心技术的综合运用能力。

接下来，我们将抛开空泛的概念，直接进入实战。我会带你走过从环境搭建到功能实现的完整路径，并重点分享那些新手最容易忽略，却又决定项目成败的关键细节。

1. 为什么“实习管理系统”是毕设的黄金选题？

在开始敲代码之前，我们得先想明白，为什么这个选题值得做。很多同学选课题时容易陷入两个极端：要么追求“高大上”搞AI、区块链，结果技术栈不熟，做成了空中楼阁；要么图省事做“增删改查”管理后台，导致项目深度不足，答辩时经不起推敲。

实习管理系统巧妙地避开了这两个坑。首先，它的业务逻辑是自洽且真实的。你不需要编造需求，只需要把现实中学校、学生、企业三方在实习过程中的互动关系梳理清楚即可。这为你提供了一个坚实、可信的需求基础。其次，它的技术栈覆盖全面且主流。后端可以用SpringBoot构建RESTful API，前端用Vue实现动态交互，数据库用MySQL存储关系型数据，中间可能涉及文件上传、权限控制、状态流转等常见企业级功能。最后，它的复杂度可控。你可以根据自身时间和能力，决定是做单学校版本，还是支持多学校、多院系的版本；是只做流程管理，还是加入数据分析报表。

更重要的是，这个项目能很好地回答答辩老师最关心的几个问题：

• 业务理解：你能说清楚学生从找实习到完成实习的完整流程吗？
• 技术选型：你为什么用SpringBoot而不是SSM？为什么用Vue而不是jQuery？
• 系统设计：你的数据库表是如何设计的？如何保证数据的一致性？
• 难点与解决：你在开发中遇到了什么具体问题？是如何解决的？

一个选题，如果能让你自然地展示这些能力，那它就是一个好选题。实习管理系统正是这样的存在。

2. 环境与工具准备：避开第一个“坑”

万事开头难，而“开头”往往就卡在环境配置上。很多教程默认你万事俱备，但现实中，版本冲突、依赖下载失败、配置错误才是常态。我们的原则是：用最稳定、最通用的版本组合，先让项目跑起来。

2.1 后端环境 (SpringBoot)

• JDK：推荐 JDK 8 或 JDK 11。这是企业级应用最主流的两个LTS版本，兼容性最好。确保JAVA_HOME环境变量配置正确。
• 开发工具：IntelliJ IDEA 社区版或旗舰版均可。它的Spring Initializr集成和智能提示能极大提升效率。
• 项目初始化：访问 start.spring.io ，这是最官方的起点。生成项目时，选择：
  • Project: Maven Project (更通用)
  • Language: Java
  • Spring Boot: 选择 2.7.x 或 3.0.x 的稳定版本（注意，3.x需要JDK 17+）
  • Dependencies: 这是我们项目的骨架，务必选对：
    • Spring Web(构建Web应用)
    • Spring Data JPA或MyBatis-Plus(数据库ORM，二选一，新手推荐JPA)
    • MySQL Driver(数据库驱动)
    • Lombok(简化实体类代码，强烈推荐)
• 数据库：安装MySQL 5.7或8.0。创建一个空数据库，例如internship_db。记住连接信息（url, username, password）。

2.2 前端环境 (Vue)

• Node.js：去官网下载LTS版本（如18.x）。安装后，在命令行用node -v和npm -v验证。
• 包管理工具：npm 随Node安装，但国内速度可能慢。建议安装yarn或配置 npm 淘宝镜像。
• Vue CLI：这是官方脚手架。在命令行运行npm install -g @vue/cli进行全局安装。完成后用vue --version验证。
• 创建项目：在合适目录下运行vue create internship-frontend。选择Manually select features，然后勾选：
  • Babel(ES6转译)
  • Router(路由，必选)
  • Vuex(状态管理，对于多角色系统很有用)
  • CSS Pre-processors(如Sass/Scss，选装)
  • 其他如Linter/Formatter可根据喜好选择。
• 开发工具：Visual Studio Code 是前端开发的首选，轻量且插件丰富。必装插件：Vetur (Vue语法高亮)、ESLint、Prettier。

注意：不要在这个阶段追求最新版本。毕设的核心是稳定完成，而不是技术探险。锁定上述版本组合，能帮你避开至少80%的环境问题。

3. 核心业务与数据库设计：先想清楚再动手

这是项目的“地基”。很多同学一上来就写Controller和页面，结果写到一半发现表结构设计不合理，又要推倒重来，非常打击士气。正确的顺序是：梳理业务 -> 设计数据库 -> 创建实体 -> 编写基础CRUD。

3.1 业务角色与流程梳理

我们的系统主要涉及三类用户：

1. 学生：查看实习岗位、投递简历、查看进度、提交周报/总结、评价企业。
2. 企业：注册/登录、发布岗位、审核简历、管理实习生、评价学生。
3. 学校管理员/导师：审核企业资质、管理学生信息、审核实习申请、查看实习过程、处理异常。

核心业务流程可以简化为：

企业发布岗位 -> 管理员审核岗位 -> 学生浏览并投递 -> 企业审核简历 -> 学生进入实习 -> 双方过程记录与评价 -> 实习结束归档。

3.2 数据库表设计（核心表举例）

基于以上流程，我们可以设计出以下核心表。这里使用注释说明字段意义和关联关系。

-- 用户表（统一存储学生、企业、管理员，通过user_type区分） CREATE TABLE `sys_user` ( `id` bigint NOT NULL AUTO_INCREMENT COMMENT '主键', `username` varchar(50) NOT NULL COMMENT '用户名/登录账号', `password` varchar(100) NOT NULL COMMENT '加密后的密码', `nickname` varchar(50) DEFAULT NULL COMMENT '昵称/真实姓名', `avatar` varchar(255) DEFAULT NULL COMMENT '头像', `email` varchar(100) DEFAULT NULL COMMENT '邮箱', `phone` varchar(20) DEFAULT NULL COMMENT '手机号', `user_type` tinyint NOT NULL COMMENT '用户类型：1-学生，2-企业，3-管理员', `status` tinyint DEFAULT '1' COMMENT '状态：0-禁用，1-正常', `create_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_username` (`username`) ) COMMENT='系统用户表'; -- 学生扩展信息表 CREATE TABLE `student_info` ( `id` bigint NOT NULL AUTO_INCREMENT, `user_id` bigint NOT NULL COMMENT '关联用户ID', `student_number` varchar(20) NOT NULL COMMENT '学号', `college` varchar(100) DEFAULT NULL COMMENT '学院', `major` varchar(100) DEFAULT NULL COMMENT '专业', `grade` varchar(20) DEFAULT NULL COMMENT '年级', `resume_url` varchar(255) DEFAULT NULL COMMENT '简历文件路径', PRIMARY KEY (`id`), UNIQUE KEY `uk_user_id` (`user_id`), UNIQUE KEY `uk_student_number` (`student_number`), CONSTRAINT `fk_student_user` FOREIGN KEY (`user_id`) REFERENCES `sys_user` (`id`) ON DELETE CASCADE ) COMMENT='学生信息表'; -- 企业扩展信息表 CREATE TABLE `company_info` ( `id` bigint NOT NULL AUTO_INCREMENT, `user_id` bigint NOT NULL COMMENT '关联用户ID', `company_name` varchar(200) NOT NULL COMMENT '企业全称', `credit_code` varchar(50) DEFAULT NULL COMMENT '统一社会信用代码', `industry` varchar(100) DEFAULT NULL COMMENT '所属行业', `scale` varchar(50) DEFAULT NULL COMMENT '企业规模', `address` varchar(255) DEFAULT NULL COMMENT '地址', `introduction` text COMMENT '企业简介', `business_license_url` varchar(255) DEFAULT NULL COMMENT '营业执照', `audit_status` tinyint DEFAULT '0' COMMENT '审核状态：0-待审核，1-通过，2-拒绝', PRIMARY KEY (`id`), UNIQUE KEY `uk_user_id` (`user_id`), CONSTRAINT `fk_company_user` FOREIGN KEY (`user_id`) REFERENCES `sys_user` (`id`) ON DELETE CASCADE ) COMMENT='企业信息表'; -- 实习岗位表 CREATE TABLE `internship_post` ( `id` bigint NOT NULL AUTO_INCREMENT, `company_id` bigint NOT NULL COMMENT '发布企业ID', `title` varchar(200) NOT NULL COMMENT '岗位标题', `description` text COMMENT '岗位描述', `requirement` text COMMENT '任职要求', `location` varchar(100) DEFAULT NULL COMMENT '工作地点', `recruit_number` int DEFAULT NULL COMMENT '招聘人数', `apply_number` int DEFAULT '0' COMMENT '已申请人数', `start_date` date DEFAULT NULL COMMENT '实习开始日期', `end_date` date DEFAULT NULL COMMENT '实习结束日期', `status` tinyint DEFAULT '1' COMMENT '状态：0-关闭，1-开放', `publish_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '发布时间', `audit_status` tinyint DEFAULT '0' COMMENT '审核状态：0-待审核，1-通过，2-拒绝', PRIMARY KEY (`id`), KEY `idx_company_id` (`company_id`), CONSTRAINT `fk_post_company` FOREIGN KEY (`company_id`) REFERENCES `company_info` (`id`) ) COMMENT='实习岗位表'; -- 实习申请记录表（核心流程表） CREATE TABLE `internship_application` ( `id` bigint NOT NULL AUTO_INCREMENT, `post_id` bigint NOT NULL COMMENT '岗位ID', `student_id` bigint NOT NULL COMMENT '学生ID', `resume_url` varchar(255) DEFAULT NULL COMMENT '投递的简历', `application_status` tinyint DEFAULT '0' COMMENT '申请状态：0-已投递，1-已查看，2-通过初筛，3-面试邀请，4-录用，5-拒绝', `feedback` varchar(500) DEFAULT NULL COMMENT '企业反馈', `apply_time` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '投递时间', `update_time` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP COMMENT '状态更新时间', PRIMARY KEY (`id`), UNIQUE KEY `uk_post_student` (`post_id`,`student_id`), -- 防止重复投递 KEY `idx_student_id` (`student_id`), CONSTRAINT `fk_application_post` FOREIGN KEY (`post_id`) REFERENCES `internship_post` (`id`), CONSTRAINT `fk_application_student` FOREIGN KEY (`student_id`) REFERENCES `student_info` (`id`) ) COMMENT='实习申请记录表';

（其他表如周报表、评价表等可根据需要扩展）

设计要点：

1. 用户统一认证：sys_user表是所有用户的登录入口，通过user_type区分角色。这样做的好处是登录逻辑统一，权限控制清晰。
2. 信息分离：学生和企业的详细信息放在扩展表中，与核心登录信息解耦，结构更清晰。
3. 状态字段：status,audit_status,application_status等状态字段是业务流程驱动的核心。设计时要穷举所有可能状态，并在代码中用枚举类管理。
4. 外键与索引：合理使用外键保证数据完整性，在post_id,student_id等查询频繁的字段上建立索引提升性能。
5. 时间戳：create_time,update_time是必备字段，用于记录和追踪。

4. 后端实现：从实体到API的完整链路

有了清晰的数据模型，后端开发就变成了有迹可循的“填空题”。我们以“实习岗位”模块为例，走通从实体到控制器（Controller）的完整链路。

4.1 创建实体类 (Entity)

使用Spring Data JPA，实体类与数据库表一一对应。结合Lombok，代码非常简洁。

package com.internship.system.entity; import lombok.Data; import javax.persistence.*; import java.time.LocalDateTime; import java.util.Date; @Data @Entity @Table(name = "internship_post") public class InternshipPost { @Id @GeneratedValue(strategy = GenerationType.IDENTITY) private Long id; @Column(name = "company_id", nullable = false) private Long companyId; @Column(nullable = false, length = 200) private String title; @Column(columnDefinition = "TEXT") private String description; @Column(columnDefinition = "TEXT") private String requirement; private String location; private Integer recruitNumber; private Integer applyNumber = 0; @Temporal(TemporalType.DATE) private Date startDate; @Temporal(TemporalType.DATE) private Date endDate; private Integer status = 1; // 使用枚举更佳 private Integer auditStatus = 0; @Column(updatable = false) private LocalDateTime publishTime = LocalDateTime.now(); // 省略 getter/setter，由Lombok的@Data注解提供 }

4.2 创建数据访问层 (Repository)

JPA的Repository接口提供了强大的数据访问能力，无需编写SQL。

package com.internship.system.repository; import com.internship.system.entity.InternshipPost; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import org.springframework.data.jpa.repository.JpaRepository; import org.springframework.data.jpa.repository.Query; import org.springframework.data.repository.query.Param; import java.util.List; public interface InternshipPostRepository extends JpaRepository<InternshipPost, Long> { // 根据企业ID分页查询 Page<InternshipPost> findByCompanyId(Long companyId, Pageable pageable); // 根据状态查询（例如：查询所有已审核通过的岗位） List<InternshipPost> findByAuditStatus(Integer auditStatus); // 复杂查询示例：根据标题关键词和地点查询已审核通过的岗位 @Query("SELECT p FROM InternshipPost p WHERE p.auditStatus = 1 AND (p.title LIKE %:keyword% OR p.description LIKE %:keyword%) AND p.location LIKE %:location%") Page<InternshipPost> searchPosts(@Param("keyword") String keyword, @Param("location") String location, Pageable pageable); }

4.3 创建业务逻辑层 (Service)

Service层处理核心业务逻辑，是Controller和Repository之间的桥梁。

package com.internship.system.service; import com.internship.system.entity.InternshipPost; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import java.util.Map; public interface InternshipPostService { // 保存或更新岗位 InternshipPost saveOrUpdate(InternshipPost post); // 根据ID获取岗位 InternshipPost getById(Long id); // 分页查询岗位（带条件） Page<InternshipPost> getPostsByPage(Map<String, Object> conditions, Pageable pageable); // 更新岗位状态 void updateStatus(Long id, Integer status); // 删除岗位（逻辑删除或物理删除） void deleteById(Long id); }

package com.internship.system.service.impl; import com.internship.system.entity.InternshipPost; import com.internship.system.repository.InternshipPostRepository; import com.internship.system.service.InternshipPostService; import lombok.RequiredArgsConstructor; import org.springframework.data.domain.Page; import org.springframework.data.domain.Pageable; import org.springframework.data.jpa.domain.Specification; import org.springframework.stereotype.Service; import org.springframework.util.StringUtils; import javax.persistence.criteria.Predicate; import java.util.ArrayList; import java.util.List; import java.util.Map; @Service @RequiredArgsConstructor // Lombok注解，自动注入final字段 public class InternshipPostServiceImpl implements InternshipPostService { private final InternshipPostRepository postRepository; @Override public InternshipPost saveOrUpdate(InternshipPost post) { // 这里可以添加业务校验，例如：企业是否存在，日期是否合理等 if (post.getId() == null) { post.setApplyNumber(0); // 新建岗位，申请人数为0 } return postRepository.save(post); } @Override public Page<InternshipPost> getPostsByPage(Map<String, Object> conditions, Pageable pageable) { // 使用Specification动态构建查询条件，这是JPA处理复杂查询的优雅方式 Specification<InternshipPost> spec = (root, query, cb) -> { List<Predicate> predicates = new ArrayList<>(); // 条件：审核状态为通过 predicates.add(cb.equal(root.get("auditStatus"), 1)); // 条件：岗位状态为开放 predicates.add(cb.equal(root.get("status"), 1)); // 动态添加其他条件 if (conditions.containsKey("keyword") && StringUtils.hasText((String)conditions.get("keyword"))) { String keyword = (String) conditions.get("keyword"); Predicate p1 = cb.like(root.get("title"), "%" + keyword + "%"); Predicate p2 = cb.like(root.get("description"), "%" + keyword + "%"); predicates.add(cb.or(p1, p2)); } if (conditions.containsKey("location") && StringUtils.hasText((String)conditions.get("location"))) { predicates.add(cb.like(root.get("location"), "%" + conditions.get("location") + "%")); } // 可以继续添加其他条件，如企业行业、实习日期范围等 query.where(predicates.toArray(new Predicate[0])); query.orderBy(cb.desc(root.get("publishTime"))); // 按发布时间倒序 return query.getRestriction(); }; return postRepository.findAll(spec, pageable); } // ... 其他方法实现 }

4.4 创建Web控制层 (Controller)

Controller接收前端请求，调用Service，并返回统一格式的响应。这里使用@RestController和@RequestMapping。

package com.internship.system.controller; import com.internship.system.common.Result; import com.internship.system.entity.InternshipPost; import com.internship.system.service.InternshipPostService; import lombok.RequiredArgsConstructor; import org.springframework.data.domain.Page; import org.springframework.data.domain.PageRequest; import org.springframework.data.domain.Pageable; import org.springframework.data.domain.Sort; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.Map; @RestController @RequestMapping("/api/post") @RequiredArgsConstructor public class InternshipPostController { private final InternshipPostService postService; /** * 分页查询实习岗位列表 (学生端/前台) * @param page 页码，从0开始 * @param size 每页大小 * @param keyword 搜索关键词 * @param location 工作地点 * @return 分页结果 */ @GetMapping("/list") public Result<Page<InternshipPost>> getPostList( @RequestParam(defaultValue = "0") Integer page, @RequestParam(defaultValue = "10") Integer size, @RequestParam(required = false) String keyword, @RequestParam(required = false) String location) { Pageable pageable = PageRequest.of(page, size, Sort.by(Sort.Direction.DESC, "publishTime")); Map<String, Object> conditions = new HashMap<>(); if (keyword != null) conditions.put("keyword", keyword); if (location != null) conditions.put("location", location); Page<InternshipPost> postPage = postService.getPostsByPage(conditions, pageable); return Result.success(postPage); } /** * 根据ID获取岗位详情 */ @GetMapping("/{id}") public Result<InternshipPost> getPostDetail(@PathVariable Long id) { InternshipPost post = postService.getById(id); if (post == null) { return Result.error("岗位不存在"); } return Result.success(post); } /** * 企业发布新岗位 */ @PostMapping public Result<InternshipPost> createPost(@RequestBody InternshipPost post, @RequestAttribute Long currentUserId) { // 从请求属性中获取当前登录的企业用户ID（需要配合拦截器实现） post.setCompanyId(currentUserId); post.setAuditStatus(0); // 新发布岗位默认为待审核 InternshipPost savedPost = postService.saveOrUpdate(post); return Result.success(savedPost); } // ... 其他接口：更新、删除、状态变更等 }

后端开发核心经验：

1. 统一响应格式：定义一个Result<T>类，封装code,message,data，让前端处理结果更规范。
2. 全局异常处理：使用@ControllerAdvice和@ExceptionHandler捕获并处理各类异常，返回友好的错误信息，而不是堆栈跟踪。
3. 参数校验：在DTO或实体字段上使用@NotBlank,@Size等注解，并在Controller方法上加@Valid注解，避免无效数据进入业务层。
4. 分页查询：对于列表数据，务必使用分页。Spring Data的Pageable和Page对象能极大简化开发。
5. 接口文档：使用Swagger或Knife4j自动生成API文档，方便前后端联调。

5. 前端实现：用Vue构建动态管理界面

前端的目标是构建一个清晰、交互友好的管理界面。我们以“岗位列表页”和“岗位发布页”为例。

5.1 安装必要依赖并配置请求库

在Vue项目根目录下，安装axios和element-ui（一个流行的UI组件库）。

npm install axios element-ui --save

在main.js中引入：

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import axios from 'axios' Vue.config.productionTip = false Vue.use(ElementUI); // 配置axios基准URL和请求拦截器（用于添加token） axios.defaults.baseURL = 'http://localhost:8080/api'; // 假设后端运行在8080端口 axios.interceptors.request.use(config => { const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); axios.interceptors.response.use( response => response.data, error => { // 统一处理错误，例如token过期跳转到登录页 if (error.response && error.response.status === 401) { router.push('/login'); } return Promise.reject(error); } ); Vue.prototype.$axios = axios; new Vue({ router, store, render: h => h(App) }).$mount('#app')

5.2 岗位列表页组件 (PostList.vue)

这个页面展示所有已审核通过的实习岗位，支持搜索和分页。

<template> <div class="post-list-container"> <el-card> <!-- 搜索区域 --> <div class="search-bar"> <el-input v-model="searchForm.keyword" placeholder="请输入岗位关键词" style="width: 300px; margin-right: 15px;" @keyup.enter.native="handleSearch" ></el-input> <el-input v-model="searchForm.location" placeholder="请输入工作地点" style="width: 200px; margin-right: 15px;" @keyup.enter.native="handleSearch" ></el-input> <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> <el-button @click="resetSearch">重置</el-button> </div> <!-- 岗位列表表格 --> <el-table :data="tableData" style="width: 100%; margin-top: 20px;" v-loading="loading"> <el-table-column prop="title" label="岗位名称" width="200"></el-table-column> <el-table-column prop="companyName" label="企业名称" width="180"></el-table-column> <el-table-column prop="location" label="工作地点" width="120"></el-table-column> <el-table-column prop="recruitNumber" label="招聘人数" width="100"></el-table-column> <el-table-column prop="applyNumber" label="已申请" width="80"></el-table-column> <el-table-column prop="startDate" label="开始日期" width="120"> <template slot-scope="scope"> {{ formatDate(scope.row.startDate) }} </template> </el-table-column> <el-table-column prop="endDate" label="结束日期" width="120"> <template slot-scope="scope"> {{ formatDate(scope.row.endDate) }} </template> </el-table-column> <el-table-column label="操作" width="150"> <template slot-scope="scope"> <el-button type="text" size="small" @click="viewDetail(scope.row.id)">查看详情</el-button> <el-button type="text" size="small" @click="handleApply(scope.row)" :disabled="scope.row.applied">投递简历</el-button> </template> </el-table-column> </el-table> <!-- 分页组件 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current" :page-sizes="[10, 20, 50]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" style="margin-top: 20px; text-align: center;" > </el-pagination> </el-card> </div> </template> <script> export default { name: 'PostList', data() { return { searchForm: { keyword: '', location: '' }, tableData: [], // 表格数据 loading: false, pagination: { current: 1, size: 10, total: 0 } } }, mounted() { this.fetchPostList(); }, methods: { // 获取岗位列表 async fetchPostList() { this.loading = true; try { const params = { page: this.pagination.current - 1, // 后端页码从0开始 size: this.pagination.size, ...this.searchForm }; const res = await this.$axios.get('/post/list', { params }); this.tableData = res.data.content; // Spring Data Page 对象的内容 this.pagination.total = res.data.totalElements; } catch (error) { this.$message.error('获取岗位列表失败'); console.error(error); } finally { this.loading = false; } }, // 搜索 handleSearch() { this.pagination.current = 1; // 搜索时回到第一页 this.fetchPostList(); }, // 重置搜索 resetSearch() { this.searchForm = { keyword: '', location: '' }; this.handleSearch(); }, // 分页大小变化 handleSizeChange(val) { this.pagination.size = val; this.pagination.current = 1; this.fetchPostList(); }, // 当前页变化 handleCurrentChange(val) { this.pagination.current = val; this.fetchPostList(); }, // 查看详情 viewDetail(id) { this.$router.push(`/post/detail/${id}`); }, // 投递简历 handleApply(row) { // 这里应该弹出一个对话框，上传简历或选择已有简历 this.$confirm(`确定要投递「${row.title}」岗位吗？`, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(async () => { try { await this.$axios.post('/application', { postId: row.id }); this.$message.success('投递成功！'); row.applied = true; // 禁用按钮 this.fetchPostList(); // 刷新列表，更新申请人数 } catch (error) { this.$message.error('投递失败：' + (error.message || '未知错误')); } }); }, // 日期格式化 formatDate(dateStr) { if (!dateStr) return '-'; return new Date(dateStr).toLocaleDateString(); } } } </script> <style scoped> .search-bar { margin-bottom: 20px; } </style>

5.3 路由与状态管理配置

在router/index.js中配置路由，在store/index.js中可以使用Vuex管理用户登录状态等全局信息。这部分是Vue项目的标准配置，此处不再赘述。

前端开发核心经验：

1. 组件化：将页面拆分为可复用的组件，如搜索栏、表格、分页、表单对话框等。
2. 状态管理：对于跨组件共享的状态（如用户信息），使用Vuex进行集中管理。
3. API封装：将所有的后端请求封装成独立的service模块，便于维护和复用。
4. 错误处理：在axios拦截器中统一处理网络错误和业务错误，给用户友好的提示。
5. 用户体验：合理使用loading状态、按钮防抖、操作确认弹窗等，提升交互体验。

6. 前后端联调与部署：让项目真正跑起来

代码写完了，但项目还停留在本地。联调和部署是检验项目能否正常工作的最后一步，也是问题高发区。

6.1 解决跨域问题

前后端分离开发，前端运行在localhost:8081，后端在localhost:8080，浏览器会因同源策略阻止请求。在后端SpringBoot项目中，添加一个配置类即可解决。

package com.internship.system.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; @Configuration public class CorsConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/api/**") // 针对所有/api开头的接口 .allowedOrigins("http://localhost:8081") // 允许前端地址 .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } }

6.2 打包与部署

• 后端打包：在项目根目录下执行mvn clean package（Maven项目），会在target目录生成一个.jar文件。使用java -jar your-project.jar即可运行。
• 前端打包：在Vue项目根目录下执行npm run build，会在dist目录生成静态文件（HTML, JS, CSS）。
• 部署方式：
  • 简单方式：将前端dist目录下的文件，复制到SpringBoot项目的src/main/resources/static/目录下，然后打包成一个jar。这样访问后端地址就能看到前端页面。（适合毕设演示）
  • 分离部署：后端jar包运行在服务器上，前端静态文件使用Nginx托管。需要配置Nginx将API请求代理到后端服务。（更接近生产环境）

6.3 常见问题排查清单

当项目跑不起来时，按这个顺序检查：

1. 后端启动失败：
   • 检查端口是否被占用（netstat -ano | findstr :8080）。
   • 检查数据库连接配置（application.yml或application.properties）是否正确。
   • 查看启动日志，是否有依赖冲突或Bean创建错误。
2. 前端请求报错：
   • 404：检查请求URL是否正确，后端对应@RequestMapping路径是否存在。
   • 405：检查请求方法（GET/POST）与后端接口定义是否一致。
   • 500：后端内部错误，查看后端控制台日志，通常是空指针、SQL异常或业务逻辑错误。
   • 跨域错误：确认后端CORS配置已生效，且前端请求地址无误。
3. 页面显示异常：
   • 打开浏览器开发者工具（F12），查看Console和Network标签页，这里会有详细的错误信息。
   • 检查Element-UI等组件库版本是否兼容。
   • 检查Vue、Vue Router、Vuex的版本是否匹配。

7. 从“能运行”到“像样作品”：毕设的加分项

一个能运行的系统和一份优秀的毕设作品之间，还差一些“匠心”。这些点能让你的项目在答辩时脱颖而出。

1. 权限控制：实现基于角色的访问控制（RBAC）。学生不能审核岗位，企业不能查看其他企业的申请者。可以使用Spring Security或Shiro框架，这是展示你系统设计能力的好机会。
2. 文件上传：实现简历、营业执照等文件的上传与下载功能。考虑文件类型限制、大小限制、存储路径（本地或OSS）和访问权限。
3. 数据可视化：为管理员增加数据看板。使用ECharts等库，展示实习岗位数量趋势、学生投递情况、企业分布等图表。
4. 消息通知：当学生的申请状态变更（如通过初筛、被拒绝）时，通过站内信或邮件（集成Spring Mail）通知用户。
5. 日志记录：关键操作（如登录、发布岗位、审核申请）记录操作日志，便于追踪和审计。
6. 接口文档：使用Swagger生成并维护一份清晰的API文档，这体现了你的工程素养。
7. 代码质量：保持代码规范，有清晰的注释，对关键算法或复杂逻辑进行说明。可以进行简单的单元测试。

记住，毕业设计考察的不仅仅是你实现了什么功能，更是你如何思考问题、如何设计系统、如何解决问题以及如何呈现成果。这个“校企实习管理系统”项目，为你提供了一个坚实的舞台，让你可以系统地展示这些能力。从今天开始，不要再纠结于“构思需求”，而是动手去“实现一个清晰的业务”。当你把上述每一步都走通、走扎实之后，你会发现，一份令人满意的毕设作品，已然在你手中。