Vue整合AdminLTE模板的方法
|
搞定了登录验证和跳转的问题，不过存在一处bug。在Vue的main.js中，使用了Vue-router的路由钩子来判断是否可以访问受保护的资源，问题就出在这里，先修复上次的bug。 {
if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
next()
}
else{
next('/login')
}
})
代码中有一个问题，就是在没有token时如果直接访问/login会产生死循环导致溢出。修改后代码如下 {
if(to.path == '/login'){
next()
}
if(localStorage.token && new Date().getTime() < localStorage.tokenExpired){
next()
}
else{
next('/login')
}
})
好了，进入正题。先说AdminLTE，这是一个基于bootstrap的后台管理模板，对于我这种排版、设计很渣但又需要一个人搞定所有事的来说确实是个救星。先看看它的效果。
好吧，辣眼睛。之所以这样是因为我们没有在页面中导入各种css文件。 第二步，导入bootstrap的css文件。如果你是要Vue-cli创建的项目，那么项目中应该已经包含了bootstrap（在node_modules文件夹中）。接下来只要在main.js中引入就可以了。 引入后的效果是这样的
稍微正常了一些，下一步我们需要引入AdminLTE相关的css文件，如果你有AdminLTE的文件应该能在dist中找到css、img、js三个文件夹。把这三个文件夹复制到我们Vue项目的assets中吧。引入的方法还是在main.js中添加。' 引入后的效果
引入了jquery之后，我们就可以在main.js中继续引入bootstrap和AdminLTE的js文件了。 引入之后再看一下效果
总算看起来好一些了，但是我们发现图标都没有显示出来，这是因为AdminLTE还使用了font-awesome。我们还需要再使用npm在项目中安装font-awesome，之后在main.js中导入font-awesome的css文件（这次只需要安装，不需要修改webpack的配置文件了）。
导入后效果
catalog
Vue.use(VueRouter)
Vue.use(VueResource) Vue.http.options.emulateJSON = true; const routes = [
最后一步，我们需要一个退出功能，上一篇中我们把认证凭证放在了localStorage中，那么在退出时我们就需要删除localStorage中的信息，并且返回到登录页。我们在退出按钮上绑定一个logout方法实现这个功能。
全部搞定，最后还有一个奇怪的问题。在第一次登录后页面不能完整显示，需要刷新一次。不过如果手动制定红色区域的高度则不会出现，我搞了半天也不知问题出在哪里，如果有哪位老师知道的话请指点我一下，谢谢。
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
