0

我想将我的 Web 组件添加到我的 JSP 中。我如何连接我的 ExtWebComponents 来做到这一点？

我的服务器端在 Servlet 容器中运行。

4

1 回答 1

0

我有一个项目示例，展示了如何做到这一点。客户端是 ExtWebComponents，服务器端是 Java。

项目说明

  • Maven多模块项目
  • 后端的 Java servlet 容器
  • 客户端是一个 ExtWebComponents 项目，仅使用 pom.xml 将其作为模块轻松导入 IDE。并启动 npm 构建。

示例项目

JSP 示例

<!DOCTYPE HTML>
<html manifest="">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">

    <title>Sandbox Project</title>
    <link rel="icon" type="image/x-icon" href="resources/favicon.ico">

    <script src="webcomponents-bundle.js"></script>
    <link href="ext/ext.css" rel="stylesheet">
</head>

<body>

Testing
<my-sandbox-view></my-sandbox-view>

<%
    out.write("<h2>Test jsp<h2>");
%>

<!-- The webpacked resource bundle is imported here -->
<script type="text/javascript" src="ext/ext.js"></script><script type="text/javascript" src="app.js"></script></body>
</html>

示例源

从客户端到服务器的资源

您必须告诉 webpack 将资源复制到您的 Web 应用程序目录，以便它们可以在您的 Java 项目中使用。例如，这是如何使用自定义插件，然后使用 webpack --watch 来完成的。

// This causes infinite loop, so I can't use this plugin.
//  new CopyWebpackPlugin([{
//    from: __dirname + '/build/',
//    to: __dirname + '/../sandbox-server/target/test1'
//  }]),

// Inline custom plugin - will copy to the target web app folder
// 1. Run npm install fs-extra
// 2. Fix the path, so that it copies to the server's build webapp folder
{
  apply: (compiler) => {
    compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
      // Debugging
      console.log("########-------------->>>>> Finished Ext JS Compile <<<<<------------#######");

      let source = __dirname + '/build/';
      // TODO Set the path to your webapp build
      let destination = __dirname + '/../sandbox-server/target/sandbox';

      let options = {
        overwrite: true
      };
      fs.copy(source, destination, options, err => {
        if (err) return console.error(err)
        console.log('Copy build success!');
      })
    });
  }
}

示例源

于 2019-11-01T20:20:11.837 回答