手把手教你实现Java权限管理系统 前端篇(十五):嵌套外部网页

嵌套外部网页

在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的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/
版权所有,欢迎转载,转载请注明原文作者及出处。

原文地址:https://www.cnblogs.com/xifengxiaoma/p/9680171.html

时间: 2024-10-13 00:45:29

手把手教你实现Java权限管理系统 前端篇(十五):嵌套外部网页的相关文章

手把手教你实现Java权限管理系统 前端篇(十四):菜单功能实现

菜单功能实现 菜单接口封装 菜单管理是一个对菜单树结构的增删改查操作. 提供一个菜单查询接口,查询整颗菜单树形结构. http/modules/menu.js 添加 findMenuTree 接口. import axios from '../axios' /* * 菜单管理模块 */ // 保存 export const save = (data) => { return axios({ url: '/menu/save', method: 'post', data }) } // 删除 ex

手把手教你实现Java权限管理系统 前端篇(十六):系统备份还原

系统备份还原 在很多时候,我们需要系统数据进行备份还原.我们这里就使用MySql的备份还原命令实现系统备份还原的功能. 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准备好了接口,相关内容可以查阅后台篇. backup:系统备份创建接口,会在服务端_backup目录下生成以时间戳相关的备份目录,目录下有MySQL的备份SQL. delete:系统备份删除接口,传入页面查询得到的备份名称作为参数,删除服务端备份记录. findRecord:系统备份查询接口,查询所有

手把手教你实现Java权限管理系统 后端篇(十二):解决跨域问题

什么是跨域? 同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源. 同源策略是浏览器安全的基石. 如果一个请求地址里面的协议.域名和端口号都相同,就属于同源. 举个栗子 判断下面URL是否和 http://www.a.com/a/a.html 同源 http://www.a.com/b/b.html 同源 http://www.b.com/a/a.html 不同源,域名不相同 https://www.a.com/b/b.html 不同源,协议不相同 htt

Java权限管理系统源代码下载

原文:Java权限管理系统源代码下载 源代码下载:http://www.zuidaima.com/share/1550463438572544.htm 项目截图 web.xml中修改两个文件的路径,否则启动会报错 <context-param> <param-name>log</param-name> <param-value>D:\zuidaima_workspace\zuidaima.com\config\log4j.xml</param-valu

java权限系统实现篇

以ssh框架来解释权限系统 首先在struts.xml里面配置2个拦截器栈, 第一个是登陆拦截器栈,没有登陆的用户就会被拦截,提示其登陆 <!-- begin intercepter --> <package name="haslogin" namespace="/" extends="json-default"> <interceptors> <interceptor name="loginI

手把手教你搭建LyncServer2013之发布边缘服务器(十)

首先,我进入我的硬件防火墙,发布Lync边缘的5061,444和442端口,所谓的发布边缘防火墙,其实就是做三个端口的映射,即NAT,我这里用的是思科的ASA防火墙,命令如下 写入到启动配置文件后,用show running-config命令查看命令是否生效,可以看到,端口已经映射好 我在万网注册了域名iSusan.cn,进入产品的域名解析页面,加入如下A记录,图中红色抹掉的是公网IP地址,关于A记录的添加可以参考万网中的帮助文件 因上一篇中我们已经做了Lync反向代理的发布,关于反向代理的作用

JAVA之旅(二十五)——文件复制,字符流的缓冲区,BufferedWriter,BufferedReader,通过缓冲区复制文件,readLine工作原理,自定义readLine

JAVA之旅(二十五)--文件复制,字符流的缓冲区,BufferedWriter,BufferedReader,通过缓冲区复制文件,readLine工作原理,自定义readLine 我们继续IO上个篇幅讲 一.文本复制 读写都说了,我们来看下其他的操作,我们首先来看复制 复制原理:其实就是将C盘下的文件数据存储到D盘的一个文件中 实现的步骤: 1.在D盘创建一个文件,用于存储文件中的数据 2.定义读取流和文件关联 3.通过不断的读写完成数据的存储 关闭资源 package com.lgl.hel

手把手教你用Java制作原生态的报表

今天下午没事干.主要是论文没有什么进展,唉!读研苦逼啊.突然想玩玩其他的,记得上次用JSP和Servlet是几个月前的事了.于是就任性的玩一回报表. 首先我是默认你不是菜鸟了,而且用过JSP和Servlet,会Java Web的基础知识,会使用Jdbc连接数据库.这些都是必要的知识,否则接下来的内容将没法讲解. 一.报表生成的关键要素 1.后台数据的抽取 2.数据项的逻辑运算 3.前台使用表格展示 二.使用流程图的形式展示3大关键要素 1.后台数据的抽取流程 我们来谈谈这个流程所需要的技术. 获

手把手教你搭建LyncServer2013之部署前端服务器(六)

点击"安装或更新Lync Server系统开始安装Lync前端 点击运行 完成"安装本地配置存储"后,开始安装Lync前端组件了,点击"安装或删除LyncServer组件"栏中的运行按钮 完成Lync组件的安装后,下面开始申请证书了,选定"默认证书",点击右边的请求 默认下一步 保持默认,下一步 保持默认,下一步 默认,下一步 输入Lync前端服务器LyncFE01服务器申请证书的友好名称,并勾选"将证书的私钥标记为可导出&q