vue-element-admin , 后台管理开发记录

用法

1. 下载一个空模板
2. 下载一个完整模板
3. 再去复制需要的功能

参考文档

搓一搓

api请求

    // vue页面
    this.$store.dispatch('user/gettoken').then(() => {
​      alert(1)
​    }).catch(() => {
​      alert(2)
​    })

// store夹下的user.js文件
import { login, logout, getInfo, gettoken} from '@/api/user'
gettoken() {
  return new Promise((resolve, reject) => {
   gettoken().then(response => {
​    const { data } = response
​    commit('SET_TOKEN', data._csrf_token)
​    resolve()
   }).catch(error => {
​    reject(error)
   })
  })
 },

// api文件夹下的user
export function gettoken() {
 return request({
  url: '/login/get_csrf_token',
  method: 'get',
 })
}

4. utils文件夹下的request.js 设置后端返回的状态码

跨域问题

1. 在vue.config.js的devServer下设置

 proxy: {
   '/api': {
​    target: 'http://beihexianhua.report', // 后端地址
​    // target: 'localhost:8080/manage', // 原始地址
​    changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
​    pathRewrite: {
​     '^/api': '/'
​    }
   }
  },

2. .env.development文件下设置

#base api
VUE_APP_BASE_API = '/api'

新建页面 (新建左侧导航)

1. 路由新增如下代码

 {
  path: '/index',
  component: Layout,
  children: [
   {
​    path: 'index',
​    name: 'index',
​    component: () => import('@/views/index/index'),
​    meta: { title: '首页', icon: 'table' }
   }
  ]
 },

2. 在views建对应的文件夹和文件

使用图标

1. 下载svg文件
2. 放在@/icons/svg
3. 平常vue文件使用方法

<svg-icon icon-class="password" /> // icon-class 为 icon 的名字

4. router中使用 (左侧导航图标) icon就是自己设置的名称

  // 设置icon的名字
  children: [{
   path: 'index',
   name: 'index',
   component: () => import('@/views/index/index'),
   meta: { title: '首页', icon: 'zs' }
  }]

关闭eslintrc

1. 将vue.config.js 下的 lintOnSave 设置成 false

设置左侧导航logo

1. settings.js 下 sidebarLogo控制是否需要logo
2. layout\components\Sidebar\Logo.vue设置图片和文字

设置左侧导航子菜单的摆放

1. src\styles\sidebar.scss设置样式

设置导航默认展开(加上路由)

layout\components\Sidebar\index.vue 设置 :default-openeds="['/market']"

设置快捷导航(标签栏导航) 以及 Affix (固定)

这时候使用 Affix (固定) 还在报错;

• 继续引入src\store\modules\permission.js
• src\store\modules\getters.js 添加 permission_routes: state => state.permission.routes,
• src\store\index.js import permission from './modules/permission' 再暴露

面包屑设置

ProjectLibrary\src\components\Breadcrumb\index.vue

标签刷新

1. router.js中添加

  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },

2. 增加ProjectLibrary\src\views\redirect 文件夹

动态路由

1. src\store\modules\user.js存放token时机必须是登录后存放, 因为后续会通过token来判断是否已登录

2. 将动态路由模板放在router.js下的constantRoutes对象中

3. \src\permission.js 路由拦截中判断是否已登录,

   • 请求后端返回的前端路由规则,修改router.js下的constantRoutes对象
   • 把constantRoutes数据放进\src\store\modules\permission.js中过滤,保留当前角色需要的路由
   • 把数据给左侧菜单 router.options.routes = accessedRoutes;
   • 把数据给路由 router.addRoutes(accessedRoutes)
   • next({...to, replace: true}) 确保addRoutes完成后跳转, replace:true控制路由跳转后没有撤回键

字典表封装

1. 在store的modules下的user.js中添加以下

import {get_types} from '@/api/user'
const mutations = {
  GET_TYPES: (state, {type , data}) => {
    state.dictionaries[type] = data || ''
  }
}
const actions = {
  // 字典表
  get_types({commit},type) {
    if(state.dictionaries[type]) { // 判断vuex是否存在该条数据
        return state.dictionaries[type]
    }else {
      return new Promise((resolve, reject) => {
        get_types(type).then(response => {// 没有数据就重新请求数据
          const { data } = response
          let type_s = type
          commit('GET_TYPES', {type_s , data}) // 数据保存在vuex
          resolve(data)
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}

2. 在api中增加

export function get_types(type) { // 字典表
  return request({
    url: '/api/tool/get_types? scenes_id=' + type,
    method: 'post'
  })
}

3. 使用方法 参数一指定vuex函数位置, 参数二字典表的key值, 其他字典表只需替换字段

      get_types() { // 获取类型下拉框数据
​        this.$store.dispatch('user/get_types', 'project_types').then((e) => {
​          this.options2 = e
​        }).catch()
​      },

4. 介绍: 调用vuex里面的函数, 会传递一个后端需要的key值, 再利用这个key值在vuex中存放数据,避免重复调用