vue后台管理

最新推荐文章于 2024-04-08 09:51:10 发布

原味泡芙ღ

最新推荐文章于 2024-04-08 09:51:10 发布

阅读量350

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_58169297/article/details/129289214

版权

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来确定  
''

/**
 * 把列表数据转成树状数据
 * @param {*} list 列表数据
 * @param {*} pid 父id
 * @returns
 */
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
}

/**
 * 把树状数据转成列表数据
 * @param {*} tree 树状数据
 * @returns
 */
export function treeToList(tree) {
  let newList = []
  tree.forEach(item => {
    newList.push(item)
    // 判断item是否有children
    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 就可以根据不同的环境自动获取地址。