好资源导航 » 文章资讯 » 如何在vue项目中嵌入jsp页面的方法(2种)

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

2023-08-02 01:59:04 65

今日一个项目中一块功能模块是其他系统使用jsp已经开发好的页面，想着直接将其嵌入到当前的vue项目中节约开发成本；但是发现并非想象的那么简单

创建一个server.vue组件加载jsp页面

1、第一种（使用v-html进行jsp渲染）

server.vue




exportdefault{
name:"server",
data(){
return{
pageContent:'',
}
},
created(){
this.getDockerPage();
},
methods:{
getDockerPage(){

//$post为全局的axiospost请求对象；dockerMange为后端ip
leturl=`${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)
});
}
}
}

请求返回的jsp数据格式

后台返回的index.jsp内容如下：



/**常量定义**/
varTDJSCONST={
YES:1,
NO:0
};
/**变量定义**/
varcontextPath="/docker";
varimgPath="/docker/core/styles/style1/img";
varssoUrlGPower="";
varlimitUploadFiles="jsp,java,jspx,exe"
varsignFileServiceUrl=http://**/BjfaoWeb/TitleSign";
varisOnlineEval="0";
varuseSearchFunc="1";
varmaxUploadSize=500;
varisDev="0";
varostheme="1";




Docker容器服务器管理










functiondoInit(){
vartabArray=[{
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');
}

页面显示如下：

因：jsp页面只是写了几个标签，其他数据都是通过外部js中的方法动态渲染出来的，然而使用v-html只是将jsp页面加载到了当前页面上，但是没有将js再次load进来；所以页面上就只有几个没有用的标签！最终确认这种方法不可行

2、第二种（使用iframe进行jsp嵌入）

修改后的server.vue




exportdefault{
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;
})
},
}

这次终于对了运行效果如下：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐