Vue整合AdminLTE模板的方法
上一次搞定了登錄驗(yàn)證和跳轉(zhuǎn)的問(wèn)題,不過(guò)存在一處bug。在Vue的main.js中,使用了Vue-router的路由鉤子來(lái)判斷是否可以訪問(wèn)受保護(hù)的資源,問(wèn)題就出在這里,先修復(fù)上次的bug。
/* 全局路由鉤子 訪問(wèn)資源時(shí)需要驗(yàn)證localStorage中是否存在token 以及token是否過(guò)期 驗(yàn)證成功可以繼續(xù)跳轉(zhuǎn) 失敗返回登錄頁(yè)重新登錄 */ router.beforeEach((to, from, next) => { if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') } })
代碼中有一個(gè)問(wèn)題,就是在沒(méi)有token時(shí)如果直接訪問(wèn)/login會(huì)產(chǎn)生死循環(huán)導(dǎo)致溢出。修改后代碼如下
/* 全局路由鉤子 訪問(wèn)資源時(shí)需要驗(yàn)證localStorage中是否存在token 以及token是否過(guò)期 驗(yàn)證成功可以繼續(xù)跳轉(zhuǎn) 失敗返回登錄頁(yè)重新登錄 */ router.beforeEach((to, from, next) => { if(to.path == '/login'){ next() } if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){ next() } else{ next('/login') } })
好了,進(jìn)入正題。先說(shuō)AdminLTE,這是一個(gè)基于bootstrap的后臺(tái)管理模板,對(duì)于我這種排版、設(shè)計(jì)很渣但又需要一個(gè)人搞定所有事的來(lái)說(shuō)確實(shí)是個(gè)救星。先看看它的效果。
可以看到效果非常棒。其本身還包含了各種各樣的jquery插件,map、fullcalendar、datapicker、charts等等。不過(guò)這里我們主要用到側(cè)邊的導(dǎo)航和頭部樣式。
第一步,我們創(chuàng)建一個(gè)index.vue用作整個(gè)系統(tǒng)的主界面,然后把AdminLTE的index文件中的html復(fù)制到index.vue的template中。在沒(méi)有任何設(shè)置的情況想效果是這樣的。
好吧,辣眼睛。之所以這樣是因?yàn)槲覀儧](méi)有在頁(yè)面中導(dǎo)入各種css文件。
第二步,導(dǎo)入bootstrap的css文件。如果你是要Vue-cli創(chuàng)建的項(xiàng)目,那么項(xiàng)目中應(yīng)該已經(jīng)包含了bootstrap(在node_modules文件夾中)。接下來(lái)只要在main.js中引入就可以了。
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' import 'bootstrap/dist/css/bootstrap.css'
引入后的效果是這樣的
稍微正常了一些,下一步我們需要引入AdminLTE相關(guān)的css文件,如果你有AdminLTE的文件應(yīng)該能在dist中找到css、img、js三個(gè)文件夾。把這三個(gè)文件夾復(fù)制到我們Vue項(xiàng)目的assets中吧。引入的方法還是在main.js中添加。'
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' import 'bootstrap/dist/css/bootstrap.css' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css'
引入后的效果
頭部似乎正常了,但是body的內(nèi)容都沒(méi)有顯示出來(lái)。原因是AdminLTE是基于bootstrap的,而bootstrap又是需要jquery的。此時(shí)我們只引入了css文件,而還沒(méi)引入所需的js文件。但是此時(shí)引入js文件會(huì)因?yàn)闆](méi)有jquery而導(dǎo)致引入的文件無(wú)法起作用。所以先解決Vue中使用jquery的問(wèn)題。首先需要通過(guò)npm下載jquery到項(xiàng)目中(這里最好和AdminLTE中使用的jquery版本一致,我這里是2.2.3)。打開(kāi)shell導(dǎo)航到我們項(xiàng)目所在的文件夾使用npm install來(lái)安裝jquery。
安裝好之后應(yīng)該能在項(xiàng)目的node_modules文件夾中找到j(luò)query文件夾,并且package.json中也記錄了項(xiàng)目引用的jquery版本。
接下來(lái)要修改項(xiàng)目的webpack配置文件。文件位于項(xiàng)目的build文件夾下,文件名是webpack.base.conf.js。需要在這個(gè)文件中新增2處配置。
引入了jquery之后,我們就可以在main.js中繼續(xù)引入bootstrap和AdminLTE的js文件了。
import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import store from './store/store' //bootstrap import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.min.js' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css' import './assets/js/app.min.js'
引入之后再看一下效果
總算看起來(lái)好一些了,但是我們發(fā)現(xiàn)圖標(biāo)都沒(méi)有顯示出來(lái),這是因?yàn)锳dminLTE還使用了font-awesome。我們還需要再使用npm在項(xiàng)目中安裝font-awesome,之后在main.js中導(dǎo)入font-awesome的css文件(這次只需要安裝,不需要修改webpack的配置文件了)。
//bootstrap import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.min.js' //AdminLTE import './assets/css/skins/_all-skins.min.css' import './assets/css/AdminLTE.min.css' import './assets/js/app.min.js' //font-awesome import 'font-awesome/css/font-awesome.min.css'
導(dǎo)入后效果
還差一點(diǎn)完成了,我們還要處理一下Vue路由,使得我們?cè)邳c(diǎn)擊左側(cè)導(dǎo)航時(shí),需要顯示的內(nèi)容會(huì)出現(xiàn)在圖中紅框區(qū)域內(nèi)。對(duì)應(yīng)設(shè)備目錄管理我們新建一個(gè)catalog.vue文件,先簡(jiǎn)單的包含一行內(nèi)容即可。
<template> <h1>catalog</h1> </template>
在main.js中引入catalog并新增一條路由規(guī)則。注意這里我們使用了vue-router的嵌套路由,因?yàn)槲覀冃枰猚atalog.vue的內(nèi)容嵌套在index.vue中顯示。
//compinents import App from './App' import Login from './components/login' import Index from './components/index' import DeviceCatalog from './components/deviceCatalog' Vue.use(VueRouter) Vue.use(VueResource) Vue.http.options.emulateJSON = true; const routes = [ { path: '/login', component : Login },{ path: '/index', component: Index, children: [ { path: '/deviceCatalog', component: DeviceCatalog } ] }, ]
在index.vue中創(chuàng)建導(dǎo)航和路由出口(即catalog.vue要被放置的紅色區(qū)域)
<!-- 路由導(dǎo)航 --> <router-link to="/deviceCatalog"> <i class="fa fa-cubes"></i> <span class="ch">設(shè)備目錄管理</span> </router-link> <!-- 路由出口 --> <div class="content-wrapper" style="border-style:solid; border-color:red"> <!-- Main content --> <router-view style="margin-top:0px; padding:2px"></router-view> <!-- /.content --> </div>
點(diǎn)擊設(shè)備目錄管理,catalog.vue的內(nèi)容就會(huì)出現(xiàn)在紅色框區(qū)域內(nèi)了
最后一步,我們需要一個(gè)退出功能,上一篇中我們把認(rèn)證憑證放在了localStorage中,那么在退出時(shí)我們就需要?jiǎng)h除localStorage中的信息,并且返回到登錄頁(yè)。我們?cè)谕顺霭粹o上綁定一個(gè)logout方法實(shí)現(xiàn)這個(gè)功能。
<!-- 綁定方法 --> <div class="pull-right"> <button v-on:click="logOut" class="btn btn-primary btn-flat ch">退出</button> </div> <!-- logout方法 --> <script> export default { // name: 'app', data() { return { displayName: localStorage.userDisplayName, } }, methods: { logOut: function(){ localStorage.clear(); this.$router.push('login') } } } </script>
全部搞定,最后還有一個(gè)奇怪的問(wèn)題。在第一次登錄后頁(yè)面不能完整顯示,需要刷新一次。不過(guò)如果手動(dòng)制定紅色區(qū)域的高度則不會(huì)出現(xiàn),我搞了半天也不知問(wèn)題出在哪里,如果有哪位老師知道的話請(qǐng)指點(diǎn)我一下,謝謝。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Vue組件模板形式實(shí)現(xiàn)對(duì)象數(shù)組數(shù)據(jù)循環(huán)為樹(shù)形結(jié)構(gòu)(實(shí)例代碼)
- vue slot 在子組件中顯示父組件傳遞的模板
- Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)
- Vue單文件組件基礎(chǔ)模板小結(jié)
- 詳解vue為什么要求組件模板只能有一個(gè)根元素
- 在vue-cli的組件模板里使用font-awesome的兩種方法
- 探討Vue.js的組件和模板
- vue-cli3 項(xiàng)目?jī)?yōu)化之通過(guò) node 自動(dòng)生成組件模板 generate View、Component
- vue組件定義,全局、局部組件,配合模板及動(dòng)態(tài)組件功能示例
- 詳解Vue 動(dòng)態(tài)添加模板的幾種方法
- 簡(jiǎn)單談?wù)刅ue 模板各類(lèi)數(shù)據(jù)綁定
- VUE 自定義組件模板的方法詳解
相關(guān)文章
詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng)
本篇文章主要介紹了詳解vuex 中的 state 在組件中如何監(jiān)聽(tīng),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05一份超級(jí)詳細(xì)的Vue-cli3.0使用教程【推薦】
這篇文章主要介紹了一份超級(jí)詳細(xì)的Vue-cli3.0使用教程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品數(shù)據(jù)效果實(shí)例代碼
本篇文章主要介紹了vue+ElementUI實(shí)現(xiàn)訂單頁(yè)動(dòng)態(tài)添加產(chǎn)品效果實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題
這篇文章主要介紹了vue組件值變化但不刷新強(qiáng)制組件刷新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)靜態(tài)頁(yè)面點(diǎn)贊和取消點(diǎn)贊的功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02詳解vue中router-link標(biāo)簽所必備了解的屬性
這篇文章主要介紹了vue中router-link標(biāo)簽所必備了解的屬性,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue 動(dòng)態(tài)表單開(kāi)發(fā)方法案例詳解
這篇文章主要介紹了vue 動(dòng)態(tài)表單開(kāi)發(fā)方法,結(jié)合具體案例形式詳細(xì)分析了vue.js動(dòng)態(tài)表單相關(guān)原理、開(kāi)發(fā)步驟與實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-12-12vue微信分享 vue實(shí)現(xiàn)當(dāng)前頁(yè)面分享其他頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue微信分享功能,vue實(shí)現(xiàn)當(dāng)前頁(yè)面分享其他頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12