bookList.jsp的css样式无法加载
# 具体遇到的问题
别的类都可以正常加载，但是这个类始终无法加载
# 报错信息的截图
# 相关课程内容截图
# 尝试过的解决思路和结果
# 粘贴全部相关代码，切记添加代码注释（请勿截图）
package com.imooc.library.controller;
import java.io.File;
import java.io.IOException;
import java.util.List;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileItemFactory;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import com.imooc.library.entity.Book;
import com.imooc.library.service.BookServiceImpl;
/**
* Servlet implementation class AddBookController
*/
@WebServlet("/dept/add.do")
public class AddBookController extends HttpServlet {
private static final long serialVersionUID = 1L;
private BookServiceImpl bookService=new BookServiceImpl();
/**
* @see HttpServlet#HttpServlet()
*/
public AddBookController() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
FileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload sf=new ServletFileUpload(factory);
try {
List<FileItem> formData=sf.parseRequest(request);
Book book=new Book();
for(FileItem fi:formData) {
if(fi.isFormField()) {
switch(fi.getFieldName()) {
case "bookId":
book.setBookId(fi.getString("utf-8"));
break;
case "bookName":
System.out.println("name"+fi.getString("utf-8"));
book.setBookName(fi.getString("utf-8"));
break;
case "categoryId":
System.out.println("category"+fi.getString("utf-8"));
book.setBookCategory(fi.getString("utf-8"));
break;
case "bookPrice":
book.setBookPrice(fi.getString("utf-8"));
break;
case "remarks":
book.setBookNote(fi.getString("utf-8"));
}
}else {
String path=request.getServletContext().getRealPath("/upload");
String fileName=UUID.randomUUID().toString();
String suffix=fi.getName().substring(fi.getName().lastIndexOf("."));
fi.write(new File(path,fileName+suffix));
book.setBookFace("/upload"+fileName+suffix);
}
}
bookService.addBook(book);
request.getRequestDispatcher("/WEB-INF/jsp/bookList.jsp").forward(request, response);;
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
doGet(request, response);
}
}
<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新建图书信息</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/add.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="/dept/list.do">
图书信息管理
</a>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Hello, Imooc!</h1>
<p>请小心地新增图书信息，要是建了一个错误的就不好了。。。</p>
</div>
<div class="page-header">
<h3><small>新建</small></h3>
</div>
<form class="form-horizontal" action="/dept/add.do" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">图书编号 ：</label>
<div class="col-sm-8">
<input name="bookId" class="form-control" id="bookId">
</div>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">图书名称 ：</label>
<div class="col-sm-8">
<input name="bookName" class="form-control" id="bookName">
</div>
</div>
<div class="form-group">
<label for="categoryId" class="col-sm-2 control-label">分类 ：</label>
<select id="categoryId" name="categoryId" class="col-sm-2 form-control" style="width: auto;margin-left: 15px">
<option value="ca0001" selected="">计算机</option>
<option value="ca0002">文学</option>
<option value="ca0003">历史</option>
<!-- 下拉列表的内容要从分类中进行读取，value值是分类id -->
</select>
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">价格 ：</label>
<div class="col-sm-8">
<input name="bookPrice" class="form-control" id="bookPrice">
</div>
</div>
<div class="form-group" >
<label for="name" class="col-sm-2 control-label">图书封面 ：</label>
<input type="file" id="bookPic" name="bookPic" style="padding-left: 15px">
</div>
<div class="form-group">
<label for="name" class="col-sm-2 control-label">备注 ：</label>
<div class="col-sm-8">
<input name="remarks" class="form-control" id="remarks">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">保存</button>
</div>
</div>
</form>
</div>
<footer class="text-center" >
copy@imooc
</footer>
</body>
</html>
<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图书后台管理</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<c:set var="bookNo" value="0"></c:set>
<header>
<div class="container">
<nav>
<a href="bookList.html" >图书信息管理</a>
</nav>
<nav>
<a href="categoryList.html" >分类管理</a>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<div>
<h1>图书管理系统</h1>
<p>图书信息管理</p>
</div>
</div>
</section>
<section class="main">
<div class="container">
<form class="form-horizontal" action="/searchBook" method="post">
<div class="form-group" style="float: right;">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">查询</button>
</div>
</div>
<div class="form-group" style="float: right;width: 300px;">
<div class="col-sm-8">
<input name="searchContent" class="form-control" id="searchContent"
placeholder="输入要查询的分类" style="width: 250px">
</div>
</div>
</form>
</div>
<div class="container">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>图书编号</th>
<th>图书名称</th>
<th>分类</th>
<th>价格</th>
<th>图书封面</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${bookList }" var="b">
<tr>
<td>${bookNo=bookNo+1 }</td>
<td>${b.bookId }</td>
<td>${b.bookName }<td>
<td>
<c:choose>
<c:when test="${b.bookCategory =='ca0001'}">计算机</c:when>
<c:when test="${b.bookCategory =='ca0002'}">文学</c:when>
<c:when test="${b.bookCategory =='ca0003'}">历史</c:when>
</c:choose>
</td>
<td>${b.bookPrice }</td>
<td><img src="${b.bookFace }"></td>
<td>
<a href="/updateBook?bookId=book0001">修改</a>
<a href="/deleteBook?bookId=book0001">删除</a>
</td>
<!--在循环显示数据时，此处的book0001可以用EL表达式进行替换-->
</tr>
</c:forEach>
</tbody>
</table>
</div>
</section>
<section class="page">
<div class="container">
<div id="fatie">
<a href="addBook.jsp"><button>新建</button></a>
</div>
</div>
</section>
<footer>
copy@慕课网
</footer>
</body>
</html>
22
收起
正在回答
2回答
同学你好，报错404是路径加载不正确。问一下同学的dept是项目名还是映射？
从代码中看，dept应该是映射路径而不是项目名。
这里建议同学使用绝对路径加载css，重启项目再试试，如：
<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
如果还有问题，建议同学将url中的访问路径也贴一下。
祝学习愉快~
好帮手慕阿满
2020-12-11 10:08:05
同学你好，样式无法加载可能是加载css样式的路径不对，还可能是css样式被拦截。建议同学在浏览器中按F12，查看浏览器控制台的报错信息，并将报错信息贴一下。另外建议同学将webapp下的目录结构展开截图贴一下，以及url中的访问路径贴一下，方便我们查看具体问题。
祝学习愉快~
-
同学你好，同学没有贴出浏览器控制台的报错以及访问路径，无法了解具体是什么错误。这里建议同学使用绝对路径加在css再试试，例如：<link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">。
如果还有问题，建议同学将浏览器控制台的报错贴一下。祝学习愉快~
2020-12-11 17:46:46
java工程师2020版
- 参与学习 人
- 提交作业 9393 份
- 解答问题 16556 个
综合就业常年第一，编程排行常年霸榜，无需脱产即可学习，北上广深月薪过万 无论你是未就业的学生还是想转行的在职人员，不需要基础，只要你有梦想，想高薪
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星