TOC

Spring MVC - Как включить файлы JS или CSS в страницу JSP

Spring MVC - Как включить файлы JS или CSS на страницу JSP

В этом руководстве мы покажем вам, как включить статические ресурсы, такие какJavaScript илиCSS, на страницу JSP.

Сводные шаги:

  1. Поместите статические ресурсы, такие как cs, js или изображения, в эту папкуwebapp esources

  2. Создайте сопоставление Springmvc:resources

  3. Включить на страницу JSP с помощью тега JSTLc:url или тега Springspring:url

P.S This project is tested with Spring 4.1.6.RELEASE.

1. Каталог проектов

Стандартная структура папок Maven помещает статические ресурсы, такие как файлы js и css, в папкуwebapp esources.

spring-mvc-include-css-

2. Сопоставление ресурсов Spring

Объявляетmvc:resources, чтобы сопоставить «путь URL-адреса» к местоположению физического пути к файлу.

spring-web-config.xml



    

    
    
        /WEB-INF/pages/
    
    
        .jsp

В приведенном выше примере при любых запросах из этого шаблона URL/resources/** Spring вместо этого будет искать ресурсы из/resources/mytheme1/.

В будущем вы можете легко перейти на новую тему, обновивmvc:resources

3. Включить в страницу JSP

Чтобы включить CSS или JS на страницу JSP, вы можете использовать тег JSTLc:url или тег Springspring:url.

3.1 JSTL tag c:url example.

hello.jsp

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



    " rel="stylesheet">
    
    



1. Test CSS



2. Test JS

3.2 Spring tag spring:url example.

hello.jsp

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



    
    
    

    
    
    



1. Test CSS



2. Test JS

3.3 Javascript file.

/webapp/resources/mytheme/js/main.js

jQuery(document).ready(function($) {

    $('#msg').html("This is updated by jQuery")

});

3.4 CSS file.

/webapp/resources/mytheme/css/main.css

h1{
    color:red;
}

Alternatively
Для тех, кто ненавидит JSTL, вы можете использовать переменную «контекст страницы», чтобы получить такие ресурсы:

4. Demo

Запустите проект с помощью команды Maven:$ mvn jetty:run

URL:http://localhost:8080/spring-css/

spring-mvc-include-css-demo

5. Статические ресурсы в WEB-INF?

В: Могу ли я поместить статические ресурсы в папку WEB-INF?
A: Да, можно, сопоставление Spring будет работать, например,

Но это не очень хорошая практика. Вы можете игнорировать правило, но многие разработчики и плагины будут искать статические ресурсы на том же уровнеWEB-INF, а не внутриWEB-INF.

Скачать исходный код

Скачать -spring-mvc-css-example.zip (57 КБ)

Ссылка

  1. Spring MVC, обслуживающий статические ресурсы

Related