quasar搭建后台管理

quasar官网quasar-admin项目介绍使用quasar搭建后台管理系统#角色菜单权限：登录成功后，根据用户信息，获取菜单#按钮权限控制：返回权限，命令控制#菜单数据结构[{图标:'feedback',label:'StoreManagement',path:'/storeInfo',btns:['btn-add','btn-delete']#按钮权限与下面的模拟信息不一致，思路是同}]开发代码片段说明看官方文档推荐使用yarnsodoitready~~#Node.js>=10isrequired.#globalinstallationyarnnpminstall-gyarn#quasarglobalinstallation见底注yarnglobaladd@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':'/'}}},}//启动文件夹axios.js//请求设置importVuefrom'vue'从“axios”导入axios*asauthServicefrom'../utils/auth'import{Loading}from'quasar'//添加请求拦截器process.env.API'/backend'constaxiosInstance=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,//msmessage:'Somemessage',messageColor:'blue',spinnerSize:250,//像素spinnerColor:'white',customClass:'bg-primary'})console.log('inforequesttoken:'+authService.getToken())if(authService.getToken()){config.headers.Authorization='Bearer'+authService.getToken()}else{config.headers.Authorization=''}returnconfig},error=>{returnPromise.reject(error)})//响应拦截axiosInstance.interceptors.response.use(response=>{Loading.hide()returnresponse.data},error=>{returnPromise.reject(error)})Vue.prototype.$axios=axiosInstanceexport{axiosInstance}permission.js//点击权限控制exportdefault({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)constneedPermissions=binding.valueconstpermissions=JSON.parse(localStorage.getItem('permission'))//constpermissions=['function_edit','function_add']constisAdmin=localStorage.getItem('isAdmin')consthasPermission=permissions.some(s=>{returnneedPermissions.indexOf(s)>-1})console.log(hasPermission,isAdmin)if(!hasPermission){el.style.display='none'}}})}//点击使用control????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//layout││└─Admin//Administrator││└─Seller//商家│├─pages││├─admin//管理员页面│││├─commissionManagement││├─goodsManagement│││├─orderManagement││││└─storeManagement││└─storeManagement││││├─不her││└─seller//商家页面│├─commissionManagement││├─goodsManagement││├─orderManagement││└─storeManagement││└─component│├─plugins│├─router│//│index│││└─routes//路由菜单配置│├─store││└─modules│└─utils└─src-electron├─icons└─main-process运行效果1.假设输入地址'localhost:8083'模拟如果登录成功进入商家页面，假设输入地址'localhost:8083/#/admin'模拟登录成功进入管理员页面/*Notes*/1.Yarn安装quasar。如果quasar命令无效，配置环境变量2.yarnglobalbin查看yarn安装路径//C:\Users\dell\AppData\Local\Yarn\bin//exportPATH="$(yarnglobalbin):$PATH"//配置yarn配置环境变量3.vim~/.bashrc执行命令打开文件，输入44.exportPATH="$(C:\Users\dell\AppData\Local\Yarn\bin):$PATH"//配置环境变量后，不会生效重启电脑后//先排除版本问题Installinghttps://quasar.dev/start/upgrade-guide出现Missing.babelrcfile...的问题，导致无法运行yarnglobaladd@quasar/clihttps://github.com/msliuyang/...效果：https://msliuyang.github.io