wjsp
1.0.0
기존의 JSP 페이지 응용 프로그램은 ES6 구문 기능을 효과적으로 사용할 수 없으며 프로젝트를 패키지 및 압축하기가 어렵고 뜨거운 업데이트 할 수 없습니다. 기존의 단일 페이지 응용 프로그램은 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의 웹 팩 템플릿을 기반으로 수정됩니다. 이 템플릿을 사용하여 프로젝트를 만든 경우 쉽게 시작할 수 있습니다.
cd src/main/js npm run dev
아이디어에서 Tomcat을 시작하십시오
브라우저에서 http://localhost:8081 엽니 다
다음 사항은주의를 기울여야합니다
프로젝트를 처음 시작하면 npm run dev Tomcat을 시작하는 것이 좋습니다. 그 후에는 그들 중 하나가 다시 시작되고 다른 하나는 다시 시작할 필요가 없습니다. 기본적으로 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 기반으로하는 경우 포장시 구성/ publicPath 구성/앱을 구성해야하며 JSP 페이지의 모든 주소는 ${pageContext.request.contextPath}/ ${ctx}/ in abbreved in a abbreved가 필요합니다. 프레임 워크
기존 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 )를 클릭 한 다음 왼쪽의 왼쪽의 세 번째 버튼을 클릭하고 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 디렉토리에 있으므로 아이디어가 JSP 디렉토리의 TLD 파일 경로를 정상적으로 해결하지 못하며 사용자 정의 태그를 사용할 때는 자동으로 완료 할 수 없습니다. 그러나 정상적으로 실행될 수 있으며 실제 개발 프로세스는 거의 영향을 미치지 않습니다. 더 나은 솔루션이 있으면 저희에게 연락하십시오.
웹 팩을 포장 도구로 사용하므로 JS 및 CSS의 구문 변환을 쉽게 수행 할 수 있으며 현재 지원할 수 있습니다.
단일 페이지 응용 프로그램을 개발하는 과정에서 핫 업데이트 인 훌륭한 기능이 있습니다. JS 파일이 수정되면 페이지가 실시간으로 업데이트를 트리거합니다. 이 프로젝트 프레임 워크에서도 여전히 핫 업데이트의 기쁨을 누릴 수 있습니다. JS 및 CSS를 수정하면 페이지가 실시간으로 업데이트를 트리거합니다.
이 프로젝트는 이미 기본적으로 VUE를 지원합니다. 이 장은 Vue에도 작성되었으며 Vue가 가져온 코딩의 기쁨을 즐길 수 있습니다.
이 프로젝트는 Webpack 및 JSP의 기능을 결합하여 다중 페이지 응용 프로그램을 구현합니다. 그렇다면 어떻게 달성 되었습니까? 여기서 우리는 프로젝트 구축에서 발생하는 문제에서 가장 핵심 문제를 해결하는 방법에 대해 이야기 할 것입니다.
웹 팩을 사용하여 다중 페이지 응용 프로그램을 구현하는 것은 여러 입력 포털 구성과 쉽게 연결할 수 있으며 각 항목은 HtmlWebpackPlugin 에 해당합니다. JSP 파일은 HtmlWebpackPlugin 의 템플릿 파일로 사용됩니다. 항목 JS가 포장 된 후에는 신체에 삽입됩니다. 이 프로젝트는 이런 식으로 구축되었습니다. 주의를 기울여야 할 몇 가지 요점이 있습니다
{ test: /.jsp$/, loader: 'raw-loader' } 구성해야합니다. 여기에서 raw-loader 일반 텍스트 복사에 사용됩니다. JSP에 더 적합한 로더가 있다면 JSP 파일에 많은 기능을 제공 할 수 있습니다.config/js-jsp-map.js 에 있습니다.Tomcat은 포트 8080에 따라 실행되며 Webpack-Dev-Server는 포트 8081에 따라 실행되며 두 가지 다른 응용 프로그램입니다. 그런 다음 개발을 위해 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 다중 페이지 응용 프로그램에 적용 할뿐만 아니라 서버 멀티 페이지 응용 프로그램으로서 노드에 적용 할 수 있습니다. 즐기세요!
