Vue を使用して AdminLTE テンプレートを統合する方法

今回は、Vue を使用して AdminLTE テンプレートを統合する方法と、Vue を使用して AdminLTE テンプレートを統合する際の注意点について説明します。以下は実際的なケースです。

前回ロ​​グイン認証とジャンプの問題は解決しましたが、バグがありました。 Vue の main.js では、保護されたリソースにアクセスできるかどうかを判断するために Vue-router のルーティング フックが使用されます。最初に最後のバグを修正します。

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

コードに問題があります。つまり、トークンなしで /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(&#39;/login&#39;)
 }
})

さて、本題に入ります。まず AdminLTE について説明します。これはブートストラップをベースにしたバックエンド管理テンプレートです。レイアウトやデザインが苦手で、すべてを 1 人で処理する必要がある人にとっては本当に救世主です。まずは仕組みを見てみましょう。

効果が大きいことがわかります。マップ、フルカレンダー、データピッカー、チャートなどのさまざまな jquery プラグインも含まれています。ただし、ここでは主にサイド ナビゲーションとヘッダー スタイルを使用します。

最初のステップでは、システム全体のメインインターフェイスとして使用するindex.vueを作成し、AdminLTEのインデックスファイル内のhtmlをindex.vueのテンプレートにコピーします。何も設定しないとこんな感じです。

まあ、迷惑です。その理由は、さまざまな CSS ファイルをページにインポートしていないためです。

2 番目のステップは、ブートストラップ CSS ファイルをインポートすることです。 Vue-cli を使用してプロジェクトを作成している場合は、ブートストラップがすでにプロジェクト (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 関連の css ファイルを導入する必要があります。AdminLTE ファイルがある場合は、css、img、および を見つけることができるはずです。 jsをdistフォルダーに入れます。これら 3 つのフォルダーを Vue プロジェクトのアセットにコピーします。紹介したメソッドは引き続き 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'

導入後の効果

頭は正常に見えますが、体の中身が表示されません。その理由は、AdminLTE がブートストラップに基づいており、ブートストラップには jquery が必要であるためです。この時点では css ファイルのみを導入しましたが、必要な js ファイルは導入していません。ただし、この時点では jquery がないため、インポートされた js ファイルは機能しません。したがって、まず Vue で jquery を使用する際の問題を解決します。まず、npm を介して jquery をプロジェクトにダウンロードする必要があります (AdminLTE で使用される jquery のバージョンと一致することが最善です。ここでは 2.2.3 です)。シェルを開いてプロジェクトが存在するフォルダーに移動し、npm install を使用して jquery をインストールします。

インストール後、プロジェクトのnode_modulesフォルダーにjqueryフォルダーが見つかるはずです。プロジェクトによって参照されるjqueryのバージョンもpackage.jsonに記録されます。

次のステップは、プロジェクトの webpack設定ファイルを変更することです。このファイルはプロジェクトのビルド フォルダーにあり、ファイル名は webpack.base.conf.js です。 2 つの新しい構成をこのファイルに追加する必要があります。

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'

導入後の効果を見てみましょう

ようやく見た目は良くなりましたが、これはAdminLTEもfont-awesomeを使用しているためであることが分かりました。また、npm を使用して font-awesome をプロジェクトにインストールし、font-awesome の CSS ファイルを main.js にインポートする必要があります (今回はインストールするだけで済み、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'

导入后效果

还差一点完成了，我们还要处理一下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>
<!-- 路由出口 -->
<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>

点击设备目录管理，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>

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样用JS做出井字棋游戏

怎样使用vue2.0实现导航守卫

以上がVue を使用して AdminLTE テンプレートを統合する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。