博客

jsp页面的css加载不出来是因为＜!DOCTYPE html＞惹的祸?（哪里有bug我来踩）

  • Post author:
  • Post category:其他

踩bug使我快落，今天在学习smbms管理系统的时候手贱啊，问题解决就很明朗！！

首先要对<!DOCTYPE html>要有一定的认识，积累多多总有好处！

那么我来讲一下今天我遇到的问题，因为一开始对于jsp加这个有点不太了解，所以总认为是这个<!DOCTYPE html>的错误，但是很庆幸自己从这个认知里面走出来。

真实问题是：
过滤器导致的对text/html的全局设置，改变了所有的contentType，包括css的，这样就发生问题了。

问题详解：

chrome浏览器的控制台黄色警告：

在这里插入图片描述

然后通过这一句其实有点眉目，意思大概是type问题出错，text/html？
通过network的查看发现，本来是text/css，为什么变成了text/html?

在这里插入图片描述
找到过滤器，问题代码段response.setContentType("text/html;charset=utf-8");这一句的作用域设置了全部！！！导致css也被改变。
过滤器代码：

public class CharacterEncodingFilter implements Filter {
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
        chain.doFilter(request,response);
    }

    public void destroy() {

    }
}

过滤器注册代码：

<!-- 字符编码过滤器 -->
<filter>
    <filter-name>CharacterEncodingFilter</filter-name>
    <filter-class>com.xv.filter.CharacterEncodingFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CharacterEncodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

问题解决

1、删除response.setContentType("text/html;charset=utf-8");这一句，切记如果没有效果清除浏览器缓存再运行应该就可以了。

2、添加css过滤器并注册，切记如果没有效果清除浏览器缓存再运行应该就可以了。

css过滤器代码：

public class CssEncodingFilter implements Filter {
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        response.setContentType("text/css;charset=utf-8");

        chain.doFilter(request,response);
    }

    public void destroy() {

    }
}

css过滤器注册代码：

<!-- css过滤器 -->
<filter>
    <filter-name>CssEncodingFilter</filter-name>
    <filter-class>com.xv.filter.CssEncodingFilter</filter-class>
</filter>
<filter-mapping>
    <filter-name>CssEncodingFilter</filter-name>
    <url-pattern>*.css</url-pattern>
</filter-mapping>

大家有什么疑问或者有什么好的推荐，希望多带带小编，希望本文能帮助到你们，程序猿加油！！！

版权声明：本文为weixin_45637920原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。