8
respostas

Erro ao incluir CSS e img

Boa tarde!

Estou fazendo alguns testes e não consegui incluir o CSS, testei algumas formas, mas ele dá erro 404 (no console) para o arquivo .css

Meu projeto tem a seguinte estrutura:

WEB-INF >
        ressources >
            css
                reset.css
        tags >
            pageTemplate.jsp
        views >
            cadastro >
                form-pessoa.jsp
            cabecalho.jsp
            rodape.jsp
            home.jsp

Tentei incluir a referencia:

<link rel="stylesheet" href="/resources/css/reset.css" /> 

no head do pageTemplate ou no form-pessoa, mas não funcionou... Como posso incluir corretamente?

pageTemplate.jsp

<%@ attribute name="titulo" required="true" %>
<%@ attribute name="bodyClass" required="false" %>
<%@ attribute name="extraScripts" fragment="true" %>

<!DOCTYPE html>

<html>

    <head>
        <meta charset="UTF-8" />        
        <title>${titulo } - Controle de Peso</title>
    </head>

    <body class="${bodyClass}" >

    <%@ include file="/WEB-INF/views/cabecalho.jsp" %>

    <jsp:doBody />

    <jsp:invoke fragment="extraScripts"></jsp:invoke>

    <%@ include file="/WEB-INF/views/rodape.jsp" %>

    </body>

</html>

form-pessoa.jsp

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

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tags"%>

<c:url value="/" var="contextPath" />

<tags:pageTemplate titulo="Cadastro de Pessoa">

    <jsp:body>    

        <h1>Dados Pessoais</h1>

        <form:form action="enviaPessoa" method="post">

            <label for="nome">Nome: </label>
            <input type="text" name="nome" required/> 

            <label for="dataNascimento">Data Nascimento:  </label>
            <input name="dataNascimento" type="date" required>

            <fieldset>
            <legend>Altura: </legend>
            <input type="range" id="vol" name="vol" value="0" min="0.30" max="2.50" step="0.01"
                        oninput="altura.value=value" onchange="altura.value=value">
                    <input type="text" id="altura" name="altura" oninput="vol.value=value" onchange="vol.value=value" readonly>
            </fieldset>

            <fieldset>
                <legend>Sexo: </legend>
                <select name="sexo">
                    <option selected disabled>Selecione...</option>
                    <option value="Masculino">Masculino</option>
                      <option value="Feminino">Feminino</option>
                    </select>
            </fieldset>

            <input type="submit" value="Enviar cadastro" />
        </form:form>


    </jsp:body>

</tags:pageTemplate>
8 respostas

Fiz um teste incluindo no head do pageTemplate a linha abaixo e funcionou.

<style><%@include file="/WEB-INF/resources/css/reset.css"%></style>

Tentei incluir da mesma forma em outra jsp apontando para outro arquivo cabecalho.jsp

<%@ taglib uri="http://www.springframework.org/security/tags" prefix="security"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<style><%@include file="/WEB-INF/resources/css/cabecalho.css"%></style>

<c:url value="/" var="contextPath" />

<header div class="cabecalho">

    <div>
        <p><img src="/WEB-INF/resources/img/calendario.png" alt="logo do Controle de Peso" ></p>
        <nav>
            <ul>
                <li><a href="${contextPath}home">Início</a></li>
                <li><a href="${contextPath}blog">Blog</a></li>
                <li><a href="${contextPath}meusDados">Cadastro</a></li>
                <li><a href="${contextPath}historico">Histórico</a></li>
                <li><a href="${contextPath}loginForm">Login</a></li>
                <li><a href="${contextPath}logout">Sair</a></li>
            </ul>
        </nav>
    </div>

</header>

Testei no arquivo apenas a alterar a cor para vermelho:

*{
    color: red;
}

Porém ele alterou como se eu tivesse incluído no pageTemplate, pois além do cabecalho, as outras paginas que fazem parte foram alteradas: as páginas do corpo e rodape.

E não consigo incluir imagem também:

<img src="/WEB-INF/resources/img/calendario.png" alt="logo do Controle de Peso" >

Olá Rafael, tudo bem? Peço desculpas pela demora no retorno! A primeira coisa que precisamos verificar é se o conteúdo dessa pasta resources está liberado e isso podemos verificar na classe SecurityConfiguration, então é precisa ter uma linha como:

.antMatchers("/resources/**").permitAll()

Outra coisa, acho que essa pasta resources deveria está fora da pasta WEB-INF já que não são views, apesar estilos, fontes e imagens. Você poderia tentar essa abordagem e falar pra gente o resultado!

Obrigado pelo retorno Jonilson.

Segue método configure do SecurityConfiguration

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
//                .antMatchers("/controle/**").hasRole("USUAR")
//                .antMatchers("/historico").hasRole("USUAR")
//                .antMatchers("/blog").hasRole("ADMIN")
                .antMatchers("/resources/**").permitAll()
                .antMatchers("/**").permitAll()
                .anyRequest().authenticated()
            .and()
                .formLogin()
                    .usernameParameter("email")
                    .passwordParameter("senha")
//                    .loginPage("/cadastro/form-login")
                    .permitAll()
            .and()
                .logout().permitAll()
            .and()
                .exceptionHandling().accessDeniedPage("/errors/403")
            .and()
                .rememberMe().userDetailsService(userDetailsService)            
//            .and()
//                .csrf().disable()
        ;
    }

Estrutura de pastas

src main java webapp resources css js images WEB-INF tags views

Desculpa Rafael, mas ainda não ficou muito claro pra mim a estrutura de pasta, a pasta resources está dentro ou fora da pasta WEB-INF? Você poderia compartilhar o projeto para eu verificar melhor?

Jonilson, boa noite!

O código está no GitHub.

De fato na minha última resposta, não formatei corretamente e ficou incompreensível, me desculpe...

Rafael, eu não consegui executar o projeto porque tem vários erros nos Getters e Setters como você pode notar na imagem abaixo:

Erros nos getters e setters

Então, consegue identificar que a estrutura me parece correta, porém sem executar o projeto não consigo ti ajudar, então você poderia dar uma ajustada no projeto e depois de falar aqui ai eu verifico e tento identificar o problema a possível solução!

Eu tentei arrumar hoje, mas foi meio complicado... Eu fiquei um bom tempo sem mexer nesse projeto, como não tive retorno aqui e não consegui arrumar, deixei ele meio abandonado em segundo plano. Ai troquei o hd, mudei as versões de tudo o que usava, não sei se isso afetou alguma coisa... Vou refazer o projeto, até pra pegar todo o fio da meada de novo. Ai vejo se consigo resolver baseado em algumas dicas suas, se não posto novas dúvidas aqui no fórum...

Tá certo Rafael, sempre problemas, estamos aqui pra ajudar da melhor forma possível!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software