今日一个项目中一块功能模块是其他系统使用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. GRU简介

    一.GRU介绍 GRU是LSTM网络的一种效果很好的变体,它较LSTM网络的结构更加简单,而且效果也很好,因此也是当前非常流形的一种网络.GRU既然是LSTM的变体,因此也是可以解决RNN网络中的长依 ...

  2. PHP 图片的合并，微信小程序码合并，文字合并

    //业务需求:我们需要一个微信小程序码,但是是需要提供给别人扫码的但是只有一个纯粹的小程序码是不好看的,所以需要推广的海报图片.再结合文字 最终效果 准备工作  1.需要海报的底图  2.小程序码的图 ...

  3. proprety详解

    property() 函数和@property修饰符. 第一种方法,使用property() 函数: class Person: def __init__(self): self.__name= No ...

  4. 五月二十六日jdbc算法以及数据库

    1.在PreparedStatement创建SQL对象后,调用preparedStatement()方法时,通过占位符?来按照索引进行SQL语句动态执行通过setString()方法和setInt() ...

  5. day08 元组字典集合

    day08 元组 集合 字典 元组 """ 小括号括起来,内部存放多个元素,元组之间逗号隔开,元素不可改变,元素类型不能是任意的, """ ...

  6. 【LeetCode回溯算法#extra01】集合划分问题【火柴拼正方形、划分k个相等子集、公平发饼干】

    火柴拼正方形 https://leetcode.cn/problems/matchsticks-to-square/ 你将得到一个整数数组 matchsticks ,其中 matchsticks[i] ...

  7. 【Vue项目】尚品汇（三）Home模块+Floor模块+Swiper轮播图

    写在前面 今天是7.23,这一篇内容主要完成了Home模块和部分Search模块的开发,主要是使用了swiper轮播图插件获取vuex仓库数据展示组件以及其他信息. 1 Search模块 1.1 Se ...

  8. CS144 计算机网络 Lab1：Stream Reassembler

    前言 上一篇博客中我们完成了 Lab0,使用双端队列实现了一个字节流类 ByteStream,可以向字节流中写入数据并按写入顺序读出数据.由于网络环境的变化,发送端滑动窗口内的数据包到达接收端时可能失 ...

  9. 还不知道怎么 Mock ，用这 6款工具！

    以下是几个常用的国外可以mock测试的工具,供参考: MockServer: MockServer 是一个开源的 API mock 测试工具,提供了强大的模拟服务器和 mock 服务功能.MockSe ...

  10. [Opencv-C++] 2. Opencv入门

    一.显示图像 从磁盘加载并在屏幕上显示一幅图像的简单Opencv程序 //Example 2-1. A simple OpenCV program that loads an image from d ...