wjsp
1.0.0
Herkömmliche JSP -Seitenanwendungen können ES6 -Syntaxfunktionen nicht effektiv verwenden, und es ist schwierig, Projekte zu verpacken und zu komprimieren und nicht heiß aktualisiert zu werden. Herkömmliche einseitige Anwendungen können unter Containern wie Tomcat keine serverseitige Renderung durchführen, um den Effekt von SEO zu erzielen. Dieses Projekt ist gut in die Eigenschaften herkömmlicher JSP-Seiten-Server-Rendering- und einseitiger Anwendungsentwicklungsfunktionen integriert und ist sehr einfach zu bedienen!
Quellcodeadresse
Demos und Dokumentation
Wenn Sie IE8 unterstützen möchten, müssen Sie WebPack herabstufen, da WebPack2+IE8 nicht unterstützt, und versuchen, Bibliotheken zu vermeiden, die IE8 nicht unterstützen, wie z. B. JQuery2+, Lodash4+, Vue usw.
Wenn Sie gute Arbeit leisten möchten, müssen Sie zuerst Ihre Werkzeuge schärfen.
Wenn Sie JS und CSS bearbeiten möchten, ist es auch kein Problem, VSCODE zu verwenden, aber es wird empfohlen, Ideen beim Schreiben von JSP und Java zu verwenden.
Im Folgenden fasst die zugehörigen Artikel zur Konfiguration von Umgebern, als Referenz, JDK-Download-Adresse, Intellij-Ideenkonfiguration, Front-End-Entwicklungsumgebung, Intellij-Ideenkonfiguration, Java-Web-Tomcat-Umgebung, Maven-Download und Installation, GIT-Bash-Download und Installation zusammen
├── 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
Die Verzeichnisstruktur im Verzeichnis SRC/Main/JS wird basierend auf der Webpack-Vorlage von VUE-CLI geändert. Wenn Sie ein Projekt mit dieser Vorlage erstellt haben, ist es einfach, loszulegen.
cd src/main/js npm run dev
Starten Sie Tomcat in der Idee
Öffnen Sie http://localhost:8081 in Ihrem Browser
Die folgenden Punkte müssen darauf geachtet werden
Zum ersten Mal wird das Projekt begonnen, es wird empfohlen, Tomcat npm run dev zuerst zu starten. Danach wird einer von ihnen neu gestartet, und der andere muss nicht neu gestartet werden. Standardmäßig wird npm run dev unter Port 8081 ausgeführt, Tomcat wird unter Port 8080 ausgeführt. Am Ende müssen Sie nur auf die Seite 8081 im Browser zugreifen, und die Seite von 8080 ist nicht erforderlich. Im Entwicklungsmodus wird das von JS eingeführte CSS dynamisch eingeführt, und die Seite hat einen Flash -Effekt. Mach dir keine Sorgen, es wird in der Umgebung nach der Veröffentlichung nicht angezeigt. Bei der Entwicklung von JSP -Seiten verzögert sich die heiße Bereitstellung. Weitere Informationen finden Sie im Abschnitt JSP -Seite, um JSP -Dateien im Verzeichnis der Seiten zu entwickeln und sich im WebApp -Verzeichnis nicht zu entwickeln. Andernfalls wird nach der Entwicklung oder dem Paket in das Seitenverzeichnis die JSP -Datei unter dem WebApp überschrieben, was zu den verlorenen geänderten Inhalten führt. Wie die in JS-JSP-MAP.JS konfigurierten Eintragsdateien erhöhen, ist das heiße Update von WebPack-dev-Server sehr langsam. Es wird empfohlen, einige nicht verwendete Eintragsdateien entsprechend den aktuellen Entwicklungsbedürfnissen vorübergehend auszunehmen und 1 bis 3 zu behalten, was die heiße Aktualisierungszeit erheblich erhöht.
npm run build
Der WebApp wird als Ausgabemittel verwendet. Die Dateien in der STATIC werden in das Ausgabeverzeichnis kopiert. Die JSP-Datei im Verzeichnis der Seiten wird als Vorlagendatei in das Verzeichnis webApp/web-inf/jsp kopiert. Das mit dem JSP verbundene JS -Portal wird zusammengedrückt und komprimiert und in den Körper der JSP -Datei eingeführt. Das JSP-assoziierte CSS wird aus dem von einer einzelnen CSS-Datei eingeführten JSP-Dateikopf extrahiert.
Wenn der Anwendungskontext Ihrer verpackten Anwendung nicht/beispielsweise /app ist, dh die Zugriffsadresse basiert auf http://localhost:8080/app , dann müssen Sie bei der Verpackung die Konfiguration/ publicPath -Konfiguration/App konfigurieren, und alle Adressen auf der JSP -Seite müssen ${pageContext.request.contextPath}/ ${ctx}/ Rahmen
Traditionelles JSP wird unter src/main/webapp entwickelt. Im Rahmen dieses Projektframeworks werden JSP -Dateien unter src/main/js/src/pages entwickelt. Obwohl das Entwicklungsverzeichnis inkonsistent ist, verfügt es immer noch über alle Merkmale der traditionellen JSP -Entwicklung.
<jsp:include page=''></jsp:include> oder <%@include file=""%><c:set> , <c:if> , <c:forEach> usw. kann alle verwendet werden<% out.println("hello world"); %>File->Syncronize> syncronisieren (Verknüpfungsschlüssel Ctrl+Alt+Y ). Klicken Sie dann links auf die dritte Schaltfläche und wählen Sie Update classes and resources um manuell zu aktualisieren. Nachdem Sie die Seite erfrischt haben, können Sie die neueste Seite sehen. Wenn npm run dev , wird das JSP im Verzeichnis der Seiten als Vorlagendatei für das HTMLWebpackplugin -Plugin verwendet. Jedes Mal, wenn die Datei unter Seiten geändert wird, wird sie unter webapp/WEB-INF/jsp in das relative Verzeichnis ausgegeben. Wenn Sie die spezifischen Prinzipien verstehen müssen, gehen Sie bitte zum KernkapitelZusätzlich zu den Standardbibliotheken Standard C-, FMT- und FN -Tag können Sie auch die Tag -Bibliothek anpassen.
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> Beachten Sie, dass die Adresse der JSP-Seite mit/web-inf/starten muss und der Pfad zur Entwicklung von JSP im Verzeichnis js/src/pages liegt, wodurch die Idee den TLD-Dateipfad im JSP-Verzeichnis nicht normal auflöst und bei Verwendung benutzerdefinierter Tags nicht automatisch ausgefüllt werden kann. Es kann jedoch normal laufen, und der tatsächliche Entwicklungsprozess hat wenig Auswirkungen. Wenn Sie eine bessere Lösung haben, kontaktieren Sie uns bitte.
Da Sie WebPack als Verpackungstool verwenden, können Sie die Syntaxkonvertierung von JS und CSS problemlos durchführen und derzeit unterstützen:
Bei der Entwicklung einer einzelnen Seitenanwendung gibt es eine großartige Funktion, die heiße Updates darstellt. Wenn die JS -Datei geändert wird, löst die Seite Updates in Echtzeit aus. Im Rahmen dieses Projektrahmens können Sie immer noch die Freude an heißen Updates genießen. Wenn Sie JS und CSS ändern, löst die Seite Updates in Echtzeit aus.
Dieses Projekt unterstützt Vue bereits standardmäßig. Dieses Kapitel ist auch in Vue geschrieben, und Sie können die Freude am Codieren von Vue genießen.
Dieses Projekt kombiniert die Funktionen von WebPack und JSP mit der Implementierung von multi-seitigen Anwendungen, was cool ist. Wie wurde es dann erreicht? Hier werden wir darüber sprechen, wie Sie die meisten Kernprobleme aus den Problemen beim Aufbau des Projekts lösen können.
Wenn Sie WebPack zum Implementieren von mehrseitigen Anwendungen verwenden, ist es einfach zu konfigurieren mit mehreren Eintragsportalen. Jeder Eintrag entspricht einem HtmlWebpackPlugin . Die JSP -Datei wird als Vorlagendatei für HtmlWebpackPlugin verwendet. Nachdem der Eintrag JS verpackt ist, wird es in den Körper eingefügt. Das Projekt wurde auch auf diese Weise gebaut. Hier sind ein paar Punkte, auf die Sie achten können
{ test: /.jsp$/, loader: 'raw-loader' } in WebPack konfigurieren. Hier wird raw-loader für das Kopieren von Texten verwendet. Wenn Sie einen Loader haben, der besser für JSP geeignet ist, können Sie JSP -Dateien viele Funktionen geben.config/js-jsp-map.js .Tomcat läuft unter Port 8080, Webpack-dev-Server läuft unter Port 8081 und besteht aus zwei verschiedenen Anwendungen. Dann wäre es nicht notwendig, Debugging unter Tomcat für die Entwicklung und das Debuggen in Webpack-dev-server für die Entwicklung zu schreiben. Wäre das nicht sehr problematisch?
Glücklicherweise hat Webpack-dev-Server einen Proxy-Parameter. Wir verwenden Proxy, um alle Anfragen umzukehren, um auf Webpack-dev-Server auf 8080 zuzugreifen. Auf diese Weise muss der Browser während des tatsächlichen Entwicklungsprozesses nur die 8081-Portseite öffnen. Dies berücksichtigt die Funktionen des JSP -Server -Renderings sowie die Funktionen der Webpack -Syntaxkonvertierung und der Hot -Update. Tomcat kann nur bei Bedarf neu gestartet werden. Hier sind ein paar Punkte, auf die Sie achten können
npm run dev und Tomcat, aber beide Dienste müssen gestartet werden, bevor der Browser auf 8081 zugreift.npm run dev und neu starten. Denken Sie daran, wenn es neue Dateien und Löschungen gibt, ist es am besten, beide Dienste neu zu starten.Wir wissen, dass WebPack-dev-Server das In-Memory-Dateisystem verwendet. Die JSP -Seite wird letztendlich in Tomcat veröffentlicht, und die JSP -Datei im Speicher kann nicht durch Idee gehört werden. Selbst wenn die endgültige Ausgabe JSP ändert, kann sie nicht in Tomcat bereitgestellt werden. Glücklicherweise haben wir ein Webpack-Plugin-Schreibfileplugin gefunden, mit dem die Ausgabedateien des Webpack-dev-Server-Programms zum Datentatelometersystem gezwungen werden können. Hier sind ein paar Punkte, auf die Sie achten können
Diese Idee gilt nicht nur für JSP-mehrseitige Anwendungen unter Tomcat, sondern auch für den Node als multi-seitige Serveranwendungen. Genießen Sie es!
