如何在vue项目中嵌入jsp页面的方法(2种)


Posted in Javascript onFebruary 06, 2020

今日一个项目中一块功能模块是其他系统使用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数据格式

如何在vue项目中嵌入jsp页面的方法(2种)

后台返回的 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" rel="external nofollow" type="text/css"/>
  <link rel="stylesheet" href="http://**/docker/core/styles/style1/css/cmp/tab.css" rel="external nofollow" type="text/css"/>
  <link rel="stylesheet" href=http://**/docker/dist/css/common.css">
  <link rel="stylesheet" href="http://**/dist/css/iconfont.css" rel="external nofollow" >
  <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>

页面显示如下:

如何在vue项目中嵌入jsp页面的方法(2种)

因: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页面的方法(2种)

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
node.js中的console.dir方法使用说明
Dec 10 Javascript
关于数据与后端进行交流匹配(点亮星星)
Aug 03 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
Sep 19 Javascript
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
Mar 04 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
Mar 26 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
Vue中图片Src使用变量的方法
Oct 30 Javascript
js get和post请求实现代码解析
Feb 06 #Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 #Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 #Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 #Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 #Javascript
Vue表单控件数据绑定方法详解
Feb 05 #Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 #Javascript
You might like
ThinkPHP CURD方法之limit方法详解
2014/06/18 PHP
php实现用于删除整个目录的递归函数
2015/03/16 PHP
CI配置多数据库访问的方法
2016/03/28 PHP
PHP里面把16进制的图片数据显示在html的img标签上(实现方法)
2017/05/02 PHP
PHP设计模式之抽象工厂模式实例分析
2019/03/25 PHP
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
鼠标划过实现延迟加载并隐藏层的js代码
2013/10/11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
使用jQuery设置disabled属性与移除disabled属性
2014/08/21 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
使用JavaScript实现旋转的彩圈特效
2015/06/23 Javascript
JS实现鼠标滑过折叠与展开菜单效果代码
2015/09/06 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
为什么JavaScript没有块级作用域
2016/05/22 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
2017/01/20 Javascript
angularJs的ng-class切换class
2017/06/23 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
Vue动态路由缓存不相互影响的解决办法
2019/02/19 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python文本数据处理学习笔记详解
2019/06/17 Python
双向RNN:bidirectional_dynamic_rnn()函数的使用详解
2020/01/20 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python实现图像拼接功能
2020/03/23 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
企业文化建设实施方案
2014/03/22 职场文书
六一文艺汇演开幕词
2015/01/29 职场文书
小学生节水倡议书
2015/04/29 职场文书
高中班主任心得体会
2016/01/07 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python