成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue輕量級(jí)后臺(tái)管理系統(tǒng)基礎(chǔ)模板

2shou / 2664人閱讀

摘要：具體實(shí)現(xiàn)請(qǐng)查看和的退出登陸回調(diào)方法?，F(xiàn)在除了必要的頁(yè)面需要在一開(kāi)始添加到路由表里，其他的頁(yè)面都可以根據(jù)后臺(tái)數(shù)據(jù)來(lái)自動(dòng)生成。另外，如果在未登陸時(shí)要訪問(wèn)某一指定頁(yè)面，會(huì)重定向到登陸頁(yè)，登陸成功后會(huì)自動(dòng)跳到這個(gè)指定頁(yè)面。

項(xiàng)目地址 vue-admin-template

在線預(yù)覽

更新 2019.6.25 更新

修復(fù)路由表沖突問(wèn)題

退出當(dāng)前用戶，換賬號(hào)重新登陸時(shí)，上個(gè)賬號(hào)和現(xiàn)在的賬號(hào)路由表會(huì)有沖突的問(wèn)題，解決辦法是在退出登陸時(shí)重置路由表。

具體實(shí)現(xiàn)請(qǐng)查看 router/index.js、Login.vue 和 Index.vue 的退出登陸回調(diào)方法。

2019.6.18 更新

優(yōu)化動(dòng)態(tài)添加路由功能

以前的動(dòng)態(tài)路由功能并不完善，首先要將所有的路由都添加到路由表里，然后根據(jù)后臺(tái)返回的菜單欄數(shù)據(jù)來(lái)生成菜單。

導(dǎo)致的問(wèn)題就是，雖然有頁(yè)面在菜單欄上不顯示，但由于已經(jīng)添加到路由表里了，所以可以在地址欄上手動(dòng)輸入在菜單欄上不存在（但在路由表存在）的頁(yè)面，進(jìn)而可以越權(quán)訪問(wèn)。

現(xiàn)在除了必要的頁(yè)面需要在一開(kāi)始添加到路由表里，其他的頁(yè)面都可以根據(jù)后臺(tái)數(shù)據(jù)來(lái)自動(dòng)生成。而且菜單欄上沒(méi)有的頁(yè)面，在地址欄上輸入地址也是訪問(wèn)不了的。

另外，如果在未登陸時(shí)要訪問(wèn)某一指定頁(yè)面，會(huì)重定向到登陸頁(yè)，登陸成功后會(huì)自動(dòng)跳到這個(gè)指定頁(yè)面。

具體實(shí)現(xiàn)請(qǐng)看 permission.js 和 util 目錄下的 index.js 文件

2019.3.14 更新

增加404頁(yè)面

假如跳轉(zhuǎn)到一個(gè)不存在的頁(yè)面時(shí)會(huì)重定向到404頁(yè)面

2019.3.8 更新

增加面包屑功能

用于展示當(dāng)前頁(yè)面的路徑

增加權(quán)限控制功能

如果未登陸，訪問(wèn)所有頁(yè)面都重定向到登陸頁(yè)

2019.3.1 更新

增加動(dòng)態(tài)菜單欄功能

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

數(shù)據(jù)格式：

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

vue-router

iview

axios

vuex

功能 登錄頁(yè)

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

標(biāo)簽欄

點(diǎn)擊標(biāo)簽切換頁(yè)面

刷新當(dāng)前標(biāo)簽頁(yè)

關(guān)閉其他標(biāo)簽/關(guān)閉所有標(biāo)簽

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

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

// 在Home.vue中
export default {
    name: "home"
}
側(cè)邊欄

伸展/收縮

頁(yè)面寬度過(guò)小自動(dòng)收縮

多級(jí)菜單（利用iView組件）

用戶相關(guān)

消息通知

用戶頭像

基本資料

動(dòng)態(tài)菜單欄

根據(jù)數(shù)據(jù)動(dòng)態(tài)生成菜單

面包屑

展示當(dāng)前頁(yè)面的路徑

權(quán)限控制

如果在未登陸的情況下訪問(wèn)指定頁(yè)面 將會(huì)重定向到登陸頁(yè)

其它

利用axios攔截器 實(shí)現(xiàn)了ajax請(qǐng)求前展示loading 請(qǐng)求結(jié)束關(guān)閉loading

注意

源碼可見(jiàn) 并且添加了必要的注釋 可以自行更改

Index組件一般情況下只需要傳數(shù)據(jù)就行 其他不用關(guān)注

市面上有大量的vue后臺(tái)管理系統(tǒng)模板 但是功能都太豐富了 而且有很多組件用不上 所以寫(xiě)了這么一個(gè)最基礎(chǔ)的 只有必要功能的模板
UI庫(kù)使用的是iView 有大量的組件可用

子組件跳轉(zhuǎn)到子組件 
// xxx為你想跳轉(zhuǎn)的子組件name
this.$parent.gotoPage("xxx")
路由傳參 
this.gotoPage("userinfo", {
    id: id,
})
// 在userinfo組件里取參
this.$route.params.id
使用 下載 
git clone [email protected]:woai3c/vue-admin-template.git

cd vue-admin-template

npm i
開(kāi)發(fā) 
npm run serve
打包 
npm run build
如果對(duì)你有幫助，請(qǐng)給個(gè)Star

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/100396.html

相關(guān)文章

  • Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證

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

    lastSeries 評(píng)論0 收藏0

  • 【收藏】2019年最新Vue相關(guān)精品開(kāi)源項(xiàng)目庫(kù)匯總

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

    williamwen1986 評(píng)論0 收藏0

  • 方案設(shè)計(jì)--如何看待前端框架選型 ?

    摘要：純前端開(kāi)發(fā)主要是針對(duì)靜態(tài)頁(yè)面。自主權(quán)最大，正常是使用進(jìn)行輔助開(kāi)發(fā)，上線等。大致原因使用是為了和端的保持同步。四總結(jié)對(duì)于比較正式的項(xiàng)目，前端技術(shù)選型策略一定是產(chǎn)品收益最大化，用戶在首位。 對(duì)于前端團(tuán)隊(duì)，可以實(shí)現(xiàn)企業(yè)受益最大化要點(diǎn)。 一、技術(shù)選型的策略 1、保證產(chǎn)品質(zhì)量 （1）功能穩(wěn)健：網(wǎng)頁(yè)不白屏，不錯(cuò)位，不卡死；操作正常；數(shù)據(jù)精準(zhǔn)。 （2）體驗(yàn)優(yōu)秀：加載體驗(yàn)，交互體驗(yàn)，視覺(jué)體驗(yàn)，無(wú)障礙訪...

    gnehc 評(píng)論0 收藏0

  • Vue2.0 + ElementUI 手寫(xiě)權(quán)限管理系統(tǒng)后臺(tái)模板（一）——簡(jiǎn)述

    摘要：簡(jiǎn)介最近寫(xiě)了一個(gè)基于權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 簡(jiǎn)介 最近寫(xiě)了一個(gè)基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺(tái)模板，包含了正常項(xiàng)目開(kāi)發(fā)所需的框架功能，開(kāi)發(fā)者使用的時(shí)候只需要專注于項(xiàng)目的業(yè)務(wù)邏輯就好。同時(shí)接下來(lái)會(huì)讓你擁有一個(gè)自己完全掌控的框架。 源碼地址...

    _ivan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<