wjsp
1.0.0
Traditional JSP page applications cannot effectively use ES6 syntax features, and it is difficult to package and compress projects, and cannot be hot updated. Traditional single-page applications cannot perform server-side rendering under containers such as Tomcat to achieve the effect of SEO. This project is well integrated with the characteristics of traditional JSP page server-side rendering and single-page application development features, and is very easy to use!
Source code address
Demos and Documentation
If you want to support IE8, you need to downgrade webpack, because webpack2+ does not support IE8, and try to avoid using libraries that do not support IE8, such as jquery2+, lodash4+, Vue, etc. Good luck.
If you want to do a good job, you must first sharpen your tools.
If you like to edit js and css, it is also no problem to use vscode, but it is recommended to use idea when writing jsp and java.
The following summarizes the related articles on environment configuration, for reference, JDK download address, IntelliJ IDEA configuration, front-end development environment, IntelliJ IDEA configuration, JAVA WEB Tomcat environment, maven download and installation, Git Bash download and installation
├── 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
The directory structure in the src/main/js directory is modified based on the webpack template of vue-cli. If you have created a project using this template, it will be easy to get started.
cd src/main/js npm run dev
Start tomcat in idea
Open http://localhost:8081 in your browser
The following points need to be paid attention to
For the first time starting the project, it is recommended to start tomcat npm run dev first. After that, one of them will restart, and the other one will not need to be restarted. By default, npm run dev runs under port 8081, tomcat runs under port 8080. In the end, you only need to access the page of 8081 in the browser, and the page of 8080 is not necessary. In the development mode, the css introduced by js is dynamically introduced, and the page will have a flash effect. Don't worry, it won't appear in the post-release environment. When developing JSP pages, hot deployment will delay. For details, please refer to the JSP page section to develop JSP files in the pages directory and do not develop in the webapp directory. Otherwise, after switching to the pages directory to develop or package, the jsp file under the webapp will be overwritten, resulting in the lost modified content. As the entry files configured in js-jsp-map.js increase, the hot update of webpack-dev-server will be very slow. It is recommended to temporarily comment out some unused entry files according to the current development needs and keep 1 to 3, which will greatly increase the hot update time.
npm run build
The webapp is used as the output directory. The files in the static will be copied to the output directory. The jsp file in the pages directory will be copied to the webapp/WEB-INF/jsp directory as a template file. The js portal associated with the jsp will be merged and compressed and introduced into the body of the jsp file. The jsp-associated css will be extracted from the jsp file head introduced by a single css file.
If the Application Context of your packaged application is not /, for example, /app , that is, the access address is based on http://localhost:8080/app , then when packaging, remember to configure / publicPath configurate /app , and all addresses in the jsp page need to be ${pageContext.request.contextPath}/ , which can be abbreviated as ${ctx}/ in this project framework
Traditional JSP is developed under src/main/webapp . Under this project framework, jsp files are developed under src/main/js/src/pages . Although the development directory is inconsistent, it still has all the features of traditional JSP development.
<jsp:include page=''></jsp:include> or <%@include file=""%><c:set> , <c:if> , <c:forEach> etc. can all be used<% out.println("hello world"); %>File->Syncronize> Syncronize (shortcut key Ctrl+Alt+Y ), then click the third button on the left of Run and select Update classes and resources to update manually. After refreshing the page, you can see the latest page. In fact, when npm run dev , the jsp in the pages directory will be used as the template file for the htmlWebpackPlugin plugin. Each time the file under pages is modified, it will be output to the relative directory under webapp/WEB-INF/jsp . If you need to understand the specific principles, please go to the core chapterIn addition to the standard c, fmt, fn tag libraries, you can also customize the tag library.
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> Note that the address of the jsp page must start with /WEB-INF/, and the path to actually develop jsp is in the js/src/pages directory, which causes idea to fail to resolve the tld file path in the jsp directory normally, and it cannot be automatically completed when using custom tags. However, it can run normally, and the actual development process has little impact. If you have a better solution, please contact us.
Because you use webpack as a packaging tool, you can easily perform syntax conversion of js and css, and currently support:
In the process of developing a single page application, there is a great feature that is hot updates. If the js file is modified, the page will trigger updates in real time. Under this project framework, you can still enjoy the joy of hot updates. When you modify js and css, the page will trigger updates in real time.
This project already supports Vue by default. This chapter is also written in VUE, and you can enjoy the joy of coding brought by VUE.
This project combines the features of webpack and jsp to implement multi-page applications, which is cool. Then how did it be achieved? Here we will talk about how to solve the most core problems from the problems encountered in building the project.
Using webpack to implement multi-page applications is easy to associate with configuring multiple entry portals, each entry corresponds to an HtmlWebpackPlugin . The jsp file is used as the template file for HtmlWebpackPlugin . After the entry js is packaged, it will be inserted into the body. The project was also built in this way. Here are a few points to pay attention to
{ test: /.jsp$/, loader: 'raw-loader' } in webpack. Here, raw-loader is used for plain text copying. If you have a loader that is more suitable for jsp, then you can give jsp files a lot of features.config/js-jsp-map.js .Tomcat runs under port 8080, webpack-dev-server runs under port 8081, and is two different applications. Then wouldn't it be necessary to write debugging under Tomcat for development, and debugging in webpack-dev-server for development. Wouldn't this be very troublesome?
Fortunately, webpack-dev-server has a proxy parameter. We use proxy to reverse all requests to access webpack-dev-server to 8080. In this way, during the actual development process, the browser only needs to open the 8081 port page. This will take into account the functions of JSP server rendering, as well as the functions of webpack syntax conversion and hot update. Tomcat can only be restarted when necessary. Here are a few points to pay attention to
npm run dev and tomcat, but both services need to be started before the browser accesses 8081.npm run dev and restart tomcat. Remember, if there are new files and deletes, it is best to restart both services.We know that webpack-dev-server uses in-memory file system. The jsp page is ultimately published to tomcat, and the jsp file in memory cannot be listened to by idea, so even if the final output jsp changes, it cannot be deployed to tomcat. Fortunately, we found a webpack plugin WriteFilePlugin, which can force the output files of the webpack-dev-server program to the disk file system. Here are a few points to pay attention to
This idea is actually not only applicable to JSP multi-page applications under Tomcat, but also to apply to node as a server multi-page applications. Enjoy it!
