如何在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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
Jan 15 Javascript
jquery动态遍历Json对象的属性和值的方法
Jul 27 Javascript
Mac系统下Webstorm快捷键整理大全
May 28 Javascript
详解webpack分离css单独打包
Jun 21 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
May 29 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
php录入页面中动态从数据库中提取数据的实现
2006/10/09 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
详谈php中 strtr 和 str_replace 的效率问题
2017/05/14 PHP
ThinkPHP框架整合微信支付之JSAPI模式图文详解
2019/04/09 PHP
Js组件的一些写法
2010/09/10 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
2015/07/27 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
关于Angular2 + node接口调试的解决方案
2017/05/28 Javascript
node.js用fs.rename强制重命名或移动文件夹的方法
2017/12/27 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
angularJS自定义directive之带参方法传递详解
2018/10/09 Javascript
在vue中使用vuex,修改state的值示例
2019/11/08 Javascript
超详细小程序定位地图模块全系列开发教学
2020/11/24 Javascript
[00:55]2015国际邀请赛中国区预选赛5月23日——28日约战上海
2015/05/25 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
利用python爬取散文网的文章实例教程
2017/06/18 Python
儿童学习python的一些小技巧
2018/05/27 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python xml、字典、json、类四种数据类型如何实现互相转换
2020/05/27 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
小学少先队活动方案
2014/02/18 职场文书
市场营销专业大学生职业生涯规划文
2014/03/06 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
事业单位财务人员岗位职责
2015/04/14 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记