How to embed vue project into jsp page? (Method introduction)-JS Tutorial-php.cn

How to embed vue project into jsp page? (Method introduction)

青灯夜游

Release： 2020-06-16 10:01:49

forward

5132 people have browsed it

How to embed vue project into jsp page? The following article will introduce to you the method of embedding jsp pages in vue projects. The article introduces it in detail through sample code. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

How to embed vue project into jsp page? (Method introduction)

Embed the jsp page in the vue project

One of the functional modules in a project today is another system Using the page that has been developed by jsp, I thought about embedding it directly into the current vue project to save development costs; but I found that it was not as simple as imagined

Create a server.vue component to load the jsp page

1. The first type (using v-html for jsp rendering)

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:&#39;&#39;,
          }
      },
      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>

Copy after login

The jsp data format returned by the request

How to embed vue project into jsp page? (Method introduction)

The content of index.jsp returned by the background is as follows:

<!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" type="text/css"/>
    <link rel="stylesheet" href="http://**/docker/core/styles/style1/css/cmp/tab.css" type="text/css"/>
    <link rel="stylesheet" href=http://**/docker/dist/css/common.css">
    <link rel="stylesheet" href="http://**/dist/css/iconfont.css">
    <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, &#39;contentDiv&#39;);
        }
    </script>
</head>
<body onload="doInit();">
<div id="contentDiv"></div>
</body>
</html>

Copy after login

The page is displayed as follows:

How to embed vue project into jsp page? (Method introduction)

Because: the jsp page only writes a few tags, and other data is dynamically rendered through methods in external js. However, using v-html only loads the jsp page to the current page, but does not load the js again; so There are only a few useless tags on the page! It was finally confirmed that this method is not feasible

2. The second method (using iframe for jsp embedding)

Modified 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>

Copy after login

This time, I finally got the running effect as follows:

How to embed vue project into jsp page? (Method introduction)

I still succeeded with the old-fashioned method. The test proved that this method is feasible and perfectly solved the problem. Hehe.

This article is reproduced from: https://blog.csdn.net/qq_34817440/article/details/99764511

For more related knowledge, please visit PHP Chinese website! !

The above is the detailed content of How to embed vue project into jsp page? (Method introduction). For more information, please follow other related articles on the PHP Chinese website!