首页手记 JSP+Servlet培训班作业管理系统[6]

JSP+Servlet培训班作业管理系统[6]

标签：

Java Html/CSS

本篇来具体实现校长角色下的人员管理功能——task4-x

task4-1，首先大体脑海里设计下，人员管理，无非是增、删、改、查。

查：以一个列表的形式显示所有人员信息
增：有一个网页，可以输入一个人员的信息，点击确定后新增一个人员，并跳转到“查”页面
改：有一个网页，可以修改人员信息，网页样式可以服用“增”
删：在“查”页面删除人员后，更新列表

由以上想法，猫哥大体想把人员管理页面设计为上中下三部分，上为功能标题，中间为人员列表显示区域，下面为操作按钮区域。

task4-2，设计userManage.jsp页面外观布局如下：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!-- 使用c:标签需要添加本行代码 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>userManage.jsp</title>
    <style type="text/css">
    /*一定需要注意，该页面因为和index.jsp有嵌套关系，
        所以通过id选取元素时，id千万别和index.jsp中重名了
    其余部分之前都讲过了，不再详述*/
    #user_top{
        height:30px;
        font-family:"微软雅黑";
        font-size:16px;
        border-bottom: 1px solid #D4D5D7;
    }
    #user_mid{
        height:400px;
        margin-top:5px;
    }
    #user_bottom{
        background-color:#D4D5D7;
        margin:5px auto;
        width:240px;
        height:20px;    
        line-height:20px;
        text-align:center;
    }
    </style>
  </head>
  <body>
    <div id="user_top">
        人员管理
    </div><!-- user_top end -->
    <div id="user_mid">
        人员列表
    </div><!-- user_mid end -->
    <div id="user_bottom">
        这里是按钮
    </div><!-- "user_bottom" end -->
  </body>
</html>

task4-3，现在开始加载列表，应该在RouteServlet里面就设定好attribute，然后在userManage.jsp页面中加载。如下：

package servlet;
import java.io.IOException;

import javax.jms.Session;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class RouteServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {//处理post请求
        //设置输入输出格式、编码
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //获取用户在网页输入的用户名和密码
        String type=request.getParameter("type");
        //将type设置为根据Session中的loginRoleMenu匹配
        String[][] loginRoleMenu=(String[][])request.getSession().getAttribute("loginRoleMenu");
        //寻找对应Servlet路径的jsp文件名
        for(String[] menu:loginRoleMenu){
            if(menu[1].equals(type)){
                type=menu[2];
            }
        }
        //此处应该将人员信息放入request的attribute
        request.setAttribute("type",type);
        request.getRequestDispatcher("/index.jsp").forward(request,response);//跳转到index.jsp
    }
}

但是此时有个问题，RouteServlet是一个Servlet啊，跟数据库交互应该不归它管。Servlet是个领导啊，只管接受下属的信息，然后下达指令，哪里还管从数据取数这样的具体事物。

再深一步想想，其实下面的代码也不该归它具体负责，从内存中取数和从数据库中取数一个事情，下个命令就完事。

  //寻找对应Servlet路径的jsp文件名
        for(String[] menu:loginRoleMenu){
            if(menu[1].equals(type)){
                type=menu[2];
            }
        }
        //此处应该将人员信息放入request的attribute
        request.setAttribute("type",type);

task4-4，我们先重新整理下，将从内存中匹配jsp页面逻辑写在一个新类RouteCommand里面，然后将RouteServlet简化，同时Session中的loginRoleMenu也没有了存在的必要。所以具体改动如下：

改动1，修改RouteServlet.doPost方法如下：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {//处理post请求
        //设置输入输出格式、编码
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //将获取type和Session中的loginUser
        User loginUser=(User)request.getSession().getAttribute("loginUser");
        String type=request.getParameter("type");
        //根据登录用户角色名称，和用户点击菜单的type类型，获取要定向的jsp地址
        RouteCommand routeCmd=new RouteCommand();
        String jspUrl=routeCmd.findJsp(loginUser.getUserRole().getRoleName(),type);
        //此处应该将人员信息放入request的attribute
        request.setAttribute("type",jspUrl);
        request.getRequestDispatcher("/index.jsp").forward(request,response);//跳转到index.jsp
    }

清爽了很多啊。

改动2，RouteCommand

package command;
import java.util.Date;
import util.Constant;
import entity.EntityFactory;
import entity.User;
import exception.MyException;
public class RouteCommand {//接受RouteServlet指令的服务类
    //根据登录用户角色名称，和用户点击菜单的type类型，获取要定向的jsp地址
    public String findJsp(String roleName,String requestType){
        String[][] loginRoleMenu=Constant.roleMenu.get(roleName);
        for(String[] menu:loginRoleMenu){
            if(menu[1].equals(requestType)){
                return menu[2];
            }
        }
        return null;
    }
}

task4-5，依照这个逻辑，我们将查询人员列表的功能添加进来。首先修改RouteServlet：

public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {//处理post请求
        //设置输入输出格式、编码
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //将获取type和Session中的loginUser
        User loginUser=(User)request.getSession().getAttribute("loginUser");
        String type=request.getParameter("type");
        RouteCommand routeCmd=new RouteCommand();
        if(type.equals("userManage")){//如果type是userManage，应该将人员信息放入request的attribute
            try {
                request.setAttribute("users",routeCmd.getAllUser());
            } catch (MyException e) {//如果有错误，跳转到error.jsp
                request.setAttribute("errorInfo", e.getInfo());//设置错误信息
                request.getRequestDispatcher("/error.jsp").forward(request,response);//跳转到error.jsp
            }
        }
        //根据登录用户角色名称，和用户点击菜单的type类型，获取要定向的jsp地址
        String jspUrl=routeCmd.findJsp(loginUser.getUserRole().getRoleName(),type);
        request.setAttribute("type",jspUrl);
        request.getRequestDispatcher("/index.jsp").forward(request,response);//跳转到index.jsp
    }

然后在RouteCommand里面添加getAllUser方法

//获取人员列表
    public List<User> getAllUser() throws MyException{//此处不处理异常，交由外部调用地方处理
        List<User> users=null;
        try{
            //从数据库中执行查询,此处暂时使用测试工厂类创建一个代替
            users=(List<User>)EntityFactory.CreateEntity("UserList");
        }catch(Exception e){
            throw new MyException(new Date(),e.getMessage(),"数据库访问异常");
        }
        return users;
    }

最后为了测试，在测试工厂继续修改：

else if(type.equals("UserList")){//获取人员列表
            List<User> users=Arrays.asList(
                (User)EntityFactory.CreateEntity("User"), 
                (User)EntityFactory.CreateEntity("User"),
                (User)EntityFactory.CreateEntity("User")
            );
            return users;
}

task4-6，最后，修改userManage.jsp页面中列表部分，以显示人员列表

    <div id="user_mid">
        <table id="user_table">
            <thead>
                <tr>人员编码</tr>
                <tr>姓名</tr>
                <tr>角色</tr>
            </thead>
            <c:forEach items="${users}" var="item">
                <tr>
                    <td>${item.userId}</td>
                    <td>${item.userName}</td>
                    <td>${item.userRole.roleName}</td>
                </tr>
            </c:forEach>    
        </table>
    </div><!-- user_mid end -->

稍微加点css美工下（PS，表格样式是别人分享的，猫哥无一点艺术细胞....尴尬，此处想告诉大家，美工要多学多练，然后才能写出专属于自己的美丽）：

 /* 以下为表格美工*/
    #user_table thead, #user_table tr {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: rgb(230, 189, 189);
    }
    #user_table {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgb(230, 189, 189);
    }

    /* Padding and font style */
    #user_table td, #user_table th {
    padding: 5px 10px;
    font-size: 12px;
    font-family: Verdana;
    color: rgb(177, 106, 104);
    }

    /* Alternating background colors */
    #user_table tr:nth-child(even) {
    background: rgb(238, 211, 210)
    }
    #user_table tr:nth-child(odd) {
    background: #FFF
    }

程序运行如下，还是可以的：