wjsp
1.0.0
従来のJSPページアプリケーションは、ES6構文機能を効果的に使用することはできず、プロジェクトをパッケージ化および圧縮することは困難であり、Hot Updationを使用することはできません。従来のシングルページアプリケーションは、SEOの効果を実現するためにTomcatなどのコンテナの下でサーバー側のレンダリングを実行できません。このプロジェクトは、従来のJSPページサーバー側のレンダリングおよびシングルページアプリケーション開発機能の特性とよく統合されており、非常に使いやすいです！
ソースコードアドレス
デモとドキュメント
IE8をサポートしたい場合は、WebPack2+がIE8をサポートしていないため、WebPackをダウングレードする必要があります。JQUERY2+、LODASH4+、VUEなど、IE8をサポートしていないライブラリの使用を避けてください。
良い仕事をしたい場合は、まずツールを研ぎ澄まさなければなりません。
JSとCSSを編集したい場合は、VSCODEを使用することも問題ありませんが、JSPとJavaを書くときにアイデアを使用することをお勧めします。
以下は、環境構成に関する関連記事、参照、JDKダウンロードアドレス、Intellijアイデア構成、フロントエンド開発環境、Intellijアイデア構成、Java Web Tomcat環境、Mavenダウンロードとインストール、Git Bashのダウンロードとインストールをまとめたものです。
├── pom.xml // maven配置文件
├── src
| ├── main
| | ├── filters
| | | └── resources // java工程资源配置目录
| | ├── java // java代码目录
| | ├── js // 前端页面工程
| | | ├── build // 编译相关以及webpack相关配置
| | | | ├── build.js
| | | | ├── check-versions.js
| | | | ├── logo.png
| | | | ├── utils.js
| | | | ├── webpack.base.conf.js
| | | | ├── webpack.dev.conf.js
| | | | └── webpack.prod.conf.js
| | | ├── config // 配置相关
| | | | ├── dev.env.js
| | | | ├── index.js
| | | | ├── js-jsp-map.js // 配置入口js和jsp的映射
| | | | └── prod.env.js
| | | ├── package.json // npm配置
| | | ├── src // web项目工程目录
| | | | ├── pages // jsp页面，最终的jsp文件们会按照pages相对路径打包进webapp/WEB-INF/jsp目录下
| | | | | ├── include // 共享的jsp页面，通过jsp:include引入
| | | | | | ├── common_script.jsp
| | | | | | ├── footer.jsp
| | | | | | ├── header.jsp
| | | | | | ├── init.jsp
| | | | | | └── meta.jsp
| | | | | ├── index // 页面1
| | | | | | ├── index.js // 需要在在config/js-jsp-map.js配置与jsp的映射关系，这样编译后的js会加载jsp的body下。一般js与jsp在同一个目录下。
| | | | | | └── index.jsp
| | | | | └── start // 页面2
| | | | | ├── dashboard.css
| | | | | ├── index.js
| | | | | └── index.jsp
| | | | └── my-component.vue 支持VUE
| | | ├── polyfills 兼容相关的代码
| | | | ├── console.js
| | | | ├── index.js
| | | | └── promise.js
| | | ├── static // 存在静态文件，最终这些文件会拷贝到webapp目录下
| | | | ├── favicon.ico
| | | | ├── images
| | | | | ├── jsp.svg
| | | | | └── webpack.svg
| | | | ├── js
| | | | | └── lib
| | | | | └── jquery.min.js
| | | | └── WEB-INF
| | | | ├── tld
| | | | └── web.xml
| | | └── styles
| | └── webapp // 该目录下的文件不用开发人员手动添加修改，在npm run dev或npm run build的时候自动生成。
| └── test
| └── java
SRC/Main/JSディレクトリのディレクトリ構造は、Vue-CliのWebpackテンプレートに基づいて変更されます。このテンプレートを使用してプロジェクトを作成した場合、簡単に開始できます。
cd src/main/js npm run dev
アイデアでトムキャットを始めましょう
ブラウザでhttp://localhost:8081を開きます
次のポイントに注意を払う必要があります
プロジェクトを初めて開始するには、最初にnpm run dev Tomcatを開始することをお勧めします。その後、そのうちの1つは再起動し、もう1つは再起動する必要はありません。デフォルトでは、 npm run devポート8081で実行され、Tomcatはポート8080で実行されます。最終的には、ブラウザで8081のページにアクセスする必要があり、8080のページは必要ありません。開発モードでは、JSによって導入されたCSSが動的に導入され、ページにフラッシュ効果があります。心配しないでください、それはリリース後の環境には現れません。 JSPページを開発すると、ホット展開が遅れます。詳細については、JSPページセクションを参照して、ページディレクトリにJSPファイルを開発し、WebAppディレクトリには開発されません。それ以外の場合、ページディレクトリに切り替えて開発またはパッケージをパッケージ化した後、WebAppの下のJSPファイルが上書きされ、変更されたコンテンツが失われます。 js-jsp-map.jsで構成されているエントリファイルが増加すると、Webpack-dev-serverのホットアップデートは非常に遅くなります。現在の開発ニーズに応じて未使用のエントリファイルを一時的にコメントし、1〜3を維持することをお勧めします。これにより、ホットアップデート時間が大幅に増加します。
npm run build
WebAppは出力ディレクトリとして使用されます。静的のファイルは、出力ディレクトリにコピーされます。ページディレクトリのJSPファイルは、テンプレートファイルとしてWebApp/Web-INF/JSPディレクトリにコピーされます。 JSPに関連付けられたJSポータルは、マージおよび圧縮され、JSPファイルの本体に導入されます。 JSP関連のCSSは、単一のCSSファイルによって導入されたJSPファイルヘッドから抽出されます。
パッケージ化されたアプリケーションのアプリケーションコンテキストが/、たとえば/app 、つまり、アクセスアドレスはhttp://localhost:8080/appに基づいている場合、パッケージングの場合、JSP publicPathのすべてのアドレスを${pageContext.request.contextPath}/である必要があります${ctx}/
従来のJSPはsrc/main/webappの下で開発されています。このプロジェクトフレームワークの下で、JSPファイルはsrc/main/js/src/pagesの下で開発されています。開発ディレクトリは一貫していませんが、従来のJSP開発のすべての機能がまだあります。
<jsp:include page=''></jsp:include>または<%@include file=""%>を使用するなどのネストテンプレート<c:set> 、 <c:if> 、 <c:forEach>などをすべて使用できます<% out.println("hello world"); %>File->Syncronize> syncronize（ショートカットキーCtrl+Alt+Y ）をクリックしてから、実行の左側の3番目のボタンをクリックして、 Update classes and resourcesを選択して手動で更新します。ページを更新した後、最新のページを見ることができます。実際、 npm run devの場合、ページディレクトリ内のJSPは、htmlwebpackpluginプラグインのテンプレートファイルとして使用されます。ファイルのアンダーページが変更されるたびに、 webapp/WEB-INF/jspの下の相対ディレクトリに出力されます。特定の原則を理解する必要がある場合は、核となる章にアクセスしてください標準C、FMT、FNタグライブラリに加えて、タグライブラリをカスタマイズすることもできます。
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> JSPページのアドレスは/web-inf/で開始する必要があり、実際にJSPを開発するパスはjs/src/pagesディレクトリにあることに注意してください。ただし、正常に実行でき、実際の開発プロセスはほとんど影響を与えません。より良い解決策がある場合は、お問い合わせください。
Webpackをパッケージツールとして使用するため、JSとCSSの構文変換を簡単に実行でき、現在サポートできます。
単一のページアプリケーションを開発する過程で、ホットアップデートの優れた機能があります。 JSファイルが変更された場合、ページはリアルタイムで更新をトリガーします。このプロジェクトフレームワークの下で、ホットアップデートの喜びを楽しむことができます。 JSとCSSを変更すると、ページはリアルタイムで更新をトリガーします。
このプロジェクトは、すでにデフォルトでVUEをサポートしています。この章はVueでも書かれており、Vueによってもたらされたコーディングの喜びを楽しむことができます。
このプロジェクトでは、WebpackとJSPの機能を組み合わせて、マルチページアプリケーションを実装します。これはクールです。それでは、それはどのように達成されましたか？ここでは、プロジェクトの構築に遭遇した問題から最も中心的な問題を解決する方法について説明します。
WebPackを使用してマルチページアプリケーションを実装することは、複数のエントリポータルの構成に関連することができます。各エントリはHtmlWebpackPluginに対応しています。 JSPファイルは、 HtmlWebpackPluginのテンプレートファイルとして使用されます。エントリJSがパッケージ化された後、ボディに挿入されます。このプロジェクトもこのように構築されました。ここに注意を払うべきいくつかのポイントがあります
{ test: /.jsp$/, loader: 'raw-loader' } Webpackで構成する必要があります。ここでは、 raw-loaderがプレーンテキストのコピーに使用されます。 JSPにより適したローダーがある場合は、JSPファイルに多くの機能を提供できます。config/js-jsp-map.jsにあります。Tomcatはポート8080で実行され、Webpack-Dev-Serverはポート8081で実行され、2つの異なるアプリケーションです。それから、開発のためにTomcatの下にデバッグを書いたり、開発のためにWebpack-Dev-Serverでデバッグをしたりする必要はありません。これは非常に面倒ではないでしょうか？
幸いなことに、WebPack-Dev-Serverにはプロキシパラメーターがあります。プロキシを使用してすべてのリクエストを逆にしてWebPack-Dev-Serverに8080にアクセスします。このようにして、実際の開発プロセス中に、ブラウザは8081ポートページを開く必要があります。これにより、JSPサーバーレンダリングの関数、およびWebpack構文変換とホットアップデートの関数が考慮されます。 Tomcatは、必要に応じて再起動することができます。ここに注意を払うべきいくつかのポイントがあります
npm run devとTomcatの順次要件はありませんが、ブラウザが8081にアクセスする前に両方のサービスを開始する必要があります。npm run dev tomcatを再起動する必要があります。新しいファイルと削除がある場合は、両方のサービスを再起動することをお勧めします。WebPack-Dev-Serverがインメモリーファイルシステムを使用していることがわかっています。 JSPページは最終的にTomcatに公開され、メモリ内のJSPファイルはIDEAによって聞くことができないため、最終出力JSPが変更されても、Tomcatに展開することはできません。幸いなことに、WebPack-Dev-Serverプログラムの出力ファイルをディスクファイルシステムに強制できるWebpackプラグインWriteFilePluginを見つけました。ここに注意を払うべきいくつかのポイントがあります
このアイデアは、実際には、Tomcatの下のJSPマルチページアプリケーションに適用できるだけでなく、サーバーマルチページアプリケーションとしてノードに適用することもできます。楽しめ！
