wjsp
1.0.0
Традиционные приложения страниц JSP не могут эффективно использовать функции синтаксиса ES6, и трудно упаковать и сжать проекты, и не может быть горячим обновлением. Традиционные одностраничные приложения не могут выполнять рендеринг на стороне сервера в рамках контейнеров, таких как Tomcat, для достижения эффекта SEO. Этот проект хорошо интегрирован с характеристиками традиционного рендеринга на стороне страницы JSP и функций разработки приложений на одном страницах и очень прост в использовании!
Адрес исходного кода
Демо и документация
Если вы хотите поддержать IE8, вам нужно понизить обновление WebPack, потому что WebPack2+не поддерживает IE8 и старается избегать использования библиотек, которые не поддерживают IE8, такие как jQuery2+, Lodash4+, Vue и т. Д. Удачи.
Если вы хотите сделать хорошую работу, вы должны сначала обострить свои инструменты.
Если вы любите редактировать JS и CSS, также не проблема использовать VSCODE, но рекомендуется использовать идею при написании JSP и Java.
В следующем обобщении соответствующих статей о конфигурации среды для справки, адреса загрузки JDK, конфигурации INTELLIJ IDEA, среды развития фронтальной разработки, конфигурации INTELLIJ IDEA, среда Java Web Tomcat, 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
Структура каталога в каталоге SRC/Main/JS изменяется на основе шаблона WebPack Vue-Cli. Если вы создали проект, используя этот шаблон, его будет легко начать.
cd src/main/js npm run dev
Начните Tomcat в идее
Откройте http://localhost:8081 в вашем браузере
На следующие моменты необходимо обратить внимание на
Впервые запустив проект, рекомендуется запустить Tomcat npm run dev в первую очередь. После этого один из них перезагрузится, а другой не нужно будет перезагружаться. По умолчанию npm run dev работает под портом 8081, Tomcat работает под портом 8080. В конце концов, вам нужно только получить доступ к странице 8081 в браузере, а страница 8080 не требуется. В режиме разработки CSS, представленная JS, представлен динамически, и страница будет иметь эффект вспышки. Не волнуйтесь, это не появится в среде после освобождения. При разработке страниц JSP горячее развертывание задержится. Для получения подробной информации, пожалуйста, обратитесь к разделу страницы JSP для разработки файлов JSP в каталоге страниц и не разрабатывайте в каталоге WebApp. В противном случае, после перехода на каталог страниц для разработки или пакета, файл JSP под веб -приложением будет перезаписан, что приведет к потерянному модифицированному контенту. Поскольку входные файлы, настроенные в увеличении JS-JSP-Map.js, горячее обновление WebPack-Dev-Server будет очень медленным. Рекомендуется временно прокомментировать некоторые неиспользованные входные файлы в соответствии с текущими потребностями в разработке и сохранить от 1 до 3, что значительно увеличит время обновления.
npm run build
WebApp используется в качестве выходного каталога. Файлы на статике будут скопированы в выходной каталог. Файл JSP в каталоге страниц будет скопирован в каталог WebApp/Web-Inf/JSP в качестве файла шаблона. Портал JS, связанный с JSP, будет объединен, сжат и введен в тело файла JSP. CSS-ассоциированный CSS будет извлечен из головки файла JSP, введенной одним файлом CSS.
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
Традиционный 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 . Если вам нужно понять конкретные принципы, перейдите в основную главуВ дополнение к стандартным библиотекам тегов FMT, FN, вы также можете настроить библиотеку тегов.
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld" %> Обратите внимание, что адрес страницы JSP должен начинаться с/web-inf/, и путь к фактическому разработке JSP находится в каталоге js/src/pages , что заставляет идею не разрешать путь файла TLD в каталоге JSP нормально, и она не может быть автоматически завершена при использовании пользовательских тегов. Тем не менее, он может работать нормально, и фактический процесс разработки оказывает незначительное влияние. Если у вас есть лучшее решение, пожалуйста, свяжитесь с нами.
Поскольку вы используете 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 и является двумя разными приложениями. Тогда не нужно будет писать отладку под 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 в памяти не может быть прослушан по идее, поэтому даже если конечный выходной jsp изменяется, его нельзя развернуть в Tomcat. К счастью, мы нашли плагин WebPack Plugin PriseFilePlugin, который может привести выходные файлы программы WebPack-DEV-Server в файловую систему диска. Вот несколько моментов, чтобы обратить внимание на
Эта идея на самом деле применима не только к многостраничным приложениям JSP в рамках Tomcat, но и для применения к узлу в качестве многостраничных приложений сервера. Наслаждайся этим!
