Quasar搭建後台管理

2021-10-11 18:14:00 字數 4252 閱讀 8283

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內容啦 六 踩坑總結 ...