18.03.2016 / Last updated : 08.02.2021 Nikolay V. Spring MVC

Пример 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 файл, в который мы будем добавлять зависимости.

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

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

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>ru.javastudy</groupId>
    <artifactId>mvc_html5_angular</artifactId>
    <version>1.0</version>

    <properties>

        <!-- Generic properties -->
        <java.version>1.8</java.version>
        <!-- Web -->
        <jsp.version>2.2</jsp.version>
        <jstl.version>1.2</jstl.version>
        <servlet.version>3.1.0</servlet.version>

        <!-- Spring -->
        <spring-framework.version>4.2.4.RELEASE</spring-framework.version>

    </properties>

    <dependencyManagement>
        <!--all spring dependencies -->
        <dependencies>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-framework-bom</artifactId>
                <version>${spring-framework.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>
    
    <!--bootstrap webjars.org-->
    
    <dependencies>

        <!-- Spring MVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>

        <!-- Other Servlet Web dependencies -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>${jstl.version}</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>${servlet.version}</version>
            <scope>provided</scope>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>${jsp.version}</version>
            <scope>provided</scope>
        </dependency>

    </dependencies>
    <!--http://startbootstrap.com/template-overviews/modern-business/  this is theme-->

    <build>

        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.0.5</version>
                <configuration>
                    <source>1.8</source>
                    <target>1.8</target>
                    <compilerArgument>-Xlint:all</compilerArgument>
                    <showWarnings>true</showWarnings>
                    <showDeprecation>true</showDeprecation>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>ru.javastudy</groupId>

<artifactId>mvc_html5_angular</artifactId>

<java.version>1.8</java.version>

<jsp.version>2.2</jsp.version>

<jstl.version>1.2</jstl.version>

<servlet.version>3.1.0</servlet.version>

<spring-framework.version>4.2.4.RELEASE</spring-framework.version>

</properties>

<groupId>org.springframework</groupId>

<artifactId>spring-framework-bom</artifactId>

<version>${spring-framework.version}</version>

<scope>import</scope>

</dependency>

</dependencies>

</dependencyManagement>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

</dependency>

<groupId>javax.servlet</groupId>

<version>${jstl.version}</version>

</dependency>

<groupId>javax.servlet</groupId>

<artifactId>javax.servlet-api</artifactId>

<version>${servlet.version}</version>

<scope>provided</scope>

</dependency>

<groupId>javax.servlet.jsp</groupId>

<version>${jsp.version}</version>

<scope>provided</scope>

</dependency>

</dependencies>

<build>

<groupId>org.apache.maven.plugins</groupId>

<artifactId>maven-compiler-plugin</artifactId>

<compilerArgument>-Xlint:all</compilerArgument>

</configuration>

</plugin>

</plugins>

</build>

</project>

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

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

  <dependencyManagement>
        <!--all spring dependencies -->
        <dependencies>
            <dependency>
                <groupId>org.springframework</groupId>
                <artifactId>spring-framework-bom</artifactId>
                <version>${spring-framework.version}</version>
                <type>pom</type>
                <scope>import</scope>
            </dependency>
        </dependencies>
    </dependencyManagement>

<groupId>org.springframework</groupId>

<artifactId>spring-framework-bom</artifactId>

<version>${spring-framework.version}</version>

<scope>import</scope>

</dependency>

</dependencies>

</dependencyManagement>

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

        <!-- Spring MVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
        </dependency>

<groupId>org.springframework</groupId>

<artifactId>spring-webmvc</artifactId>

</dependency>

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

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

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

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

3.4. web.xml

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
         version="3.1">
    <display-name>mvc-html5-angularjs</display-name>
    
    <context-param>
        <param-name>contextConfigLocation</param-name>
        <param-value>
            WEB-INF/config/application-context.xml
        </param-value>
    </context-param>

    <listener>
        <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    </listener>
    <listener>
        <listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>
    </listener>

    <servlet>
        <servlet-name>dispatcherServlet</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>/WEB-INF/config/mvc-config.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>dispatcherServlet</servlet-name>
        <url-pattern>/</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>/WEB-INF/view/index.jsp</welcome-file>
    </welcome-file-list>

    <error-page>
        <error-code>404</error-code>
        <location>/WEB-INF/view/error/errorpage.jsp</location>
    </error-page>
    
</web-app>

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"

version="3.1">

<display-name>mvc-html5-angularjs</display-name>

<context-param>

<param-name>contextConfigLocation</param-name>

<param-value>

WEB-INF/config/application-context.xml

</param-value>

</context-param>

<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>

</listener>

<listener-class>org.springframework.web.context.request.RequestContextListener</listener-class>

</listener>

<servlet-name>dispatcherServlet</servlet-name>

<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

<init-param>

<param-name>contextConfigLocation</param-name>

<param-value>/WEB-INF/config/mvc-config.xml</param-value>

</init-param>

<load-on-startup>1</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>dispatcherServlet</servlet-name>

<url-pattern>/</url-pattern>

</servlet-mapping>

<welcome-file-list>

<welcome-file>/WEB-INF/view/index.jsp</welcome-file>

</welcome-file-list>

<error-page>

<error-code>404</error-code>

<location>/WEB-INF/view/error/errorpage.jsp</location>

</error-page>

</web-app>

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

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

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

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

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

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

application-context.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/mvc
	   http://www.springframework.org/schema/mvc/spring-mvc.xsd
	   http://www.springframework.org/schema/context
	   http://www.springframework.org/schema/context/spring-context.xsd">


    <!-- Static Resources Configuration (get access to static sources such as CSS and JavaScript files) -->
    <mvc:resources mapping="/resources/**" location="/resources/" />
    <!-- themes can be put in different folder such as
        <mvc:resources mapping="/resources/**" location="/resources/themeBlue" />
        <mvc:resources mapping="/resources/**" location="/resources/themeGreen" />
     -->

</beans>

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd">

<mvc:resources mapping="/resources/**" location="/resources/" />

<!-- themes can be put in different folder such as

<mvc:resources mapping="/resources/**" location="/resources/themeBlue" />

<mvc:resources mapping="/resources/**" location="/resources/themeGreen" />

-->

</beans>

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

mvc-config.xml:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/mvc
	   http://www.springframework.org/schema/mvc/spring-mvc.xsd
	   http://www.springframework.org/schema/context
	   http://www.springframework.org/schema/context/spring-context.xsd">

    <!-- context:component-scan This tag will scan @Component, @Repository, @Service, @Controller
         and also resolves @Autowired and @Qualifier -->
    <context:component-scan base-package="ru.javastudy.mvcHtml5Angular.mvc" />

    <!-- ViewResolver bean config for mapping strings to jsp views -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- Example: a logical view name of 'showMessage' is mapped to '/WEB-INF/jsp/showMessage.jsp' -->
        <property name="order" value="1" />
        <property name="prefix" value="/WEB-INF/view" />
        <property name="suffix" value=".jsp" />
    </bean>


    <mvc:view-controller path="/about.html" view-name="/about/about"/>
    <mvc:view-controller path="/index.html" view-name="/index"/>


</beans>

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="http://www.springframework.org/schema/beans"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xmlns:mvc="http://www.springframework.org/schema/mvc"

xmlns:context="http://www.springframework.org/schema/context"

xsi:schemaLocation="http://www.springframework.org/schema/beans

http://www.springframework.org/schema/beans/spring-beans.xsd

http://www.springframework.org/schema/mvc

http://www.springframework.org/schema/mvc/spring-mvc.xsd

http://www.springframework.org/schema/context

http://www.springframework.org/schema/context/spring-context.xsd">

<!-- context:component-scan This tag will scan @Component, @Repository, @Service, @Controller

and also resolves @Autowired and @Qualifier -->

<context:component-scan base-package="ru.javastudy.mvcHtml5Angular.mvc" />

</bean>

<mvc:view-controller path="/about.html" view-name="/about/about"/>

<mvc:view-controller path="/index.html" view-name="/index"/>

</beans>

<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 шаблона.

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>
  <head>
    <title>Javastudy.ru MVC_HTML5_Angular</title>
    <spring:url value="resources/css/bootstrap.css" var="bootstrap"/>
    <spring:url value="/resources/css/modern-business.css" var="startertemplate"/>
    <link href="${bootstrap}" rel="stylesheet" />
    <link href="${startertemplate}" rel="stylesheet" />
  </head>

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>

<head>

<title>Javastudy.ru MVC_HTML5_Angular</title>

<spring:url value="resources/css/bootstrap.css" var="bootstrap"/>

<spring:url value="/resources/css/modern-business.css" var="startertemplate"/>

</head>

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

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

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>
  <head>
    <title>Javastudy.ru MVC_HTML5_Angular</title>
    <spring:url value="resources/css/bootstrap.css" var="bootstrap"/>
    <spring:url value="/resources/css/modern-business.css" var="startertemplate"/>
    <link href="${bootstrap}" rel="stylesheet" />
    <link href="${startertemplate}" rel="stylesheet" />
  </head>
  <body>

  <!-- Navigation -->
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
      <!-- Brand and toggle get grouped for better mobile display -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">Start Bootstrap</a>
      </div>
      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="about.html">About</a>
          </li>
          <li>
            <a href="services.html">Lessons</a>
          </li>
          <li>
            <a href="contact.html">Contact</a>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorial<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="portfolio-1-col.html">Lesson 1</a>
              </li>
              <li>
                <a href="portfolio-2-col.html">Lesson 2</a>
              </li>
              <li>
                <a href="portfolio-3-col.html">Lesson 3</a>
              </li>
              <li>
                <a href="portfolio-4-col.html">Lesson 5</a>
              </li>
              <li>
                <a href="portfolio-item.html">Lesson 5</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="blog-home-1.html">Blog Home 1</a>
              </li>
              <li>
                <a href="blog-home-2.html">Blog Home 2</a>
              </li>
              <li>
                <a href="blog-post.html">Blog Post</a>
              </li>
            </ul>
          </li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Other Pages <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li>
                <a href="full-width.html">Full Width Page</a>
              </li>
              <li>
                <a href="sidebar.html">Sidebar Page</a>
              </li>
              <li>
                <a href="faq.html">FAQ</a>
              </li>
              <li>
                <a href="404.html">404</a>
              </li>
              <li>
                <a href="pricing.html">Pricing Table</a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>

  <!-- Header Carousel -->
  <header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class=""></li>
      <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
      <div class="item">
        <div class="fill" style="background-image:url('https://placehold.it/1900x1080&amp;text=Slide One');"></div>
        <div class="carousel-caption">
          <h2>Caption 1</h2>
        </div>
      </div>
      <div class="item active">
        <div class="fill" style="background-image:url('https://placehold.it/1900x1080&amp;text=Slide Two');"></div>
        <div class="carousel-caption">
          <h2>Caption 2</h2>
        </div>
      </div>
      <div class="item">
        <div class="fill" style="background-image:url('https://placehold.it/1900x1080&amp;text=Slide Three');"></div>
        <div class="carousel-caption">
          <h2>Caption 3</h2>
        </div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="icon-next"></span>
    </a>
  </header>

  <!-- Page Content -->
  <div class="container">

    <!-- Marketing Icons Section -->
    <div class="row">
      <div class="col-lg-12">
        <h1 class="page-header">
          Welcome to Modern Business
        </h1>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.2.0</h4>
          </div>
          <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
            <a href="#" class="btn btn-default">Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4><i class="fa fa-fw fa-gift"></i> Free &amp; Open Source</h4>
          </div>
          <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
            <a href="#" class="btn btn-default">Learn More</a>
          </div>
        </div>
      </div>
      <div class="col-md-4">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4>
          </div>
          <div class="panel-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
            <a href="#" class="btn btn-default">Learn More</a>
          </div>
        </div>
      </div>
    </div>
    <!-- /.row -->

    <!-- Portfolio Section -->
    <div class="row">
      <div class="col-lg-12">
        <h2 class="page-header">Portfolio Heading</h2>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="https://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="https://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="https://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="https://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="https://placehold.it/700x450" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6">
        <a href="portfolio-item.html">
          <img class="img-responsive img-portfolio img-hover" src="https://placehold.it/700x450" alt="">
        </a>
      </div>
    </div>
    <!-- /.row -->

    <!-- Features Section -->
    <div class="row">
      <div class="col-lg-12">
        <h2 class="page-header">Modern Business Features</h2>
      </div>
      <div class="col-md-6">
        <p>The Modern Business template by Start Bootstrap includes:</p>
        <ul>
          <li><strong>Bootstrap v3.2.0</strong>
          </li>
          <li>jQuery v1.11.0</li>
          <li>Font Awesome v4.1.0</li>
          <li>Working PHP contact form with validation</li>
          <li>Unstyled page elements for easy customization</li>
          <li>17 HTML pages</li>
        </ul>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.</p>
      </div>
      <div class="col-md-6">
        <img class="img-responsive" src="https://placehold.it/700x450" alt="">
      </div>
    </div>
    <!-- /.row -->

    <hr>

    <!-- Call to Action Section -->
    <div class="well">
      <div class="row">
        <div class="col-md-8">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
        </div>
        <div class="col-md-4">
          <a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>
        </div>
      </div>
    </div>

    <hr>

    <!-- Footer -->
    <footer>
      <div class="row">
        <div class="col-lg-12">
          <p>Copyright © Your Website 2014</p>
        </div>
      </div>
    </footer>

  </div>
  <!-- /.container -->

  <!-- jQuery -->
  <script src="/resources/js/jquery.js"></script>

  <!-- Bootstrap Core JavaScript -->
  <script src="/resources/js/bootstrap.min.js"></script>

  <!-- Script to Activate the Carousel -->
  <script>
    $('.carousel').carousel({
      interval: 5000 //changes the speed
    })
  </script>




  </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>

<head>

<title>Javastudy.ru MVC_HTML5_Angular</title>

<spring:url value="resources/css/bootstrap.css" var="bootstrap"/>

<spring:url value="/resources/css/modern-business.css" var="startertemplate"/>

</head>

<body>

<span class="sr-only">Toggle navigation</span>

</button>

<a class="navbar-brand" href="index.html">Start Bootstrap</a>

</div>

<li>

<a href="about.html">About</a>

</li>

<li>

<a href="services.html">Lessons</a>

</li>

<li>

<a href="contact.html">Contact</a>

</li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorial<b class="caret"></b></a>

<li>

<a href="portfolio-1-col.html">Lesson 1</a>

</li>

<li>

<a href="portfolio-2-col.html">Lesson 2</a>

</li>

<li>

<a href="portfolio-3-col.html">Lesson 3</a>

</li>

<li>

<a href="portfolio-4-col.html">Lesson 5</a>

</li>

<li>

<a href="portfolio-item.html">Lesson 5</a>

</li>

</ul>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</li>

<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Other Pages <b class="caret"></b></a>

<li>

<a href="full-width.html">Full Width Page</a>

</li>

<li>

<a href="sidebar.html">Sidebar Page</a>

</li>

<li>

</li>

<li>

</li>

<li>

<a href="pricing.html">Pricing Table</a>

</li>

</ul>

</li>

</ul>

</div>

</div>

</nav>

</ol>

<h2>Caption 1</h2>

</div>

<h2>Caption 2</h2>

</div>

<h2>Caption 3</h2>

</div>

</a>

</a>

</header>

Welcome to Modern Business

</h1>

</div>

<h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.2.0</h4>

</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>

<a href="#" class="btn btn-default">Learn More</a>

</div>

<h4><i class="fa fa-fw fa-gift"></i> Free & Open Source</h4>

</div>

<a href="#" class="btn btn-default">Learn More</a>

</div>

</div>

<a href="#" class="btn btn-default">Learn More</a>

</div>

<h2 class="page-header">Portfolio Heading</h2>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

</a>

</div>

<h2 class="page-header">Modern Business Features</h2>

</div>

<p>The Modern Business template by Start Bootstrap includes:</p>

<ul>

<li><strong>Bootstrap v3.2.0</strong>

</li>

<li>jQuery v1.11.0</li>

<li>Font Awesome v4.1.0</li>

<li>Working PHP contact form with validation</li>

<li>Unstyled page elements for easy customization</li>

<li>17 HTML pages</li>

</ul>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.</p>

</div>

</div>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>

</div>

<a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>

</div>

<hr>

</div>

</footer>

</div>

$('.carousel').carousel({

interval: 5000 //changes the speed

})

</script>

</body>

</html>

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

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

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

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

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

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

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

Обзор приложения Spring MVC + AngularJS + Bootstrap + HTML5

28306 Total Views 1 Views Today

Рубрики: Spring MVC

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

Андрей:

16.04.2016 в 12:27

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

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

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

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. Nick V.:
  
  16.04.2016 в 14:38
  
  Зайдите в свойства проекта (alt+ctrl+shift+c в idea), modules и исправьте маппинг xml файлов спринг. В проекте сохранены настройки моей среды и у вас могут не мапится xml пути. А так же гляньте что идет в артефакт — все зависимости должны быть включены в архив, который будет деплоится на сервере (tomcat в моем случае).
  
  Войдите, чтобы ответить
  1. Андрей:
    
    16.04.2016 в 15:31
    
    Да, все верно, спасибо…
    
    Не были включены зависимости в архив
    
    Войдите, чтобы ответить
Юрий:

15.06.2016 в 12:58

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

Войдите, чтобы ответить
Ильдар:

24.07.2016 в 21:30

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

прошу помощи

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

Войдите, чтобы ответить
1. Ильдар:
  
  24.07.2016 в 23:33
  
  [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. Ильдар:
    
    25.07.2016 в 19:00
    
    были проблемы с конфигами, все работает
    
    Войдите, чтобы ответить
Rus:

23.11.2016 в 23:43

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

Войдите, чтобы ответить
qwe:

14.12.2016 в 18:50

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

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

Войдите, чтобы ответить
Александр:

12.01.2017 в 22:31

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

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

Войдите, чтобы ответить
1. Nick V.:
  
  15.01.2017 в 20:26
  
  В ручную, чтобы понятнее было при изучении.
  
  Войдите, чтобы ответить
Николай:

03.02.2017 в 08:55

Можно поподробнее про мапинг ибо не понятно. При запуске программы сервер пишет: 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 файл, то идея подчеркивает следующее:

WEB-INF/config/application-context.xml

1

WEB-INF/config/application-context.xml

/WEB-INF/config/mvc-config.xm

1

/WEB-INF/config/mvc-config.xm

/WEB-INF/view/error/errorpage.jsp

1

/WEB-INF/view/error/errorpage.jsp

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

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

Войдите, чтобы ответить
AlexFrei:

25.03.2017 в 23:42

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

Войдите, чтобы ответить
Фёдор:

19.06.2017 в 20:11

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

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

Войдите, чтобы ответить
kiss_of_darkness:

09.11.2017 в 17:48

Добрый день!

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

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

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

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

Войдите, чтобы ответить
Oleg P:

05.12.2017 в 19:36

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

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

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

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

Войдите, чтобы ответить
PaHod:

25.05.2018 в 20:47

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

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

Войдите, чтобы ответить