# zhaoping

**Repository Path**: leerolee/zhaoping

## Basic Information

- **Project Name**: zhaoping
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-28
- **Last Updated**: 2025-09-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简易招聘系统

一个基于 Vue 3 和 Vite 构建的简易招聘系统，支持招聘方发布职位和应聘方申请职位的功能。

## 系统演示

![首页](./images/系统首页.png)

![系统注册](./images/系统注册.png)

![招聘方](./images/招聘方.png)

![发布流程](./images/职位申请查询.gif)

## 项目概述

本项目是一个简易的招聘系统，分为两种用户角色：

- **招聘方（Recruiter）**：可以发布和管理职位信息
- **应聘方（Applicant）**：可以浏览职位并提交申请

主要流程：招聘方注册登录 -> 发布职位 -> 应聘方注册登录 -> 浏览职位 -> 申请职位

## 功能特性

### 用户认证

- 用户注册（选择角色：招聘方或应聘方）
- 用户登录/退出登录
- 基于角色的权限控制

### 招聘方功能

- 发布新职位
- 编辑已发布的职位
- 删除职位
- 查看自己发布的所有职位

### 应聘方功能

- 浏览所有职位
- 搜索和筛选职位
- 查看职位详情
- 申请职位
- 查看自己的申请记录和状态

### 数据存储

- 使用 localStorage 进行数据持久化存储
- 用户信息、职位信息和申请信息的存储和管理

## 技术栈

- **前端框架**: Vue 3 (Composition API)
- **构建工具**: Vite
- **路由管理**: Vue Router
- **状态管理**: 无（使用 localStorage 和组件状态）
- **UI 组件**: 原生 CSS，无第三方 UI 库
- **开发工具**: Vite Plugin Vue DevTools

## 项目结构

```
.
├── src/
│   ├── assets/           # 静态资源文件
│   │   └── styles/       # 全局样式文件
│   ├── components/       # 公共组件
│   │   ├── Layout.vue    # 主布局组件
│   │   ├── Navbar.vue    # 导航栏组件
│   │   └── Footer.vue    # 页脚组件
│   ├── router/           # 路由配置
│   │   └── index.js      # 路由定义和守卫
│   ├── services/         # 业务逻辑和服务
│   │   ├── authService.js    # 用户认证服务
│   │   ├── jobService.js     # 职位相关服务
│   │   ├── applicationService.js # 申请相关服务
│   │   └── storageService.js # 数据存储服务
│   ├── utils/            # 工具函数
│   │   └── helpers.js    # 辅助函数
│   ├── views/            # 页面组件
│   │   ├── Home.vue          # 首页
│   │   ├── Login.vue         # 登录页面
│   │   ├── Register.vue      # 注册页面
│   │   ├── JobPost.vue       # 职位发布/编辑页面
│   │   ├── MyJobs.vue        # 我的职位页面
│   │   ├── JobList.vue       # 职位列表页面
│   │   ├── JobDetail.vue     # 职位详情页面
│   │   ├── JobApplication.vue # 职位申请页面
│   │   └── MyApplications.vue # 我的申请页面
│   ├── App.vue           # 根组件
│   └── main.js           # 应用入口文件
├── public/               # 静态资源目录
├── index.html            # HTML模板
├── package.json          # 项目配置和依赖
├── vite.config.js        # Vite配置文件
└── README.md             # 项目说明文档
```

## 安装和运行

### 环境要求

- Node.js (推荐版本: ^20.19.0 或 >=22.12.0)
- pnpm (推荐) 或 npm

### 安装依赖

```bash
pnpm install
```

### 开发环境运行

```bash
pnpm dev
```

### 构建生产版本

```bash
pnpm build
```

### 预览生产构建

```bash
pnpm preview
```

## 使用说明

1. **注册账户**：

   - 访问注册页面，选择角色（招聘方或应聘方）
   - 填写用户名和密码完成注册

2. **招聘方操作流程**：

   - 登录后进入"我的职位"页面
   - 点击"发布职位"按钮发布新职位
   - 在"我的职位"页面可以查看、编辑或删除已发布的职位

3. **应聘方操作流程**：
   - 登录后进入"职位列表"页面
   - 可以通过搜索框或筛选器查找职位
   - 点击职位卡片查看详细信息
   - 在职位详情页面点击"申请职位"按钮提交申请
   - 在"我的申请"页面查看申请记录和状态

## 数据模型

### 用户模型

```javascript
{
  id: String,           // 用户唯一标识
  username: String,     // 用户名
  password: String,     // 密码（简易系统中为明文存储）
  role: String          // 角色：'recruiter' 或 'applicant'
}
```

### 职位模型

```javascript
{
  id: String,           // 职位唯一标识
  title: String,        // 职位标题
  description: String,  // 职位描述
  company: String,      // 公司名称
  salary: String,       // 薪资范围
  location: String,     // 工作地点
  recruiterId: String,  // 发布者ID
  createdAt: Date       // 发布时间
}
```

### 申请模型

```javascript
{
  id: String,           // 申请唯一标识
  jobId: String,        // 职位ID
  applicantId: String,  // 申请人ID
  resume: String,       // 简历信息
  status: String,       // 申请状态：'pending'/'accepted'/'rejected'
  createdAt: Date,      // 申请时间
  updatedAt: Date       // 状态更新时间
}
```

## 路由说明

| 路径               | 页面           | 说明                   |
| ------------------ | -------------- | ---------------------- |
| `/`                | Home           | 首页                   |
| `/login`           | Login          | 登录页面               |
| `/register`        | Register       | 注册页面               |
| `/post-job`        | JobPost        | 发布新职位（仅招聘方） |
| `/post-job/:id`    | JobPost        | 编辑职位（仅招聘方）   |
| `/my-jobs`         | MyJobs         | 我的职位（仅招聘方）   |
| `/jobs`            | JobList        | 职位列表（仅应聘方）   |
| `/jobs/:id`        | JobDetail      | 职位详情（需登录）     |
| `/jobs/:id/apply`  | JobApplication | 申请职位（仅应聘方）   |
| `/my-applications` | MyApplications | 我的申请（仅应聘方）   |

## 开发说明

### 本地存储键名

- `users`: 存储所有用户信息
- `jobs`: 存储所有职位信息
- `applications`: 存储所有申请信息
- `currentUser`: 存储当前登录用户信息

### 代码规范

- 使用 Vue 3 Composition API
- 组件按功能划分到对应目录
- 业务逻辑与视图分离，服务层处理数据操作
- 使用 localStorage 进行数据持久化

## 注意事项

1. 本系统为简易演示系统，密码以明文形式存储，实际生产环境应使用加密存储
2. 使用 localStorage 作为数据存储方案，数据保存在浏览器中，清除浏览器数据会丢失所有信息
3. 系统没有实现真正的后端服务，所有操作都在前端完成
4. 没有实现文件上传功能，简历信息以文本形式提交

## 许可证

本项目仅供学习和参考使用。