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

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

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

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

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

第二步,导入bootstrap的css文件。如果你是要Vue-cli创建的项目,那么项目中应该已经包含了bootstrap(在node_modules文件夹中)。接下来只要在main.js中引入就可以了。

importVuefrom'vue'importVueRouterfrom'vue-router'importVueResourcefrom'vue-resource'importstorefrom'./store/store'import'bootstrap/dist/css/bootstrap.css'

引入后的效果是这样的

稍微正常了一些,下一步我们需要引入AdminLTE相关的css文件,如果你有AdminLTE的文件应该能在dist中找到css、img、js三个文件夹。把这三个文件夹复制到我们Vue项目的assets中吧。引入的方法还是在main.js中添加。'

importVuefrom'vue'importVueRouterfrom'vue-router'importVueResourcefrom'vue-resource'importstorefrom'./store/store'import'bootstrap/dist/css/bootstrap.css'//AdminLTEimport'./assets/css/skins/_all-skins.min.css'import'./assets/css/AdminLTE.min.css'

引入后的效果

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

安装好之后应该能在项目的node_modules文件夹中找到jquery文件夹,并且package.json中也记录了项目引用的jquery版本。

接下来要修改项目的webpack配置文件。文件位于项目的build文件夹下,文件名是webpack.base.conf.js。需要在这个文件中新增2处配置。

引入了jquery之后,我们就可以在main.js中继续引入bootstrap和AdminLTE的js文件了。

importVuefrom'vue'importVueRouterfrom'vue-router'importVueResourcefrom'vue-resource'importstorefrom'./store/store'//bootstrapimport'bootstrap/dist/css/bootstrap.css'import'bootstrap/dist/js/bootstrap.min.js'//AdminLTEimport'./assets/css/skins/_all-skins.min.css'import'./assets/css/AdminLTE.min.css'import'./assets/js/app.min.js'

引入之后再看一下效果

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

//bootstrapimport'bootstrap/dist/css/bootstrap.css'import'bootstrap/dist/js/bootstrap.min.js'//AdminLTEimport'./assets/css/skins/_all-skins.min.css'import'./assets/css/AdminLTE.min.css'import'./assets/js/app.min.js'//font-awesomeimport'font-awesome/css/font-awesome.min.css'

导入后效果

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

<template><h2>catalog</h2></template>

在main.js中引入catalog并新增一条路由规则。注意这里我们使用了vue-router的嵌套路由,因为我们需要catalog.vue的内容嵌套在index.vue中显示。

//compinentsimportAppfrom'./App'importLoginfrom'./components/login'importIndexfrom'./components/index'importDeviceCatalogfrom'./components/deviceCatalog'Vue.use(VueRouter)Vue.use(VueResource)Vue.http.options.emulateJSON=true;constroutes=[{path:'/login',component:Login},{path:'/index',component:Index,children:[{path:'/deviceCatalog',component:DeviceCatalog}]},]

在index.vue中创建导航和路由出口(即catalog.vue要被放置的红**域)

<!--路由导航--><router-linkto="/deviceCatalog"><iclass="fafa-cubes"></i><spanclass="ch">设备目录管理</span></router-link><!--路由出口--><pclass="content-wrapper"><!--Maincontent--><router-view></router-view><!--/.content--></p>

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

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

<!--绑定方法--><pclass="pull-right"><buttonv-on:click="logOut"class="btnbtn-primarybtn-flatch">退出</button></p><!--logout方法--><script>exportdefault{//name:'app',data(){return{displayName:localStorage.userDisplayName,}},methods:{logOut:function(){localStorage.clear();this.$router.push('login')}}}</script>

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,Vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML、CSS、JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。