vue2后台管理
- 基于vue-element-admin搭建项目环境
人资项目不是使用vue-cli 从0-1搭建的项目,基于vue-element-admin进行的二次搭建。vue-element-admin是基于vue和element-ui搭建的一套前端中后台管理系统。
- 使用 Element-ui 里的 form 组件实现表单校验
1. 使用el-form组件 <el-form :model="收集表单的数据" :rules="提供校验的规则">
2. 使用el-form-item组件 <el-form-item prop="指定该字段的校验规则">
3. 使用表单元素组件 el-input <el-input v-model="form.xxx">
扩展:表单组件还提供了一些方法 validate resetFields 配合ref实现
- 利用 axios 拦截器,统一设置基路径和请求头 token 及优化代码;
1. 通过axios.create()创建axios实例,并且提供baseURL和timeout
2. 通过axios的请求拦截器统一给请求头携带token
3. 通过axios的响应拦截器统一处理处理,判断响应状态是否是401,如果是401,拦截到登录页面。
- 使用 vue-router 进行页面跳转,展示对应的视图内容,并使用路由的前置守卫进行登录拦截的控制;(使用 vue-router 的前置守卫,设置白名单,解决了主页 token 的访问权限处理问题)
1. 通过router.beforeEach()配置路由的前置守卫。
2. 核心思路:
2.1 根据vuex中的token判断用户是否登录
2.2 如果有token,说明登录了,直接通过next放行
2.3 如果没有token,判断to的路径是否在白名单中
2.4 如果在白名单中,可以直接放行
2.5 如果不在白名单中且没有token,跳转到登录页
- 利用 vuex 来管理共享的用户信息数据,并利用 js-cookie 将仓库数据持久化到本地存储中;
1. 登录成功之后,有token信息,,,获取用户的信息(头像,权限)
2. vuex中的信息刷新会丢失
3. 把这些信息同步存储到cookie中
======> 为什么存cookie中????? 为什么存localStorage中????
cookie中存储,默认是浏览器关闭就失效,,cookie能够设置有效的时间。不大于4k
localStorage永久存储的,需要手动的进行清除和获取操作。空间5m
后台管理系统,需求就是浏览器关闭,下次需要重新登录。所以存储在cookie中
电商项目,不希望浏览器关闭下次就需要重新的登录
- 使用 NProgress 插件实现页面跳转时出现在浏览器顶部的进度条。
1. 安装nprogress插件
2. 路由的前置导航守卫中,开启进度条 NProgress.start()方法
3. 路由的后置导航守卫中,关闭进度条 NProgress.done()方法
当调用了next('/login')方法,不会走后置导航守卫,也需要调用done()方法
- 使用el-table实现表格的渲染,并使用作用域插槽对复杂数据进行回显
1. 使用<el-table :data="渲染的数据">组件进行渲染
2. 通过<el-table-column label="表头" prop="指定需要渲染的数据">指定需要渲染的列
3. 如果需要自定义某一列显示的内容,需要使用作用域插槽。
<el-table-column label="">
<template v-slot="{row}">
{{row.xxx}}
</template>
</el-table-column>
- 使用el-pagination实现分页效果,并使用size-change和current-change事件来处理当前的表格总条数和页码变化
<el-pagination
:current-page='当前页数'
total="总条数"
page-size="每页的条数"
layout="prev,pager,next"
size-change="每页条数发生变化"
current-change="当前页发生变化"
>
- 注册全局过滤器,处理文本数据和时间的格式化
1. 定义全局过滤器 Vue.filter() 创建一个文件夹 filters
2. 使用过滤器 {{time | 过滤器}}
- 注册全局的处理图片加载失败的自定义指令;
1. 定义全局指令: Vue.directive('imgerror')
给img注册error事件,在error事件中修改图片的src属性
2. 使用指令:v-imgerror
- 使用xlsx插件,完成excel的导入导出
1. 导出 把发请求获取到的数据生成到excel中
1.1 发送请求获取到需要导出的数据,比如员工数据
1.2 调用一个通用的方法 export2excel方法
1.3 提供生成的表头以及表格的数据
1.4 需要把后台返回的数据转成表格的数据格式 正式 非正式
2. 导入
1.1 通过通用的excelUpload导入组件,读取到excel数据
1.2 把读取到的excel数据转成接口需要的格式 日期
1.3 发送请求-添加这些员工信息
- 使用qrcode插件,完成二维码的展示
1. 安装qrcode插件
2. 提供一个canvas标签
3. 调用qrCode.toCanvas(DOM, 需要生成的内容)
- 使用vue-print-nb插件完成页面的表格的打印
1. 安装插件
2. 使用插件 Vue.use(PrintNB)
3. 使用指令 v-print指令
- 使用vue-i18n插件,完成页面的中英文配置和切换
1. 安装vue-i18n插件
2. 新建一个文件夹lang 提供国际化文件,创建了i18n实例
3. 在main.js中使用功能i18n new Vue({router: router, i18n}) 在任意组件中可以使用 $t
4. 在需要国际化的地方不写死,调用$t方法即可。
- 使用echarts对每日信息的汇总,图表展示能效比(封装 echarts 中的雷达图表显示在主页模块的绩效指数的位置;)
echarts一些常用配置
mounted钩子中
- 利用递归算法封装一个专门将列表型的数据,转换成树形结构的方法,并结合 Tree 树形控件行组织架构 的模块渲染;
1. 递归算法处理树形结构数据
把一个列表的数据转成树形结构的数据 根据部门的pid来确定
''
export function listToTree(list, pid = '') {
const newList = []
list.forEach(item => {
if (item.pid === pid) {
const children = listToTree(list, item.id)
if (children.length > 0) {
item.children = children
}
newList.push(item)
}
})
return newList
}
export function treeToList(tree) {
let newList = []
tree.forEach(item => {
newList.push(item)
if (item.children) {
const result = treeToList(item.children)
newList = [...newList, ...result]
delete item.children
}
})
return newList
}
2. 使用element-ui的Tree组件
- 基于 RBAC 权限设计思想,控制登录用户的菜单权限和按钮权限
role-base access control : 基于角色的权限控制
1. 给用户分配角色,给角色分配权限
2. 在前置导航守卫中,判断用户是否登录,如果有token,发送请求获取到了用户的权限信息,并且存储在vuex
3. 用 addRoutes 动态添加路由从而控制页面访问权,根据vuex的数据动态渲染菜单
addRoutes时细节,,,,404 和 白屏
4. 利用根据 vuex 的个人信息的权限点信息进行 v-if 处理按钮操作权,封装成一个通用指令;
- 使用路由懒加载优化打包问题以及后期维护与更新;
导入组件: import Home from './Home'
路由懒加载: const Home = () => import('./Home')
优势:只有访问到该路由,才会加载对应的组件,,,作用:提升首屏加载速度。
- 开发环境用 webpack 配置反向代理。【生产环境在 node 服务器配置代理 解决跨域问题】
1. 开发环境配置: devServer: {proxy: { target: '服务器地址', pathRewrite: '路径重写' }}
2. 使用node实现了反向代理 koa 中间件
- 可以采用CDN的方式,在页面模板中预先引入,将项目依赖包挂载到cdn,达到优化前端包总体的体积的效果
1. 使用webpack的配置 extenals 可以排除第三方的依赖包
2. 在index.html中引入这些第三方的cdn地址。
- 使用环境变量配置前端的不同环境下的基地址
.env.production
VUE_APP_BASE_API = 'xxxx222'
.env.development
VUE_APP_BASE_API = 'xxxx111'
将来通过 proccess.env.VUE_APP_BASE_API 就可以根据不同的环境自动获取地址。