未加星标

Vue整合AdminLTE模板的方法

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

上一次搞定了登录验证和跳转的问题,不过存在一处bug。在Vue的main.js中,使用了Vue-router的路由钩子来判断是否可以访问受保护的资源,问题就出在这里,先修复上次的bug。

/*
全局路由钩子
访问资源时需要验证localStorage中是否存在token
以及token是否过期
验证成功可以继续跳转
失败返回登录页重新登录
*/
router.beforeEach((to, from, next) => {
if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
next()
}
else{
next('/login')
}
})

代码中有一个问题,就是在没有token时如果直接访问/login会产生死循环导致溢出。修改后代码如下

/*
全局路由钩子
访问资源时需要验证localStorage中是否存在token
以及token是否过期
验证成功可以继续跳转
失败返回登录页重新登录
*/
router.beforeEach((to, from, next) => {
if(to.path == '/login'){
next()
}
if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
next()
}
else{
next('/login')
}
})

好了,进入正题。先说AdminLTE,这是一个基于bootstrap的后台管理模板,对于我这种排版、设计很渣但又需要一个人搞定所有事的来说确实是个救星。先看看它的效果。

Vue整合AdminLTE模板的方法

可以看到效果非常棒。其本身还包含了各种各样的jquery插件,map、fullcalendar、datapicker、charts等等。不过这里我们主要用到侧边的导航和头部样式。

第一步,我们创建一个index.vue用作整个系统的主界面,然后把AdminLTE的index文件中的html复制到index.vue的template中。在没有任何设置的情况想效果是这样的。

Vue整合AdminLTE模板的方法

好吧,辣眼睛。之所以这样是因为我们没有在页面中导入各种css文件。

第二步,导入bootstrap的css文件。如果你是要Vue-cli创建的项目,那么项目中应该已经包含了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'

引入后的效果是这样的

Vue整合AdminLTE模板的方法

稍微正常了一些,下一步我们需要引入AdminLTE相关的css文件,如果你有AdminLTE的文件应该能在dist中找到css、img、js三个文件夹。把这三个文件夹复制到我们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'

引入后的效果

Vue整合AdminLTE模板的方法

头部似乎正常了,但是body的内容都没有显示出来。原因是AdminLTE是基于bootstrap的,而bootstrap又是需要jquery的。此时我们只引入了css文件,而还没引入所需的js文件。但是此时引入js文件会因为没有jquery而导致引入的文件无法起作用。所以先解决Vue中使用jquery的问题。首先需要通过npm下载jquery到项目中(这里最好和AdminLTE中使用的jquery版本一致,我这里是2.2.3)。打开shell导航到我们项目所在的文件夹使用npm install来安装jquery。

Vue整合AdminLTE模板的方法
 
安装好之后应该能在项目的node_modules文件夹中找到jquery文件夹,并且package.json中也记录了项目引用的jquery版本。
Vue整合AdminLTE模板的方法
 
接下来要修改项目的webpack配置文件。文件位于项目的build文件夹下,文件名是webpack.base.conf.js。需要在这个文件中新增2处配置。
Vue整合AdminLTE模板的方法

引入了jquery之后,我们就可以在main.js中继续引入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'

引入之后再看一下效果

Vue整合AdminLTE模板的方法

总算看起来好一些了,但是我们发现图标都没有显示出来,这是因为AdminLTE还使用了font-awesome。我们还需要再使用npm在项目中安装font-awesome,之后在main.js中导入font-awesome的css文件(这次只需要安装,不需要修改webpack的配置文件了)。

Vue整合AdminLTE模板的方法
//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'

导入后效果

Vue整合AdminLTE模板的方法

还差一点完成了,我们还要处理一下Vue路由,使得我们在点击左侧导航时,需要显示的内容会出现在图中红框区域内。对应设备目录管理我们新建一个catalog.vue文件,先简单的包含一行内容即可。

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

在main.js中引入catalog并新增一条路由规则。注意这里我们使用了vue-router的嵌套路由,因为我们需要catalog.vue的内容嵌套在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中创建导航和路由出口(即catalog.vue要被放置的红色区域)

<!-- 路由导航 -->
<router-link to="/deviceCatalog">
<i class="fa fa-cubes"></i>
<span class="ch">设备目录管理</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>

点击设备目录管理,catalog.vue的内容就会出现在红色框区域内了

Vue整合AdminLTE模板的方法

最后一步,我们需要一个退出功能,上一篇中我们把认证凭证放在了localStorage中,那么在退出时我们就需要删除localStorage中的信息,并且返回到登录页。我们在退出按钮上绑定一个logout方法实现这个功能。

<!-- 绑定方法 -->
<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>
Vue整合AdminLTE模板的方法

全部搞定,最后还有一个奇怪的问题。在第一次登录后页面不能完整显示,需要刷新一次。不过如果手动制定红色区域的高度则不会出现,我搞了半天也不知问题出在哪里,如果有哪位老师知道的话请指点我一下,谢谢。

Vue整合AdminLTE模板的方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:Vue中的字符串模板的使用在vscode里使用.vue代码模板的方法新版vue-cli模板下本地开发环境使用node服务器跨域的方法快速解决vue-cli不能初始化webpack模板的问题vue slot 在子组件中显示父组件传递的模板vue-cli webpack模板项目搭建及打包时路径问题的解决方法Vue2 模板template的四种写法总结vue 使用Jade模板写html,stylus写css的方法ejsExcel模板在Vue.js项目中的实际运用

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 服务器Excel删除出口
tags: css,lt,gt,import,vue,js,bootstrap,Vue,router,AdminLTE,min,localStorage,jquery,assets
分页:12
转载请注明
本文标题:Vue整合AdminLTE模板的方法
本站链接:https://www.codesec.net/view/576823.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(62)