wjsp
1.0.0
Las aplicaciones tradicionales de página JSP no pueden usar de manera efectiva las funciones de sintaxis ES6, y es difícil empacar y comprimir proyectos, y no se puede actualizar en caliente. Las aplicaciones tradicionales de una sola página no pueden realizar la representación del lado del servidor en contenedores como Tomcat para lograr el efecto del SEO. Este proyecto está bien integrado con las características de la representación tradicional del servidor de la página JSP y las características de desarrollo de aplicaciones de una sola página, ¡y es muy fácil de usar!
Dirección del código fuente
Demostraciones y documentación
Si desea admitir IE8, debe rebajar el Webpack, porque Webpack2+no admite IE8 e intenta evitar el uso de bibliotecas que no admiten IE8, como jQuery2+, LOdash4+, Vue, etc. Buena suerte.
Si desea hacer un buen trabajo, primero debe afilar sus herramientas.
Si desea editar JS y CSS, tampoco es problema usar VSCODE, pero se recomienda usar la idea al escribir JSP y Java.
A continuación se resume los artículos relacionados sobre la configuración del entorno, como referencia, dirección de descarga JDK, configuración de ideas de IntelliJ, entorno de desarrollo front-end, configuración de ideas de IntelliJ, entorno de tomcat web Java, descarga e instalación de Maven, descarga e instalación de 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
La estructura del directorio en el directorio SRC/Main/JS se modifica en función de la plantilla de poca web de Vue-CLI. Si ha creado un proyecto usando esta plantilla, será fácil comenzar.
cd src/main/js npm run dev
Empiece a Tomcat en Idea
Abra http://localhost:8081 en su navegador
Los siguientes puntos deben recibir atención a
Por primera vez, comenzar el proyecto, se recomienda iniciar Tomcat npm run dev primero. Después de eso, uno de ellos se reiniciará, y el otro no necesitará ser reiniciado. De forma predeterminada, npm run dev se ejecuta en el puerto 8081, Tomcat se ejecuta bajo el puerto 8080. Al final, solo necesita acceder a la página de 8081 en el navegador, y la página de 8080 no es necesaria. En el modo de desarrollo, el CSS introducido por JS se introduce dinámicamente, y la página tendrá un efecto flash. No se preocupe, no aparecerá en el entorno posterior a la liberación. Al desarrollar páginas JSP, la implementación en caliente se retrasará. Para obtener más detalles, consulte la sección de la página JSP para desarrollar archivos JSP en el directorio de páginas y no se desarrolle en el Directorio WebApp. De lo contrario, después de cambiar al directorio de páginas para desarrollar o empaquetar, el archivo JSP bajo la aplicación web se sobrescribirá, lo que dará como resultado el contenido modificado perdido. A medida que aumentan los archivos de entrada configurados en js-jsp-map.js, la actualización de WebPack-Dev-Server será muy lenta. Se recomienda comentar temporalmente algunos archivos de entrada no utilizados de acuerdo con las necesidades de desarrollo actuales y mantener de 1 a 3, lo que aumentará en gran medida el tiempo de actualización en caliente.
npm run build
La aplicación web se utiliza como directorio de salida. Los archivos en la estática se copiarán al directorio de salida. El archivo JSP en el directorio de páginas se copiará en el directorio WebApp/Web-INF/JSP como un archivo de plantilla. El portal JS asociado con el JSP se fusionará, se comprimirá e introducirá en el cuerpo del archivo JSP. El CSS asociado a JSP se extraerá del cabezal del archivo JSP introducido por un solo archivo CSS.
Si el contexto de la aplicación de su aplicación empaquetada no es/, por ejemplo, /app , es decir, la dirección de acceso se basa en http://localhost:8080/app , entonces cuando empaquete, recuerde configurar/ publicPath configuurato/app, y todas las direcciones en la página jsp deben ser ${pageContext.request.contextPath}/ , que se puede ser abreviadas como ${ctx}/
JSP tradicional se desarrolla en src/main/webapp . Según este marco del proyecto, los archivos JSP se desarrollan en src/main/js/src/pages . Aunque el directorio de desarrollo es inconsistente, todavía tiene todas las características del desarrollo tradicional de JSP.
<jsp:include page=''></jsp:include> o <%@include file=""%><c:set> , <c:if> , <c:forEach> etc. se pueden usar<% out.println("hello world"); %>File->Syncronize> Syncronize (clave de acceso directo Ctrl+Alt+Y ), luego haga clic en el tercer botón a la izquierda de la ejecución y seleccione Update classes and resources para actualizar manualmente. Después de actualizar la página, puede ver la última página. De hecho, cuando npm run dev , el JSP en el directorio de páginas se utilizará como el archivo de plantilla para el complemento htmlwebpackplugin. Cada vez que se modifique el archivo en páginas, se emitirá al directorio relativo en webapp/WEB-INF/jsp . Si necesita comprender los principios específicos, vaya al capítulo centralAdemás de las bibliotecas de etiquetas estándar C, FMT, FN, también puede personalizar la biblioteca de etiquetas.
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> Tenga en cuenta que la dirección de la página JSP debe comenzar con/web-inf/, y la ruta para desarrollar realmente JSP está en el directorio js/src/pages , lo que hace que la idea no resuelva la ruta del archivo TLD en el directorio JSP normalmente, y no se puede completar automáticamente cuando se usa etiquetas personalizadas. Sin embargo, puede ejecutarse normalmente, y el proceso de desarrollo real tiene poco impacto. Si tiene una mejor solución, contáctenos.
Debido a que usa Webpack como una herramienta de embalaje, puede realizar fácilmente la conversión de sintaxis de JS y CSS, y actualmente admite:
En el proceso de desarrollo de una aplicación de una sola página, hay una excelente característica que son las actualizaciones en caliente. Si el archivo JS se modifica, la página activará actualizaciones en tiempo real. Bajo este marco del proyecto, aún puede disfrutar de la alegría de las actualizaciones calientes. Cuando modifica JS y CSS, la página activará actualizaciones en tiempo real.
Este proyecto ya admite Vue por defecto. Este capítulo también está escrito en Vue, y puede disfrutar de la alegría de la codificación traída por Vue.
Este proyecto combina las características de Webpack y JSP para implementar aplicaciones de varias páginas, lo cual es genial. Entonces, ¿cómo se logró? Aquí hablaremos sobre cómo resolver los problemas más centrales de los problemas encontrados en la construcción del proyecto.
El uso de WebPack para implementar aplicaciones de varias páginas es fácil de asociar con la configuración de portales de entrada múltiples, cada entrada corresponde a un HtmlWebpackPlugin . El archivo JSP se usa como el archivo de plantilla para HtmlWebpackPlugin . Después de que la entrada se empaqueta, se insertará en el cuerpo. El proyecto también fue construido de esta manera. Aquí hay algunos puntos para prestar atención a
{ test: /.jsp$/, loader: 'raw-loader' } en Webpack. Aquí, raw-loader se usa para la copia de texto sin formato. Si tiene un cargador que es más adecuado para JSP, entonces puede dar a los archivos JSP muchas características.config/js-jsp-map.js .Tomcat se ejecuta bajo el puerto 8080, Webpack-Dev-Server se ejecuta bajo el puerto 8081, y son dos aplicaciones diferentes. Entonces, ¿no sería necesario escribir la depuración bajo Tomcat para el desarrollo y la depuración en Webpack-Dev-Server para el desarrollo. ¿No sería esto muy problemático?
Afortunadamente, Webpack-Dev-Server tiene un parámetro proxy. Utilizamos proxy para revertir todas las solicitudes para acceder a Webpack-Dev-Server a 8080. De esta manera, durante el proceso de desarrollo real, el navegador solo necesita abrir la página del puerto 8081. Esto tendrá en cuenta las funciones de la representación del servidor JSP, así como las funciones de la conversión de sintaxis de Webpack y la actualización en caliente. Tomcat solo se puede reiniciar cuando sea necesario. Aquí hay algunos puntos para prestar atención a
npm run dev y Tomcat, pero ambos servicios deben iniciarse antes de que el navegador acceda a 8081.npm run dev y reiniciar Tomcat. Recuerde, si hay nuevos archivos y eliminaciones, es mejor reiniciar ambos servicios.Sabemos que WebPack-Dev-Server utiliza el sistema de archivos en memoria. La página JSP se publica en última instancia en Tomcat, y el archivo JSP en la memoria no se puede escuchar por idea, por lo que incluso si la salida final JSP cambia, no se puede implementar en Tomcat. Afortunadamente, encontramos un complemento webpack WriteFilePlugin, que puede forzar los archivos de salida del programa Webpack-Dev-Server al sistema de archivos de disco. Aquí hay algunos puntos para prestar atención a
Esta idea en realidad no solo es aplicable a las aplicaciones de varias páginas JSP en TOMCAT, sino también para aplicar al nodo como aplicaciones de múltiples páginas de servidor. ¡Disfrútala!
