# 人事管理（前端）

**Repository Path**: pinetree-cpu/hr-web

## Basic Information

- **Project Name**: 人事管理（前端）
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2021-11-30
- **Last Updated**: 2022-08-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vuehr
## 一、使用：
### 1、安装依赖
```
npm install
```
 首先启动后后台服务，对应的后台代码： [hr-back](https://gitee.com/pinetree-cpu/hr-back)
### 2、在 localhost:8080 启动项目（端口在vue.config文件中配置）
```
npm run serve
```

### 3、打包
```
npm run build
```
### 

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### 本项目技术栈

- Vue 3
- Element-PLUS
- axios
- vue-router 4
- Vuex 4
- WebSocket
- vue-cli 4

本项目基于vue3.0构建，在某一些地方与vue2.x存在差异：
### 前端差异记录：
#### 一、把axios请求方法挂载到Vue上面：
`main.js`中
用
```js
app.config.globalProperties.postRequest=postRequest
app.config.globalProperties.postKeyValueRequest=postKeyValueRequest
app.config.globalProperties.putRequest=putRequest
app.config.globalProperties.deleteRequest=deleteRequest
app.config.globalProperties.getRequest=getRequest
```
代替
```js
Vue.prototype.getRequest = getRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.putRequest = putRequest;
```
原方法：[7.将请求方法挂到Vue上](https://github.com/lenve/vhr/wiki/7.%E5%B0%86%E8%AF%B7%E6%B1%82%E6%96%B9%E6%B3%95%E6%8C%82%E5%88%B0Vue%E4%B8%8A)
博主的教程是基于vue 2.x进行开发，本项目基于vue 3来进行开发，在vue 3中，用config.globalProperties来添加全局实例方法，参考 [插件](https://v3.cn.vuejs.org/guide/plugins.html#%E6%8F%92%E4%BB%B6) 第4项。
#### 二、vue 3不再支持过滤器
在聊天页面`message.vue`中，原项目使用vue2 [过滤器](https://cn.vuejs.org/v2/guide/filters.html) 来调整时间的显示格式
```vue
<span>{{entry.date | time}}</span>

filters: {
time(date) {
if (date) {
date = new Date(date);
}
return `${date.getHours()}:${date.getMinutes()}`;
}
}

```
在vue3中，过滤器被废除，参考vue3 [过滤器](https://v3.cn.vuejs.org/guide/migration/filters.html#%E6%A6%82%E8%A7%88) 本项目定义了`time`方法来实现原先过滤器的功能。
```vue
<span>{{time(entry.date)}}</span>

methods:{
time(date) {
if (date) {
date = new Date(date);
}
return `${date.getHours()}:${date.getMinutes()}`;
}
}
```


更多本项目在开发中遇到的问题和技术点，请访问博客：

[微型人事管理项目前端总结](https://blog.csdn.net/qq_41725131/article/details/122360851?spm=1001.2014.3001.5501)

[微型人事管理项目后端总结](https://blog.csdn.net/qq_41725131/article/details/121989898)