Vue3 后臺管理系統模板

Vue3 后臺管理系統模板

gie倉庫地址
一個基于 Vue3 + TypeScript + Element Plus 的后臺管理系統模板，集成了動態路由和權限管理功能。

在這里插入圖片描述

技術棧

  • Vue 3.2
  • TypeScript 4.5
  • Vue Router 4
  • Vuex 4
  • Element Plus 2.9
  • Axios
  • Less

功能特性

  • 🚀 基于 Vue3 最新技術棧開發
  • 📦 使用 TypeScript 進行開發，提供更好的類型檢查和開發體驗
  • 🔐 完整的權限管理解決方案，支持動態路由和按鈕級權限控制
  • 🎨 使用 Element Plus 組件庫，提供美觀的 UI 界面
  • 📱 響應式設計，支持多種設備訪問
  • 🔧 支持 PWA，可離線訪問
  • 📝 集成 ESLint + Prettier，統一代碼風格

項目結構

src/
├── assets/         # 靜態資源
├── components/     # 公共組件
├── hooks/          # Vue3 組合式 API 鉤子
├── network/        # 網絡請求相關
├── plugins/        # 插件
├── router/         # 路由配置
├── store/          # Vuex 狀態管理
├── utils/          # 工具函數
└── views/          # 頁面組件

安裝和使用

環境要求

  • Node.js >= 14.0.0
  • npm >= 6.0.0

安裝依賴

npm install

開發環境運行

npm run serve

生產環境構建

npm run build

代碼檢查

npm run lint

權限管理

本項目實現了完整的權限管理功能，包括動態路由和按鈕級權限控制。以下是詳細的實現說明：

1. 權限管理架構

權限管理主要包含以下幾個部分：

  • 路由權限控制
  • 菜單權限控制
  • 按鈕級權限控制
  • 數據權限控制

2. 實現細節

2.1 路由權限控制

  1. 路由守衛實現

    • 在 router/index.ts 中實現全局路由守衛
    • 檢查用戶是否登錄（通過 token）
    • 動態添加路由配置

  2. 動態路由生成

    • 用戶登錄后獲取權限菜單數據
    • 通過 addDynamicRoutes 工具函數動態生成路由
    • 支持路由懶加載，提高性能

  3. 路由配置示例

// 路由守衛實現
router.beforeEach((to, from, next) => {const token = localStorage.getItem('token');if (!token && to.meta.check) {next({ name: 'login' });return;}// 動態添加路由if (token && !layoutRoute.children.length) {const menus = JSON.parse(localStorage.getItem('menus') || '[]');addDynamicRoutes(router, menus);next({ ...to, replace: true });return;}next();
});
2.2 菜單權限控制

  1. 菜單數據結構

    • 支持多級菜單
    • 包含路徑、名稱、組件、元數據等信息
    • 支持菜單圖標、權限標識等擴展屬性

  2. 菜單渲染

    • 根據用戶權限動態生成菜單
    • 支持菜單緩存，提高性能
    • 支持菜單排序和分組
2.3 按鈕級權限控制

  1. 權限指令實現

    • 通過自定義指令 v-permission 控制按鈕顯示
    • 支持權限表達式，如：v-permission="['add', 'edit']"
    • 支持權限組合判斷

  2. 使用示例

<template><el-button v-permission="['add']">添加</el-button><el-button v-permission="['edit']">編輯</el-button><el-button v-permission="['delete']">刪除</el-button>
</template>
2.4 數據權限控制

  1. 數據過濾

    • 根據用戶角色過濾數據
    • 支持數據范圍控制
    • 支持字段級權限控制

  2. 實現方式

    • 在 API 請求中添加權限參數
    • 后端根據權限參數過濾數據
    • 前端處理權限數據展示

3. 權限管理流程

  1. 登錄流程

    • 用戶輸入賬號密碼登錄
    • 獲取用戶 token 和權限信息
    • 存儲權限信息到本地存儲

  2. 權限驗證流程

    • 路由跳轉時驗證權限
    • 動態生成路由和菜單
    • 控制按鈕和數據的訪問權限

  3. 權限更新流程

    • 支持動態更新權限
    • 支持權限緩存清理
    • 支持權限實時生效

4. 安全考慮

  1. 前端安全

    • 敏感信息加密存儲
    • 路由權限雙重驗證
    • XSS 防護

  2. 后端安全

    • 接口權限驗證
    • 數據權限過濾
    • 防 SQL 注入

接口封裝

本項目采用統一的接口封裝方案，提供了完整的請求攔截、響應攔截和錯誤處理機制。以下是詳細的實現說明：

1. 接口封裝架構

接口封裝主要包含以下幾個部分：

  • 請求實例配置
  • 請求攔截器
  • 響應攔截器
  • 接口模塊化
  • 統一錯誤處理

2. 實現細節

2.1 請求實例配置
const service = axios.create({baseURL: "/api/pc",timeout: 40000,headers: {"Access-Control-Allow-Origin": "*","Connection": "Keep-Alive","Content-Type": "application/json; charset = utf-8"}
})
2.2 請求攔截器
service.interceptors.request.use(config => {const token = localStorage.getItem("token");if (token) {config.headers["access-token"] = token}return config;}
)
2.3 響應攔截器
service.interceptors.response.use((res) => {const code = res.data.codeif (code == 100) {router.push({ name: "login" });} else if (code == 1) {ElMessage({message: res.data.msg,type: 'warning'});}return res}, (error) => {return Promise.reject(error);}
)
2.4 接口模塊化
  1. 目錄結構
src/network/
├── index.ts        # 請求配置和攔截器
└── apis/           # 接口模塊├── home.ts     # 首頁相關接口├── work.ts     # 工作相關接口└── user.ts     # 用戶相關接口
  1. 接口定義示例
// apis/home.ts
export default {// 獲取首頁數據getHomeData: (params: any) => ({url: '/home/data',method: 'get',params}),// 更新首頁數據updateHomeData: (data: any) => ({url: '/home/update',method: 'post',data})
}
  1. 接口調用示例
import getData from '@/network';// 獲取首頁數據
const getHomeData = async () => {try {const res = await getData('home/getHomeData', { page: 1 });return res.data;} catch (error) {console.error('獲取首頁數據失敗:', error);}
}

3. 接口封裝特點

  1. 統一配置

    • 統一的 baseURL 配置
    • 統一的超時時間設置
    • 統一的請求頭配置

  2. 自動處理

    • 自動添加 token
    • 自動處理登錄過期
    • 自動處理錯誤提示

  3. 模塊化管理

    • 按功能模塊劃分接口
    • 支持接口自動導入
    • 支持接口命名空間

  4. 類型支持

    • 完整的 TypeScript 類型支持
    • 接口參數類型檢查
    • 響應數據類型定義

4. 錯誤處理機制

  1. 請求錯誤處理

    • 網絡錯誤處理
    • 超時錯誤處理
    • 請求取消處理

  2. 響應錯誤處理

    • 狀態碼錯誤處理
    • 業務錯誤處理
    • 登錄過期處理

  3. 錯誤提示

    • 統一的錯誤提示組件
    • 可配置的錯誤提示方式
    • 支持自定義錯誤處理

5. 使用建議

  1. 接口定義

    • 使用 TypeScript 定義接口類型
    • 添加詳細的接口注釋
    • 遵循統一的命名規范

  2. 接口調用

    • 使用 async/await 處理異步
    • 添加適當的錯誤處理
    • 注意請求參數的合法性

  3. 性能優化

    • 合理使用請求緩存
    • 避免重復請求
    • 控制并發請求數量

貢獻指南

歡迎提交 Issue 和 Pull Request 來幫助改進項目。

權限說明

    <!-- 路由格式 -->使用方式,登錄后后端返回數據格式,根據這個格式,把所有路徑路由配置放在這里,讀取的時候讓后臺判斷,返回那些路徑,與后端溝通好.<!-- 把路由配置放在這里 -->parentId: id;index: index;title:一級路由名稱icon:圖標 我用的是iconfont 的圖標 根據自己情況替換就行了;type: group;children: [ //子級路由index:index;title:二級路由名稱path:path;name:name;component:文件讀取路徑 讀取pages 文件 路徑// 看不明白的就把這里的路徑和pages 下的路徑對比一下就明白了menuType:menuType;meta:   路由原信息] ;"nav": [{"parentId": "1","index": "1","title": "首頁","icon": "icon-shouye","type": "group","children": [{"index": "1-1","title": "首頁","name": "home","path": "/home","component": "shouYe/index","menuType": 0,"meta": {"selectIndex": "1-1","check": true}}]},{"parentId": "2","index": "2","title": "設備管理","icon": "icon-shebei","type": "group","children": [{"index": "2-1","title": "設備列表","name": "shebei","path": "/shebei","component": "shebei/shebei","menuType": 0,"meta": {"selectIndex": "2-1","check": true}}]},{"parentId": "3","index": "3","title": "模塊管理","icon": "icon-mokuai","type": "group","children": [{"index": "3-1","title": "模塊列表","name": "mokuai","path": "/mokuai","component": "mokuai/Mokuai","menuType": 0,"meta": {"selectIndex": "3-1","check": true}}]},{"parentId": "4","index": "4","title": "標靶檢測","icon": "icon-mubiaobachang1","type": "group","children": [{"index": "4-1","title": "報警列表","name": "jingIndex","path": "/jingIndex","component": "biaoba/index","menuType": 0,"meta": {"selectIndex": "4-1","check": true}},{"index": "4-2","title": "標靶檢測","name": "biaoba","path": "/biaoba","component": "biaoba/biaoba","menuType": 0,"meta": {"selectIndex": "4-2","check": true}},{"index": "4-3","title": "標靶報警","name": "baojing","path": "/baojing","component": "biaoba/baojing","menuType": 0,"meta": {"selectIndex": "4-3","check": true}},{"index": "4-4","title": "報警等級","name": "dengji","path": "/dengji","component": "biaoba/dengji","menuType": 0,"meta": {"selectIndex": "4-4","check": true}}]}]

許可證

MIT

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/78533.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/78533.shtml
英文地址，請注明出處：http://en.pswp.cn/web/78533.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

林業數智化轉型初步設計方案

林業數智化轉型初步設計方案

最近應林業方面的朋友要求，幫助其設計了林業方面的數字化智能化轉型的方案設計，編寫了如下內容，供大家參考，林業方面主要有三大方向，即林業生態、生物災害和疫源疫病，目前已經建成了一些信息化系統，但在數字化智能化方面偏弱，就想著如何借助人工智能、物聯網、大數據和…
閱讀更多...
springboot單體項目的執行流程

springboot單體項目的執行流程

首先就是啟動springboot項目&#xff0c;即執行主函數&#xff0c;這個主函數的類通常帶有SpingBootApplication注解&#xff0c;類中的main方法就是程序的入口。 啟動主函數后&#xff0c;SpringBoot會按特定順序加載配置文件&#xff0c;如application.properties或applicat…
閱讀更多...
Python格式化字符串的四種方法

Python格式化字符串的四種方法

Python格式化字符串的四種方法 1.使用 % 運算符 %s 是一個字符串的占位符&#xff0c;而 “World” 是替換它的值 print("Hello, %s!" % "World") # 輸出&#xff1a;Hello, World!你可以使用多個占位符 注意&#xff1a;多個變量占位&#xff0c;變量要…
閱讀更多...
【Redis】緩存|緩存的更新策略|內存淘汰策略|緩存預熱、緩存穿透、緩存雪崩和緩存擊穿

【Redis】緩存|緩存的更新策略|內存淘汰策略|緩存預熱、緩存穿透、緩存雪崩和緩存擊穿

思維導圖&#xff1a; Redis最主要的用途&#xff0c;三個方面&#xff1a; 1.存儲數據&#xff08;內存數據庫&#xff09; 2.緩存&#xff08;redis最常用的場景&#xff09; 3.消息隊列 一、什么是緩存 我們知道對于硬件的訪問速度來說&#xff0c;通常情況下&#xff1…
閱讀更多...
中陽視角下的趨勢確認策略：以數據為核心的交易思維

中陽視角下的趨勢確認策略：以數據為核心的交易思維

中陽視角下的趨勢確認策略&#xff1a;以數據為核心的交易思維 在動態交易市場中&#xff0c;如何在波動中捕捉相對確定的趨勢&#xff0c;是每一位操作者關心的問題。“中陽”理念主張通過結構性價格分析&#xff0c;判斷市場情緒的拐點。尤其是在出現大陽線或中陽線時&#x…
閱讀更多...
【C/C++】inline關鍵詞

【C/C++】inline關鍵詞

C inline 關鍵字學習筆記 一、什么是 inline 函數&#xff1f; inline&#xff08;內聯&#xff09;是 C 中的一個關鍵字&#xff0c;表示“將函數的代碼直接插入到調用點”&#xff0c;以減少函數調用開銷&#xff0c;提升執行效率。 ? 注意&#xff1a;inline 是一種“請求…
閱讀更多...
React useMemo函數

React useMemo函數

第一個參數是回調函數&#xff0c;返回計算的結果&#xff0c;第二個參數是依賴項&#xff0c;該函數只監聽count1變量的變化 import { useReducer, useState } from react; import ./App.css;// 定義一個Reducer函數 根據不同的action進行不同的狀態修改 function reducer(st…
閱讀更多...
對比測評：為什么AI編程工具需要 Rules 能力？

對比測評：為什么AI編程工具需要 Rules 能力？

通義靈碼 Project Rules 在開始體驗通義靈碼 Project Rules 之前&#xff0c;我們先來簡單了解一下什么是通義靈碼 Project Rules&#xff1f; 大家都知道&#xff0c;在使用 AI 代碼助手的時候&#xff0c;有時候生成的代碼不是自己想要的&#xff0c;或者說生成的代碼采納后…
閱讀更多...
Java學習手冊：MyBatis 框架作用詳解

Java學習手冊：MyBatis 框架作用詳解

一、MyBatis 簡介 MyBatis 是一款優秀的持久層框架&#xff0c;用于簡化 JDBC 開發。它通過將 Java 對象與數據庫表之間的映射關系進行配置&#xff0c;使得開發者可以使用簡單的 SQL 語句和 Java 代碼來完成復雜的數據操作。MyBatis 支持自定義 SQL 語句&#xff0c;提供了靈…
閱讀更多...
list的設計

list的設計

#pragma once #include<assert.h> #include<iostream> using namespace std; namespace aqc {template<class T>struct list_node{list_node* _next;list_node* _prev;T _data;list_node(const T& xT())//加const防止權限放大&#xff0c;用引用減少拷貝…
閱讀更多...
基于 PyQt 的YOLO目標檢測可視化界面+ nuitka 打包

基于 PyQt 的YOLO目標檢測可視化界面+ nuitka 打包

在人工智能和計算機視覺領域&#xff0c;YOLO&#xff08;You Only Look Once&#xff09;是一種廣泛使用的實時目標檢測算法。為了直觀地展示YOLO算法的檢測效果&#xff0c;我們使用Pyqt框架進行檢測結果的可視化&#xff0c;同時為了使其能夠脫離Python環境&#xff0c;我們…
閱讀更多...
2.1 閱讀錯題---02-04年

2.1 閱讀錯題---02-04年

引言 2002年-2004年英語閱讀錯題匯總與分析總結。 一、02年閱讀 Text 1 題目&#xff1a;21題 題型&#xff1a;細節題 原因&#xff1a;單詞認錯了&#xff0c;原句中 in sympathy with 譯為 與…一致 &#xff1b;題干中的 sympathy 譯為 同情 題目&#xff1a;22題 題…
閱讀更多...
Axure疑難雜癥：中繼器制作下拉菜單（多級中繼器高級交互）

Axure疑難雜癥：中繼器制作下拉菜單（多級中繼器高級交互）

親愛的小伙伴，在您瀏覽之前，煩請關注一下，在此深表感謝！ Axure產品經理精品視頻課已登錄CSDN可點擊學習https://edu.csdn.net/course/detail/40420 本文視頻課程記錄于上述地址第五章中繼器專題第11節 課程主題：中繼器制作下拉菜單 主要內容：創建條件選區、多級中繼器…
閱讀更多...
即刻啟程，踏上W55MH32高性能以太網單片機學習之路！

即刻啟程，踏上W55MH32高性能以太網單片機學習之路！

單芯片解決方案&#xff0c;開啟全新體驗——W55MH32 高性能以太網單片機 W55MH32是WIZnet重磅推出的高性能以太網單片機&#xff0c;它為用戶帶來前所未有的集成化體驗。這顆芯片將強大的組件集于一身&#xff0c;具體來說&#xff0c;一顆W55MH32內置高性能Arm Cortex-M3核心…
閱讀更多...
C++負載均衡遠程調用學習之上報功能與存儲線程池

C++負載均衡遠程調用學習之上報功能與存儲線程池

目錄 1. Lars-reportV0.1 report模塊介紹 2.Lars-reporterV0.1 reporter項目目錄構建 3.Lars-ReporterV0.1 數據表和proto協議環境搭建 4.Lars-ReporterV0.1上報請求業務處理 5.Lars-ReporterV0.1上報請求模塊的測試 6.Lars-ReporterV0.2開辟存儲線程池-網絡存儲分離 1. L…
閱讀更多...
LabVIEW三軸電機控制

LabVIEW三軸電機控制

在工業自動化迅猛發展的當下&#xff0c;多軸伺服電機控制系統在制造業、3D 打印等眾多領域的需求與日俱增。它不僅要實現高精度的單軸運動控制&#xff0c;還需保障多軸協同作業的精準度&#xff0c;對響應速度也有嚴格要求。LabVIEW 開發多軸伺服電機控制系統&#xff0c;有效…
閱讀更多...
驅動開發硬核特訓 · Day 27（下篇）：深入掌握 Common Clock Framework 架構與實戰開發

驅動開發硬核特訓 · Day 27（下篇）：深入掌握 Common Clock Framework 架構與實戰開發

節。 在本篇內容中&#xff0c;我們將圍繞 Linux 內核中的時鐘子系統核心架構 —— Common Clock Framework&#xff08;簡稱 CCF&#xff09;展開深入講解&#xff0c;目標是幫助你全面理解其設計理念、主要數據結構、注冊流程、驅動實現方式&#xff0c;以及如何基于 NXP i.M…
閱讀更多...
數據庫基礎：數據庫類型與MySQL特點詳解

數據庫基礎：數據庫類型與MySQL特點詳解

一、數據庫的主要類型 1. 關系型數據庫(RDBMS) 特點：基于關系模型，數據以表格形式存儲 代表產品：MySQL、Oracle、SQL Server、PostgreSQL 優勢：ACID事務支持、強一致性、成熟的SQL標準 適用場景：需要復雜查詢和事務支持的場景 2. 非關系型數據庫(NoSQL) 文檔型數據庫：Mo…
閱讀更多...
49認知干貨：產品的生命周期及類型匯總

49認知干貨：產品的生命周期及類型匯總

49章：產品的生命周期與類型劃分 宇宙是運動的而非靜止的，任何事物亦是如此。只要是存在的事物，便必然存在周期性變化，就像四季更替中的冬日枯樹、春日新芽、夏日繁茂與秋日凋零。 這也意味著：事物的發展，離不開周期的更迭與演化，死亡并非終點，而是一種新的循環轉變。 …
閱讀更多...
【2025最新】為什么用ElasticSearch？和傳統數據庫MySQL與什么區別？

【2025最新】為什么用ElasticSearch？和傳統數據庫MySQL與什么區別？

Elasticsearch 深度解析&#xff1a;從原理到實踐 一、為什么選擇 Elasticsearch&#xff1f; 數據模型 Elasticsearch 是基于文檔的搜索引擎&#xff0c;它使用 JSON 文檔來存儲數據。在 Elasticsearch 中&#xff0c;相關的數據通常存儲在同一個文檔中&#xff0c;而不是分散…
閱讀更多...
最新文章

Copyright @ 2022~2023