如何在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 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
Aug 22 Javascript
JS中使用FormData上传文件、图片的方法
Aug 07 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
JS实现自定义状态栏动画文字效果示例
Oct 12 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
js实现石头剪刀布游戏
Oct 11 Javascript
vue print.js打印支持Echarts图表操作
Nov 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
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
对盗链说再见...
2006/10/09 PHP
在PHP3中实现SESSION的功能(三)
2006/10/09 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php读取mssql的ntext字段返回值为空的解决方法
2014/12/30 PHP
PHP中的命名空间详细介绍
2015/07/02 PHP
js查找父节点的简单方法
2008/06/28 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
jQuery实现html双向绑定功能示例
2017/10/09 jQuery
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
2020/08/09 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
一些常用的Python爬虫技巧汇总
2016/09/28 Python
Python实现矩阵转置的方法分析
2017/11/24 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python实现最大子序和的方法示例
2019/07/05 Python
django如何自己创建一个中间件
2019/07/24 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
详解django中Template语言
2020/02/22 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
挪威户外活动服装和装备购物网站:Bergfreunde挪威
2016/10/20 全球购物
环法自行车赛官方商店:Le Tour de France
2017/08/27 全球购物
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
《坐井观天》教学反思
2016/02/18 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
深入理解python多线程编程
2021/04/18 Python