quasar官网

quasar-admin

我的项目介绍

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

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

开发代码片段阐明

看了官网文档 举荐应用yarn so do itready ~~# Node.js >=10 is required.# 全局装置 yarnnpm install -g yarn# 全局装置quasar  请看最底下注意事项yarn global add @quasar/cli# 我的项目启动执行文件quasar.config.jsboot: [    // 要执行的文件  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 = axiosInstanceexport { 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  执行命令关上文件 输出44. 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/...