# hr

**Repository Path**: ZZH6/hr

## Basic Information

- **Project Name**: hr
- **Description**: 人力资源项目
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-20
- **Last Updated**: 2021-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 人资项目

## 项目构建

### 项目简介

该项目基于vue后台集成方案vue-admin-template，项目地址：https://gitee.com/panjiachen/vue-admin-template

项目技术栈：基于vue-cli webpack模板，并引入以下依赖

​	1、vue

​	2、vuex

​	3、elementUI

​	4、axios

​	5、vue-router

项目功能：

​	1、登录

​	2、权限验证

​	3、主页布局

### 项目搭建

1、git clone https://gitee.com/panjiachen/vue-admin-template.git hr

​	注：hr为重新命名的项目文件名

2、npm i      安装项目依赖

3、新建仓库进行git管理

​	注：需要将clone下来的原git文件夹删除，否则会存在上传不了和原先提交存在的情况

### ESlint

是用来统一**JavaScript**代码风格的工具，不包含css、html

注：该项目使用 [JavaScript Standard Style](https://standardjs.com/readme-zhcn.html) 代码风格

Eslintde 的校验：

​       1、VS Code插件安装

​			ESLint插件

​       2、Vs Code配置     在vscode配置文件 settings.json 中写入json配置

```json
	"eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
```

 	3、编辑器其他相关设置

​          3.1	关闭VS code 设置中的Format on save ，否则会影响eslint的自动保存

​	      3.2    关闭其他可能冲突的格式化插件，如：CSS Formatter

​	      3.3    注意VS code右下角eslint是否启用，未启用的话需要手动点击开启

## 项目运行机制

### 项目目录

        ├── build              // 构建相关           打包
        ├── mock               // 项目mock          模拟数据
        ├── public             // 静态资源
        │   │── favicon.ico    // favicon图标
        │   └── index.html     // html模板
        ├── src                // 源代码             开发目录
        │   ├── api            // 所有请求
        │   ├── assets         // 主题 字体等静态资源
        │   ├── components     // 全局公用组件
        │   ├── icons          // 项目所有icons图标
        │   ├── layout         // 全局 layout        页面布局：导航、侧边栏、面包屑、主体内容
        │   ├── router         // 路由
        │   ├── store          // 全局 store管理      要存储登录token,作用类似头条项目的Localstorage
        │   ├── styles         // 全局样式
        │   ├── utils          // 全局公用方法
        │   ├── views          // views 所有页面
        │   ├── App.vue        // 入口页面           最外层容器
        │   ├── main.js        // 入口文件 加载组件 初始化创建实例等
        │   ├── permission.js  // 权限管理           导航守卫
        │   └── setting.js     // 公共设置,如页面标题等
        ├── tests              // 测试
        ├── .env.xxx           // 环境变量配置
        ├── .eslintrc.js       // eslint 配置项
        ├── vue.config.js      // vue-cli 配置
        ├── postcss.config.js  // postcss 配置
        └── package.json       // package.json
### main.js

main.js是项目的入口文件，项目所有页面都会加载main.js

[![https://gitee.com/ZZH6/picture/raw/master/人力资源/mainJS.png](https://gitee.com/ZZH6/picture/raw/master/人力资源/mainJS.png)](https://gitee.com/ZZH6/picture/raw/master/人力资源/mainJS.png)

### App.vue

页面的入口文件,所有页面都是在App.vue里进行切换 	

[![https://gitee.com/ZZH6/picture/raw/master/人力资源/AppVue.png](https://gitee.com/ZZH6/picture/raw/master/人力资源/AppVue.png)](https://gitee.com/ZZH6/picture/raw/master/人力资源/AppVue.png)

### Vuex结构

​	该项目采用模块形式进行共享状态管理

[![https://gitee.com/ZZH6/picture/raw/master/人力资源/0mdKT1zDGLT6.png](https://gitee.com/ZZH6/picture/raw/master/人力资源/0mdKT1zDGLT6.png)](https://gitee.com/ZZH6/picture/raw/master/人力资源/0mdKT1zDGLT6.png)

### axios请求

1、通过create创建了一个新的axios实例

2、请求拦截器

​	主要处理 token的**`统一注入问题`**

3、响应拦截器

​	响应拦截器主要处理返回的**`数据异常`** 和**`数据结构`**问题

[![https://gitee.com/ZZH6/picture/raw/master/人力资源/IESZU@BCOzXq.png](https://gitee.com/ZZH6/picture/raw/master/人力资源/IESZU@BCOzXq.png)](https://gitee.com/ZZH6/picture/raw/master/人力资源/IESZU@BCOzXq.png)

## 登录

### 表单验证

element-ui表单验证

[![https://gitee.com/ZZH6/picture/raw/master/人力资源/q6vKcIBVE4mj.png](https://gitee.com/ZZH6/picture/raw/master/人力资源/q6vKcIBVE4mj.png)](https://gitee.com/ZZH6/picture/raw/master/人力资源/q6vKcIBVE4mj.png)

```js
<el-form ref="loginForm" :model="loginForm" :rules="loginRules">
      <el-form-item prop="mobile">
        <el-input
          ref="mobile"
          v-model="loginForm.mobile"
          placeholder="手机号"
          type="text"
          tabindex="1"
          auto-complete="on"
        />
      </el-form-item>
</el-form>
```

### 跨域

#### 跨域原因

浏览器发现请求页面和数据来源的地址不一致，跨域是浏览器的同源策略限制导致，与后台数据无关

什么是同源策略（same origin policy）

​	所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

​	同源策略会阻止一个域的 javascript 脚本和另外一个域的内容进行交互，即

​	协议：http           域名：127.0.0.1               端口：3000              这三个有一个不一样就会产生跨域

#### 解决跨域

1、**开发环境的跨域**      

即：在**`vue-cli脚手架环境`**下开发启动服务时，我们访问接口所遇到的跨域问题

​	    通过vue-cli配置**`webpack的反向代理`**解决  (设置proxy转发)  

```js
### vue-cli的配置文件：vue.config.vue
devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    // 跨域代理配置
    proxy: {
      '/api': {
        target: 'http://ihrm-java.net',
        changeOrigin: true
      }
    }
  },
```



### 数据持久化

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式，可以利用Cookies，Web Storage等跟服务端进行数据交互。

1、Cookies

​		会过期

​		存储容量小

定义：

```js
### src/utils/auth.js
import Cookies from 'js-cookie'

// Cookies管理
const TokenKey = 'hr_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  return Cookies.set(TokenKey, token)
}

export function removeToken() {
  return Cookies.remove(TokenKey)
}
```

使用：

```js
import { getToken, setToken } from '@/utils/auth'

const state = {
  token: getToken()
}

const mutations = {
  // 设置token
  setToken(state, data) {
    state.token = data
    // 数据持久化，放入Cookies
    setToken(data)
  }
}

const actions = {
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
```

2、Local Storage

​		永久存储

​		存储容量大

### 路由守卫：token权限拦截

判断token的有无从而控制各页面的访问权限