Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

CSS vindo como plain text

Fiz a importação dos arquivos, a modificação e adaptação deles para a visualização do detalhe vindo de um livro, seguindo abaixo:

detalhe.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
    <head>
        <c:url value="/" var="contextPath" />
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
        <link rel="icon" href="//cdn.shopify.com/s/files/1/0155/7645/t/177/assets/favicon.ico?11981592617154272979"
            type="image/ico" />
        <link href="https://plus.googlecom/108540024862647200608" rel="publisher" />

        <title>${produto.titulo }-Casa do Código</title>

        <link href="${contextPath}resources/css/cssbase-min.css" rel="stylesheet" type="text/css" media="all" />
        <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' />
        <link href="${contextPath}resources/css/fonts.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/fontello-ie7.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/fontello-embedded.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/fontello.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/layout-colors.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/responsive-style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/guia-do-programador-style.css" rel="stylesheet" type="text/css" media="all" />
        <link href="${contextPath}resources/css/produtos.css" rel="stylesheet" type="text/css" media="all" />
        <link rel="canonical" href="http://www.casadocodigo.com.br/" />
    </head>
<body>

    <header id="layout-header">
        <div class="clearfix container">
            <a href="/" id="logo"> </a>
            <div id="header-content">
                <nav id="main-nav">

                    <ul class="clearfix">
                        <li><a href="/carrinho" rel="nofollow">Carrinho</a></li>

                        <li><a href="/pages/sobre-a-casa-do-codigo" rel="nofollow">Sobre Nós</a></li>

                        <li><a href="/pages/perguntas-frequentes" rel="nofollow">Perguntas Frequentes</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </header>
    <nav class="categories-nav">
        <ul class="container">
            <li class="category"><a href="http://www.casadocodigo.com.br">Home</a></li>
            <li class="category"><a href="/collections/livros-de-agile"> Agile </a></li>
            <li class="category"><a href="/collections/livros-de-front-end"> Front End </a></li>
            <li class="category"><a href="/collections/livros-de-games"> Games </a></li>
            <li class="category"><a href="/collections/livros-de-java"> Java </a></li>
            <li class="category"><a href="/collections/livros-de-mobile"> Mobile </a></li>
            <li class="category"><a href="/collections/livros-desenvolvimento-web"> Web </a></li>
            <li class="category"><a href="/collections/outros"> Outros </a></li>
        </ul>
    </nav>

    <article id="${produto.id }">
        <header id="product-highlight" class="clearfix">
            <div id="product-overview" class="container">
                <img width="280px" height="395px"
                    src="http://cdn.shopify.com/s/files/1/0155/7645/products/css-eficiente-featured_large.png?v=1435245145"
                    class="product-featured-image" />
                <h1 class="product-title">${produto.titulo }</h1>
                <p class="product-author">
                    <span class="product-author-link"> </span>
                </p>

                <p class="book-description">${produto.descricao }</p>
            </div>
        </header>


        <section class="buy-options clearfix">
            <form action="/carrinho/add" method="post" class="container">
                <ul id="variants" class="clearfix">

                    <c:forEach items="${produto.precos }" var="preco">
                        <input type="hidden" value="${produto.id }" name="produtoId"/>
                        <li class="buy-option">
                            <label class="variant-label" for="product-variant-9720393823">${preco.tipo}
                                <input type="radio" name="tipo" class="variant-radio" 
                                    value="${preco.tipo}" checked="checked" />
                            </label>

                            <small class="compare-at-price">R$ 39,90</small>
                            <p class="variant-price">${preco.valor }</p>
                        </li>
                    </c:forEach>


                </ul>
                <button type="submit" class="submit-image icon-basket-alt" alt="Compre Agora '${produto.titulo }'" title="Compre Agora '${produto.titulo }'"></button>

            </form>

        </section>

        <div class="container">
            <section class="summary">
                <ul>
                    <li><h3>
                            E muito mais... <a href='/pages/sumario-java8'>veja o sumário</a>.
                        </h3></li>
                </ul>
            </section>

            <section class="data product-detail">
                <h2 class="section-title">Dados do livro:</h2>
                <p>
                    Número de páginas: <span>${produto.paginas }</span>
                </p>
                <p></p>
                <p>Data de publicação: ${produto.dataLancamento }</p>
                <p>
                    Encontrou um erro? <a href='/submissao-errata' target='_blank'>Submeta uma errata</a>
                </p>
            </section>
        </div>
    </article>
    <footer id="layout-footer">
        <div class="clearfix container">
            <div id="collections-footer">
                <!-- cdc-footer -->
                <p class="footer-title">Coleções de Programação</p>
                <ul class="footer-text-links">
                    <li><a href="/collections/livros-de-java">Java</a></li>
                    <li><a href="/collections/livros-desenvolvimento-web">Desenvolvimento Web</a></li>
                    <li><a href="/collections/livros-de-mobile">Mobile</a></li>
                    <li><a href="/collections/games">Games</a></li>
                    <li><a href="/collections/livros-de-front-end">Front End</a></li>
                </ul>
                <p class="footer-title">Outros Assuntos</p>
                <ul class="footer-text-links">
                    <li><a href="/collections/livros-de-agile">Agile</a></li>
                    <li><a href="/collections/outros">e outros...</a></li>
                </ul>
            </div>
            <div id="social-footer">
                <!-- books-footer -->
                <p class="footer-title">Links da Casa do Código</p>
                <ul class="footer-text-links">
                    <li><a href="http://livros.casadocodigo.com.br" rel="nofollow">Meus E-books</a></li>
                    <li><a href="/pages/sobre-a-casa-do-codigo">Sobre a Casa do Código</a></li>
                    <li><a href="/pages/perguntas-frequentes">Perguntas Frequentes</a></li>
                    <li><a href="https://www.caelum.com.br">Caelum - Ensino e Inovação</a></li>
                    <li><a href="http://www.codecrushing.com/" rel="nofollow">Code Crushing</a></li>
                    <li><a href="http://www.casadocodigo.com.br/pages/politica-de-privacidade" rel="nofollow">Política de
                            Privacidade</a></li>
                </ul>
                <p class="footer-title">Redes Sociais</p>
                <ul>
                    <li class="social-links"><a href="http://www.twitter.com/casadocodigo" target="_blank" id="twitter"
                        rel="nofollow">Facebook</a> <a href="http://www.facebook.com/casadocodigo" target="_blank" id="facebook"
                        rel="nofollow">Twitter</a></li>
                </ul>
            </div>
            <div id="newsletter-footer">
                <!-- social-footer -->
                <p class="footer-title">Receba as Novidades e Lançamentos</p>
                <div id="form-newsletter">
                    <form action="" method="POST" id="ss-form" class="form-newsletter">
                        <ul>
                            <li><input type="hidden" name="pageNumber" value="0" /><input type="hidden" name="backupCache" value="" /><input
                                type="email" name="entry.0.single" value="" class="ss-q-short" id="entry_0" placeholder="seu@email.com" /></li>
                            <li><input type="submit" name="submit" value="Quero Receber!" id="submit-newsletter" /></li>
                        </ul>
                    </form>
                    <ul>
                        <li class="ie8"><a href="" rel="nofollow">Receba as Novidades e Lançamentos</a></li>
                    </ul>
                </div>
                <ul class="footer-payments">
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </footer>
</body>
</html>

Fiz o que foi recomendado no post

https://cursos.alura.com.br/forum/topico-nao-carrega-css-21274#530926

e também o que foi dito nesse

https://cursos.alura.com.br/forum/topico-css-nao-carrega-25014#541006

ProdutoController

package br.com.casadocodigo.loja.controllers;

import javax.validation.Valid;

// import omitido 

@Controller
@RequestMapping("/produtos")
public class ProdutosController {

     // ...

    @RequestMapping("/detalhe")
    public ModelAndView detalhe(Long id) {
        ModelAndView mv = new ModelAndView("produtos/detalhe");
        mv.addObject("produto", produtoDao.buscaPeloId(id));
        return mv;
    }
}

AppWebConfiguration

package br.com.casadocodigo.loja.configuration;

import org.springframework.context.MessageSource;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.support.ReloadableResourceBundleMessageSource;
import org.springframework.format.datetime.DateFormatter;
import org.springframework.format.datetime.DateFormatterRegistrar;
import org.springframework.format.support.DefaultFormattingConversionService;
import org.springframework.format.support.FormattingConversionService;
import org.springframework.web.multipart.MultipartResolver;
import org.springframework.web.multipart.support.StandardServletMultipartResolver;
import org.springframework.web.servlet.config.annotation.DefaultServletHandlerConfigurer;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.servlet.view.InternalResourceViewResolver;

import br.com.casadocodigo.loja.controllers.HomeController;
import br.com.casadocodigo.loja.daos.ProdutoDAO;
import br.com.casadocodigo.loja.infra.FileSaver;

// ativa o módulo de MVC para o projeto
@EnableWebMvc
// diz para o Spring quais são os pacotes que ele deve escanear a partir das
// classes informadas.
@ComponentScan(basePackageClasses = { HomeController.class, ProdutoDAO.class, FileSaver.class })
public class AppWebConfiguration extends WebMvcConfigurerAdapter {

    /**
     * Diz para o Spring qual é o prefixo e sulfixo da localização dos arquivos
     * de JSPs dentro da pasta WEB-INF
     * 
     * @return @Bean (classe gerenciada) do Spring
     */
    @Bean
    public InternalResourceViewResolver internalResourceViewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/WEB-INF/views/");
        resolver.setSuffix(".jsp");

        return resolver;
    }

    /**
     * Método responsável por configurar a externalização do arquivo padrão de
     * mensagens da aplicação, configurando seu Encoding e também o tempo para
     * recarrega-lo, importante para que não seja necessário o restart da
     * aplicação quando o arquivo de mensagens for modificado.
     * 
     * @return {@link ReloadableResourceBundleMessageSource}
     */
    @Bean
    public MessageSource messageSource() {
        ReloadableResourceBundleMessageSource message = new ReloadableResourceBundleMessageSource();
        message.setBasename("/WEB-INF/messages");
        message.setDefaultEncoding("UTF-8");
        message.setCacheSeconds(1);

        return message;
    }

    /**
     * Método responsável por manipular os padrões de datas no sistema,
     * incluindo seus registradores.
     * 
     */
    @Bean
    public FormattingConversionService mvcConversionService() {
        DefaultFormattingConversionService service = new DefaultFormattingConversionService();
        DateFormatterRegistrar register = new DateFormatterRegistrar();
        register.setFormatter(new DateFormatter("dd/MM/yyyy"));
        register.registerFormatters(service);
        return service;
    }

    /**
     * Método responsável por configurar o Multipart de arquivos enviados em
     * formulários, para indexação e disponibilização no servidor
     * 
     * @return
     */
    @Bean
    public MultipartResolver multipartResolver() {
        return new StandardServletMultipartResolver();
    }

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    }


    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }
}
3 respostas

Continuação:

Todas as requisições estão sendo realizadas corretamente (200), mas estão retornando:


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
    </head>
    <body>

    </body>
</html>

Deixei de fazer alguma configuração?

Olá Leonardo, tudo bem ?

Não consegui enxergar algo de errado com o código por aqui. Apenas uma coisa que poderia ser observada é que você não precisa do método addResourceHandlers na AppWebConfiguration, o método configureDefaultServletHandler() dá conta de liberar o acesso aos recursos estáticos da app, estejam eles em /resources ou até mesmo outros diretórios. Ele faz com que se a servlet do Spring não conseguir resolver a requisição repasse a mesma para o container (Tomcat) que sabe responder com o conteúdo estático de um arquivo css ou js, por exemplo.

Essa alteração em si, talvez não seja exatamente a solução para a resposta inesperada na busca pelos css. Mas vale o teste e o ajuste no código.

Outra coisa, de uma olhada na aba Network do Dev Tools, mesmo dando sucesso para as requisições. Tente abrir a url que ele mostra status 200 ok em uma nova aba. Veja o que aparece. A url deve se parecer com http://localhost:8080/casadocodigo/resources/css/produtos.css. Deveria aparecer o conteúdo do css em si. Verifique a resposta. Poste aqui qualquer duvida.

Espero ter ajudado. Abraço!

solução!

Oi Rafael,

Sim, concordo com você... Logo depois eu li a documentação desse método e percebi que não seria necessária a sua implementação...

Eu encontrei o problema com o meu projeto, deixo a conclusão aqui para que possa ajudar alguém depois.

O problema era que o Eclipse (ou o maven, não sei) tinha criado todos os arquivos dentro da pasta resources com esse conteúdo (?????????) e, na hora que o navegador fazia a requisição, encontrava aqueles arquivos estranhos.

Um bug de outro mundo,

Eu apaguei aqueles arquivos, atualizei o projeto (ALT + F5), reinstalei o Tomcat e adicionei novamente o projeto ao servidor,

Agradeço pela ajuda, e tomem cuidado com esse bug sobrenatural.

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