319 lines
8.8 KiB
Markdown
319 lines
8.8 KiB
Markdown
# 招聘门户系统开发总结
|
|
|
|
**项目名称**: 校园管理系统 - 招聘门户模块
|
|
**开发时间**: 2025-07-25
|
|
**开发人员**: weizzzz
|
|
**系统状态**: ✅ 前端完成，后端API待实现
|
|
|
|
## 📋 项目概述
|
|
|
|
### 1. 系统目标
|
|
基于南京大学招聘网站的设计理念，为校园管理系统开发一套完整的在线招聘门户，实现：
|
|
- **招聘信息展示** - 美观的岗位信息展示页面
|
|
- **在线应聘系统** - 完整的应聘表单和简历上传
|
|
- **数据库集成** - 与现有招聘管理系统数据同步
|
|
- **用户体验优化** - 现代化的UI设计和交互体验
|
|
|
|
### 2. 技术架构
|
|
- **前端框架**: Vue 3.x + TypeScript
|
|
- **UI组件库**: Element Plus
|
|
- **样式处理**: SCSS + 响应式设计
|
|
- **路由管理**: Vue Router
|
|
- **状态管理**: Vue 3 Composition API
|
|
- **API通信**: Axios + 统一请求封装
|
|
|
|
## 🎯 完成功能
|
|
|
|
### 1. 招聘门户页面 (`/recruitment-portal`)
|
|
**文件位置**: `web/src/views/rs/recruitment-portal.vue`
|
|
|
|
#### 核心功能
|
|
- ✅ **岗位列表展示** - 从数据库实时获取岗位信息
|
|
- ✅ **多视图模式** - 支持列表视图和卡片视图切换
|
|
- ✅ **智能搜索** - 按岗位名称、部门筛选
|
|
- ✅ **岗位详情** - 弹窗展示详细信息
|
|
- ✅ **状态管理** - 自动识别岗位启用/停用状态
|
|
- ✅ **浏览统计** - 点击查看自动增加浏览次数
|
|
|
|
#### 页面特色
|
|
- **渐变背景** - 现代化的蓝紫色渐变设计
|
|
- **卡片布局** - 清晰的内容分区和层次
|
|
- **响应式设计** - 完美适配桌面端和移动端
|
|
- **交互动画** - 悬停效果和状态反馈
|
|
|
|
#### 数据集成
|
|
```typescript
|
|
// 真实数据获取
|
|
const getJobList = async () => {
|
|
const response = await listJob(queryParams);
|
|
jobList.value = response.rows || [];
|
|
total.value = response.total || 0;
|
|
};
|
|
|
|
// 动态部门选项
|
|
const updateDepartmentOptions = () => {
|
|
const departments = [...new Set(jobList.value.map(job => job.department))];
|
|
departmentOptions.value = departments.map(dept => ({
|
|
label: dept, value: dept
|
|
}));
|
|
};
|
|
```
|
|
|
|
### 2. 在线应聘页面 (`/recruitment-apply`)
|
|
**文件位置**: `web/src/views/rs/recruitment-apply.vue`
|
|
|
|
#### 核心功能
|
|
- ✅ **岗位信息展示** - 显示应聘岗位的详细信息
|
|
- ✅ **完整应聘表单** - 收集个人信息和简历
|
|
- ✅ **简历上传** - 支持PDF、Word格式，拖拽上传
|
|
- ✅ **表单验证** - 完整的前端验证规则
|
|
- ✅ **提交流程** - 应聘申请提交和成功反馈
|
|
|
|
#### 表单字段
|
|
```typescript
|
|
interface ApplicationForm {
|
|
jobId: string | number;
|
|
applicantName: string; // 姓名
|
|
gender: string; // 性别
|
|
contactPhone: string; // 联系电话
|
|
contactEmail: string; // 邮箱地址
|
|
age: number; // 年龄
|
|
education: string; // 教育背景
|
|
experience: string; // 工作经验
|
|
selfDescription: string; // 自我介绍
|
|
resumePath: string; // 简历路径
|
|
remark?: string; // 其他说明
|
|
}
|
|
```
|
|
|
|
#### 文件上传功能
|
|
- **支持格式**: PDF、Word文档
|
|
- **文件大小**: 最大10MB
|
|
- **上传方式**: 拖拽上传或点击选择
|
|
- **安全验证**: 文件类型和大小校验
|
|
|
|
### 3. API接口设计
|
|
**文件位置**: `web/src/api/rs/application.ts`
|
|
|
|
#### 新增接口
|
|
```typescript
|
|
// 提交应聘申请
|
|
export function submitJobApplication(data: ApplicationForm) {
|
|
return request({
|
|
url: '/rs/application/submit',
|
|
method: 'post',
|
|
data: data
|
|
});
|
|
}
|
|
|
|
// 增加岗位浏览次数
|
|
export function incrementJobViewCount(jobId: string | number) {
|
|
return request({
|
|
url: `/rs/job/view/${jobId}`,
|
|
method: 'post'
|
|
});
|
|
}
|
|
```
|
|
|
|
### 4. 路由配置
|
|
**文件位置**: `web/src/router/index.ts`
|
|
|
|
#### 新增路由
|
|
```typescript
|
|
// 招聘门户页面（独立路由，不需要权限）
|
|
{
|
|
path: '/recruitment-portal',
|
|
component: () => import('@/views/rs/recruitment-portal.vue'),
|
|
name: 'RecruitmentPortal',
|
|
meta: { title: '招聘公告', icon: 'job' }
|
|
},
|
|
{
|
|
path: '/recruitment-apply',
|
|
component: () => import('@/views/rs/recruitment-apply.vue'),
|
|
name: 'RecruitmentApply',
|
|
meta: { title: '在线应聘', icon: 'edit' }
|
|
}
|
|
```
|
|
|
|
## 🔄 数据流程
|
|
|
|
### 1. 岗位发布到展示流程
|
|
```mermaid
|
|
graph LR
|
|
A[管理员在招聘管理中新增岗位] --> B[设置岗位状态为启用]
|
|
B --> C[岗位出现在招聘门户]
|
|
C --> D[应聘者可以查看和应聘]
|
|
```
|
|
|
|
### 2. 应聘流程
|
|
```mermaid
|
|
graph TD
|
|
A[访问招聘门户] --> B[浏览岗位列表]
|
|
B --> C[查看岗位详情]
|
|
C --> D[点击立即应聘]
|
|
D --> E[填写应聘表单]
|
|
E --> F[上传简历文件]
|
|
F --> G[提交应聘申请]
|
|
G --> H[显示成功提示]
|
|
```
|
|
|
|
### 3. 数据同步机制
|
|
- **实时获取**: 每次访问门户页面都从数据库获取最新岗位
|
|
- **状态过滤**: 只显示`isActive=0`的启用岗位
|
|
- **动态更新**: 部门选项和统计数据实时更新
|
|
|
|
## 🎨 UI/UX设计
|
|
|
|
### 1. 视觉设计
|
|
- **配色方案**: 蓝紫渐变 + 白色卡片
|
|
- **字体层次**: 清晰的标题和内容层次
|
|
- **图标系统**: Element Plus 图标库
|
|
- **状态标签**: 色彩编码的岗位状态
|
|
|
|
### 2. 交互设计
|
|
- **悬停效果**: 卡片悬停动画
|
|
- **点击反馈**: 按钮状态变化
|
|
- **加载状态**: 数据加载提示
|
|
- **错误处理**: 友好的错误提示
|
|
|
|
### 3. 响应式设计
|
|
```scss
|
|
// 桌面端
|
|
@media (min-width: 769px) {
|
|
.portal-container {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
}
|
|
|
|
// 移动端
|
|
@media (max-width: 768px) {
|
|
.portal-container {
|
|
flex-direction: column;
|
|
padding: 20px 15px;
|
|
}
|
|
}
|
|
```
|
|
|
|
## 📊 技术特点
|
|
|
|
### 1. 现代化技术栈
|
|
- **Vue 3 Composition API** - 更好的逻辑复用和代码组织
|
|
- **TypeScript** - 类型安全和开发体验
|
|
- **SCSS** - 强大的样式预处理
|
|
- **Element Plus** - 企业级UI组件
|
|
|
|
### 2. 代码质量
|
|
- **组件化开发** - 可复用的UI组件
|
|
- **类型定义** - 完整的TypeScript类型
|
|
- **错误处理** - 完善的异常捕获
|
|
- **代码规范** - 统一的编码风格
|
|
|
|
### 3. 性能优化
|
|
- **懒加载** - 路由和组件按需加载
|
|
- **缓存策略** - 合理的数据缓存
|
|
- **分页设计** - 大数据量的分页处理
|
|
|
|
## 🚧 待完成工作
|
|
|
|
### 1. 后端API实现
|
|
#### 需要实现的接口
|
|
```http
|
|
POST /rs/job/view/{jobId} # 增加岗位浏览次数
|
|
POST /rs/application/submit # 提交应聘申请
|
|
POST /common/upload # 文件上传接口
|
|
```
|
|
|
|
#### 数据库表设计
|
|
```sql
|
|
-- 应聘申请表
|
|
CREATE TABLE rs_application (
|
|
application_id BIGINT PRIMARY KEY,
|
|
job_id BIGINT NOT NULL,
|
|
applicant_name VARCHAR(50) NOT NULL,
|
|
gender VARCHAR(10),
|
|
contact_phone VARCHAR(20),
|
|
contact_email VARCHAR(100),
|
|
age INT,
|
|
education VARCHAR(50),
|
|
experience TEXT,
|
|
self_description TEXT,
|
|
resume_path VARCHAR(500),
|
|
status VARCHAR(20) DEFAULT 'pending',
|
|
apply_time DATETIME DEFAULT CURRENT_TIMESTAMP,
|
|
remark TEXT,
|
|
create_by BIGINT,
|
|
create_time DATETIME,
|
|
update_by BIGINT,
|
|
update_time DATETIME,
|
|
deleted INT DEFAULT 0
|
|
);
|
|
```
|
|
|
|
### 2. 功能完善
|
|
- **应聘状态管理** - 申请状态跟踪
|
|
- **邮件通知** - 应聘成功通知
|
|
- **简历预览** - 在线简历查看
|
|
- **数据统计** - 应聘数据分析
|
|
|
|
## 🌟 项目亮点
|
|
|
|
### 1. 设计参考专业招聘网站
|
|
基于南京大学招聘网站的设计理念，确保专业性和用户体验
|
|
|
|
### 2. 完整的应聘流程
|
|
从岗位浏览到简历提交的完整闭环
|
|
|
|
### 3. 现代化的技术实现
|
|
使用最新的前端技术栈，确保代码质量和维护性
|
|
|
|
### 4. 响应式设计
|
|
完美适配各种设备，提供一致的用户体验
|
|
|
|
## 📱 访问地址
|
|
|
|
### 1. 开发环境
|
|
- **招聘门户**: `http://localhost:81/recruitment-portal`
|
|
- **在线应聘**: `http://localhost:81/recruitment-apply?jobId=[岗位ID]`
|
|
|
|
### 2. 功能入口
|
|
- 可以作为独立网站访问
|
|
- 可以集成到现有系统菜单
|
|
- 支持外部链接分享
|
|
|
|
## 📈 后续规划
|
|
|
|
### 1. 短期目标（1-2周）
|
|
- 完成后端API实现
|
|
- 完善错误处理机制
|
|
- 添加应聘状态跟踪
|
|
|
|
### 2. 中期目标（1个月）
|
|
- 优化搜索功能
|
|
- 添加数据统计报表
|
|
- 完善权限管理
|
|
|
|
### 3. 长期目标（3个月）
|
|
- 移动端专用版本
|
|
- 智能简历匹配
|
|
- 面试管理功能
|
|
|
|
---
|
|
|
|
## 📄 相关文档
|
|
|
|
### 1. 开发记录
|
|
- `docs/变更管理/code-adjust-record-2025-07-25-weizzzz-recruitment-portal-creation.md`
|
|
- `docs/变更管理/code-adjust-record-2025-07-25-weizzzz-recruitment-portal-database-integration.md`
|
|
|
|
### 2. 技术文档
|
|
- `web/src/views/rs/recruitment-portal.vue` - 招聘门户页面
|
|
- `web/src/views/rs/recruitment-apply.vue` - 在线应聘页面
|
|
- `web/src/api/rs/application.ts` - 应聘相关API
|
|
|
|
### 3. 配置文件
|
|
- `web/src/router/index.ts` - 路由配置
|
|
|
|
---
|
|
|
|
**开发总结**: 招聘门户系统前端开发已完成，具备完整的岗位展示和在线应聘功能，设计专业、用户体验良好。后续需要完善后端API支持，即可投入使用。 |