Spring как подключить css
Перейти к содержимому

Spring как подключить css

  • автор:

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

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

  1. Поместите в эту папку статические ресурсы, такие как cs, js или images webappresources
  2. Создать весну mvc:resources отображение
  3. Включить на страницу JSP через тег JSTL c:url или весенний тег spring:url

PS Этот проект протестирован с Spring 4.1.6.RELEASE.

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

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

2. Spring Resource Mapping

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

     /WEB-INF/pages/  .jsp

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

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

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

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

3.1 JSTL тег c:url пример.

Spring Boot подключить CSS

Структура директорий

Пытаюсь подключить css в profile.html следующем образом

" rel="stylesheet" />

введите сюда описание изображения

Но ничего не работает. EDIT В браузере, если перейти по адресу, который указан в атрибуте href у получаю следующее Мой Application

@SpringBootApplication class Application fun main(args: Array)

appication.properties

spring.datasource.url= spring.datasource.username= spring.datasource.password= spring.jpa.show-sql=false spring.jpa.generate-ddl=true spring.jpa.hibernate.ddl-auto=create spring.datasource.driverClassName=org.postgresql.Driver spring.jpa.database-platform=org.hibernate.dialect.PostgreSQLDialect

Как добавить CSS в Spring Security?

На StackOverFlow нашел что в конфиг Spring Security надо дописать .antMatchers( «/resources/static/css/**», «/»).permitAll()
Чтобы для те кто еще без авторизации могли получать CSS файл, но форма все еще без CSS

6071c991afa77203562344.jpeg

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

package com.example.courseProject.config; import com.example.courseProject.model.Role; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity; import org.springframework.security.config.annotation.web.builders.HttpSecurity; import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity; import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter; import org.springframework.security.core.userdetails.User; import org.springframework.security.core.userdetails.UserDetailsService; import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder; import org.springframework.security.crypto.password.PasswordEncoder; import org.springframework.security.provisioning.InMemoryUserDetailsManager; @Configuration @EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) public class SecurityConfig extends WebSecurityConfigurerAdapter < @Override protected void configure(HttpSecurity http) throws Exception < http .csrf().disable() .authorizeRequests() .antMatchers( "/resources/static/css/**", "/").permitAll() //вот тут вроде написал, чтобы ксс файлы пропускало, не помогло .anyRequest() .authenticated() .and() .formLogin() .loginPage("/auth/login").permitAll() .defaultSuccessUrl("/auth/success"); >@Bean @Override protected UserDetailsService userDetailsService() < return new InMemoryUserDetailsManager( User.builder() .username("admin") .password(passwordEncoder().encode("admin")) .authorities(Role.ADMIN.getAuthorities()) .build(), User.builder() .username("user") .password(passwordEncoder().encode("user")) .authorities(Role.USER.getAuthorities()) .build() ); >@Bean protected PasswordEncoder passwordEncoder() < return new BCryptPasswordEncoder(12); >>
    َAnimated Login Form   
Login
  • Вопрос задан более двух лет назад
  • 1536 просмотров

Добавьте CSS и JS в Thymeleaf

В этом кратком руководстве мы узнаем, как использовать CSS и JavaScript в наших шаблонах Thymeleaf .

Во-первых, мы рассмотрим ожидаемую структуру папок, чтобы знать, куда поместить наши файлы. После этого мы увидим, что нам нужно сделать, чтобы получить доступ к этим файлам из шаблона Thymeleaf.

Мы начнем с добавления стилей CSS на нашу страницу, а затем перейдем к добавлению некоторых функций JavaScript.

2. Настройка​

Чтобы использовать Thymeleaf в нашем приложении, давайте добавим Spring Boot Starter для Thymeleaf в нашу конфигурацию Maven:

 dependency>   groupId>org.springframework.bootgroupId>   artifactId>spring-boot-starter-thymeleafartifactId>   version>2.2.6.RELEASEversion>   dependency>

3. Основной пример​

3.1. Структура каталогов​

Напомним, Thymeleaf — это библиотека шаблонов, которую можно легко интегрировать с приложениями Spring Boot. По умолчанию Thymeleaf ожидает, что мы поместим эти шаблоны в папку src/main/resources/templates . Мы можем создавать подпапки, поэтому в этом примере мы будем использовать подпапку с именем cssandjs .

Для файлов CSS и JavaScript каталог по умолчанию — src/main/resources/static . Давайте создадим папки static/styles/cssandjs и static/js/cssandjs для наших файлов CSS и JS соответственно.

3.2. Добавление CSS​

Давайте создадим простой файл CSS с именем main.css в нашей папке static/styles/cssandjs и определим базовые стили:

 h2    font-family: sans-serif;   font-size: 1.5em;   text-transform: uppercase;   >    strong    font-weight: 700;   background-color: yellow;   >    p    font-family: sans-serif;   >

Затем давайте создадим шаблон Thymeleaf с именем styledPage.html в нашей папке templates/cssandjs , чтобы использовать эти стили:

 DOCTYPE html>   html xmlns:th="http://www.thymeleaf.org">   head>   meta charset="UTF-8">   title>Add CSS and JS to Thymeleaftitle>   link th:href="@" rel="stylesheet" />   head>   body>   h2>Carefully Styled Headingh2>   p>   This is text on which we want to apply strong>very specialstrong> styling.  p>   body>   html>

Мы загружаем таблицу стилей, используя тег ссылки со специальным атрибутом Thymeleaf th:href . Если мы использовали ожидаемую структуру каталогов, нам нужно только указать путь ниже src/main/resources/static . В данном случае это /styles/cssandjs/main.css . Синтаксис @ — это способ Thymeleaf связывания URL-адресов.

Если мы запустим наше приложение, мы увидим, что наши стили были применены:

3.3. Использование JavaScript

Далее мы узнаем, как добавить файл JavaScript на нашу страницу Thymeleaf.

Давайте начнем с добавления JavaScript в файл в src/main/resources/static/js/cssandjs/actions.js :

 function showAlert()    alert("The button was clicked!");   >

Затем мы возвращаемся к нашему шаблону Thymeleaf и добавляем тег , который указывает на наш файл JavaScript:

 script type="text/javascript" th:src="@">script>

Теперь мы вызываем наш метод из нашего шаблона:

 button type="button" th:onclick="showAlert()">Show Alertbutton>

Когда мы запустим наше приложение и нажмем кнопку « Показать предупреждение» , мы увидим окно предупреждения.

Прежде чем мы закончим, давайте немного поработаем над этим примером, изучив, как использовать данные из нашего контроллера Spring в нашем JavaScript.

Давайте начнем с изменения нашего контроллера, чтобы предоставить имя нашей странице:

 @GetMapping("/styled-page")   public String getStyledPage(Model model)    model.addAttribute("name", "ForEach Reader");   return "cssandjs/styledPage";   >

Далее давайте добавим в наш файл action.js функцию, которая будет использовать это имя в предупреждении:

 function showName(name)    alert("Here's the name: " + name);   >

Наконец, чтобы вызвать нашу функцию с данными из нашего контроллера, нам нужно использовать встраивание скрипта . Итак, давайте поместим значение имени в локальную переменную JavaScript:

 script th:inline="javascript">   var nameJs = /*[[$]]*/;  script>

Сделав это, мы создали локальную переменную JavaScript, содержащую значение модели имени из нашего элемента управления, которое мы затем можем использовать в нашем JavaScript на остальной части страницы.

Теперь, когда мы это сделали, мы можем вызвать нашу функцию JavaScript, используя переменную nameJs :

 button type="button" th:onclick="showName(nameJs);">Show Namebutton>

4. Вывод​

В этом коротком руководстве мы узнали, как применять стили CSS и внешние функции JavaScript к нашим страницам Thymeleaf. Мы начали с рекомендуемой структуры каталогов и дошли до вызова JavaScript с данными, предоставленными в нашем классе контроллера Spring.

Как всегда, код доступен на GitHub .

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *