如何在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 相关文章推荐
无语,javascript居然支持中文(unicode)编程!
Apr 12 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
jQuery ajax时间差导致的变量赋值问题分析
Jan 22 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
Bootstrap轮播图的使用和理解4
Dec 14 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
JavaScript 面向对象基础简单示例
Oct 02 Javascript
JS document文档的简单操作完整示例
Jan 13 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP实现定时生成HTML网站首页实例代码
2008/11/20 PHP
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
javascript 密码强弱度检测万能插件
2009/02/25 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
js合并两个数组生成合并后的key:value数组
2018/05/09 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
vue 实现超长文本截取,悬浮框提示
2020/07/29 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
anaconda如何查看并管理python环境
2019/07/05 Python
python+selenium 脚本实现每天自动登记的思路详解
2020/03/11 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
德国拖鞋网站:German Slippers
2019/11/08 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
网上卖盒饭创业计划书
2014/01/26 职场文书
小学生学习雷锋倡议书
2014/05/15 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2015年班组长工作总结
2015/04/10 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
oracle数据库去除重复数据
2022/05/20 Oracle