关于前端:quasar搭建后台管理

quasar 官网

quasar-admin

我的项目介绍

应用 quasar 搭建的后盾管理系统

# 角色菜单权限：登录胜利后，依据用户信息，获取菜单
# 按钮权限管制：返回权限，指令管制
# 菜单数据结构
[
  {
    icon: 'feedback',
    label: '店铺治理',
    path: '/storeInfo',
    btns: ['btn-add','btn-delete']   # 按钮权限 与上面模仿信息不统一 思路一样
  }
]

开发代码片段阐明

 看了官网文档 举荐应用 yarn 
so do it
ready ~~

# Node.js >=10 is required.

# 全局装置 yarn
npm install -g yarn

# 全局装置 quasar  请看最底下注意事项
yarn global add @quasar/cli


# 我的项目启动执行文件
quasar.config.js
boot: [
    // 要执行的文件  boot 文件夹中的文件名
  'axios',
  'permission'
]

build: {
    port: 8083,   // 上面 8083 端口
    env: {
            API: ctx.dev
              ? 'http://localhost:8080/backend'                // 后缀 与上面代理统一
              : 'http://www.xxxxx.cn/'
          },
}
devServer: {
    proxy: {
            '/backend': {
              target: 'http://testapi',
              changeOrigin: true,
              pathRewrite: {'^/backend': '/'}
            }
          },
}

// boot 文件夹
axios.js    // 申请设置
import Vue from 'vue'
import axios from 'axios'
import * as authService from '../utils/auth'
import {Loading} from 'quasar'

// Add a request interceptor process.env.API '/backend'
const axiosInstance = axios.create({
  baseURL: process.env.API,
  timeout: 10000,
  withCredentials: true
})

axiosInstance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// 申请拦挡
axiosInstance.interceptors.request.use(
  config => {
    Loading.show({
      // spinner: QSpinnerGears,
      delay: 500, // ms
      message: 'Some message',
      messageColor: 'blue',
      spinnerSize: 250, // 像素
      spinnerColor: 'white',
      customClass: 'bg-primary'
    })
    console.log('info request token:' + authService.getToken())
    if (authService.getToken()) {config.headers.Authorization = 'Bearer' + authService.getToken()
    } else {config.headers.Authorization = ''}
    return config
  },
  error => {return Promise.reject(error)
  }
)

// 响应拦挡
axiosInstance.interceptors.response.use(
  response => {Loading.hide()
    return response.data
  },
  error => {return Promise.reject(error)
  }
)

Vue.prototype.$axios = axiosInstance

export {axiosInstance}

permission.js     // 按钮权限管制
export default ({app, router, store, Vue}) => {
  Vue.directive('permission', {bind: function (el, binding, vnode) {// localStorage.setItem('isAdmin', 0)
      // localStorage.setItem('permission', ['function_edit', 'function_add'])
      // console.log(localStorage.permission, el, binding, vnode)
      const needPermissions = binding.value
      const permissions = JSON.parse(localStorage.getItem('permission'))
      // const permissions = ['function_edit', 'function_add']
      const isAdmin = localStorage.getItem('isAdmin')
      const hasPermission = permissions.some(s => {return needPermissions.indexOf(s) > -1
      })
      console.log(hasPermission, isAdmin)
      if (!hasPermission) {el.style.display = 'none'}
    }
  })
}

// 按钮应用管制
<q-btn v-permission="['function_edit']" small round push glossy dense icon="edit" color="primary" @click="editFunction(props.value)"></q-btn>
<q-btn v-permission="['function_del']" small round push glossy dense icon="delete" color="red" @click="delFunction(props.value)"></q-btn>

LeftMenuBar.vue     # 模仿菜单权限管制 

文件目录阐明

├─.quasar
├─.vscode
├─dist
│  ├─electron
│  │  └─UnPackaged
│  └─spa
│      ├─css
│      ├─fonts
│      ├─icons
│      └─js
├─public
│  └─icons
├─src
│  ├─api
│  │  └─user
│  ├─assets
│  ├─boot
│  │  └─axios       // 申请设置
│  │  └─permission    // 指令管制按钮
│  ├─components
│  │  └─LeftMenuBar       // 左侧菜单
│  │  └─LeftSubMenuBar    // 递归子菜单
│  ├─css
│  ├─data     
│  │  └─menu      // 模仿菜单数据  
│  ├─layouts      // 布局
│  │  └─Admin       // 管理员
│  │  └─Seller    // 商家
│  ├─pages
│  │  ├─admin     // 管理员页面
│  │  │  ├─commissionManagement
│  │  │  ├─goodsManagement
│  │  │  ├─orderManagement
│  │  │  └─storeManagement
│  │  │      └─component
│  │  ├─other
│  │  └─seller    // 商家页面
│  │      ├─commissionManagement
│  │      ├─goodsManagement
│  │      ├─orderManagement
│  │      └─storeManagement
│  │          └─component
│  ├─plugins
│  ├─router
│  │  └─index      // 
│  │  └─routes    // 路由菜单配置
│  ├─store
│  │  └─modules
│  └─utils
└─src-electron
    ├─icons
    └─main-process

运行成果

​1. 假如输出地址 ‘localhost:8083’ 模仿了登录胜利进入商家页面

1. 假如输出地址 ‘localhost:8083/#/admin’ 模仿了登录胜利进入管理员页面

/* 注意事项 */
1.yarn 装置 quasar , 如果 quasar 命令有效，配置环境变量
2. yarn global bin   查看 yarn 装置门路  // C:\Users\dell\AppData\Local\Yarn\bin

// export PATH="$(yarn global bin):$PATH"        // 配置 yarn 配置环境变量
3. vim ~/.bashrc  执行命令关上文件 输出 4
4. export PATH="$(C:\Users\dell\AppData\Local\Yarn\bin):$PATH"

// 配置环境变量后不失效 电脑重启

// 版本问题 先移除装置
https://quasar.dev/start/upgrade-guide
呈现 Missing .babelrc file... 的问题，导致无奈运行
yarn global add @quasar/cli

https://github.com/msliuyang/…