通过Servlet跳转到jsp页面,jsp页面的样式不起效,但单独运行.jsp页面样式存在

通过Servlet跳转到jsp页面,jsp页面的样式不起效,但单独运行.jsp页面样式存在

老师您好,我的问题如下:

通过Servlet映射地址进入,跳转employee.jsp页面出现样式不存在

http://img1.sycdn.imooc.com//climg/5d2570170001e0cf13610982.jpg

直接进入employee.jsp则样式存在

http://img1.sycdn.imooc.com//climg/5d25703b00012d1a19200712.jpg

代码如下:Employee.java代码

package com.liu.util;

public class Employee {
 private String eid;
 private String ename;
 private String department;
 private String job;
 private String salary;
 public Employee(String eid,String ename,String department,String job,String salary){
  this.eid=eid;
  this.ename=ename;
  this.department=department;
  this.job=job;
  this.salary=salary;
 }
 public String getEid() {
  return eid;
 }
 public void setEid(String eid) {
  this.eid = eid;
 }
 public String getEname() {
  return ename;
 }
 public void setEname(String ename) {
  this.ename = ename;
 }
 public String getDepartment() {
  return department;
 }
 public void setDepartment(String department) {
  this.department = department;
 }
 public String getJob() {
  return job;
 }
 public void setJob(String job) {
  this.job = job;
 }
 public String getSalary() {
  return salary;
 }
 public void setSalary(String salary) {
  this.salary = salary;
 }
 
}



EmployeeServlet.java代码

package com.liu.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletContext;
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 com.liu.util.Employee;

/**
 * Servlet implementation class EmployeeServlet
 */
@WebServlet("/employee/init")
public class EmployeeServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public EmployeeServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  ServletContext context = request.getServletContext();
  if(context.getAttribute("employees")==null){
   Employee employee = new Employee("1","刘慧娟","研发部","java初级开发师","8000");
   List list = new ArrayList();
   list.add(employee);
   list.add(new Employee("2","苏朋辉","研发部","Java高级开发师","15000"));
   context.setAttribute("employees", list);
  }
  request.getRequestDispatcher("/employee.jsp").forward(request, response);
 }

}



CreateServlet.java代码

package com.liu.servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletContext;
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 com.liu.util.Employee;

/**
 * Servlet implementation class CreateServlet
 */
@WebServlet("/employee/create")
public class CreateServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;
      
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CreateServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
  */
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  System.out.println("进入dopost方法");
  request.setCharacterEncoding("utf-8");
  String eid = request.getParameter("eid");
  String ename = request.getParameter("ename");
  String department = request.getParameter("department");
  String job = request.getParameter("job");
  String salary = request.getParameter("salary");
  Employee employee = new Employee(eid,ename,department,job,salary);
  ServletContext context = request.getServletContext();
  List list =(List)context.getAttribute("employees");
  list.add(employee);
  context.setAttribute("employees",list);
  request.getRequestDispatcher("/employee.jsp").forward(request, response);
 }

}

employee.jsp代码

<%@ 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">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>员工列表</title>
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet"></link>
   
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <style type="text/css">
        .pagination {
            margin: 0px
        }

        .pagination > li > a, .pagination > li > span {
            margin: 0 5px;
            border: 1px solid #dddddd;
        }

        .glyphicon {
            margin-right: 3px;
        }

        .form-control[readonly] {
            cursor: pointer;
            background-color: white;
        }
        #dlgPhoto .modal-body{
            text-align: center;
        }
        .preview{

            max-width: 500px;
        }
    </style>
    <script>
        $(function () {
           
            $("#btnAdd").click(function () {
                $('#dlgForm').modal()
            });
        })


    </script>
</head>
<body>

<div class="container">
    <div class="row">
        <h1 style="text-align: center">IMOOC员工信息表</h1>
        <div class="panel panel-default">
            <div class="clearfix panel-heading ">
                <div class="input-group" style="width: 500px;">
                    <button class="btn btn-primary" id="btnAdd"><span class="glyphicon glyphicon-zoom-in"></span>新增
                    </button>
                </div>
            </div>

            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>员工编号</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>职务</th>
                    <th>工资</th>
                    <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items = "${applicationScope.employees}" var = "emp" varStatus="idx" >
                <tr>
                    <td>${idx.index + 1}</td>
                    <td>${emp.eid}</td>
                    <td>${emp.ename }</td>
                    <td>${emp.department }</td>
                    <td>${emp.job }</td>
                    <td style="color: red;font-weight: bold">¥<fmt:formatNumber value = "${emp.salary }" pattern="0,000.00" ></fmt:formatNumber></td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 表单 -->
<div class="modal fade" tabindex="-1" role="dialog" id="dlgForm">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增员工</h4>
            </div>
            <div class="modal-body">
                <form action="/Employee/employee/create" method="post" >
                    <div class="form-group">
                        <label >员工编号</label>
                        <input type="text" name="eid" class="form-control" id="empno" placeholder="请输入员工编号">
                    </div>
                    <div class="form-group">
                        <label >员工姓名</label>
                        <input type="text" name="ename" class="form-control" id="ename" placeholder="请输入员工姓名">
                    </div>
                    <div class="form-group">
                        <label>部门</label>
                        <select id="dname" name="department" class="form-control">
                            <option selected="selected">请选择部门</option>
                            <option value="市场部">市场部</option>
                            <option value="研发部">研发部</option>
                         <option value="后勤部">后勤部</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>职务</label>
                        <input type="text" name="job" class="form-control" id="sal" placeholder="请输入职务">
                    </div>

                    <div class="form-group">
                        <label >工资</label>
                        <input type="text" name="salary" class="form-control" id="sal" placeholder="请输入工资">
                    </div>

                    <div class="form-group" style="text-align: center;">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>


正在回答

登陆购买课程后可参与讨论,去登陆

4回答

同学你好,如果是@WebServlet("/employee/init"),访问路径中项目名后应该是employee/init。访问路径中有employee相当于是一个文件夹,再转发到其他的页面,应该是在这个文件夹下。同学在jsp页面中引入其他的文件时,路径中是不包含这个employee文件夹的,所以引入文件404.

如果我的回答解决了你的疑惑,请采纳。祝:学习愉快~

  • 你管的着嘛 提问者 #1
    好的,谢谢老师您,我知道了
    2019-07-10 19:26:39
提问者 你管的着嘛 2019-07-10 18:36:24

http://img1.sycdn.imooc.com//climg/5d25bf4e0001c43c03550576.jpg

java文件中将@WebServlet("/employee/init")改为@WebServlet("/init")就不存在问题了。谢谢老师您

好帮手慕阿满 2019-07-10 18:16:25

同学你好,问一下同学的项目结构是什么样的,

在同学贴出来的报错信息中,有如下的问题:

http://img1.sycdn.imooc.com//climg/5d25baca0001ba9107080198.jpg

css和js文件夹是在employee文件夹下的吗?建议同学将项目结构展开截图贴一下。

祝:学习愉快~

  • 提问者 你管的着嘛 #1
    老师您辛苦,我将截图在回答区了,更改方法java文件中将@WebServlet("/employee/init")改为@WebServlet("/init")就不存在问题了。但WebServlet路径为什么会影响JSP文件中的引用文件路径呢?
    2019-07-10 18:38:44
好帮手慕阿满 2019-07-10 15:41:58

同学你好,从servlet跳转到jsp中,样式不起效果时,建议同学查看一下浏览器的控制台是否有报错,如果有,建议同学将报错信息贴一下。

祝:学习愉快~

  • 提问者 你管的着嘛 #1
    GET http://localhost:8081/Employee/employee/css/bootstrap.css net::ERR_ABORTED 404 (Not Found) init:12 GET http://localhost:8081/Employee/employee/js/jquery-1.11.1.min.js net::ERR_ABORTED 404 (Not Found) init:13 GET http://localhost:8081/Employee/employee/js/bootstrap.js net::ERR_ABORTED 404 (Not Found) init:42 Uncaught ReferenceError: $ is not defined at init:42
    2019-07-10 16:11:09
  • 提问者 你管的着嘛 #2
    跳转到jsp页面后,样式文件找不到
    2019-07-10 16:12:24
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师