请问为什么我css没有加载出来？

如图所示，我访问登录界面没有加载出jsp的css

<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="css/login.css">
    </head>
    <body>
        <div class="login">
            <div class="header">
                <h1>
                    <a href="/login.do">登录</a>
                </h1>
                <button></button>
            </div>
            <form action="/login.do" method="post">
                <div class="name">
                    <input type="text" id="name" name="username">
                    <p></p>
                </div>
                <div class="pwd">
                    <input type="password" id="pwd" name="password">
                    <p></p>
                </div>

                <div class="btn-red">
                    <input type="submit" value="登录" id="login-btn">
                </div>
            </form>
        </div>
    </body>
</html>

============doget=======================

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String method=request.getParameter("method");
       if(method.equals("login")) {
           //System.out.println("测试登录过滤器");
           this.login(request, response);
       }else if(method.equals("visitlogin")) {
           request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);
       }
   }

==================login.css======================

*{
            margin:0px;
            padding:0px;
        }
        a{
            text-decoration: none;
        }
        ul{
            list-style: none;
        }
        body{
            background:rgba(238,238,238,0.5);
            position:relative;
        }
        .login{
            width:450px;
            height:400px;
            background: white;
            position:absolute;
            top:50%;
            left:50%;
            margin-left:-225px;
            /*margin-top:-225px;*/
            margin-top:100px;
            padding:5px 15px;
        }
        .login>.header{
            width:100%;
            padding:10px 0px;
            border-bottom: 1px solid #ccc;
            overflow: hidden;
        }
        .login>.header>h1{
            font-size:18px;
            font-weight: normal;
            float:left;
        }
        .login>.header>h1>a{
            padding:5px;
            margin-left:10px;
            color:black;
        }
        .login>.header>h1>a:first-child{
            margin-left:50px;
            color:#2C689B;
        }
        .login>.header>button{
            float:right;
            width:20px;
            height:20px;
            cursor:pointer;
            background: #fff;
            border:1px solid #fff;
            background-image: url(../img/1.png) ;
        }
        .login>form{
            margin-top:30px;
            padding:0 50px;
        }
        .login>form>div>input{
            width:350px;
            height:40;
            line-height: 40px;
            padding-left: 5px;
            border:1px solid #d0d6d9;
            background: #F9F9F9;
        }
        .login>form>div>p{
            width:350px;
            height:25px;
            line-height: 25px;
            font-size: 12px;
        }
        .login>form>div.idcode>input{
            width:150px;
            margin-right:30px;
            float: left
        }
        .login>form>div.idcode>span{
            float:right;
            width:80px;
            height:30px;
            margin-top:10px;
            border:1px solid #ccc;

        }
        .login>form>div.idcode>a{
            float: right;
            color: black;
            font-size: 12px;
            margin-top:25px;
            margin-left: 5px;
        }
        .clear{
            clear:both;
        }
        .login>form>.autoLogin{
            margin-top:20px;
            font-size:14px;
            line-height:15px;
            color:#999;
            height: 15px;
        }
        .login>form>.autoLogin>label>input{
            margin-right:5px;
        }
        .login>form>.autoLogin>label{
            float:left;
        }
        .login>form>.autoLogin>a{
            float:right;
            color:#666;
            font-size:14px;
        }
        .btn-red{
            margin:20px 0px;
        }
        #login-btn{
            width:100%;
            height:50px;
            background:#2C689B;
            border-color:#2C689B;
            text-align: center;
            line-height:50px;
            color:#fff;
            font-size: 17px;
        }
        #login-btn:hover{
            cursor:pointer;
        }

notFoundMoneyE 2020-09-29

源自：企业门户网站前后台开发 5-3 项目作业

收起

4回答

好帮手慕小尤回答被采纳获得+3积分 2020-09-30 14:13:03

同学你好，1. 测试同学代码，发现在AuthFilter过滤器中拦截了css等文件，导致css引入错误，则建议同学在AuthFilter中放行css等文件。如下所示：

2. 如果还存在问题，则可能是浏览器缓存的问题，同学可尝试清除缓存或换一个浏览器试一下。

祝学习愉快！

收起回答

notFoundMoneyE 提问者 #1

我添加了如上代码，但好像并没有成功，于是我又改成重定向，做了一些修改，最终的代码如下，麻烦老师看一下： public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { HttpServletRequest req=(HttpServletRequest)request; String url=req.getRequestURI(); if(url.indexOf(".css")>0||url.indexOf(".jpg")>0||url.indexOf(".png")>0) { chain.doFilter(request, response); return; } if("visitlogin".equals(request.getParameter("method"))) {//使之可以访问登录页面，否者出现死循环，即防止http302 chain.doFilter(request, response); return; } if("login".equals(request.getParameter("method"))) {//对应向服务器发送登录信息 chain.doFilter(request, response); return; } // TODO Auto-generated method stub 正式方法 User user=(User)request.getAttribute("User"); UserServiceImpl uslmpl=new UserServiceImpl(); //此处调用监听器里面创建的userlist,就不调用底层的XmlDataSource的方法 List<User> userlist=(List)request.getAttribute("userlist"); int i=uslmpl.login(userlist, user); if(i==1) { chain.doFilter(request, response);//向后传递 }else {//visitlogin:访问登录界面 //request.getRequestDispatcher("/bookmanagement?method=visitlogin").forward(request, response); //试试另一种请求重定向 HttpServletResponse hsr=(HttpServletResponse)response; hsr.sendRedirect("/bookManagementSystem/bookmanagement?method=visitlogin"); } }

2020-09-30 17:12:48
好帮手慕小脸回复提问者 notFoundMoneyE #2

同学你好，经测试运行同学代码是可以的，棒棒哒！继续加油！祝学习愉快~

2020-10-07 10:43:27

好帮手慕小尤 2020-09-29 17:28:22

同学你好，1. 测试代码是可以正常引入的，如下图所示：

2. 建议同学查看AuthFilter过滤器，查看是否有拦截css等文件。如果有拦截，则建议同学将其放行。如下所示（需结合自身代码进行修改）：

HttpServletRequest req =(HttpServletRequest) request;
String url=req.getRequestURI();
if(url.indexOf(".css")>0||url.indexOf(".jpg")>0||url.indexOf(".png")>0) {
    chain.doFilter(request, response);
    return;
}

3. 建议同学清除缓存浏览器与Tomcat缓存，然后重新进行测试。如下所示：

浏览器：Ctrl+R 、Ctrl+F5（强制刷新）

Tomcat：

4. 如果还存在问题，则建议同学反馈AuthFilter过滤器中的代码，便于老师定位问题。

祝学习愉快！

收起回答

提问者 notFoundMoneyE #1

package com.imooc.Filter; import java.io.IOException; import java.util.List; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequest; import javax.servlet.ServletResponse; import com.imooc.entity.User; import com.imooc.userrelated.UserServiceImpl; import com.imooc.utils.XmlDataSource; /** * 用户登录过滤器 * @author s * */ public class AuthFilter implements Filter{ @Override public void destroy() { // TODO Auto-generated method stub 销毁方法 } /** * 过滤器判断用户是否处于登录状态，即查询request中是否有User实例。 * 再用userservicelmpl的方法判断登录成功否，成功则放行，不成功则请求重定向（显示登录网址） */ @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException { // TODO Auto-generated method stub 正式方法 User user=(User)request.getAttribute("User"); UserServiceImpl uslmpl=new UserServiceImpl(); //此处调用监听器里面创建的userlist,就不调用底层的XmlDataSource的方法 List<User> userlist=(List)request.getAttribute("userlist"); int i=uslmpl.login(userlist, user); if(i==1) { chain.doFilter(request, response);//向后传递 }else {//visitlogin:访问登录界面 request.getRequestDispatcher("/bookmanagement?method=visitlogin").forward(request, response); } } @Override public void init(FilterConfig arg0) throws ServletException { // TODO Auto-generated method stub 初始化方法 } }

2020-09-30 10:08:04
提问者 notFoundMoneyE #2

package com.imooc.userrelated; import java.util.List; import com.imooc.entity.User; public class UserServiceImpl { //用户登录 /** * 暂定int返回值为不同状态，返回值 * 一:表明用户名及密码正确 * 二:无对应用户(name对不上) * 三：密码错误(name对上了密码没对上) */ public int login(List<User> listUser,User user) { int state=2; if(user==null)return state; for(User theuser:listUser) { if(theuser.getName().equals(user.getName())) { state=3; if(theuser.getPassword().equals(user.getPassword())) { state=1;//用户名和密码都对上了 } break;//假定user的name都不相同 } } return state; } }

2020-09-30 10:11:07

notFoundMoneyE 提问者 2020-09-29 16:05:28

package com.imooc.Filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;

/**
* 处理中文乱码过滤器
* @author s
* 是个请求就通过这个过滤器设置encode
*/
public class EncodeFilter implements Filter{
   @Override
   public void destroy() {
       // TODO Auto-generated method stub 销毁方法
   }
   @Override
   public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
           throws IOException, ServletException {
       // TODO Auto-generated method stub 正式方法
       request.setCharacterEncoding("UTF-8");
       response.setCharacterEncoding("UTF-8");
       //response.setContentType("text/html;charset=utf-8");
       chain.doFilter(request, response);
   }
   @Override
   public void init(FilterConfig arg0) throws ServletException {
       // TODO Auto-generated method stub 初始化方法

   }
}

=====================================

package com.imooc.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
* Servlet implementation class BookManagementController
*/
@WebServlet("/bookmanagement")
public class BookManagementController extends HttpServlet {
   private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#HttpServlet()
     */
    public BookManagementController() {
        super();
        // TODO Auto-generated constructor stub
    }

   /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       String method=request.getParameter("method");
       System.out.println(method);
       if(method.equals("login")) {
           //System.out.println("测试登录过滤器");
           this.login(request, response);
       }else if(method.equals("visitlogin")) {
           request.getRequestDispatcher("/WEB-INF/jsp/login.jsp").forward(request, response);
       }

   }

   /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // TODO Auto-generated method stub
       doGet(request, response);
   }

   public void login(HttpServletRequest request, HttpServletResponse response) {
       String name=request.getParameter("name");
       String passworld=request.getParameter("pwd");
       System.out.println("获取了表单中name："+name+"和pwd："+passworld);
   }

}

========================================================

<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <link rel="stylesheet" type="text/css" href="css/login.css">
    </head>
    <body>
        <div class="login">
            <div class="header">
                <h1>
                    <a href="/login.do">登录</a>
                </h1>
                <button></button>
            </div>
            <form action="/bookmanagement?method=login" method="post">
                <div class="name">
                    <input type="text" id="name" name="username">
                    <p></p>
                </div>
                <div class="pwd">
                    <input type="password" id="pwd" name="password">
                    <p></p>
                </div>

                <div class="btn-red">
                    <input type="submit" value="登录" id="login-btn">
                </div>
            </form>
        </div>
    </body

===========================================

文件结构在问题中也贴出来了

============================================

收起回答

好帮手慕小尤 2020-09-29 14:37:17

同学你好，1. 请同学查看在过滤器中是否有 response.setContentType("text/html;charset=utf-8");语句。如果有，则建议同学删除。

2. 建议同学清除缓存，然后重新进行测试。

祝学习愉快！

收起回答

提问者 notFoundMoneyE #1

首先我的encodeFilter中确实有response.setContentType("text/html;charset=utf-8")；但我删除并清除缓存后并没有用，第二，我访问localhost：8080访问不到tomcat的首页，访问http://localhost:8080/bookmanagement?method=login也没有生效（我在controller中写了的），我怀疑是同一个error引起的，我在这个回答下贴出更详细的代码，麻烦老师了

2020-09-29 15:56:54
提问者 notFoundMoneyE #2

访问8080跳转到page了，这个是之前油画的设置

2020-09-30 10:19:51