正文

手把手教你实现java权限管理系统前端篇（十五）：嵌套外部网页

朝雨忆轻尘  2022-04-13  479

关键词：

嵌套外部网页

在有些时候，我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的SQL监控页面，接口文档页面等。

这个时候就要求我们的导航菜单能够解析嵌套网页的URL，并根据URL路由到相应的嵌套组件。接下来我们就讲解具体实现方案。

实现原理

1. 给菜单URL添加嵌套网页前缀，如果是服务端网页，除内部URL外，以iframe:前缀开头，外部网页直接以http[s]完整路径开头。

2. 路由导航守卫在动态加载路由时，检测到如果是外部嵌套网页，则绑定IFrame嵌套组件，最后用IFrame来渲染嵌套页面。

3. 菜单点击跳转的时候，根据路由类型生成不同的路由路径，载入特定的页面内容渲染到步骤二绑定的特定组件上。

代码实现

前面的原理听起来有点笼统，我们来看看具体的实现过程。

1. 确定菜单URL

如SQL监控页面，其实显示的是服务端Druid提供的现有页面。

访问地址是 : http://localhost:8088/druid/login.html 即服务端地址 + xxx格式。

效果如下图所示，输入服务端配置的账号密码就可查看了，这里是用户：admin, 密码：admin。

登录之后，可以看到各种数据库相关的监控记录，是数据库监控和调优的利器。

我们在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/
版权所有，欢迎转载，转载请注明原文作者及出处。

手把手教你实现java权限管理系统前端篇（十四）：菜单功能实现

菜单功能实现菜单接口封装菜单管理是一个对菜单树结构的增删改查操作。提供一个菜单查询接口，查询整颗菜单树形结构。http/modules/menu.js添加 findMenuTree接口。importaxiosfrom‘../axios‘/**菜单管理模块*///保存exportconstsave=(data)... 查看详情

手把手教你实现java权限管理系统前端篇（十六）：系统备份还原

系统备份还原在很多时候，我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。后台接口准备系统备份还原是对数据库的备份还原，所以必须有后台接口的支持，我们准备好了接口，... 查看详情

手把手教你实现java权限管理系统后端篇（十三）：系统备份还原

系统备份还原在很多时候，我们需要系统数据进行备份还原。我们这里就使用MySql的备份还原命令实现系统备份还原的功能。新建工程新建一个maven项目，并添加相关依赖，可以用Springboot脚手架生成。新建kitty-bakcup工程，这是一... 查看详情

手把手教你实现java权限管理系统后端篇（十六）：容器部署项目

容器部署项目这一章我们引入docker，采用docker容器的方式部署我们的项目。首先需要有一个linux环境，并且安装java和maven以及docker环境，这个教程多如牛毛，不再赘述。这里以kitty-monitor为例。添加配置在 pom.xml的properties ... 查看详情

手把手教你实现java权限管理系统后端篇：解决跨域问题

什么是跨域？同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。同源策略是浏览器安全的基石。如果一个请求地址里面的协议、域名和端口号都相同，就属于同源。举个栗子... 查看详情

手把手教你实现一个抽奖系统（java版）(代码片段)

点击关注公众号，实用技术文章及时了解来源：blog.csdn.net/wang258533488/article/details/789013031概述项目开发中经常会有抽奖这样的营销活动的需求，例如：积分大转盘、刮刮乐、老虎机等等多种形式，其实后台的实... 查看详情

手把手教你在java后端使用bsdiff实现增量更新(代码片段)

之前写过一篇博客是：手把手教你在Android中使用bsdiff实现文件增量更新。由于AndroidStudio自带NDK的环境，所以实现JNI是比较简单的。但是在博客中也说到了，文件差分的功能肯定是要在服务端进行的。而服务端运行的... 查看详情

手把手教你在java后端使用bsdiff实现增量更新(代码片段)

手把手教你数据恢复编程基础知识篇

好了。接上一篇，本篇，我们将详细讲解NTFS文件系统的一些重要的数据结构，闲话少叙，咱们开讲。NTFS文件系统一、NTFS简介NTFS（NewTechnologyFileSystem）文件系统是微软公司同时和WindowsNT（NewTechnology࿰... 查看详情

手把手教你用java实现一套简单的鉴权服务（springboot，ssm）（万字长文）(代码片段)

...、利用servlet+jdbc实现简单的用户登录程序1.明确思路2.手把手教你实现一个简单的web登录程序①创建web项目②编写简单的登录页面③编写servlet程序④封装jdbc操作，编写简单的数据库连接池⑤操作数据库⑥配置web.xml⑦idea运... 查看详情

小白都能看得懂的教程一本教你如何在前端实现富文本编辑器(代码片段)

...f08;IDEA/PtChram/CLion）免费正版小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY1)小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY2)小白都能看懂的实战教程手把手教你PythonWeb全栈开发(DAY3)小白都能看懂的实战教程... 查看详情

手把手教你从零写一个简单的vue(代码片段)

本系列是一个教程，下面贴下目录~1.手把手教你从零写一个简单的VUE2.手把手教你从零写一个简单的VUE--模板篇今天给大家带来的是实现一个简单的类似VUE一样的前端框架，VUE框架现在应该算是非常主流的前端数据驱动框架，今... 查看详情

手把手教你从零写一个简单的vue(代码片段)

手把手教你用java实现syslog消息的收发，学不会你打我喽！

大家好，我是道哥，专注于后端java开发，喜欢写作和分享。如果觉得文章对你有用，那就点个赞呗！如果能转发那是对道哥最大的支持！syslog的定义见文知义，syslog，从英文名字上可以看出是指系统日志。以下内容摘自百度百... 查看详情

手把手教你用redis实现一个简单的mq消息队列（java）(代码片段)

众所周知，消息队列是应用系统中重要的组件，主要解决应用解耦，异步消息，流量削锋等问题，实现高性能，高可用，可伸缩和最终一致性架构。目前使用较多的消息队列有ActiveMQ，RabbitMQ，ZeroMQ，Kafka，MetaMQ，RocketMQ.但是如果... 查看详情

手把手教你在vue3中自定义指令(代码片段)

文章目录1.成果展示2.指令基础2.1两种作用域2.1.1局部指令2.1.2全局指令2.2七个钩子函数2.3四个参数2.4动态参数3.自定义权限指令TienChin项目前端是Vue3，前端有这样的一个需求：有一些前端页面上的按钮要根据用户的权限来... 查看详情

手把手教你在vue3中自定义指令(代码片段)

《手把手教你》系列基础篇（七十三）-java+selenium自动化测试-框架设计基础-testng实现启动不同浏览器（详解教程）(代码片段)

1.简介上一篇文章中，从TestNg的特点我们知道支持变量，那么我们这一篇就通过变量参数来启动不同的浏览器进行自动化测试。那么如何实现同时启动不同的浏览器对脚本进行测试，且听我娓娓道来。2.项目实战2.1创... 查看详情