Пример Spring MVC 4 для начинающих. Базовые настройки. Подключение Bootstrap в Spring MVC.

Пример для начинающих в Spring MVC 4. Основные необходимые настройки. Подключение фреймворка Bootstrap в приложении Spring MVC.

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Используемые технологии и библиотеки
  • Spring MVC 4.0.4.Release
  • Java 1.8
  • JSP 2.2
  • Servlet 3.1.0
  • Maven 3.2.5
  • IntelliJ IDEA 15.0.2

1. Описание задачи

Начнем с самого начала — подключения фреймворка Spring MVC в maven проект. Далее подключим фреймворк Bootstrap и шаблонную тему, которую будем использовать на протяжении проекта. Рассмотрим базовые настройки Spring MVC, web.xml, pom.xml и bootstrap.

2. Структура проекта

Структура проекта

В проекте присутствуют:

  • web.xmlдескриптор развертывания. Базовый файл настроек для Java веб приложения.
  • mvc-config.xml, application-context.xml — конфигурационные файлы Spring MVC.
  • пакет view — здесь будут находиться все представления, которые будут использоваться в проекте.
  • пакет resources — здесь будут находиться различные статические ресурсы (css стили, шрифты и т.п.).
  • pom.xml — главный файл maven. Здесь подключаются зависимости для различных библиотек.

3. Создание проекта и подключение фреймворка Spring MVC

3.1 Создание проекта

В Idea создаем пустой maven проект. Ничего внутри выбирать не нужно и просто жмем везде далее. Разумеется задаете имя и местонахождение своего проекта. После этого в структуре появится pom.xml файл, в который мы будем добавлять зависимости.

1 createMaven

3.2 Настройка pom.xml

Для подключения фреймворка Spring MVC в наш проект необходимо добавить в него соответствующие библиотеки. Для этого приведите ваш pom.xml в такой вид:

pom.xml:

Давайте разберем его по пунктам. Итак в начале идет описание проекта (группа, id артефакта и версия). Далее в теге properties указываются версии для различных библиотек. Такой подход позволяет легко обновлять версии в дальнейшем и не лазить по длинному pom.xml файлу в поисках тега <version> нужной библиотеки. Здесь указаны версии: Java, JSP, JSTL и Servlet — они необходимы для базового веб приложения на основе jsp представлений. Далее идет версия самого фреймворка Spring.

Следующая часть — подключение библиотек в проект. Обратите внимание на эту конструкцию:

Т.к. в дальнейшем мы будем использовать многие подпроекты Spring, то такая запись позволяет подключать необходимый модуль вот так:

Т.е. уже без указания версии (это помогает избегать коллизий косяков совместимости последних версий. Подробнее на сайте спринг).

В заключении прописаны настройки сборки. Рекомендую указать source 1.8, как это сделано здесь, чтобы при каждом изменении проекта у вас не слетала версия используемой Java на 1.5.

3.3. Создание web проекта и подключение Spring MVC в проект

1 addFrameworkSupport

Нажимаем правой кнопкой на проект и выбираем Add Framework Support... Далее выбираем Web Application Spring. Если в maven зависимость подгрузилась, то идея укажет на нее в поле справа. На самом деле от того, что вы выберите зависит какие xml файлы автоматически будут добавлены в проект. В целом это можно сделать и руками, но так гораздо удобнее и потом идея подхватит их и будет удобно навигироваться. В нашем случае будут добавлены файлы конфигурации спринг и web.xml файл.

3.4. web.xml

Стандартная структура web.xml для проекта на основе Spring выглядит так:

Описание каждого элемента можете поискать самостоятельно. Здесь добавлены два базовых листенера, один сервлет и его маппинг, а так же страница входа в приложение и страница ошибок.

3.5. Файл конфигурации Spring

Небольшое отступление — обратите внимание, что в проекте пакет web был переименован в webapp (стандартная структура веб проекта). Это необходимо учесть в Project Structure (ctrl+alt+shift+s) и поменять путь к корню веб приложения.

3 rename web package

Теперь настроим Spring. Для этого в приложении используются два конфигурационных файла: application-context.xml и mvc-config.xml. В первом будут указывать настройки для всего приложения, во втором — только относящиеся к web-mvc. Назвать их можно как угодно, но рекомендую разделять их примерно таким образом (кстати это не обязательно и всё можно держать вообще в одном файле, но с ростом проекта могут возникнуть сложности поддержки).

4 createSpringXML

Вам также придется указать в Project Structure эти два файла как показано на скриншоте:

5 addSpringXMLMapping

Теперь сами файлы.

application-context.xml:

Здесь только указан путь к статическим ресурсам. В комментарии показано как можно подключать другие ресурсы, например темы.

mvc-config.xml:

<context:component-scan /> — включает поиск классов с аннотациями, вроде @Component по указанным пакетам. На самом деле в этой части она не нужна (у нас еще нет ни одного Java класса).

ViewResolver — используется при возврате модели из спринг бина. Подробнее Spring MVC — описание интерфейса ViewResolver.

view-controller — с помощью viewResolver перенаправит пользователя перешедшего по ссылке в представление. Например для /about.html произойдет такой поиск — к префиксу добавится указанный view-name и добавиться суффикс. Т.е. /WEB-INF/view/about/about.jsp.

4. Подключение Bootstrap

В нашем проекте мы будем использовать популярный фреймворк Bootstrap 3.3.6. Существует способ подключения bootstrap с помощью jar зависимости в maven. Вы можете перейти на сайт webjars.org и посмотреть как это сделать. В этом проекте используется более хардкорный метод — скачивание ресурсов и копирование в соответствующие пакеты.

4.1. Зависимости bootstrap

На сайте проекта bootstrap необходимо скачать как минимум: bootstrap.css, bootstrap.js. Здесь были добавлены еще несколько js и css файлов (версии min — т.е. сжатые). Вы можете скопировать их в свой проект в соответствующие каталоги (resources/css, js, fonts и т.д.).

4.2 Подключение шаблона темы bootstrap

В этом проекте был использован бесплатный шаблон на основе bootstrap — startbootstrap-modern-business-1.0.5. К достоинствам jsp относится его полная совместимость в html. Поэтому вы можете просто открыть index.html из темы шаблона и скопировать его содержимое к вам в jsp файл (но нужно оставить базовые настройки jsp файла, которые находятся в начале файла!). Так и было сделано здесь со страницами index.jsp и about.jsp.

5. Создание jsp представления.

Обратите внимание, что в структуре этой части проекта файл index.jsp лежит внутри WEB-INF, т.е. он не доступен по прямой ссылке из браузера. Страница будет загружаться, т.к. на нее будет настроена переадресация из welcome-file-list внутри web.xml. В дальнейшем эта страница перекочует в корень веб проекта. Ниже приведена обязательная часть для jsp страницы, остальной код был скопирован из index.html шаблона.

Здесь прописаны пространства имен, а также указаны пути к файлам стилей и javascript файла фреймворка bootstrap.

Полный листинг index.jsp.

6. Запуск приложения

Далее вам необходимо настроить веб сервер. Например можно использовать Tomcat. Все настройки были оставлены по умолчанию и добавлен :exploded архив приложения.

Настройка Tomcat

После запуска увидим страницу нашего приложения с подключенными стилями bootstrap.

base mvc result page

Исходные коды

1. MVC + Bootstrap — исходники этой части

MVC_AngularJS_Html5 full project — полный проект

startbootstrap-modern-business-1.0.5 — шаблон темы на основе bootstrap

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5
Share Button
43
27459 Total Views 6 Views Today

17 thoughts on “Пример Spring MVC 4 для начинающих. Базовые настройки. Подключение Bootstrap в Spring MVC.

  1. Андрей:

    Спасибо за проект!

    Есть проблема, конкретно этот пример не собирается…

    сыпет такие ошибки… хотя, собрал все по примеру

    org.apache.catalina.core.StandardContext.startInternal Error listenerStart
    org.apache.catalina.core.StandardContext.startInternal Context [] startup failed due to previous errors

    SEVERE [RMI TCP Connection(3)-127.0.0.1] org.apache.catalina.core.StandardContext.listenerStart Error configuring application listener of class org.springframework.web.context.request.RequestContextListener

    1. Зайдите в свойства проекта (alt+ctrl+shift+c в idea), modules и исправьте маппинг xml файлов спринг. В проекте сохранены настройки моей среды и у вас могут не мапится xml пути. А так же гляньте что идет в артефакт — все зависимости должны быть включены в архив, который будет деплоится на сервере (tomcat в моем случае).

      1. Андрей:

        Да, все верно, спасибо…

        Не были включены зависимости в архив

  2. Юрий:

    Все собирается. Необходимо только разобраться.) По моему мнению автор гениальный человек. Так как выложил и буквально разжевал очень хороший вариант создания Веб приложения.

  3. возможно из за недостатка знаний я сделал что-то не так, страницы не грузятся

    прошу помощи

    http://stick.kz/img/2016-07/24/s853b6q56zwqewf1j2aimerpa.png

     

     

    1. Ильдар:

      [RMI TCP Connection(5)-127.0.0.1] org.apache.catalina.core.StandardContext.startInternal One or more listeners failed to start. Full details will be found in the appropriate container log file
      [RMI TCP Connection(5)-127.0.0.1] org.apache.catalina.core.StandardContext.startInternal Context [] startup failed due to previous errors

      такие ошибки при запуске томката

      1. Ильдар:

        были проблемы с конфигами, все работает

  4. Rus:

    Подскажите пожалуйста, такая же проблема не могу исправить.

  5. qwe:

    Тоже делал всё по инструкции, но, к сожалению, не получилось запустить проект 🙁

    Кажется, тут чего-то не хватает: либо у меня мозгов, либо статья не совсем полная 🙂

  6. Александр:

    У меня вопрос.

    Такие комментарии, как «<! Generic properties >«, идея создает в pom.xml или их вручную прописывали?

    1. В ручную, чтобы понятнее было при изучении.

  7. Николай:

    Можно поподробнее про мапинг ибо не понятно. При запуске программы сервер пишет: Error during artifact deployment. See server log for details. 
    В логе Tomcata указано что ошибка в: org.apache.catalina.core.StandardContext.listenerStart Error configuring application listener of class org.springframework.web.context.ContextLoaderListener

    При этом когда заходишь в артефакт и начинаешь просматривать web.xml файл, то идея подчеркивает следующее:

    я так понимают она их найти не может. При этом в маппинге прописаны application-context.xml и mvc-config.xml

    Стоит также отметить, что я также смотрел ваш проект и смотрел, что там в маппинге указано. В вашем случае прописаны какие-то другие файлы но не application-context.xml и mvc-config.xml и не понятно почему но ваш проект запускается

     

  8. AlexFrei:

    Спасибо огромное! Все работает! Спасибо! Danke sehr!

  9. Фёдор:

    Спасибо большое за этот пример. Если читать только эту страничку, то возникает вопрос : а вот зачем Spring MVC без Controller ? Зачем столько телодвижений ради простеньких страничек?.. А вот смысл статьи становится виден только нажав на ссылку MVC_AngularJS_Html5 full project — полный проект. Вот они контроллеры, модели, вот оно всё взаимодействие, о чём следовало бы сказать в начале.

    Кстати, полный проект слишком объёмный для «Spring MVC 4 для начинающих». Но всё равно — спасибо 🙂

  10. kiss_of_darkness:

    Добрый день!

    Застряла на мертвой точке и пока не могу понять в чем дело. У меня не до конца подгружаются бутсраповские файлы, хотя лежат там же где и у вас. https://gyazo.com/8a7b9525ad1021a746912766dfa9ecd8

    В ресурсах указала https://gyazo.com/4d7f345f904dde104981d17d71c55850

    В чем может быть проблема?

    Заранее спасибо!

  11. Oleg P:

    У меня такая проблема: проект собирается, однако когда открывается страница браузера, внутри отображается $END$

    А в title браузера $Title$.

    Версии Tomcat, Spring и остального поменял на такие же, такие же как в руководстве, но проблема не ушла.

    В чем моя ошибка, хотя бы приблизительно, в какую сторону копать?

     

  12. PaHod:

    Присоеденяюсь ко всем выше сказанным благодарностям!

    Статья действительно хороша! Ваш проект заработал у меня с первой попытки))

Добавить комментарий