人力资源平台项目总结（1）

目录

1、基础环境搭建

1.1 vue-element-admin的了解和介绍

1.2 搭建项目前的一些基本准备 

1.3 项目模板启动和目录介绍

1.4 项目运行机制和代码注释 

1.4.1 App.vue 

1.4.2 Vuex结构 

         1.4.3 scss 

1.4.4 icons 

1.5 建立远程Git仓库并完成初始提交 

1.6 API模块和请求封装模块介绍 

1.7 api模块的单独封装

​2、登录模块

2.1 设置固定的本地访问端口和网站名称 

2.2 登录页面的基础布局 

2.3 登录表单的校验 

2.4 解决开发环境的跨域问题

2.5 封装单独的登录接口 

2.6 封装Vuex的登录Action并处理token 

2.7 request中环境变量和异常的处理 

2.8 登录页面调用登录action,处理异常

3、主页模块

3.1  主页的token拦截处理 

（1）权限拦截的流程图 （重点！）

（2）主页的左侧导航样式

（3）设置头部内容的布局和样式 

（4）获取用户资料接口和token注入 

（5）封装获取用户资料的action并共享用户状态 

（6）权限拦截处调用获取资料action 

（7）自定义指令-解决异常图片情况（重点！）

（8）实现登出功能 

（9）Token失效的主动介入 

（10）Token失效的被动处理 

---

1、基础环境搭建

1.1 vue-element-admin的了解和介绍

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前

端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰

富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。 

1.2 搭建项目前的一些基本准备 

除此之外, eslint需要在vscode中进行一些参数的配置 

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

本项目的技术栈 本项目技术栈基于 ES2015+、vue、vuex、vue-router 、vue-cli 、axios 和 element-ui

1.3 项目模板启动和目录介绍

目录结构 

1.4 项目运行机制和代码注释 

1.4.1 App.vue 

1.4.2 Vuex结构 

其中app.js模块和settings.js模块，功能已经完备，不需要再进行修改。 user.js模块是我们后期需要重点开发的内容，所以这里我们将user.js里面的内容删除，并且导出一个默认配置 

 

1.4.3 scss 

1.4.4 icons 

1.5 建立远程Git仓库并完成初始提交 

1.6 API模块和请求封装模块介绍 

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

// 创建了一个新的axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 超时时间
})

请求拦截器 

 请求拦截器主要处理 token的统一注入问题

// axios的请求拦截器
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

 响应拦截器

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

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data

    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 20000) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
        // to re-login
        MessageBox.confirm(&#