人资后台管理项目总结

查看node,npm,git的版本

node -v npm -v git --version

设置淘宝镜像

$ npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址

$ npm config get registry #查看镜像地址

vscode + vetur +eslint

eslint 配置

拉项目

git clone 码云地址 npm i # 安装依赖 npm run dev 启动项目

建立远程git仓库

utils/request.js

1.通过create 创建axios实例

`设置axios请求的基础地址

baseURL=process.env.VUE_APP_BASE_API`

定义超时时间

2.请求拦截器处理token统一注入问题

如果有token,给config 的请求头拼接token

3响应拦截器处理数据异常和数据结构问题

utils/auth.js

本地存储token

vue.config.js

设置本地服务端口 解决跨域问题

.env.develoment

设置端口号

settings.js

设置网站名称

登录界面 views/login

vuex

store/modules/user.js

管理token

获取用户资料

登出时,

1.删除token,

本地的和vuex的

2.删除用户信息

vuex的

3.删除路由

调用重置路由方法

清空vuex中的路由

context.commit('permission/setRoutes', [], { root: true })

store/modules/permission.js

路由模块的根节点**name**属性命名和权限标识一致

permission.js

路由前置守卫

定义白名单,所有不受权限控制的页面,例如登录,404

路由前置守卫

开启进度条

1.有token,

是登录页,直接强制跳到主页,

若不是登录页,判断是否有用户id,

若无,获取用户资料后,

调用vuex的过滤方法

筛选得到动态路由

router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // 添加到路由表

next(to.path) // 相当于跳到对应的地址

放行

2. 无token,

若在白名单里,放行,否则,强制跳到登录页.

关闭进度条

后置守卫

关闭进度条

自定义指令 - 解决异常图片情况

src/directives/index.js

export const imagerror = {
  inserted(dom, options) {
    dom.onerror = function() {
      dom.src = options.value
    }
  }
}

main.js

import * as directives from '@/directives'
 Object.keys(directives).forEach(key => {
  // 注册自定义指令
  Vue.directive(key, directives[key])
})

router 路由

侧边栏动态显示,菜单名称,菜单图标