怎样在vue项目中嵌入jsp页面

这篇文章给大家分享的是有关怎样在vue项目中嵌入jsp页面的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

创新互联建站专注于海阳网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供海阳营销型网站建设，海阳网站制作、海阳网页设计、海阳网站官网定制、小程序开发服务，打造海阳网络公司原创品牌,更为您提供海阳网站排名全网营销落地服务。

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

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

server.vue




  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)
     });
    }
   }
  }

请求返回的jsp数据格式

怎样在vue项目中嵌入jsp页面

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



/** 常量定义 **/
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";




  Docker容器<a title="服务器" target="_blank" href="http://www.cdfuwuqi.com/">服务器</a>管理 
  
  
  
  
  
  
  
  
  
  
    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');
    }

页面显示如下：

怎样在vue项目中嵌入jsp页面

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

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

修改后的 server.vue




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

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

怎样在vue项目中嵌入jsp页面

感谢各位的阅读！关于“怎样在vue项目中嵌入jsp页面”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

本文名称：怎样在vue项目中嵌入jsp页面
标题网址：http://ybzwz.com/article/gjddio.html

怎样在vue项目中嵌入jsp页面

其他资讯