资讯动态

SpringBoot+Vue高校实习管理系统:从环境搭建到二次开发全指南

发布时间:2026/8/20 8:00:59 来源:尧图企业网站定制
这次我们来看一个基于 SpringBoot Vue 的高校实习信息管理系统源码项目。对于高校、院系或相关管理部门来说实习过程的管理常常面临信息分散、流程繁琐、统计困难等问题。这个开源项目提供了一个完整的解决方案将学生、教师、企业等多方角色纳入统一平台实现实习申请、过程跟踪、报告提交、成绩评定等全流程线上化管理。项目的核心价值在于其完整性和开箱即用。它不是一个简单的 CRUD 演示而是一个功能相对完备、前后端分离的企业级应用。前端采用 Vue.js 构建用户界面后端基于 SpringBoot 提供 RESTful API数据库使用 MySQL。对于开发者而言这既是一个可以直接部署使用的系统也是一个学习 SpringBoot 和 Vue 整合开发、权限设计、工作流实现的优秀案例。本文将带你从零开始完成这套系统的环境搭建、源码部署、功能验证和二次开发准备。我们会重点关注几个关键点系统需要什么样的运行环境JDK、Node.js、MySQL版本如何一键启动前后端服务系统内置了哪些核心功能模块如何进行基础的定制化修改无论你是想直接部署使用还是希望借鉴其架构进行二次开发这篇文章都能提供清晰的指引。1. 核心能力速览在深入细节之前我们先通过一个表格快速了解该项目的核心规格和特点这有助于你判断它是否符合你的需求。能力项说明技术栈后端SpringBoot, MyBatis/MyBatis-Plus, Maven前端Vue.js, Element-UI/Ant Design Vue, npm数据库MySQL 5.7部署方式前后端分离部署。后端打包为 Jar 或 War 运行前端打包为静态资源由 Nginx 或直接由后端服务托管。主要功能模块多角色权限管理学生、导师、辅导员、企业、管理员、实习岗位发布与申请、实习过程周志/报告提交与批阅、实习成绩评定、数据统计与报表。硬件门槛无特殊要求。普通云服务器1核2G或本地开发机即可运行。核心依赖是 Java 运行环境和 Node.js 环境。是否支持一键启动开发环境支持后端通过 IDE 或mvn spring-boot:run启动前端通过npm run serve启动。生产环境需分别打包部署。是否提供接口API是。标准的 RESTful API 设计前端通过 Axios 调用方便对接或扩展。是否支持批量操作部分支持。如管理员可批量导入学生/教师信息批量审核实习申请等。适合场景高校各院系的实习管理、毕业设计管理系统参考、SpringBootVue 全栈学习项目、快速构建类似信息管理系统的基石。2. 适用场景与使用边界2.1 适合谁用高校教学管理人员需要规范化管理学生实习全流程的教务处、院系办公室。计算机相关专业学生/教师寻找一个功能完整、技术栈主流SpringBootVue的毕业设计或课程设计项目。全栈开发学习者希望找到一个前后端分离、代码结构清晰的项目来深入学习如何整合 SpringBoot 和 Vue并理解权限控制、工作流等常见业务实现。中小型软件团队需要快速为一个客户搭建实习管理平台此项目可作为快速开发的基础框架。2.2 能解决什么问题信息孤岛问题将学生、校内导师、企业导师、辅导员的信息和操作统一到一个平台。流程标准化问题固化了实习申请、中期检查、报告提交、成绩评定等关键环节的线上流程。数据统计难题自动生成各类统计报表如实习单位分布、成绩分布、教师指导工作量等。效率提升线上审批、线上提交材料减少线下跑腿和纸质文件传递。2.3 不适合什么场景超大规模、跨校区复杂权限的高校该系统权限模型相对标准对于极其复杂的组织架构和权限细分可能需要二次开发。需要与现有教务系统、一卡通系统深度集成的场景需要额外开发数据同步接口。期望完全无代码、通过拖拽配置的业务人员这是一个需要技术部署和一定定制开发能力的系统。2.4 合规与安全边界数据隐私系统处理大量学生和企业的敏感信息姓名、学号、联系方式、实习内容等。在部署使用时必须确保服务器网络安全设置强密码并遵守《个人信息保护法》等相关法律法规。授权使用确保使用该系统得到了相关管理部门的授权学生和企业的信息收集与使用应获得同意。源码使用遵循项目所声明的开源协议通常是 MIT 或 Apache 2.0在二次开发并分发时注意协议要求。3. 环境准备与前置条件在拉取代码和启动之前请确保你的本地或服务器环境满足以下要求。这是项目能成功运行的基础。3.1 基础软件清单请提前安装并配置好以下软件并确保它们可以在命令行中直接访问。软件推荐版本验证命令说明Java JDK1.8 或 11java -versionSpringBoot 2.x 对 JDK 8 兼容性最好。Maven3.6mvn -v用于后端项目的依赖管理和打包。Node.js14.x 或 16.xnode -vnpm -v前端 Vue 项目运行和打包依赖。MySQL5.7 或 8.0mysql --version项目数据库。确保服务已启动。Git最新版git --version用于克隆项目源码。IDE (可选)IntelliJ IDEA / VS Code-IDEA 用于后端开发VS Code 用于前端开发。3.2 环境配置检查点Java 环境变量确保JAVA_HOME已正确设置并且java和javac命令可用。Maven 仓库首次使用 Maven 会下载大量依赖建议配置国内镜像源如阿里云镜像以加速。Node.js 与 npm安装 Node.js 时会自带 npm。同样建议配置 npm 淘宝镜像npm config set registry https://registry.npmmirror.comMySQL 访问记住你设置的 root 密码并创建一个用于本项目的专用数据库如internship_db以及一个有权限访问该数据库的用户。4. 安装部署与启动方式我们将按照“克隆代码 - 初始化数据库 - 启动后端 - 启动前端”的标准流程进行。4.1 获取项目源码通常这类项目会托管在 Gitee 或 GitHub 上。假设项目仓库地址为https://gitee.com/xxx/internship-system.git。# 克隆项目到本地 git clone https://gitee.com/xxx/internship-system.git cd internship-system # 查看项目结构通常如下 # internship-system/ # ├── backend/ # SpringBoot 后端项目 # ├── frontend/ # Vue 前端项目 # ├── sql/ # 数据库初始化脚本 # └── README.md # 项目说明文档4.2 数据库初始化使用 MySQL 客户端如命令行、Navicat、MySQL Workbench连接你的 MySQL 服务。创建一个新的数据库字符集建议使用utf8mb4排序规则utf8mb4_general_ci。CREATE DATABASE internship_db CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;执行项目sql/目录下的数据库脚本。通常有一个init.sql或按日期命名的脚本文件。这个脚本会创建所有表结构并插入必要的初始数据如管理员账号、字典数据等。# 假设在项目根目录使用命令行导入 mysql -u root -p internship_db sql/init.sql注意请将root和密码替换为你的实际数据库用户信息。4.3 后端服务配置与启动后端项目通常是一个标准的 Maven 项目配置文件为application.yml或application.properties。修改数据库连接配置 进入backend/src/main/resources/目录找到application.yml文件。修改其中关于datasource的配置。spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/internship_db?useUnicodetruecharacterEncodingutf8useSSLfalseserverTimezoneAsia/Shanghai username: your_db_username # 替换为你的数据库用户名 password: your_db_password # 替换为你的数据库密码端口号配置检查server.port配置默认为8080。确保该端口未被占用或根据需要修改。server: port: 8080启动后端服务 有多种方式启动选择其一即可。方式一使用 IDE (如 IntelliJ IDEA)直接打开backend文件夹作为 Maven 项目找到主启动类通常名为Application或*Application右键运行即可。方式二使用 Maven 命令cd backend mvn clean spring-boot:run启动成功后控制台会输出类似Tomcat started on port(s): 8080的信息。此时可以访问http://localhost:8080测试后端健康接口如果项目有提供如/actuator/health。4.4 前端项目配置与启动前端项目是一个 Vue CLI 创建的标准项目需要安装依赖并启动开发服务器。安装依赖cd frontend npm install # 或使用 yarn # yarn install此过程会下载所有package.json中定义的依赖包耗时取决于网络速度。配置后端 API 地址 前端需要知道后端服务的地址。配置文件通常在frontend/src/目录下可能叫config.js、.env.development或直接在main.js中配置 Axios 的 baseURL。如果项目使用环境变量修改.env.development文件VUE_APP_BASE_API http://localhost:8080如果项目在src/utils/request.js中硬编码找到类似下面的代码并修改const service axios.create({ baseURL: http://localhost:8080, // 修改为你的后端地址 timeout: 5000 });启动前端开发服务器npm run serve # 或 # yarn serve启动成功后命令行会输出本地访问地址通常是http://localhost:8081。用浏览器打开此地址即可看到系统登录界面。至此一个完整的本地开发环境已经搭建并运行起来。5. 功能测试与效果验证系统启动后我们以不同角色登录验证核心功能是否正常运行。通常初始脚本会创建默认账号。5.1 管理员登录与系统概览测试目的验证最高权限角色的登录和后台管理功能。输入信息使用sql/init.sql中创建的管理员账号常见如admin/admin123登录。操作步骤与预期结果登录在登录页输入账号密码点击登录应成功跳转到后台管理首页。用户管理在系统管理菜单下应能看到用户列表并能对用户学生、教师、企业进行增删改查、重置密码等操作。角色与权限管理应能查看和配置系统的角色如学生、导师、企业、管理员以及对应的菜单权限、操作权限。数据字典/系统设置应能管理系统的基础配置项如实习状态、成绩等级、学院专业列表等。判断成功能正常访问以上所有管理页面并能进行简单的查询和修改操作且页面无报错。5.2 学生角色功能测试测试目的验证学生端核心业务流程。准备使用一个学生账号登录或通过管理员创建一个。操作步骤与预期结果个人信息维护能查看和修改个人基本信息、联系方式等。实习岗位浏览与申请在“实习岗位”或类似模块应能看到企业发布的岗位列表点击可查看详情并提交申请。我的实习申请通过后在此模块应能看到已关联的实习任务。过程材料提交应能按周或按阶段提交实习周志、中期报告等。实习报告提交实习结束后能上传最终的实习报告文档。成绩查询实习结束后能查看校内导师和企业导师给出的成绩与评语。判断成功能完整走通“找岗位 - 申请 - 过程记录 - 提交报告 - 查看成绩”的流程。5.3 教师/导师角色功能测试测试目的验证教师指导与审核功能。准备使用一个教师账号登录。操作步骤与预期结果学生管理应能看到自己指导的学生列表及其实习状态。申请审核应有入口审核学生提交的实习申请。过程指导能查看学生提交的周志、报告并进行批阅、留言。成绩评定实习结束后能为所指导的学生录入实习成绩和评语。工作量统计可能提供查看本人指导工作量的统计功能。判断成功能完成对学生实习过程的审核、批阅和成绩评定操作。5.4 企业角色功能测试测试目的验证企业端岗位发布与管理功能。准备使用一个企业账号登录通常由管理员创建或企业自行注册。操作步骤与预期结果岗位管理能发布新的实习岗位填写岗位名称、要求、人数、地点等并能对已发布的岗位进行上下架、编辑。申请管理能查看所有申请本企业岗位的学生列表并进行“通过/拒绝”操作。实习生管理对已接收的实习生能查看其提交的材料并在实习结束后为其评定企业方的成绩。判断成功能完成岗位的发布、申请审核和实习生评价。6. 接口 API 与二次开发作为一个前后端分离的项目其核心价值之一在于清晰的后端 API 设计这为二次开发和系统集成提供了便利。6.1 API 结构概览通常API 会按模块进行划分遵循 RESTful 风格。你可以通过以下方式快速了解 API 全貌启动后端服务后访问 Swagger 文档许多 SpringBoot 项目集成了 Swagger 或 Knife4j。尝试访问http://localhost:8080/doc.html或http://localhost:8080/swagger-ui.html。这里会以可视化形式列出所有接口、参数和模型。查看 Controller 层代码在backend/src/main/java/com/xxx/controller/目录下按模块命名的 Controller 类定义了所有 API 端点。6.2 调用 API 示例假设我们需要通过程序批量导入学生信息可以调用用户相关的创建接口。import requests import json # 配置 base_url http://localhost:8080 login_url f{base_url}/auth/login create_user_url f{base_url}/system/user # 1. 管理员登录获取 Token (假设登录接口返回 token) login_data { username: admin, password: admin123 } login_resp requests.post(login_url, jsonlogin_data) token login_resp.json().get(data).get(token) # 根据实际返回结构调整 headers { Authorization: fBearer {token}, Content-Type: application/json } # 2. 创建学生用户 student_data { username: stu2024001, password: 123456, nickName: 张三, roleIds: [3], # 角色ID需要根据系统实际情况填写3可能代表学生角色 deptId: 1, # 院系ID phonenumber: 13800138000, email: stu2024001example.com, sex: 0 # 性别 0男 1女 } create_resp requests.post(create_user_url, jsonstudent_data, headersheaders) print(create_resp.status_code) print(create_resp.json())6.3 如何进行二次开发修改后端业务逻辑找到对应的Service接口和其ServiceImpl实现类进行修改。增加新的 API在对应的Controller中新增方法并使用PostMapping、GetMapping等注解定义路径。修改数据库表或字段修改实体类 (Entity) 和 MyBatis 的 Mapper 文件。使用数据库迁移工具如 Flyway或手动执行 SQL 脚本来更新数据库结构。修改前端页面页面文件在frontend/src/views/目录下按模块组织。组件的逻辑在.vue文件的script标签中。路由配置在frontend/src/router/index.js中。添加新的依赖后端在backend/pom.xml中添加dependency。前端在frontend/目录下执行npm install [package-name] --save。7. 生产环境部署建议开发环境运行正常后若想正式投入使用需要进行生产环境部署。7.1 后端服务打包与运行打包为可执行 Jarcd backend mvn clean package -DskipTests打包成功后在target/目录下会生成一个*.jar文件如internship-system-backend-1.0.0.jar。上传与运行 将 Jar 包和修改好的生产环境配置文件如application-prod.yml上传到服务器。# 在服务器上运行 nohup java -jar internship-system-backend-1.0.0.jar --spring.profiles.activeprod app.log 21 --spring.profiles.activeprod指定使用生产环境配置。nohup ... 让进程在后台运行。 app.log 21将标准输出和错误输出重定向到日志文件。7.2 前端项目打包与部署打包生成静态文件cd frontend npm run build此命令会在frontend/dist/目录下生成压缩优化后的静态资源HTML, JS, CSS。部署到 Web 服务器方式一使用 Nginx推荐将dist目录下的所有文件复制到 Nginx 的 HTML 目录如/usr/share/nginx/html并配置 Nginx 将 API 请求代理到后端服务。server { listen 80; server_name your-domain.com; # 你的域名或IP location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; # 支持 Vue Router 的 history 模式 } # 代理后端 API 请求 location /api/ { proxy_pass http://localhost:8080/; # 后端服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } }方式二由 SpringBoot 托管将dist目录下的文件复制到后端项目的src/main/resources/static/目录下然后重新打包后端 Jar。这样访问 Jar 包就直接可以访问前端页面但不利于前后端分离和静态资源缓存优化。8. 常见问题与排查方法在部署和运行过程中你可能会遇到以下问题。这里提供通用的排查思路。问题现象可能原因排查方式解决方案前端页面能打开但登录后提示“网络错误”或一直加载前端配置的后端 API 地址错误或后端服务未启动。1. 浏览器按 F12 打开开发者工具查看“网络(Network)”标签页找到失败的 API 请求。2. 检查请求的 URL 是否正确指向了后端服务地址和端口。3. 检查后端服务控制台是否有错误日志。修改前端配置中的baseURL确保其指向正确的、正在运行的后端服务地址。后端启动失败提示数据库连接错误1. 数据库地址、端口、库名、用户名或密码错误。2. MySQL 服务未启动。3. 数据库驱动版本不匹配。1. 检查application.yml中的spring.datasource配置。2. 使用命令行或客户端尝试连接 MySQL。3. 检查pom.xml中的mysql-connector-java版本是否与 MySQL 版本兼容。1. 修正数据库连接配置。2. 启动 MySQL 服务。3. 更换匹配的数据库驱动版本。执行 SQL 脚本时出错提示表已存在或语法错误1. 数据库已存在同名表。2. SQL 脚本语法与 MySQL 版本不兼容。1. 检查目标数据库是否为空库或之前已运行过初始化脚本。2. 查看具体的错误行检查 SQL 语法如反引号、注释符。1. 清空数据库或使用新的数据库。2. 根据 MySQL 版本调整 SQL 语法或分步执行脚本。前端npm install失败网络超时或包找不到1. npm 源访问慢或被墙。2. 项目依赖的某个特定版本包在源中不存在。1. 检查网络连接。2. 查看错误信息确认是哪个包安装失败。1. 切换 npm 镜像源到国内地址如淘宝源。2. 清除 npm 缓存npm cache clean --force后重试。3. 如果某个包版本问题尝试在package.json中升级或降级其版本需谨慎。登录成功但页面菜单不显示或提示“无权限”1. 该用户角色未分配菜单权限。2. 前端路由与后端返回的菜单资源不匹配。1. 使用管理员账号登录检查该用户的角色权限配置。2. 查看浏览器控制台是否有 JS 错误以及网络请求中登录后获取用户信息的接口返回数据是否包含正确的菜单列表。1. 在系统管理后台为用户角色分配对应的菜单权限。2. 检查前端路由表定义是否覆盖了所有需要的菜单路由。上传文件功能失败1. 后端配置的文件上传大小限制太小。2. 服务器存储路径不存在或没有写入权限。1. 查看后端日志是否有文件大小超限或路径错误的报错。2. 检查后端配置文件中关于文件上传的配置项如spring.servlet.multipart.max-file-size。1. 在后端配置中调大文件上传限制。2. 确保配置文件中的文件存储路径在服务器上存在且运行 Java 进程的用户对该路径有读写权限。9. 最佳实践与使用建议为了让系统更稳定、安全地运行并便于后续维护请遵循以下建议首次部署先进行完整测试在正式数据导入前用测试账号把所有角色、所有核心流程都走一遍确保功能符合预期。修改默认密码和敏感配置务必修改初始化脚本中的默认管理员密码。修改application.yml中的数据库密码、以及任何可能的密钥如 JWT 签名密钥。做好数据备份定期备份 MySQL 数据库。可以使用mysqldump命令或配置自动备份脚本。mysqldump -u root -p internship_db backup_$(date %Y%m%d).sql生产环境使用 HTTPS通过 Nginx 配置 SSL 证书将 HTTP 请求重定向到 HTTPS保证数据传输安全。监控与日志关注后端服务的运行日志 (app.log)。对于生产环境可以考虑集成更专业的日志框架和监控系统。代码版本管理如果你在源码基础上进行了二次开发务必使用 Git 进行版本管理清晰地记录每次修改。权限最小化原则在给用户分配角色和权限时遵循“最小必要”原则避免普通用户拥有过高权限。定期更新依赖关注项目依赖的第三方库特别是 SpringBoot、Vue、MyBatis 等核心框架的安全公告定期评估并升级到安全版本。这套基于 SpringBoot Vue 的高校实习信息管理系统提供了一个功能全面、技术栈清晰、易于扩展的起点。它的价值不仅在于“能用”更在于其代码结构展示了如何组织一个中等复杂度的企业级 Web 应用。无论是直接部署使用还是作为学习研究的范本它都能节省你大量的基础搭建时间。建议在成功运行基础版本后再根据自身的业务需求有针对性地阅读相关模块的代码进行定制化开发。

读完文章,也想定制专属网站?

尧图设计师 24 小时内与您沟通定制方案

免费获取报价