为了账号安全,请及时绑定邮箱和手机立即绑定

JSP+Servlet培训班作业管理系统[10] -登录功能的实现

标签:
Java Html/CSS

本篇在上篇数据库操作层实现的基础上,实现培训班作业管理系统的登录功能,具体过程如下:

1,登录页面login.jsp,注意修改为了使用用户编号和密码登录,因为用户编号是由mysql自动分配的自增长的字段肯定是唯一的,这样就避免了判断用户名重复的逻辑,使代码更加简单便于维护。

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>   
    <title>login.jsp</title>
  </head>
  <body>
    <form id="mainForm" method="post" action="/HomeworkSystem/LoginServlet">
        请输入用户编号:<input type="text" name="userId" />
        <br/>
        请输入密码:<input type="password" name="userPassword"/>  
        <br/>
        <input type="submit" value="登录"/>
    </form>
  </body>
</html>

2,点击登录后根据web.xml配置跳转到LoginServlet如下:

需要注意的是,猫哥的建议是,Servlet作为控制器,相当于军队的首长、公司的大老板,仅仅负责战略方面的事情,具体的小事可以一层层分解让下属去办。但是这并不是绝对的,有的公司本来就很小(项目规模小),你还分4、5个层级,那不是铺张浪费么。凡是无绝对,什么样体量的公司搭配什么样的部门架构,都是有一个规律的,Servlet管好听取意见、下令处理、指示结果三件事——从网页获取信息,处理数据,将结果返回给网页——就够了。

package servlet;
import java.io.*;
import util.*;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.*;
import command.LoginCommand;
import entity.User;
import exception.MyException;
public class LoginServlet extends HttpServlet {//用于处理登录请求的LoginServlet
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);//直接调用doPost方法处理get请求
    }
    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {//处理post请求
        //设置输入输出格式、编码
        response.setContentType("text/html");
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        //获取信息
        String userId=request.getParameter("userId");
        String userPassword=request.getParameter("userPassword");
        try {
            //下令处理
            LoginCommand lc=new LoginCommand(); 
            User user=null;
            user=lc.checkLogin(userId, userPassword);
            if(user==null)
                throw new MyException(new Date(),"用户名或者密码错误","用户名或者密码错误");
            String[][] loginRoleMenu=Constant.roleMenu.get(user.getUserRole().getRoleName());//根据用户角色名找到对应菜单信息
            //返回处理结果(正常信息)
            request.getSession().setAttribute("loginRoleMenu", loginRoleMenu);//记录登录用户的菜单信息
            request.getSession().setAttribute("loginUser", user);//记录登录用户信息
            request.getRequestDispatcher("/index.jsp").forward(request,response);//跳转到index.jsp
        } catch (MyException e) {
            //返回处理结果(异常信息)
            request.setAttribute("errorInfo", e.getInfo());//设置错误信息
            request.getRequestDispatcher("/error.jsp").forward(request,response);//跳转到error.jsp
        }
    }
}

3,具体登录相关事项处理交给LoginCommand如下:

package command;
import java.util.Date;
import operation.UserOperation;
import entity.EntityFactory;
import entity.User;
import exception.MyException;
public class LoginCommand {//从此处向数据库类下操作指令
    public User checkLogin(String userId,String userPassword) throws MyException{
        if(userId.trim().equals("")||userPassword.trim().equals("")){
            //抛出输入信息异常
            throw new MyException(new Date(),"用户编号或者密码为空","用户名或者密码为空");
        }
        try{
            //从数据库中执行查询,此处暂时使用测试工厂类创建一个代替
            User user=null;
            UserOperation oper=new UserOperation();
            int id=Integer.parseInt(userId);
            user=(User)oper.selectById(id);
            if(user.getUserPassword().equals(userPassword))//用户编号和密码匹配
                return user;
            else//不匹配
                return null;
        }catch(Exception e){
            throw new MyException(new Date(),e.getMessage(),"数据库访问异常");
        }
    }
}

数据库层前面一篇已经分析了,本篇及以后不再详述,如有需要,可参见JSP+Servlet培训班作业管理系统[9] -数据库操作层实现

4,登录后跳转到index.jsp或error.jsp页面,error.jsp仅仅负责输出需要提示用户的错误信息:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>  
    <title>error.jsp</title>
  </head>
  <body>
    错误信息:${errorInfo}<br/>
  <a href="login.jsp">点此返回登录页</a>
  </body>
</html>

而index.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>index.jsp</title>
    <link href="css/index.css" type="text/css" rel="stylesheet"/>
  </head>
  <body>
    <div id="main">
        <div id="top">
            <div id="top_title">
                猫哥培训班作业管理系统
            </div><!-- 标题部分 -->
            <div id="top_info">
                欢迎您,尊敬的:${loginUser.userName}
            </div><!-- 登录用户信息部分 -->
        </div><!-- top部分是标题栏 -->
        <div id="left">
            <ul>
                <c:forEach items="${loginRoleMenu}" var="menu">
                <li>
                    <a href="/HomeworkSystem/RouteServlet?type=${menu[1]}">${menu[0]}</a>
                </li>
                </c:forEach>
            </ul>
        </div><!-- left部分是菜单栏 -->
        <div id="right">
            <c:if test="${empty type}">
                欢迎来到猫哥培训班管理系统
            </c:if>
            <c:if test="${not empty type}">
                <jsp:include page="${type}" flush="true"></jsp:include>
            </c:if>
        </div><!-- right部分是具体内容显示区 -->
    </div>
  </body>
</html>

因为css之前已经介绍过如何实现的,所以本篇为了清晰演示代码将css单独摘出到WebRoot下css文件夹下,代码如下(以后只在第一次出现css时粘贴当页css代码):

    /*css/index.css*/
    /*星号表示选择全部,设置外边距0,内边距0,字体大小12px,宋体*/
    *{
        margin:0px;
        padding:0px;
        font-size:12px;
        font-family:"宋体";
    }
    /*整个body区域背景色为#F5F5F5,这个很简单,自己下载个取色器,找个漂亮的网页,取个颜色就行*/
    body {
        background-color: #FCFCFC;
    }
    /*在top、left、right外面套用一层main是为了控制宽度,并且整体居中*/
    #main{
        width:1000px;
        margin:0px auto;

    }
    /*宽度占满它爹的宽度,高度64px是瞎试的,不好看再调整,猫哥喜欢用16px、32px、64px、128px这些,你懂的。
    背景色猫哥继续取色器
    line-height表示文字占用的高度,它也是64那就是文字占用高度跟top区域高度是一样的嘛,所以文字就居中了*/
    #top{
        width:100%;
        height:64px;
        background-color:#000000;
        line-height:64px;   
    }
    /*文字颜色取色器,标题部分啊文字用微软雅黑,大气!*/
    #top_title{
        line-height:64px;
        font-family:"微软雅黑";
        color:#FFFFFF;
        float:left;
        font-size:32px;
        margin-left:16px;
    }
    /*颜色依然是自己取色的*/
    #top_info{
        color:#71777D;
        float:right;
        line-height:64px;
        font-size:16px;
        margin-right:16px;
    }
    /*宽度占200px差不多了吧
    float表示漂浮,left的话就是靠左了,所以这个left区域就得靠左飘飘了
        内部的东西跟边距有点距离好看点,暂时定为10px,上下左右都是哦*/
    #left{
        width:200px;
        height:536px;/*猫哥认为600-64=536*/
        float:left;
        background-color:#EEEEEE;
        padding:10px;
    }
    /*调整id=left的div中的ul标签下的li标签的样式为上边距10px,左边距15px*/
    #left ul li{
        margin:10px 0px 0px 15px;
    }
    /*注意逗号表示同时设置两组对象的CSS属性
    a:link表示未访问的链接,a:visited表示已访问的链接,颜色凭爱好了*/
    #left a:link, #left a:visited {
        color: #333333;
        text-decoration:none;/*不要下划线*/
    }
    /*a:hover表示鼠标悬停的链接,a:active表示被选择的链接*/
    #left a:hover, #left a:active {
        color: #0AA770;
        text-decoration:none;
    }
    /*同理right向右飘*/
    #right{
        width:760px;/*1000-200-10*4=760,此处一定要注意padding的内容会拓宽div整体宽度,有志于前端的可以专门去研究下*/
        min-width:600px;
        height:536px;/*猫哥认为600-64=536*/
        float:right;
        background-color:#FFFFFF;
        padding:10px;
    }
点击查看更多内容
6人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
软件工程师
手记
粉丝
1.5万
获赞与收藏
1523

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消