人资项目day01 - 初始化项目

目录结构

├── build                        # 构建相关
├── mock                       # 项目mock 模拟数据
├── public                      # 静态资源
│   │── favicon.ico            # favicon图标
│   └── index.html             # html模板
├── src                              # 源代码
│   ├── api                         # 所有请求
│   ├── assets                    # 主题 字体等静态资源
│   ├── components             # 全局公用组件
│   ├── icons                      # 项目所有 svg icons
│   ├── layout                     # 全局 layout
│   ├── router                     # 路由
│   ├── store                       # 全局 store管理
│   ├── styles                      # 全局样式
│   ├── utils                         # 全局公用方法
│   ├── vendor                     # 公用vendor
│   ├── views                       # views 所有页面
│   ├── App.vue                   # 入口页面
│   ├── main.js                    # 入口文件 加载组件 初始化等
│   └── permission.js          # 权限管理
│   └── settings.js               # 配置文件
├── tests                              # 测试
├── .env.xxx                        # 环境变量配置
├── .eslintrc.js                    # eslint 配置项
├── .babelrc                        # babel-loader 配置
├── .travis.yml                     # 自动化CI配置
├── vue.config.js                 # vue-cli 配置
├── postcss.config.js          # postcss 配置
└── package.json                # package.json

main.js

 App.vue

 Vuex结构

scss

icons

 SCSS处理的了解和使用

sass和scss其实是一样的css预处理语言，SCSS 是 Sass 3 引入新的语法，其后缀名是分别为 .sass和.scss两种。 SASS版本3.0之前的后缀名为.sass，而版本3.0之后的后缀名.scss。 两者是有不同的，继sass之后scss的编写规范基本和css一致，sass时代是有严格的缩进规范并且没有‘{}’和‘；’。 而scss则和css的规范是一致的。

为了方便应用scss，我们可以在vscode中安装一个名为easy sass 的插件，但是我们只在该项目中工作区中应用该插件，因为在项目中，不需要该插件的辅助

 

Axios的拦截器介绍

 

axios拦截器

axios作为网络请求的第三方工具, 可以进行请求和响应的拦截

通过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('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
          confirmButtonText: 'Re-Login',
          cancelButtonText: 'Cancel',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

api模块的单独封装

import request from '@/utils/request'

export function login(data) {
  return request({
    url: '/vue-admin-template/user/login',
    method: 'post',
    data
  })
}

export function getInfo(token) {
  return request({
    url: '/vue-admin-template/user/info',
    method: 'get',
    params: { token }
  })
}

export function logout() {
  return request({
    url: '/vue-admin-template/user/logout',
    method: 'post'
  })
}