Quasar搭建後台管理

quasar官網

使用quasar搭建的後台管理系統github

# 安裝 $ npm install # or $ yarn install # 執行 quasar dev # 打包 quasar build

使用quasar搭建的後台管理系統

# 角色選單許可權：登入成功後，根據使用者資訊，獲取選單 # 按鈕許可權控制：返回許可權，指令控制 # 選單資料結構

看了官方文件 推薦使用yarn
so do it
ready ~~
# node.js >=10 is required.
# 全域性安裝 yarn
npminstall -g yarn
# 全域性安裝quasar 請看最底下注意事項
yarn global add @quasar/cli
# 專案啟動執行檔案
quasar.config.js
boot: [
// 要執行的檔案 boot資料夾中的檔名
'axios',
'permission'
]build: ,
}devserver: }},
}

// boot資料夾
axios.js // 請求設定
import vue from
'vue'
import axios from
'axios'
import
*as authservice from
'../utils/auth'
import
from
'quasar'
// add a request interceptor process.env.api '/backend'
const axiosinstance = axios.
create()
axiosinstance.defaults.headers.post[
'content-type']=
// 請求攔截
axiosinstance.interceptors.request.
use(
config =>
) console.
log(
'info request token:'
+ authservice.
gettoken()
)if(authservice.
gettoken()
)else
return config
},error =>
)// 響應攔截
axiosinstance.interceptors.response.
use(
response =>
, error =>
)vue.prototype.$axios = axiosinstance
export
permission.js // 按鈕許可權控制
export
default()
=>
) console.
log(haspermission, isadmin)if(
!haspermission)}}
)}// 按鈕使用控制
"['function_edit']" small round push glossy dense icon=
"edit" color=
"primary" @click=
"editfunction(props.value)"
>
<
/q-btn>
"['function_del']" small round push glossy dense icon=
"delete" color=
"red" @click=
"delfunction(props.value)"
>
<
/q-btn>

leftmenubar.vue     # 模擬選單許可權控制

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-zxfckcrz-1607502827701)(./shop-admin/src/statics/img/menu.png)]

├─.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.yarn 安裝 quasar ,如果 quasar命令無效，配置環境變數 // export path="$(yarn global bin):$path" // 配置yarn 配置環境變數 3. vim ~ /.bashrc 執行命令開啟檔案輸入4 4.export path =// 配置環境變數後不生效電腦重啟 // 版本問題先移除安裝出現missing .babelrc file...的問題，導致無法執行 yarn global add @quasar/cli

Quasar搭建後台管理

react antd SPA 管理後台搭建

基於Python搭建Django後台管理系統

基於Python搭建Django後台管理系統

Quasar搭建後台管理

react antd SPA 管理後台搭建

基於Python搭建Django後台管理系統

基於Python搭建Django後台管理系統

相關推薦