vue輕量級后臺管理系統基礎模板

2shou 發布于2019-08-23 14:17 / 2617人閱讀

摘要：具體實現請查看和的退出登陸回調方法。現在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據后臺數據來自動生成。另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。

項目地址 vue-admin-template

在線預覽

更新 2019.6.25 更新

修復路由表沖突問題

退出當前用戶，換賬號重新登陸時，上個賬號和現在的賬號路由表會有沖突的問題，解決辦法是在退出登陸時重置路由表。

具體實現請查看 router/index.js、Login.vue 和 Index.vue 的退出登陸回調方法。

2019.6.18 更新

優化動態添加路由功能

以前的動態路由功能并不完善，首先要將所有的路由都添加到路由表里，然后根據后臺返回的菜單欄數據來生成菜單。

導致的問題就是，雖然有頁面在菜單欄上不顯示，但由于已經添加到路由表里了，所以可以在地址欄上手動輸入在菜單欄上不存在（但在路由表存在）的頁面，進而可以越權訪問。

現在除了必要的頁面需要在一開始添加到路由表里，其他的頁面都可以根據后臺數據來自動生成。而且菜單欄上沒有的頁面，在地址欄上輸入地址也是訪問不了的。

另外，如果在未登陸時要訪問某一指定頁面，會重定向到登陸頁，登陸成功后會自動跳到這個指定頁面。

具體實現請看 permission.js 和 util 目錄下的 index.js 文件

2019.3.14 更新

增加404頁面

假如跳轉到一個不存在的頁面時會重定向到404頁面

2019.3.8 更新

增加面包屑功能

用于展示當前頁面的路徑

增加權限控制功能

如果未登陸，訪問所有頁面都重定向到登陸頁

2019.3.1 更新

增加動態菜單欄功能

icon使用的是iview組件的icon組件。

數據格式：

// 左側菜單欄數據
menuItems: [
    {
        name: "Home", // 要跳轉的路由名稱 不是路徑
        size: 18, // icon大小 非必填
        type: "md-home", // icon類型 非必填
        text: "主頁" // 文本內容
    },
    {
        text: "二級菜單",
        type: "ios-paper",
        children: [
            {
                type: "ios-grid",
                name: "T1",
                text: "表格"
            },
            {
                text: "三級菜單",
                type: "ios-paper",
                children: [
                    {
                        type: "ios-notifications-outline",
                        name: "Msg",
                        text: "查看消息"
                    },
                    {
                        type: "md-lock",
                        name: "Password",
                        text: "修改密碼"
                    },
                    {
                        type: "md-person",
                        name: "UserInfo",
                        text: "基本資料",
                    }
                ]
            }
        ]
    }
]

相關依賴

vue-router

iview

axios

vuex

功能 登錄頁

一周七天自動切換不同的壁紙（建議自己配置）

標簽欄

點擊標簽切換頁面

刷新當前標簽頁

關閉其他標簽/關閉所有標簽

注意： 組件的名稱和路由的名稱一定要一致，例如 Home.vue 組件名稱 name: home，則在路由文件中也要給它設置為 name: home，否則頁面內容不能緩存

// 在router文件中
{
    path: "home",
    name: "home",
    component: () => import("../views/Home.vue")
}

// 在Home.vue中
export default {
    name: "home"
}

側邊欄

伸展/收縮

頁面寬度過小自動收縮

多級菜單（利用iView組件）

用戶相關

消息通知

用戶頭像

基本資料

動態菜單欄

根據數據動態生成菜單

面包屑

展示當前頁面的路徑

權限控制

如果在未登陸的情況下訪問指定頁面將會重定向到登陸頁

其它

利用axios攔截器實現了ajax請求前展示loading 請求結束關閉loading

注意

源碼可見并且添加了必要的注釋可以自行更改

Index組件一般情況下只需要傳數據就行其他不用關注

市面上有大量的vue后臺管理系統模板但是功能都太豐富了而且有很多組件用不上所以寫了這么一個最基礎的只有必要功能的模板
UI庫使用的是iView 有大量的組件可用

子組件跳轉到子組件

// xxx為你想跳轉的子組件name
this.$parent.gotoPage("xxx")

路由傳參

this.gotoPage("userinfo", {
    id: id,
})
// 在userinfo組件里取參
this.$route.params.id

使用下載

git clone git@github.com:woai3c/vue-admin-template.git

cd vue-admin-template

npm i

開發

npm run serve

打包

npm run build

如果對你有幫助，請給個Star

GPU云服務器云服務器后臺管理模板html vue基礎教程騰訊云輕量服務器模板網站后臺模板

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100396.html

Vue 頁面權限控制和登陸驗證

摘要：如果一個頁面，有角色越權訪問，這時就得做出限制了。我們可以通過或來實現，下面用代碼來展示一下如何用控制登陸驗證。更多文章頁面權限控制頁面權限控制是什么意思呢？就是一個網站有不同的角色，比如管理員和普通用戶，要求不同的角色能訪問的頁面是不一樣的。如果一個頁面，有角色越權訪問，這時就得做出限制了。 Vue 動態添加路由及生成菜單這是我寫過的一篇文章，通過動態添加路由和菜單來做控制，...

lastSeries 2019-08-23 18:13 評論0 收藏0
【收藏】2019年最新Vue相關精品開源項目庫匯總

摘要：前言本文的前身是源自上的項目但由于該項目上次更新時間為年月日，很多內容早已過期或是很多近期優秀組件未被收錄，所以小肆今天重新更新了內容并新建項目。提交的項目格式如下項目名稱子標題相關介紹如果收錄的項目有錯誤，可以通過反饋給小肆。前言本文的前身是源自github上的項目awesome-github-vue,但由于該項目上次更新時間為2017年6月12日，很多內容早已過期或是很多近期優...

williamwen1986 2019-08-23 14:50 評論0 收藏0
方案設計--如何看待前端框架選型 ?

摘要：純前端開發主要是針對靜態頁面。自主權最大，正常是使用進行輔助開發，上線等。大致原因使用是為了和端的保持同步。四總結對于比較正式的項目，前端技術選型策略一定是產品收益最大化，用戶在首位。對于前端團隊，可以實現企業受益最大化要點。一、技術選型的策略 1、保證產品質量（1）功能穩健：網頁不白屏，不錯位，不卡死；操作正常；數據精準。（2）體驗優秀：加載體驗，交互體驗，視覺體驗，無障礙訪...

gnehc 2019-08-23 18:13 評論0 收藏0
Vue2.0 + ElementUI 手寫權限管理系統后臺模板（一）——簡述

摘要：簡介最近寫了一個基于權限管理系統的后臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注于項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。簡介最近寫了一個基于vue2.0+element-ui權限管理系統的后臺模板，包含了正常項目開發所需的框架功能，開發者使用的時候只需要專注于項目的業務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。源碼地址...

_ivan 2019-08-23 14:06 評論0 收藏0