今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面，想着直接将其嵌入到当前的vue项目中节约开发成本；但是发现并非想象的那么简单

创建一个server.vue组件加载jsp页面

1 、第一种（使用 v-html进行jsp 渲染）

server.vue

<template>

  <div class="docker-server">

    <div v-html="pageContent"></div>

  </div>

</template>

<script type="text/ecmascript-6">

    export default {

        name: "server",

      data(){

          return{

            pageContent:'',

          }

      },

      created(){

           this.getDockerPage();

      },

      methods:{

        getDockerPage() {

          // $post为全局的axios post请求对象；dockerMange 为后端ip

          let url = `${api_config.dockerMange}/core/funcs/system/docker/server/index.jsp`;

          this.$post(url).then(res => {

            console.log(res);

           this.pageContent = res.data;

          }).catch(err => {

            console.log(err)

          });

        }

      }

    }

</script>

<style scoped>

</style>

请求返回的jsp数据格式



后台返回的 index.jsp 内容如下：

<!DOCTYPE html>

<script type="text/javascript">

/** 常量定义 **/

var TDJSCONST = {

  YES: 1,

  NO: 0

};

/** 变量定义 **/

var contextPath = "/docker";

var imgPath = "/docker/core/styles/style1/img";

var ssoUrlGPower = "";

var limitUploadFiles = "jsp,java,jspx,exe"

var signFileServiceUrl = http://**/BjfaoWeb/TitleSign";

var isOnlineEval = "0";

var useSearchFunc = "1";

var maxUploadSize = 500;

var isDev = "0";

var ostheme = "1";

</script>

<html style="overflow: hidden;">

<head>

    <title>Docker容器服务器管理</title>  <!-- http://** 我为保护服务ip 而手动更改了 -->

    <link rel="stylesheet" href="http://**/docker/core/styles/style1/css/views.css" type="text/css"/>

    <link rel="stylesheet" href="http://**/docker/core/styles/style1/css/cmp/tab.css" type="text/css"/>

    <link rel="stylesheet" href=http://**/docker/dist/css/common.css">

    <link rel="stylesheet" href="http://**/dist/css/iconfont.css">

    <script type="text/Javascript" src=http://**/docker/core/js/datastructs.js"></script>

    <script type="text/Javascript" src="http://**/docker/core/js/sys.js"></script>

    <script type="text/Javascript" src="http://**/docker/core/js/prototype.js"></script>

    <script type="text/Javascript" src="http://**/docker/core/js/smartclient.js"></script>

    <script type="text/Javascript" src="http://**/docker/core/js/cmp/tab.js"></script>

    <script type="text/javascript">

        function doInit() {

            var tabArray = [{

                title: "容器服务器管理",

                content: "",

                contentUrl: "http://**/docker/core/funcs/system/docker/server/manage.jsp",

                imgUrl: "http://**" + imgPath + "/cmp/tab/sys_config.gif",

                useIframe: true

                },

                {

                    title: "新增容器服务器",

                    content: "",

                    contentUrl: "http://**/docker/core/funcs/system/docker/server/edit.jsp",

                    imgUrl: "http://**" + imgPath + "/cmp/tab/sys_config.gif",

                    useIframe: true

                }];

            buildTab(tabArray, 'contentDiv');

        }

    </script>

</head>

<body onload="doInit();">

<div id="contentDiv"></div>

</body>

</html>

页面显示如下：



因：jsp页面只是写了几个标签，其他数据都是通过外部js中的方法动态渲染出来的，然而使用v-html只是将jsp 页面加载到了当前页面上，但是没有将js 再次load进来；所以页面上就只有几个没有用的标签！最终确认这种方法不可行

2、 第二种（使用 iframe 进行jsp嵌入）

修改后的 server.vue

<template>

  <div class="docker-server">

    <iframe  name = "iframeChild" id = "iframeChild" v-bind:src="getPageUrl"

            width="100%" :height="iframeHeight"

            frameborder="0" scrolling="no" ref="iframeDom"

    ></iframe>

  </div>

</template>

<script type="text/ecmascript-6">

    export default {

        name: "server",

      data(){

          return{

            iframeHeight:500,

            getPageUrl:`${api_config.dockerMange}/core/funcs/system/docker/server/index.jsp?MySessionId=${JSON.parse(sessionStorage.getItem("userInfo")).userToken}`

          }

      },

      mounted: function () {

        this.$nextTick(() => {

          if(this.$refs.iframeDom)

            this.iframeHeight = window.innerHeight - this.$refs.iframeDom.$el.offsetTop;

        })

      },

    }

</script>

<style scoped>

</style>

这次终于对了运行效果如下：



还是老式的方法过的奥，测试证明这种方式可行，完美解决问题 嘿嘿。

在vue 项目中嵌入jsp页面的更多相关文章

  1. vue 项目中如何在页面刷新的状态下保留数据

    1.问题:在vue项目中,刷新页面之后,我当前打开的所有菜单,都消失,我如何实现刷新之后页面仍然是刷新之前的状态 效果图: 解决方法: 使用vuex作状态管理: 将vuex里面的数据同步更新到loca ...

  2. 如何在现有的Vue项目中嵌入 Blazor项目？

    目前官方只提供了angular和react俩种示例,所以本教程将来讲解如何在Vue的现有项目中使用,上期已经做好了react的教材! 准备流程 Vue 项目创建流程 使用Vue创建一个Demo项目 全 ...

  3. SpringBoot项目中加入jsp页面

    根据我们之前搭建好的SpringBoot+SSm的项目的基础上,来增加webapp/WEB-INF的文件,由此来完成jsp页面的跳转. 先增加jsp的pom依赖: <!-- https://mv ...

  4. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  5. vue项目中在同一页面多次引入同一个echarts图表的自适应问题

    在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...

  6. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  7. vue项目中使用百度统计

    统计有多少人访问了自己的网站(wap端pc web端都适用),或者更细的统计网站每个页面的访问量,可以使用百度统计 百度统计传送门 按提示注册登录即可 登录后-->管理-->新增网站,配置 ...

  8. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

  9. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

  10. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

随机推荐

  1. 自己动手从零写桌面操作系统GrapeOS系列教程——14.屏幕显示原理与文本模式

    学习操作系统原理最好的方法是自己写一个简单的操作系统. 一.屏幕显示原理 电脑显示器屏幕是由很多很小的像素组成的.每个像素就像是一个小灯泡,在屏幕上一排一排的整齐排列着.只要能控制每个像素的颜色就能显 ...

  2. 解决docker容器不足问题

    df -h查看容量,看看那个被占满了,之前我这里是100% 用了一下docker system prune,发现没啥用,又加了-a:docker system prune -a,就又空间了. 之后再进 ...

  3. 第四朵“云”！全托管的时序数据云平台 TDengine Cloud 正式支持阿里云

    3 月 13 日,全托管的时序数据处理云服务平台 TDengine Cloud 正式支持阿里云,这是继 Microsoft Azure.AWS.Google Cloud 后 TDengine Clou ...

  4. 分析document文档中script标签获取抖音无水印视频

    思路分析 使用 playwright 模拟浏览器打开分享链接 获取 播放页面 html 信息 解析 播放页面的 video标签,video标签的src属性就是视频的地址 这种模式会触发抖音的风控机制 ...

  5. CSharp读写world文档数据

    背景 在工作中需要对比数据,然后输出一份world文档的对比报告.这需要用C#来读写world文件. 用到的工具 NPOI NPOI 地址:NPOI NPOI版本:2.6.0 个人项目的运行时版本:. ...

  6. Learning with Mini-Batch

    在机器学习中,学习的目标是选择期望风险\(R_{exp}\)(expected loss)最小的模型,但在实际情况下,我们不知道数据的真实分布(包含已知样本和训练样本),仅知道训练集上的数据分布.因此 ...

  7. python中socket使用UDP协议简单实现服务端与客户端通信

    UDP为不可靠传输,也就是发送方不关心对方是否收到消息,一般用于聊天软件.但现在的聊天软件虽然使用的是UDP协议,但已从代码层面上解决了丢失信息的问题. 下面使用python代码简单实现了服务端与客户 ...

  8. [数据结构]二叉搜索树(BST) VS 平衡二叉排序树(AVL) VS B树(平衡多路搜索树) VS B+树 VS 红黑树(平衡二叉B树)

    1 二叉排序树/二叉查找树/Binary Sort Tree 1种对排序和查找都很有用的特殊二叉树 叉排序树的弊端的解决方案:平衡二叉树 二叉排序树必须满足的3条性质(或是具有如下特征的二叉树) 若它 ...

  9. 【Vue项目】尚品汇（六）ShopCar组件开发 购物车模块

    4 购物车 4.1 购物车商品数量控制 Detail\index.vue <div class="cartWrap"> <div class="cont ...

  10. 香，一套逻辑轻松且智能解决PyQt中控件数值验证的问题

    在PyQt开发中,时常需要对控件的值进行校验,如需要校验QCheckBox是否被选中,QLabel是否校验值是否为空等等.在复杂的业务场景下,这类控件如果数量很多,逐个校验就显得麻烦,需要一一获得控件 ...