Vue + Element UI 前端篇(十五):嵌套外部网页

Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页 

嵌套外部网页

在有些时候,我们需要在我们的内容栏主区域显示外部网页。如查看服务端提供的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){  // 设置iframeUrlstate.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的urlthis.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监控页面效果

接口文档页面效果

源码下载

后端:kitty: 基于Spring Boot、Spring Cloud、Vue.js 、Element UI实现,采用前后端分离架构的权限管理系统,JAVA快速开发平台。

前端:kitty-ui: Kitty 前端,基于 Vue + Element 实现的权限管理系统。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/70090.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

让你的编程之路更加顺畅——推荐一款前端编程神器

引子&#xff1a;在当今的数字化时代&#xff0c;编程已经成为一种不可或缺的技能。而前端开发&#xff0c;作为整个应用程序的“门面”&#xff0c;更是需要开发人员具备优秀的网页设计和编程能力。今天&#xff0c;我要向大家推荐一款专门为前端开发者打造的APP&#xff0c;它…

指令系统(408)

一、拓展操作码指令格式 【2017 统考】某计算机按字节编址&#xff0c;指令字长固定且只有两种指令格式&#xff0c;其中三地址指令29条、二地址指令107条&#xff0c;每个地址字段6位&#xff0c;则指令字长至少应该是&#xff08; A&#xff09; A、24位 B、26位 …

Autosar诊断实战系列16-UDS19 06扩展数据配置及工程问题讨论

本文框架 前言1. 再聊19 06服务响应格式2. 扩展帧数据配置及工程问题讨论2.1 扩展帧数据配置2.1.1 添加扩展数据需要存储的内容2.1.2 DemExtendedDataRecordClass内容关联2.1.3 DemDTCAttributes关联扩展数据2.2 工程问题讨论2.2.1 没有故障情况下扩展数据如何回复?前言 在本…

C# 什么是继承和派生

C# 什么是继承和派生 在 C# 中&#xff0c;继承&#xff08;Inheritance&#xff09;是一种机制&#xff0c;它允许一个类&#xff08;子类&#xff09;从另一个类&#xff08;父类&#xff09;中继承属性和方法。这种关系使得子类可以重用父类的代码&#xff0c;同时可以在子…

微信小程序云开发-云函数发起https请求简易封装函数

一、前言 在日常的开发中&#xff0c;经常会遇到需要请求第三方API的情况&#xff0c;例如请求实名认证接口、IP转换地址接口等等。这些请求放在小程序前端的话&#xff0c;就需要把密钥放在客户端&#xff0c;在安全性上没这么高。 因此&#xff0c;一般是放在云函数端去访问…

Linux下的系统编程——进程间的通信(九)

一、进程间通信常用方式 IPC方式&#xff1a; Linux环境下&#xff0c;进程地址空间相互独立&#xff0c;每个进程各自有不同的用户地址空间。任何一个进程的全局变量在另一个进程中都看不到&#xff0c;所以进程和进程之间不能相互访问&#xff0c;要交换数据必须通过内核&am…

VIRTIO-BLK代码分析(4)VIRTIO设备中断的注入

VIRTIO设备中断包括vq中断和config中断。Vq中断用于通知Guest已完成数据的处理&#xff0c;虚拟机中可以完成IO请求。Vq中断的模拟是通过irqfd实现的&#xff0c;它将虚拟机中断与irqfd关联上&#xff08;KVM_SET_GSI_ROUTING和KVM_IRQFD&#xff09;&#xff0c;当虚拟机中访问…

绘制钻头芯厚变化图

import numpy as np import matplotlib.pyplot as plt posnp.array([0.05,0.5,0.97,3]) data_m1np.array([0.088,0.093,0.098,0.116]) data_m2data_m1-0.01 data_m3data_m1-0.02 fig plt.figure(figsize(5, 4)) plt.rcParams[xtick.direction] in # 将x周的刻度线方向设置向…

数据库 设计规范数据库设计样例

目录 5 数据库5.1 数据库命名规范5.2 数据库字段命名5.2.1 字段命名规范5.2.2 命名规范5.2.3 待优化命名示例5.2.4 字段类型规范5.2.5数据库中每个字段的规范描述 5.3表设计5.4 参考设计5.4.1 应用场景5.4.2 需求分析5.4.3 设计思路5.4.4 表结构设计5.4.5 缓存策略Q1 冗余设计和…

【HCIE】01.IGP高级特性

高级特性&#xff1a;一条命令解决一个问题 OSPF快速收敛机制 发生故障重新计算拓扑的过程叫做收敛&#xff0c;设备现在本身就是PRC算法和I-SPF算法 PRC&#xff08;针对叶子节点&#xff0c;叶子代表路由&#xff09; 不需要命令配置&#xff0c;就是ospf的特性&#xff…

RISC-V(2)——特权级及特权指令集

目录 1. 特权级 2. 控制和状态寄存器&#xff08;CSR&#xff09; 2.1 分类 2.2 分析 1. 特权级 一个 RISC-V 硬件线程&#xff08;hart&#xff09;是运行在某个特权级上的&#xff0c;这个特权级被编码到一个或者多个 CSR&#xff08;control and status register&a…

Java版企业电子招标采购系统源码Spring Cloud + Spring Boot +二次开发+ MybatisPlus + Redis

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看…

前端禁止别人打开控制台调试自己的代码

为了防止非法的调试和修改&#xff0c;同时限制别人使用python爬虫&#xff0c;盗取自己网站的数据&#xff0c;我们需要在写一段代码来防止非法入侵调试&#xff0c;增加网站的安全性 (() > {function block() {if (window.outerHeight - window.innerHeight > 200 || w…

ABAP FB05 清账函数:POSTING_INTERFACE_CLEARING

清账相关事物代码&#xff1a; FB05 相关函数&#xff1a;POSTING_INTERFACE_START POSTING_INTERFACE_CLEARING DATA: LT_BLNTAB TYPE STANDARD TABLE OF BLNTAB.DATA: LS_BLNTAB TYPE BLNTAB.DATA: LT_FTCLEAR TYPE STANDARD TABLE OF FTCLEAR.DATA: LS…

华纳云:linux服务器查看端口的办法

在Linux服务器上查看端口的状态和监听情况&#xff0c;您可以使用一些命令。以下是几种常用的方法&#xff1a; netstat命令&#xff1a; 使用netstat命令可以查看服务器上的端口情况。要查看所有活动连接和监听端口&#xff0c;可以运行以下命令&#xff1a; netstat -tuln …

Vue + Element UI 前端篇(八):管理应用状态

使用 Vuex 管理应用状态 1. 引入背景 像先前我们是有导航菜单栏收缩和展开功能的&#xff0c;但是因为组件封装的原因&#xff0c;隐藏按钮在头部组件&#xff0c;而导航菜单在导航菜单组件&#xff0c;这样就涉及到了组件收缩状态的共享问题。收缩展开按钮触发收缩状态的修改…

postgresql 安装教程

postgresql 安装教程 本文以window 15版本为教程 文章目录 postgresql 安装教程1.下载地址2.以管理员身份运行3.选择安装路径&#xff0c;点击Next4.选择组件&#xff08;默认都勾选&#xff09;&#xff0c;点击Next5.选择数据存储路径&#xff0c;点击Next6.设置超级用户的…

指针和字符数组笔试题及其解析(第三组)

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 第三组笔试题 char *p "abcdef";printf("%d\n", sizeof(p)); printf("%d\n", sizeof(p1)); printf("%d\n", sizeof(*p)); printf("%d\n", sizeof(p[0])); printf("%…

Android逆向学习(四)app修改smali函数跳过弹窗广告,等待广告,更新提醒

Android逆向学习&#xff08;四&#xff09;app修改smali函数跳过弹窗广告&#xff0c;等待广告&#xff0c;更新提醒 一、写在前面 这是吾爱破解课程的第三个练习&#xff0c;我在写这篇博客时遇到了vscode插件bug&#xff0c;已经想办法联系原作者了&#xff0c;希望能够尽…

Android WIFI工具类 特别兼容Android12

直接上代码&#xff1a; package com.realtop.commonutils.utils;import android.annotation.SuppressLint; import android.bluetooth.BluetoothDevice; import android.bluetooth.BluetoothManager; import android.bluetooth.BluetoothProfile; import android.content.Con…