Vue + Element UI 實現權限管理系統 前端篇(十五):嵌套外部網頁

嵌套外部網頁

在有些時候,咱們須要在咱們的內容欄主區域顯示外部網頁。如查看服務端提供的SQL監控頁面,接口文檔頁面等。css

這個時候就要求咱們的導航菜單可以解析嵌套網頁的URL,並根據URL路由到相應的嵌套組件。接下來咱們就講解具體實現方案。html

實現原理

1. 給菜單URL添加嵌套網頁前綴,若是是服務端網頁,除內部URL外,以iframe:前綴開頭,外部網頁直接以http[s]完整路徑開頭。前端

2. 路由導航守衛在動態加載路由時,檢測到若是是外部嵌套網頁,則綁定IFrame嵌套組件,最後用IFrame來渲染嵌套頁面。vue

3. 菜單點擊跳轉的時候,根據路由類型生成不一樣的路由路徑,載入特定的頁面內容渲染到步驟二綁定的特定組件上。git

代碼實現

前面的原理聽起來有點籠統,咱們來看看具體的實現過程。數據庫

1. 肯定菜單URL

如SQL監控頁面,其實顯示的是服務端Druid提供的現有頁面。後端

訪問地址是 : http://localhost:8088/druid/login.html 即服務端地址 + xxx格式。測試

效果以下圖所示,輸入服務端配置的帳號密碼就可查看了,這裏是用戶:admin, 密碼:admin。ui

 登陸以後,能夠看到各類數據庫相關的監控記錄,是數據庫監控和調優的利器。this

咱們在SQL監控的菜單URL上去掉服務端地址,加上iframe:前綴。

屆時路由解析時在根據iframe:前綴綁定到IFrame嵌套頁面組件。

而後在點擊菜單跳轉時跳轉到服務端地址+xxx的具體訪問地址。

2. 綁定嵌套組件

在導航守衛動態加載路由的時候,解析URL,若是是嵌套頁面,則綁定到IFrame組件。

router/index.js

 

utils/iframe.js

/**
 * 嵌套頁面IFrame模塊
 */

/**
 * 嵌套頁面URL地址
 * @param {*} url
 */
export function getIFrameUrl (url) {
  let iframeUrl = ''
  if(/^iframe:.*/.test(url)) {
    iframeUrl = url.replace('iframe:', '')
  } else if(/^http[s]?:\/\/.*/.test(url)) {
    iframeUrl = url.replace('http://', '')
    iframeUrl = iframeUrl.replace('https://', '')
  }
  return iframeUrl
}

而且在每次路由時,把路由路徑保存到store,若是是IFrame嵌套頁面,則IFrame會在渲染時到store讀取iframeUrl以肯定渲染的內容。

store/modules/iframe.js

export default {
    state: {
        iframeUrl: []   // 嵌套頁面路由路徑
    },
    getters: {
    },
    mutations: {
        setIFrameUrl(state, iframeUrl){  // 設置iframeUrl
            state.iframeUrl = iframeUrl
        }
    },
    actions: {
    }
}

IFrame組件在渲染時,讀取sotre的iframeUrl以加載要渲染的內容(經過設置src)。

views/IFrame/IFrame.vue

<template>
  <div class="iframe-container">
    <iframe :src="src" scrolling="auto" frameborder="0" class="frame">
    </iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: ''
    }
  },
  methods: {
    // 獲取路徑
    resetSrc: function (url) {
      this.src = this.global.baseUrl + url
    }
  },
  mounted(){
    this.resetSrc(this.$store.state.iframe.iframeUrl)
  },
  watch: {
    $route: {
      handler: function (val, oldVal) {
        // 若是是跳轉到嵌套頁面,切換iframe的url
        this.resetSrc(val.path)
      }
    }
  }
}
</script>

<style lang="scss">
.iframe-container {
  position: absolute;
  top: 60px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  margin-top: -29px;
  .frame {
    position: relative;
    top: 0px;
    width: 100%;
    height: 100%;
  }
}
</style>

 3.菜單路由跳轉

 在菜單路由跳轉的時候,判斷是不是iframe路由,若是是則處理成ifame須要的路由進行跳轉。

測試效果

好了,嵌套網頁的大體實現過程就是這樣了,下面咱們來看看最終效果。 

SQL監控頁面效果

接口文檔頁面效果

 

 

源碼下載

後端:https://gitee.com/liuge1988/kitty

前端:https://gitee.com/liuge1988/kitty-ui.git


做者:朝雨憶輕塵
出處:https://www.cnblogs.com/xifengxiaoma/ 版權全部,歡迎轉載,轉載請註明原文做者及出處。

相關文章
相關標籤/搜索