zoukankan      html  css  js  c++  java

  • S2SH商用后台权限系统第三讲

    个位博友：

         您好！今天我们做下登录页面，已经如何登录系统。我们的登录页面很简单，用户名、密码、验证码。下面首先描述下验证码的概念，验证码是为了防止机器人恶意登录。我们这里的验证码采用4位数字，当然你也可以在验证码生成类进行扩展，这样就可以调整为4位数字加英文字母。呵呵，更高级了，更不容易被破解。

    　　验证码的理念是，书写一个img，将img的src指向为后台的一个jsp，当然servlet也可以，本质是一个东西。jsp或者servlet利用图形工具随机生成4位数字，并展示在一个图片上。随后加入一个干扰线，乱七八糟的，防止被破解。最关键是需要将这4个数字的值存到session里面去，否则一会登录的时候无法校验验证码是否正确。下面是生成验证码的jsp代码：

    <%@ page contentType="image/jpeg" import="java.awt.*,java.awt.image.*,java.util.*,javax.imageio.*" language="java" pageEncoding="utf-8" %>
<%!
Color getRandColor(int fc,int bc){//给定范围获得随机颜色
        Random random = new Random();
        if(fc>255) fc=255;
        if(bc>255) bc=255;
        int r=fc+random.nextInt(bc-fc);
        int g=fc+random.nextInt(bc-fc);
        int b=fc+random.nextInt(bc-fc);
        return new Color(r,g,b);
        }
%>
<%
//设置页面不缓存
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);

// 在内存中创建图象
int width=60, height=20;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);

// 获取图形上下文
Graphics g = image.getGraphics();

//生成随机类
Random random = new Random();

// 设定背景色
g.setColor(getRandColor(200,250));
g.fillRect(0, 0, width, height);

//设定字体
g.setFont(new Font("Times New Roman",Font.PLAIN,18));

//画边框
//g.setColor(new Color());
//g.drawRect(0,0,width-1,height-1);


// 随机产生155条干扰线，使图象中的认证码不易被其它程序探测到
g.setColor(getRandColor(160,200));
for (int i=0;i<155;i++)
{
 int x = random.nextInt(width);
 int y = random.nextInt(height);
        int xl = random.nextInt(12);
        int yl = random.nextInt(12);
 g.drawLine(x,y,x+xl,y+yl);
}

// 取随机产生的认证码(4位数字)
String sRand="";
for (int i=0;i<4;i++){
    String rand=String.valueOf(random.nextInt(10));
    sRand+=rand;
    // 将认证码显示到图象中
    g.setColor(new Color(20+random.nextInt(110),20+random.nextInt(110),20+random.nextInt(110))); //调用函数出来的颜色相同，可能是因为种子太接近，所以只能直接生成
    g.drawString(rand,13*i+6,16);
}

// 将认证码存入SESSION
session.setAttribute("rand",sRand);


// 图象生效
g.dispose();
ServletOutputStream sos = response.getOutputStream();
// 输出图象到页面
ImageIO.write(image, "JPEG", sos);
//com.sun.image.codec.jpeg.JPEGCodec.createJPEGEncoder(sos).encode(image);
sos.close();
out.clear();
out = pageContext.pushBody();
%> 
    　现在我们开始书写登录页面，刚才我们说了只有用户名、密码、验证码，登录页面JSP代码如下：
    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>登陆页面</title>
    <link rel="stylesheet" href="resource/css/zhuzi.css" type="text/css" />
    <script type="text/javascript">
        //登陆按钮的校验
        function loginUser(){
            var userName = document.getElementById('userName');
            var userPwd = document.getElementById('userPwd');
            var valCode = document.getElementById('valCode');
            if (userName.value == "") {
                alert("请输入用户名！");
                userName.focus();
                return false;
            }
            if (userPwd.value == "") {
                alert("请输入密码！");
                userPwd.focus();
                return false;
            }
            if (valCode.value == "") {
                alert("请输入验证码！");
                valCode.focus();
                return false;
            }
            //校验成功，登陆。
            document.getElementById('mySubBtn').disabled="disabled";
            document.getElementById('loginForm').submit();
        }
        //挂载回车键，提交表单。
        function enterkey(e)
        {
            if (e == 13)
            {
               document.getElementById('loginForm').submit();
            }
        }
    </script>
  </head>
  
  <body onkeydown="enterkey(event.keyCode||event.which)">
      <div id="flashdiv" style="height:412px; 700px; position:absolute; left:0px; top:0px; z-index:99;">
        <param name="wmode" value="transparent" />
        <embed src="resource/images/752412.swf"  width="700" height="412" wmode="transparent"></embed>
        </div>
        <div class="oalogin">
            <table class="login" 
                border="0" cellpadding="0" cellspacing="0" align="center">
                <tr class="tr001">
                    <td></td>
                </tr>
                <tr>
                    <td class="tr002"></td>
                </tr>
                <tr>
                    <td class="tr003">
                        <form method="post" name="loginForm" id="loginForm" action="login!goinPostLogin.action">
                            <table width="463" border="0" align="right" cellpadding="0"
                                cellspacing="0" class="logintable">
                                <tr>
                                    <td width="70" height="35" style="padding-top:30px;">
                                        <label for="Name">
                                            <b>用户名:</b>
                                        </label>
                                    </td>
                                    <td width="430" colspan="2" style="padding-top:20px;">
                                        <input name="userName" class="lgin" type="text" id="userName"
                                            tabindex="1" size="18" maxlength="12" />
                                    </td>
                                </tr>
                                <tr>
                                    <td height="35" style="padding-top:20px;">
                                        <label for="password">
                                            <b>密&nbsp;&nbsp;码:</b>
                                        </label>
                                    </td>
                                    <td colspan="2">
                                        <input name="userPwd" type="password"
                                            class="keyboardInput lgin" id="userPwd" tabindex="2"
                                            size="18" maxlength="20" />
                                    </td>
                                </tr>
                                <tr>
                                    <td height="35" style="padding-top:20px;">
                                        <label for="password">
                                            <b>验证码:</b>
                                        </label>
                                    </td>
                                    <td colspan="2">
                                        <input id="valCode" class="lgin" type="text" maxlength="4" size="4" tabindex="3" name="valCode"></input>
                                        <img border="0" src="validatecode.jsp"></img>
                                    </td>
                                </tr>
                                <tr>
                                    <td height="35"></td>
                                    <td colspan="2">
                                        <input value="登 陆" class="buttonOver"
                                            onMouseOver="this.className='buttonNomal'"
                                            onMouseOut="this.className='buttonOver'"
                                            id="mySubBtn" name="mySubBtn" tabindex="4"
                                            type="button" onClick="loginUser()"  />
                                        &nbsp;
                                        <input value="重 填" class="buttonNomal" 
                                            onMouseOver="this.className='buttonOver'"
                                            onMouseOut="this.className='buttonNomal'" id="input_btn2"
                                            name="input_btn" tabindex="5" type="reset" />
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </td>
                </tr>
                <tr>
                    <td class="tr004"></td>
                </tr>
                <tr>
                    <td class="tr005"></td>
                </tr>
                <tr>
                    <td class="tr006"></td>
                </tr>
            </table>
        </div>
  </body>
</html>

    　　点击登录按钮，我们进行用户名、密码、验证码是否填写的校验，随后用form以post形 式提交到后台。后台我们根据用户名和密码从数据库进行查询，判断输入是否正确。在这之前我们要先判断验证码是否正确，否则直接提示验证码错误。用户名，密 码都正确了，还要判断用户是否被锁定了，若被锁定，提示被锁定。尤其注意校验用户名、密码时务必分开校验，防止sql注入！下面是后台校验代码部分：

    String userName=request.getParameter("userName");
        String userPwd=request.getParameter("userPwd");
        String valCode=request.getParameter("valCode");
        //校验验证码
        if(!valCode.equals(this.session.get("rand").toString())){
            response.getWriter().print(ScriptUtil.ShowAlert("验证码不正确！", "login!login.action"));
            return null;
        }
        
        User user=userService.chkUserByNameAndPwd(userName,userPwd);
        if(user==null){
            response.getWriter().print(ScriptUtil.ShowAlert("用户名或密码不正确！", "login!login.action"));
            return null;
        }else{
            //校验一下，这个用户现在的状态是否可用。
            if(user.getCanUse()!=1){
                response.getWriter().print(ScriptUtil.ShowAlert("此用户已经被锁定，请联系管理员！", "login!login.action"));
                return null;
            }else{
                log.info(user.getUserName()+"登陆成功，IP:"+request.getRemoteHost());
                //登陆成功
                session.put("userId", user.getUserId());
                //然后跳转到登陆后的主页。
                response.sendRedirect("user!index.action");
                return null;
            }
        }

    今天我们就讲到这里，全部讲完后会免费放出整个项目源代码。您的回复是我最大的动力！
  • 相关阅读:
    Ubuntu设置默认编辑器
    Java基础学习之(15)
    Java基础学习之(9)--java的常用类
    Java基础学习之(11)--异常处理
    Java基础学习之(10)--接口
    Java基础学习之(8)--多态和抽象类
    Java基础学习之(7)--Object类
    Java基础学习之(6)--继承、访问权限、重写
    dubbo-整合springboot、基于注解的简单实例
    java安全框架之Permission学习笔记
  • 原文地址：https://www.cnblogs.com/myzhijie/p/s2sh-3.html
Copyright © 2011-2022 走看看