今日一个项目中一块功能模块是其他系统使用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. Javaweb学习笔记第十六弹--Vue、Element

    Vue(一套前端框架,MVVM主要用于实现数据的双向绑定) Vue快速入门 //新建HTML页面,引入Vue.js文件 <script src="js.Vue.js"> ...

  2. Linux系统下祼机安装mysql8.0和docker mysql 8.0 性能差异对比~

    环境准备 准备两台服务器环境,配置相同,分别安装Centos7,mysql8.0,docker mysql 8.0 准备测试代码 public class Chat { public static l ...

  3. Mybatis模糊查询的两种方式

    第一种 使用 || 字符: ** ** 第二种 使用 CONCAT 函数: ** ** 温馨提醒: 当然你也可以使用 $符 ,但是这种方式会导致不安全,让非法分子有机可寻,轻则数据库瘫痪,重则数据泄露 ...

  4. 六位一体Serverless化应用，帮你摆脱服务器的烦恼

    ​ 随着互联网技术的飞速发展,越来越多的应用横空出世,是以不可避免带来了大量的服务器需求.大部分的开发者都选择购买或者租用服务器,然而这样也带来了诸多的烦恼. 1.硬件成本高昂 购买服务器费用昂贵,除 ...

  5. SRS+Docker部署教程

    SRS+Docker部署教程 安装Docker Windows安装docker 安装Hyper-V Hyper-V 是微软开发的虚拟机,类似于 VMWare 或 VirtualBox,仅适用于 Win ...

  6. Oracle宕机之PMON (ospid: 248987): terminating the instance due to error 484（另附hugepage配置方法）

    数据库版本:11.2.0.4 RAC环境 操作系统版本:Asianux Server release 7.3 数据库报错分析 接到业务消息,应用无法访问,开发人员查看日志后发现无法连接数据库. 查看数 ...

  7. wpf RelativeSource绑定

    RelativeSource有四种类型 Self FindAncestor TemplatedParent PreviousData a.Self Self用于绑定源和绑定目标相同的场景中.对象的一个 ...

  8. 极速免费部署，国内可用 ChatGPT 网页版

    极速免费部署,国内可用 ChatGPT 网页版 我的星球微信群虽然接入了ChatGPT,但是依然有星友反馈说艾特机器人太麻烦,有些问题也不方便公开. 昨天充值api成功了,终于有底气把网页版开放给星友 ...

  9. AVL树的构建

    package com.xd.leetcode.shu; /** * created by lianzhen on 2020-03-10 10:27. describe:平衡二叉树的构建 * * LL ...

  10. VMware另一个程序锁定文件的一部分，进程无法访问

    问题描述:搭建RAC11g,在做共享磁盘的时候,节点2要共享节点1的磁盘,但是有一个问题,节点2关机之后,再打开,是有一个访问节点1的磁盘的过程,如果访问失败,就会开不了机器 rac1加的三个磁盘: ...