文章目录
- 环境背景
- 最终效果
- 前端讲解
- 左侧模块解析
- 右侧上传模块解析
- 前端步骤
- 后端讲解
- 代码
- 前端
环境背景
- 若依前后端分离框架 + vue
- 最后边附有代码哦
最终效果
前端讲解
左侧模块解析
- 1、左侧表单使用el-form
注意：
1、prop出现的字段，需要保证是该类所具有的字段
2、点击提交按钮后，调用的是handleSubmit方法
右侧上传模块解析
① v-if=“uploadedFileName” 如果对uploadedFileName不为空，该控件显示
② v-model=“upload.open” 在vue2中会写成 :visible.sync=“upload.open” ，在vue3中是不生效的，需要修改
③ 上传文件限制，只能上传1个
④ 前端限制，上传的文件只能是pdf
前端步骤
-
1、在打开页面时，通过 created() 的 this.fetchResumeData()来获取数据
-
2、fetchResumeData通过await getResumeByUsername(username)来调用js的方法然后获得数据，然后通过this.myResume=response.data填充
-
3、当点击上传简历按钮时，会调用handleImport方法，然后更改upload的open属性为true，这样就显示了上传文件的对话框了
-
4、文件上传完成后，会调用submitFileForm方法，开始上传，同时调用upload中的url进行文件解析
-
5、上传成功后，会调用handleFileSuccess方法，然后将内容填充
后端讲解
- pom文件
<dependency><groupId>org.apache.pdfbox</groupId><artifactId>pdfbox</artifactId><version>2.0.26</version>
</dependency>
- controller层
@RequestMapping("/parsepdf")public AjaxResult parsePdf(@RequestParam("file") MultipartFile file) {try {// 保存文件到本地String filePath = PdfUtil.save(file);// 获取 PDF 文件内容String content = PdfUtil.getContent(file.getInputStream());// 解析 PDF 内容并封装为简历信息Map<String, String> map = PdfUtil.setResume(content,file.getName(),filePath);// 返回解析后的数据return AjaxResult.success(map);} catch (Exception e) {System.err.println(e.getMessage());return AjaxResult.error("文件解析失败：" + e.getMessage());}}
-
pdf格式说明
需按照如下的格式，因为正则匹配的解析是这么来的，可以结合后边的正则函数查看
-
PdfUtil类
package com.ruoyi.utils;import com.ruoyi.common.config.RuoYiConfig;
import com.ruoyi.common.utils.file.FileUploadUtils;
import org.apache.pdfbox.pdmodel.PDDocument;
import org.apache.pdfbox.text.PDFTextStripper;
import org.springframework.web.multipart.MultipartFile;import java.io.File;
import java.io.IOException;
import java.io.InputStream;
import java.util.HashMap;
import java.util.Map;
import java.util.regex.Matcher;
import java.util.regex.Pattern;public class PdfUtil {/*** 将上传的文档保存到本地* @param file* @return* @throws IOException*/public static String save(MultipartFile file) throws IOException{String path = FileUploadUtils.upload(file);// 为什么是e？String realPath = path.substring(path.indexOf("e")+2);String baseDir = RuoYiConfig.getProfile();String filePath = baseDir + realPath;return filePath;}public static String getContent(InputStream inputStream) throws IOException {try (PDDocument document = PDDocument.load(inputStream)) {PDFTextStripper stripper = new PDFTextStripper();return stripper.getText(document);}}/*** 将内容按照字段存储进行匹配* @param content* @return*/public static Map<String,String> setResume(String content,String fileName,String filePath){// map用来存储解析到的内容Map<String,String> map = new HashMap<>();map.put("file_name",fileName);map.put("file_path",filePath);String skillRegex ="专业技能\\s+(.*?)(?=工作经历|$)"; ; // "专业技能\r?\n([\s\S]+)"String skill = regex(skillRegex,content);System.err.println("--------------专业技能-------------");System.err.println("skills："+skill);map.put("skills",skill);String phoneRegex = "联系方式：(\\d+) 邮箱：(\\S+)";String phone = regex(phoneRegex,content);System.err.println("--------------联系电话-------------");System.err.println("phone"+phone);map.put("phone",phone);String titleRegex = "求职意向\\s+(.*?)(?=简介|$)";String title = regex(titleRegex,content);System.err.println("--------------求职意向-------------");System.err.println("title"+title);map.put("title",title);String summaryRegex = "简介\\s+(.*?)(?=获奖及证书|$)";String summary = regex(summaryRegex,content);System.err.println("--------------简介即总结-------------");System.err.println("summary"+summary);map.put("summary",summary);String experienceRegex = "工作经历\\s+(.*?)(?=工作项目经历|$)";// "工作项目经历\\r?\\n([\\s\\S]+)"String experience = regex(experienceRegex,content);System.err.println("--------------工作项目经历-------------");System.err.println("experience"+experience);map.put("experience",experience);String projectRegex = "工作项目经历\\s+(.*)";// "工作项目经历\\r?\\n([\\s\\S]+)"String project = regex(projectRegex,content);System.err.println("--------------工作项目经历-------------");System.err.println("content"+project);map.put("content",project);String educationRegex = "教育经历\\s+(.*)"; // "< < < 个人信息\\s*(.*?)(?=< < < 教育背景)"String education = regex(educationRegex,content);System.err.println("--------------教育背景-------------");System.err.println("education"+education);map.put("education",education);String certificationRegex = "获奖及证书\\s+(.*?)(?=专业技能|$)";String certification = regex(certificationRegex,content);System.err.println("--------------获奖及证书-------------");System.err.println("certifications"+certification);map.put("certifications",certification);return map;}/*** 匹配规则* @param regex 匹配要求* @param content 需要匹配的内容* @return 匹配结果*/public static String regex(String regex,String content){Pattern pattern=Pattern.compile(regex,Pattern.DOTALL);// 如果想要获取多行，这里一定添加的是Pattern.DOTALLMatcher matcher=pattern.matcher(content);if(matcher.find()){String data=matcher.group(1).trim();return data;}return null;}
}
代码
前端
<template><div class="container"><div class="my-myResume"><!--简历编辑页面--><el-form :model="myResume" ref="resumeForm" label-width="120px" class="myResume-form"><el-form-item label="求职意向" prop="title"><el-input v-model="myResume.title" placeholder="请输入简历标题"></el-input></el-form-item><el-form-item label="联系方式A" prop="summary"><el-input type="textarea" v-model="myResume.phone" placeholder="请输入您的手机号码"></el-input></el-form-item><el-form-item label="个人介绍" prop="summary"><el-input type="textarea" v-model="myResume.summary" placeholder="请输入个人介绍"></el-input></el-form-item><el-form-item label="工作经历" prop="experience"><el-input type="textarea" v-model="myResume.experience" placeholder="请输入工作经历"></el-input></el-form-item><el-form-item label="工作项目经历" prop="content"><el-input type="textarea" v-model="myResume.content" placeholder="请输入工作项目经历"></el-input></el-form-item><el-form-item label="教育经历" prop="education"><el-input type="textarea" v-model="myResume.education" placeholder="请输入教育经历"></el-input></el-form-item><el-form-item label="专业技能" prop="skills"><el-input type="textarea" v-model="myResume.skills" placeholder="请输入专业技能"></el-input></el-form-item><el-form-item label="获奖及证书" prop="certifications"><el-input type="textarea" v-model="myResume.certifications" placeholder="请输入获得的认证"></el-input></el-form-item><el-button type="primary" @click="handleSubmit">提交</el-button></el-form></div><div class="pdfModule"><!-- 上传PDF按钮--><el-button type="primary" @click="handleImport">上传PDF简历</el-button><div v-if="uploadedFileName" class="file-name">已上传文件：{{ uploadedFileName }}</div><!-- 上传对话框--><el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body="true"><el-uploadref="upload":limit="1"accept=".pdf":headers="upload.headers":action="upload.url":disabled="upload.isUploading":on-progress="handleFileUploadProgress":on-success="handleFileSuccess":auto-upload="false"><i class="el-icon-upload"></i><div class="el-upload__text">将文件拖到此处，或 <em>点击上传</em></div><div class="el-upload__tip text-center" slot="tip"><span>仅允许导入pdf格式文件</span></div></el-upload><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitFileForm">确定</el-button><el-button @click="upload.open = false">取消</el-button></div></el-dialog></div></div>
</template><script>
import {ElForm, ElFormItem, ElInput, ElButton, ElMessage} from 'element-plus';
import {updateResume, getResumeByUsername, uploadResume, getUserIdByUsername} from '@/api/myResume/myResume'; // 更新API路径import Cookies from 'js-cookie'import axios from 'axios';import {getToken} from "@/utils/auth.js";export default {name: 'MyResume',data() {return {// 初始化简历对象myResume: {resume_id: null, //初始化为null，后续从当前用户获取title: '',phone:'',summary: '',experience: '',content:'',education: '',skills: '',certifications: '',file_name:'',file_path:'',},// 简历导入参数upload:{open:false,title:"上传PDF简历",isUploading:false,headers:{ Authorization:"Bearer "+getToken()},// url:process.env.VUE_APP_BASE_API+"/resumes/resume/import"url:"http://localhost:8088/student/myResume/parsepdf"},uploadedFileName:'', // 存储上传的文件名称};},methods: {// 导入按钮操作/*** 打开上传对话框*/handleImport(){this.upload.title ="上传PDF简历";this.upload.open = true;},/*** 文件上传中处理*/handleFileUploadProgress(event,file,fileList){this.upload.isUploading = true;console.log("文件上传中", event, file, fileList);},/*** 文件上传成功处理*/async handleFileSuccess(response,file){this.upload.open = false;this.upload.isUploading = false;this.$refs.upload.clearFiles();if(response.code===200){this.fillFormWithPDFData(response.data);// 将解析的数据填充到表单中this.uploadedFileName = file.name; //显示上传的文件名称ElMessage.success('文件上传成功');}else{ElMessage.error('文件解析失败');}},/*** 提交上传的文件*/submitFileForm(){console.log("上传接口 URL:", this.upload.url); // 调试日志this.$refs.upload.submit();},// 将解析的PDF数据填充到表单中fillFormWithPDFData(data) {this.myResume.title = data.title || '';this.myResume.phone = data.phone || '';this.myResume.summary = data.summary || '';this.myResume.experience = data.experience || '';this.myResume.education = data.education || '';this.myResume.skills = data.skills || '';this.myResume.certifications = data.certifications || '';this.myResume.content = data.content || '';this.myResume.file_name = data.file_name || '';this.myResume.file_path = data.file_path || '';},// 提交表单更新简历async handleSubmit() {try {const username = this.getCurrentUsername(); // 获取当前用户的usernameconsole.log(username);if(!username){this.$message.error('未获取到用户信息');return;}const res = await updateResume(this.myResume);// 调用更新简历的APIconst userId = await getUserIdByUsername(username);console.log(userId);// const res = await axios.post(url, this.myResume);if (res.code === 200) {ElMessage.success('简历更新成功');} else {ElMessage.success('简历更新失败');}} catch (error) {console.error('提交失败：', error);ElMessage.success('简历更新失败');}},// 获取简历数据 (初始加载)async fetchResumeData() {try {const username = await this.getCurrentUsername();const response = await getResumeByUsername(username); // 调用获取简历数据的方法if (response.code === 200) {this.myResume = response.data; // 使用返回的数据更新 myResumethis.uploadedFileName = this.myResume.file_name;// 显示已上传的文件名称if(this.uploadedFileName){this.upload.open = true;}} else {console.error('获取简历数据失败:', response.msg);}} catch (error) {console.error('请求失败:', error);}},// 获取当前用户的usernamegetCurrentUsername(){const name = Cookies.get('username');return name;// return this.$store.state.user.userId;// return localStorage.getItem('userId');}},created() {this.fetchResumeData(); // 页面加载时获取简历数据}};
</script><style scoped>/* 容器布局 */
.container {display: flex;width: 100%;height: 100vh; /* 使容器占满整个视口高度 */background-color: #f9f9f9; /* 浅灰色背景 */
}/* 简历编辑区域 */
.my-myResume {flex: 7; /* 占据 4 份 */padding: 20px;overflow-y: auto; /* 如果内容过多，允许滚动 */
}/* PDF上传区域 */
.pdfModule {flex: 2; /* 占据 1 份 */padding: 20px;/*border-left: 1px solid #ddd; !* 添加左边框分隔 *!*/
}/* 表单样式 */
.myResume-form {max-width: 800px; /* 限制表单最大宽度 */margin: 0 auto; /* 居中显示 */
}.file-name{margin-top: 10px;font-size: 14px;color:#666;
}.el-upload__text {font-size: 14px;color: #666;
}.el-upload__tip {font-size: 12px;color: #999;
}.dialog-footer {text-align: right;
}
</style>
- js内容
// src/myResume/myResume.jsimport request from '@/utils/request'
// 根据username获取userId
export function getUserIdByUsername(username){return request({url:`/student/myResume/getUserId/${username}`,method:'get'})
}
// 更新简历数据
export function updateResume(data) {return request({url: '/student/myResume/updateResume',method: 'put',data: data})
}// 根据username获取简历数据
export function getResumeByUsername(username) {return request({url: `/student/myResume/getByUsername/${username}`,method: 'get',})
}
