欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue整合AdminLTE模板的方法

 更新時間:2018年05月21日 09:24:49   作者:joymod  
這篇文章主要介紹了Vue整合AdminLTE模板的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

上一次搞定了登錄驗證和跳轉(zhuǎn)的問題,不過存在一處bug。在Vue的main.js中,使用了Vue-router的路由鉤子來判斷是否可以訪問受保護的資源,問題就出在這里,先修復(fù)上次的bug。

/*
全局路由鉤子
訪問資源時需要驗證localStorage中是否存在token
以及token是否過期
驗證成功可以繼續(xù)跳轉(zhuǎn)
失敗返回登錄頁重新登錄
 */
router.beforeEach((to, from, next) => {
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next('/login')
 }
})

代碼中有一個問題,就是在沒有token時如果直接訪問/login會產(chǎn)生死循環(huán)導(dǎo)致溢出。修改后代碼如下

/*
全局路由鉤子
訪問資源時需要驗證localStorage中是否存在token
以及token是否過期
驗證成功可以繼續(xù)跳轉(zhuǎn)
失敗返回登錄頁重新登錄
 */
router.beforeEach((to, from, next) => {
 if(to.path == '/login'){
  next()
 }
 if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
  next()
 }
 else{
  next('/login')
 }
})

好了,進入正題。先說AdminLTE,這是一個基于bootstrap的后臺管理模板,對于我這種排版、設(shè)計很渣但又需要一個人搞定所有事的來說確實是個救星。先看看它的效果。

可以看到效果非常棒。其本身還包含了各種各樣的jquery插件,map、fullcalendar、datapicker、charts等等。不過這里我們主要用到側(cè)邊的導(dǎo)航和頭部樣式。

第一步,我們創(chuàng)建一個index.vue用作整個系統(tǒng)的主界面,然后把AdminLTE的index文件中的html復(fù)制到index.vue的template中。在沒有任何設(shè)置的情況想效果是這樣的。

好吧,辣眼睛。之所以這樣是因為我們沒有在頁面中導(dǎo)入各種css文件。

第二步,導(dǎo)入bootstrap的css文件。如果你是要Vue-cli創(chuàng)建的項目,那么項目中應(yīng)該已經(jīng)包含了bootstrap(在node_modules文件夾中)。接下來只要在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三個文件夾。把這三個文件夾復(fù)制到我們Vue項目的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)容都沒有顯示出來。原因是AdminLTE是基于bootstrap的,而bootstrap又是需要jquery的。此時我們只引入了css文件,而還沒引入所需的js文件。但是此時引入js文件會因為沒有jquery而導(dǎo)致引入的文件無法起作用。所以先解決Vue中使用jquery的問題。首先需要通過npm下載jquery到項目中(這里最好和AdminLTE中使用的jquery版本一致,我這里是2.2.3)。打開shell導(dǎo)航到我們項目所在的文件夾使用npm install來安裝jquery。

 

安裝好之后應(yīng)該能在項目的node_modules文件夾中找到j(luò)query文件夾,并且package.json中也記錄了項目引用的jquery版本。

 

接下來要修改項目的webpack配置文件。文件位于項目的build文件夾下,文件名是webpack.base.conf.js。需要在這個文件中新增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'

引入之后再看一下效果

總算看起來好一些了,但是我們發(fā)現(xiàn)圖標都沒有顯示出來,這是因為AdminLTE還使用了font-awesome。我們還需要再使用npm在項目中安裝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)入后效果

還差一點完成了,我們還要處理一下Vue路由,使得我們在點擊左側(cè)導(dǎo)航時,需要顯示的內(nèi)容會出現(xiàn)在圖中紅框區(qū)域內(nèi)。對應(yīng)設(shè)備目錄管理我們新建一個catalog.vue文件,先簡單的包含一行內(nèi)容即可。

<template>
  <h1>catalog</h1>
</template>

在main.js中引入catalog并新增一條路由規(guī)則。注意這里我們使用了vue-router的嵌套路由,因為我們需要catalog.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>

點擊設(shè)備目錄管理,catalog.vue的內(nèi)容就會出現(xiàn)在紅色框區(qū)域內(nèi)了

最后一步,我們需要一個退出功能,上一篇中我們把認證憑證放在了localStorage中,那么在退出時我們就需要刪除localStorage中的信息,并且返回到登錄頁。我們在退出按鈕上綁定一個logout方法實現(xiàn)這個功能。

<!-- 綁定方法 -->
<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>

全部搞定,最后還有一個奇怪的問題。在第一次登錄后頁面不能完整顯示,需要刷新一次。不過如果手動制定紅色區(qū)域的高度則不會出現(xiàn),我搞了半天也不知問題出在哪里,如果有哪位老師知道的話請指點我一下,謝謝。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論