如何在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 保存数组到Cookie的代码
Apr 14 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
JavaScript类属性的访问方式详解
Feb 11 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
vuex 的简单使用
Mar 22 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 Javascript
详解小程序之简单登录注册表单验证
May 13 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
Jan 05 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
JS跨域代码片段
2012/08/30 Javascript
如何调试异步加载页面里包含的js文件
2014/10/30 Javascript
Javascript基础教程之if条件语句
2015/01/18 Javascript
javascript实现控制浏览器全屏
2015/03/30 Javascript
用Node.js通过sitemap.xml批量抓取美女图片
2015/05/28 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
jQuery实现文本框邮箱输入自动补全效果
2015/11/17 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
bootstrap3-dialog-master模态框使用详解
2017/08/22 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
35个Python编程小技巧
2014/04/01 Python
Python正则表达式匹配ip地址实例
2014/10/09 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
Python中的sort()方法使用基础教程
2017/01/08 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
Python实现的弹球小游戏示例
2017/08/01 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
解决django框架model中外键不落实到数据库问题
2020/05/20 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
贸易跟单员英文求职信
2014/04/19 职场文书
认购协议书范本
2014/04/22 职场文书
新学期标语
2014/06/30 职场文书
基层党员群众路线教育实践活动个人对照检查材料思想汇报
2014/10/05 职场文书
致男子1500米运动员的广播稿
2019/11/08 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL