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
react antd SPA 管理後台搭建
學習了前端主流的框架react基於 react antd 等搭建了一套後台專案的模板github 安裝 yarn npm install g yarn 進入專案目錄啟動專案訪問本地localhost 3000埠 yarn start 安裝依賴 yarn add antd react router d...
基於Python搭建Django後台管理系統
django admin startproject helloworld 進入該專案 cd helloworld 建立乙個子專案 生成站點 sites model,這兩步驟第一篇有介紹,這裡就直接操作了 python manage.py createsuperuser這步很關鍵,你每次修改model...
基於Python搭建Django後台管理系統
一 部落格 的建立 之後,我們執行一下專案,輸入 看一下效果 三 資料庫後台搭建 到登入頁基本完成一半啦,接下來就需要建立乙個管理員賬戶用於登入使用,3.將model新增到sites admin.py裡 4.執行一下專案,開啟管理介面,檢視效果,然後你就看隨意新增article內容啦 六 踩坑總結 ...