许蒋氏1. 项目背景与核心需求
作为一名经历过校招季的开发者，我深知应届毕业生在求职过程中面临的信息不对称问题。去年帮学弟调试一个类似的就业系统时，发现市面上大多数毕业生就业平台存在两个痛点：一是企业需求与毕业生技能匹配度低，二是缺乏实时数据统计功能。这正是我们选择SpringBoot+Vue技术栈构建就业信息系统的初衷。
这个系统需要解决三个核心问题：
- 实现企业招聘信息与毕业生简历的智能匹配（匹配准确率需达85%以上）
- 提供可视化的就业数据看板（支持实时更新和多种图表展示）
- 建立双向评价机制（企业可评价学生，学生也可反馈面试体验）
技术选型上，后端采用SpringBoot 2.7.x版本而非最新的3.0，主要考虑两点：一是国内企业环境对JDK17的普及度不足，二是2.7.x的社区支持更成熟。前端选择Vue3+Element Plus组合，其响应式特性特别适合处理动态表单和实时数据更新。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 系统架构设计
2.1 技术栈全景图
code复制[后端]
SpringBoot 2.7.12 + MyBatis-Plus 3.5.3 + Redis 6.2
MySQL 8.0（事务隔离级别设为READ-COMMITTED）
Hutool 5.8.16（工具包）
EasyExcel 3.3.2（报表导出）
[前端]
Vue3 + TypeScript + Pinia 2.0.33
Element Plus 2.3.9 + ECharts 5.4.2
Axios 1.3.4（封装了401自动跳转登录）
2.2 微服务划分方案
虽然单体架构也能满足毕业设计需求，但考虑到演示效果和扩展性，建议采用伪微服务设计：
- 用户服务（处理RBAC权限）
- 就业服务（岗位/简历匹配）
- 数据服务（生成可视化报表）
- 消息服务（站内信+邮件通知）
每个服务独立数据库，通过FeignClient通信。这种设计在答辩时能清晰展示模块化思想，实际部署时又可合并成单个War包运行。
3. 核心功能实现细节
3.1 智能匹配算法实现
采用改良的TF-IDF算法计算匹配度：
java复制// 简历关键词提取
public Map<String, Double> extractKeywords(String text) {
// 使用HanLP分词并过滤停用词
List<Term> termList = HanLP.segment(text);
return termList.stream()
.filter(term -> !CoreStopWordDictionary.contains(term.word))
.collect(Collectors.groupingBy(
term -> term.word,
Collectors.summingDouble(term -> 1)
));
}
// 匹配度计算（余弦相似度）
public double calculateMatch(
Map<String, Double> resumeVec,
Map<String, Double> jobVec) {
double dotProduct = 0.0;
double normA = 0.0;
double normB = 0.0;
// 合并所有关键词
Set<String> allKeys = new HashSet<>();
allKeys.addAll(resumeVec.keySet());
allKeys.addAll(jobVec.keySet());
for (String key : allKeys) {
double a = resumeVec.getOrDefault(key, 0.0);
double b = jobVec.getOrDefault(key, 0.0);
dotProduct += a * b;
normA += Math.pow(a, 2);
normB += Math.pow(b, 2);
}
return dotProduct / (Math.sqrt(normA) * Math.sqrt(normB));
}
3.2 实时数据看板方案
前端采用WebSocket+ECharts实现：
vue复制<template>
<div ref="chart" style="width:600px;height:400px"></div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import { useWebSocket } from '@vueuse/core'
const chart = ref(null)
const { data } = useWebSocket('ws://your-domain.com/ws/stats')
onMounted(() => {
const myChart = echarts.init(chart.value)
watchEffect(() => {
if(data.value) {
myChart.setOption(JSON.parse(data.value))
}
})
})
</script>
后端需添加STOMP支持：
java复制@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
config.setApplicationDestinationPrefixes("/app");
}
@Override
public void registerStompEndpoints(StompEndpointRegistry registry) {
registry.addEndpoint("/ws")
.setAllowedOrigins("*")
.withSockJS();
}
}
4. 开发避坑指南
4.1 跨域问题终极解决方案
建议在后端配置全局CORS（而非使用@CrossOrigin注解）：
java复制@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("*")
.allowedHeaders("*")
.exposedHeaders("Authorization")
.maxAge(3600);
}
};
}
4.2 文件上传大小限制
SpringBoot默认只允许1MB文件上传，需在application.yml中调整：
yaml复制spring:
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
同时前端需要特殊处理大文件分片上传：
javascript复制const upload = async (file) => {
const chunkSize = 2 * 1024 * 1024 // 2MB
const chunks = Math.ceil(file.size / chunkSize)
for(let i=0; i<chunks; i++){
const start = i * chunkSize
const end = Math.min(file.size, start + chunkSize)
const chunk = file.slice(start, end)
await axios.post('/upload', chunk, {
headers: {
'Content-Range': `bytes ${start}-${end-1}/${file.size}`
}
})
}
}
4.3 生产环境部署建议
使用Docker Compose部署时，mysql容器需要特殊配置：
dockerfile复制version: '3'
services:
mysql:
image: mysql:8.0
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: job_system
volumes:
- ./mysql/conf.d:/etc/mysql/conf.d # 必须挂载配置文件
- ./mysql/data:/var/lib/mysql
ports:
- "3306:3306"
command:
--default-authentication-plugin=mysql_native_password
--character-set-server=utf8mb4
--collation-server=utf8mb4_unicode_ci
5. 答辩亮点设计建议
5.1 性能优化演示
在简历解析接口添加缓存：
java复制@Cacheable(value = "resume", key = "#userId")
public ResumeVO getResume(Long userId) {
// 数据库查询逻辑
}
配合前端添加加载状态：
vue复制<el-button
:loading="loading"
@click="getResume">
查看简历
</el-button>
5.2 安全防护实现
防止XSS攻击的全局过滤器：
java复制@WebFilter("/*")
public class XssFilter implements Filter {
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
XssHttpServletRequestWrapper wrappedRequest =
new XssHttpServletRequestWrapper(request);
chain.doFilter(wrappedRequest, res);
}
}
5.3 数据可视化创新点
建议增加专业薪资热力图：
javascript复制// 使用高德地图API
const map = new AMap.Map('map', {
viewMode: '3D',
zoom: 11,
center: [116.397428, 39.90923]
})
const heatmap = new AMap.Heatmap(map, {
radius: 25,
opacity: [0, 0.8]
})
// 从后端获取薪资数据
axios.get('/salaryHeatData').then(res => {
heatmap.setDataSet({
data: res.data,
max: 100 // 最高薪资值
})
})
6. 项目扩展方向
如果时间允许，可以考虑以下增值功能：
- 面试模拟系统：接入语音识别API进行模拟面试
- 职业路径规划：基于用户技能推荐学习路线
- 企业黑名单共享：毕业生可匿名评价不良企业
- 移动端适配：使用Vant4开发微信小程序版本
在数据库设计上，建议预留扩展字段：
sql复制ALTER TABLE `company`
ADD `ext_json` JSON DEFAULT NULL COMMENT '扩展字段';
开发过程中我最大的体会是：毕业生就业系统的核心不在于技术复杂度，而在于真实解决信息差问题。建议学弟学妹们在开发时多走访本校就业指导中心，收集真实的痛点需求。比如我们发现很多企业HR特别需要"一键导出符合条件简历包"的功能，这个看似简单的需求实际上大大提升了系统的实用价值。