How to use Vue to integrate AdminLTE template-JS Tutorial-php.cn

This time I will show you how to use Vue to integrate the AdminLTE template, and what are the precautions for using Vue to integrate the AdminLTE template. The following is a practical case, let's take a look.

The login verification and jump issues were solved last time, but there was a bug. In Vue's main.js, Vue-router's routing hook is used to determine whether protected resources can be accessed. The problem lies here. Fix the last bug first.

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

Copy after login

There is a problem in the code, that is, if you directly access /login without a token, an infinite loop will occur and cause overflow. The modified code is as follows

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

Copy after login

Okay, let’s get to the point. Let’s talk about AdminLTE first. This is a back-end management template based on bootstrap. It is really a savior for people like me who are terrible at layout and design but need one person to handle everything. Let’s see how it works first.

You can see that the effect is very good. It also contains various jquery plug-ins, such as map, fullcalendar, datapicker, charts, etc. But here we mainly use the side navigation and header styles.

In the first step, we create an index.vue to be used as the main interface of the entire system, and then copy the html in the AdminLTE index file to the template of index.vue. This is what it looks like without any settings.

Okay, it’s eye-catching. The reason for this is because we did not import various css files into the page.

The second step is to import the bootstrap css file. If you are creating a project with Vue-cli, bootstrap should already be included in the project (in the node_modules folder). Next, just introduce it in main.js.

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import VueResource from &#39;vue-resource&#39;
import store from &#39;./store/store&#39;
import &#39;bootstrap/dist/css/bootstrap.css&#39;

Copy after login

The effect after the introduction is like this

It’s a little bit normal. Next we need to introduce the AdminLTE related css files. If you have AdminLTE The files should be found in the css, img, and js folders in dist. Copy these three folders to the assets of our Vue project. The introduced methods are still added in main.js. '

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import VueResource from &#39;vue-resource&#39;
import store from &#39;./store/store&#39;
import &#39;bootstrap/dist/css/bootstrap.css&#39;
//AdminLTE
import './assets/css/skins/_all-skins.min.css'
import './assets/css/AdminLTE.min.css'

Copy after login

The effect after introduction

The head seems to be normal, but the content of the body is not displayed. The reason is that AdminLTE is based on bootstrap, and bootstrap requires jquery. At this point we have only introduced the css file, but not the required js files. However, importing js files at this time will cause the imported files to not work because there is no jquery. So first solve the problem of using jquery in Vue. First, you need to download jquery into the project through npm (it is best to be consistent with the jquery version used in AdminLTE, here it is 2.2.3). Open a shell and navigate to the folder where our project is located and use npm install to install jquery.

After installation, you should be able to find the jquery folder in the node_modules folder of the project, and the jquery version referenced by the project is also recorded in package.json.

The next step is to modify the project’s webpack

configuration file. The file is located in the build folder of the project, and the file name is webpack.base.conf.js. Two new configurations need to be added to this file.

After introducing jquery, we can continue to introduce the js files of bootstrap and AdminLTE in main.js.

import Vue from &#39;vue&#39;
import VueRouter from &#39;vue-router&#39;
import VueResource from &#39;vue-resource&#39;
import store from &#39;./store/store&#39;
//bootstrap
import &#39;bootstrap/dist/css/bootstrap.css&#39;
import &#39;bootstrap/dist/js/bootstrap.min.js&#39;
//AdminLTE
import &#39;./assets/css/skins/_all-skins.min.css&#39;
import &#39;./assets/css/AdminLTE.min.css&#39;
import &#39;./assets/js/app.min.js&#39;

Copy after login

Let’s take a look at the effect after the introduction

It finally looks better, but we found that the icons are not displayed. This is because AdminLTE also uses font-awesome. We also need to use npm to install font-awesome in the project, and then import the css file of font-awesome in main.js (this time we only need to install it, and there is no need to modify the webpack configuration file).

//bootstrap
import &#39;bootstrap/dist/css/bootstrap.css&#39;
import &#39;bootstrap/dist/js/bootstrap.min.js&#39;
//AdminLTE
import &#39;./assets/css/skins/_all-skins.min.css&#39;
import &#39;./assets/css/AdminLTE.min.css&#39;
import &#39;./assets/js/app.min.js&#39;
//font-awesome
import &#39;font-awesome/css/font-awesome.min.css&#39;

Copy after login

导入后效果

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

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

Copy after login

在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
   }
  ]
 },
]

Copy after login

在index.vue中创建导航和路由出口（即catalog.vue要被放置的红色区域）

<!-- 路由导航 -->
<router-link to="/deviceCatalog">
 <i class="fa fa-cubes"></i> 
 <span class="ch">设备目录管理</span>
</router-link>
<!-- 路由出口 -->
<p class="content-wrapper" style="border-style:solid; border-color:red">
 <!-- Main content -->
 <router-view style="margin-top:0px; padding:2px"></router-view>
 <!-- /.content -->
</p>

Copy after login

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

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

<!-- 绑定方法 -->
<p class="pull-right">
 <button v-on:click="logOut" class="btn btn-primary btn-flat ch">退出</button>
</p>
<!-- logout方法 -->
<script>
 export default {
 // name: 'app',
  data() {
   return {
    displayName: localStorage.userDisplayName,
   }
  },
  methods: {
    logOut: function(){
     localStorage.clear();
     this.$router.push('login')
    }
   }
 }
</script>

Copy after login