嵌套外部网页

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

Vue + Element UI 实现权限管理系统 前端篇(十五):嵌套外部网页的更多相关文章

  1. Vue + Element UI 实现权限管理系统 前端篇(五):国际化实现

    国际化支持 1.安装依赖 执行以下命令,安装 i18n 依赖. yarn add vue-i18n $ yarn add vue-i18n yarn add v1.9.4 warning packag ...

  2. Vue + Element UI 实现权限管理系统 前端篇(十三):页面权限控制

    权限控制方案 既然是后台权限管理系统,当然少不了权限控制啦,至于权限控制,前端方面当然就是对页面资源的访问和操作控制啦. 前端资源权限主要又分为两个部分,即导航菜单的查看权限和页面增删改操作按钮的操作 ...

  3. Vue + Element UI 实现权限管理系统 前端篇(十一):第三方图标库

    使用第三方图标库 用过Elment的同鞋都知道,Element UI提供的字体图符少之又少,实在是不够用啊,幸好现在有不少丰富的第三方图标库可用,引入也不会很麻烦. Font Awesome Font ...

  4. Vue + Element UI 实现权限管理系统 前端篇(一):搭建开发环境

    技术基础 开发之前,请先熟悉下面的4个文档 vue.js2.0中文, 优秀的JS框架 vue-router, vue.js 配套路由 vuex,vue.js 应用状态管理库 Element,饿了么提供 ...

  5. Vue + Element UI 实现权限管理系统 前端篇(十六):系统备份还原

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

  6. Vue + Element UI 实现权限管理系统 前端篇(十二):用户管理模块

    用户管理模块 添加接口 在 http/moduls/user.js 中添加用户管理相关接口. import axios from '../axios' /* * 用户管理模块 */ // 保存 exp ...

  7. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  8. Vue + Element UI 实现权限管理系统 前端篇(八):管理应用状态

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

  9. Vue + Element UI 实现权限管理系统 前端篇(四):优化登录流程

    完善登录流程 1. 丰富登录界面 1.1 从 Element 指南中选择组件模板丰富登录界面,放置一个登录界面表单,包含账号密码输入框和登录重置按钮. <template> <el- ...

随机推荐

  1. Django model进阶

    Django-model进阶   QuerySet 可切片 使用Python 的切片语法来限制查询集记录的数目 .它等同于SQL 的LIMIT 和OFFSET 子句. >>> Ent ...

  2. 受欢迎的牛[HAOI2006]

    --BZOJ1051 Description 每一头牛的愿望就是变成一头最受欢迎的牛.现在有N头牛,给你M对整数(A,B),表示牛A认为牛B受欢迎. 这 ​ 种关系是具有传递性的,如果A认为B受欢迎, ...

  3. Debian 使用 Samba 服务为 Windows 客户端和 Linux 客户端提供文件服务

    1 目标 1.1 主机采用 Debian,为 Windows 和 Liunx 客户端提供文件存取服务 1.2 Windows 采用 GB2312 编码,Linux 采用 UTF-8 编码,要求中文不出 ...

  4. [JAVA]JAVA章4 Thread Dump如何分析

    一.Thread Dump介绍 1.1什么是Thread Dump? Thread Dump是非常有用的诊断Java应用问题的工具.每一个Java虚拟机都有及时生成所有线程在某一点状态的thread- ...

  5. 《C#从现象到本质》读书笔记(三)第3章C#类型基础(下)

    <C#从现象到本质>读书笔记第3章C#类型基础(下) 常量以关键字const修饰.C#支持静态字段(类型字段)和实例字段. 无参属性的get方法不支持参数,而有参属性的get方法支持传入一 ...

  6. 渗透测试的理论部分2——OSSTMM的详细描述

    昨天休息了一天,今天我要连更两篇博客,作为补充,以下为正文 本章详细描述了OSSTMM内的RAV得分这一理论概念,对日后从事正规安全工作至关重要 OSSTMM为开源安全测试方法论,对OSSTMM不了解 ...

  7. 【慕课网实战】Spark Streaming实时流处理项目实战笔记十六之铭文升级版

    铭文一级: linux crontab 网站:http://tool.lu/crontab 每一分钟执行一次的crontab表达式: */1 * * * * crontab -e */1 * * * ...

  8. 基于UML的公开招聘教师管理系统建模的研究和设计

    一.基本信息 标题:基于UML的公开招聘教师管理系统建模的研究和设计 时间:2018 出版源:赤峰学院学报(自然科学版) 领域分类:UML:公开招聘教师系统:面向对象方法:建模. 二.研究背景 问题定 ...

  9. oracle数据库创建分区表

    参考资料:http://blog.chinaunix.net/uid-21943216-id-4062400.html 一.建按月自增分区表:1.1建表SQL> create table mon ...

  10. 找出数组中求和等于y的所有子数组

    算法记录: 给定一个数组x,每个元素都是正整数,找出其中满足条件"求和等于y"的所有子数组.(简化问题,每个元素都不相等) x=[x1,...,xn],暴力搜索,复杂度O(2^n) ...