需求
用户登录的时候使用验证码进行验证
步骤
一、
LoginServlet实现步骤:
- 使用代码实现验证码的绘制
- 将随机产生的字符串放在会话域中
- 用户登录的时候提交验证码的字符串
- 比较表单提交的字符串是否与会话域中的字符串相等,如果相等则验证成功
- 登录一次以后删除会话域中的验证码字符串
- 登录成功以后保存用户的信息到会话域中,并且跳转到WelcomeServlet
二、
WelcomeServlet的实现步骤: - 会话域中取出用户信息并且显示
- 判断用户是否正常登录,如果是非法用户则跳转到登录页面
- 在页面上输出一个注销的连接,点注销跳转到LogoutServlet
三、 LogoutServlet的实现步骤: - 让会话立刻过期
- 显示您已经成功退出
web网页页面部分
登陆页面主要使用bootstrap框架写的
Java类部分
验证码类 PicCodeServlet 的代码部分
package com.zjs.servlet;
import javax.imageio.ImageIO;
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 javax.servlet.http.HttpSession;
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet(name = "PicCodeServlet", urlPatterns = "/code")
public class PicCodeServlet extends HttpServlet {
//创建一个随机类
private Random ran = new Random();
//写一个方法随机生成一种颜色
private Color getRandomColor() {
//随机生成0~255之间的数
int red = ran.nextInt(256);
int green = ran.nextInt(256);
int blue = ran.nextInt(256);
//红,绿,蓝
return new Color(red, green, blue);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 创建缓存图片
int width = 90, height = 30;
//参数:宽,高,图片模式
BufferedImage img = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//2. 获取画笔对象
Graphics graphics = img.getGraphics();
//3. 设置画笔颜色
graphics.setColor(Color.WHITE);
//4. 填充矩形区域
graphics.fillRect(0, 0, width, height);
//5. 从字符数组中随机得到字符
char[] arr = { 'A', 'B', 'C', 'D', 'N', 'E', 'W', 'b', 'o', 'y', '1', '2', '3', '4','5','6' };
//6. 循环4次,画4个字符
//new一个空字符用来存储验证码字符串
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 4; i++) {
//7. 设置字的颜色为随机
graphics.setColor(getRandomColor());
//8. 设置字体,大小为19
graphics.setFont(new Font(Font.SANS_SERIF,Font.BOLD+Font.ITALIC,19));
//随机得到下标
int index = ran.nextInt(arr.length);
char c = arr[index];
//将循环得到的字符拼接成字符串
sb.append(c);
//随机得到一个字符
//9. 将每个字符画到图片,x增加,y不变。
graphics.drawString(String.valueOf(c),10+(i*20), 20);
}
//将验证码以字符串的方式放到会话域中
HttpSession session = request.getSession();
System.out.println("验证码:"+sb.toString());
session.setAttribute("code",sb.toString());
//11. 画8条干扰线,每条线的颜色不同
for (int i = 0; i < 8; i++) {
//10. 线的位置是随机的,x范围在width之中,y的范围在height之中。
int x1 = ran.nextInt(width);
int y1 = ran.nextInt(height);
int x2 = ran.nextInt(width);
int y2 = ran.nextInt(height);
graphics.setColor(getRandomColor());
graphics.drawLine(x1,y1,x2,y2);
}
//12. 将缓存的图片输出到响应输出流中
//参数:图片对象,图片格式,输出流
ImageIO.write(img,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
login.html代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css"/>
<style>
body{
margin-top:20px;
margin:0 auto;
}
.carousel-inner .item img{
width:100%;
height:300px;
}
.container .row div{
/* position:relative;
float:left; */
}
font {
color: #666;
font-size: 22px;
font-weight: normal;
padding-right:17px;
}
</style>
</head>
<body>
<!--
描述:菜单栏
-->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png" />
</div>
<div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<li><a href="login.htm">登录</a></li>
<li><a href="register.htm">注册</a></li>
<li><a href="cart.htm">购物车</a></li>
</ol>
</div>
</div>
<!--
描述:导航条
-->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container" style="width:100%;height:460px;background:#FF2C4C url('img/loginbg.jpg') no-repeat;">
<div class="row">
<div class="col-md-7">
<!--<img src="./img/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
</div>
<div class="col-md-5">
<div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
<font>会员登录</font>USER LOGIN
<div> </div>
<form class="form-horizontal" action="login">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control"name="username" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control"name="password" id="password" placeholder="请输入密码">
</div>
</div>
<div class="form-group">
<label for="code" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" name="code" class="form-control" id="code" placeholder="请输入验证码">
</div>
<div class="col-sm-3">
<img src="code" title="看不清,请重试" style="cursor: pointer" id="imgcode"/>
<script type="text/javascript">
document.getElementById("imgcode").onclick=function (ev) {
this.src="code?t="+Math.random();
}
</script>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 自动登录
</label>
<label>
<input type="checkbox"> 记住用户名
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" width="100" value="登录" name="submit" border="0"
style="background: url('./img/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height:35px;width:100px;color:white;">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div style="margin-top:50px;">
<img src="./img/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
</div>
<div style="text-align: center;margin-top: 5px;">
<ul class="list-inline">
<li><a>关于我们</a></li>
<li><a>联系我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>法律声明</a></li>
<li><a>友情链接</a></li>
<li><a target="_blank">支付方式</a></li>
<li><a target="_blank">配送方式</a></li>
<li><a>服务声明</a></li>
<li><a>广告声明</a></li>
</ul>
</div>
<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
Copyright © 2005-2016
</div>
</body></html>
**主要是验证码部分的代码,我截出来了,如下图**
LoginServlet实现步骤:
- 使用代码实现验证码的绘制
- 将随机产生的字符串放在会话域中
- 用户登录的时候提交验证码的字符串
- 比较表单提交的字符串是否与会话域中的字符串相等,如果相等则验证成功
- 登录一次以后删除会话域中的验证码字符串
- 登录成功以后保存用户的信息到会话域中,并且跳转到WelcomeServlet
代码部分
package com.zjs.servlet;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "LoginServlet", urlPatterns = "/login")
public class LoginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置字符集
response.setContentType("text/html;charset=utf-8");
//得到打印流
PrintWriter out = response.getWriter();
//得到会话域
HttpSession session = request.getSession();
//得到登陆页面上显示得验证码
String code = (String) session.getAttribute("code");
//得到用户输入得验证码
String code1 = request.getParameter("code");
//用户输入的验证码与登陆页面上显示得验证码进行比较
if (code.equalsIgnoreCase(code1)){
//用户名与密码主要是从数据库中查询得,这个案例主要是验证 验证码,这里就不演示访问数据库了
//得到用户名
String username=request.getParameter("username");
//得到用户密码
String password=request.getParameter("password");
//如果用户名和密码分别等于ljm,520的话验证就通过
if ("ljm".equals(username)&&"520".equals(password)){
//将用户信息存到会话域中
session.setAttribute("username",username);
//转发到welcome
request.getRequestDispatcher("welcome").forward(request, response);
}
else {
//写js脚本用来提示
out.print("<script>");
out.print("alert('用户名或密码不正确');");
out.print("location.href='login.html';");
out.print("</script>");
}
}
else {
out.print("<script>");
out.print("alert('验证码不正确');");
out.print("location.href='login.html';");
out.print("</script>");
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
WelcomeServlet的实现步骤:
7. 会话域中取出用户信息并且显示
8. 判断用户是否正常登录,如果是非法用户则跳转到登录页面
9. 在页面上输出一个注销的连接,点注销跳转到LogoutServlet
代码部分
package com.zjs.servlet;
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 javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet(name = "WelcomeServlet", urlPatterns = "/welcome")
public class WelcomeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置字符集
response.setContentType("text/html;charset=utf-8");
//得到打印流
PrintWriter out = response.getWriter();
//得到会话域
HttpSession session = request.getSession();
从会话域中得到用户名
String username = (String) session.getAttribute("username");
//登陆成功后判断用户名是否为空,如果为空,重定向到登陆页面
if (username==null){
response.sendRedirect("login.html");
return;
}
out.print("欢迎来到我的世界"+session.getAttribute("username")+"<br/>");
//如果点退出,就跳转到logout页面
out.print("<a href='logout'>退出</a>");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
三、 LogoutServlet的实现步骤:
10. 让会话立刻过期
11. 显示您已经成功退出
代码部分
package com.zjs.servlet;
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 java.io.IOException;
@WebServlet(name = "logoutServlet", urlPatterns = "/logout")
public class logoutServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//得到会话域后 让会话域立刻失效
request.getSession().invalidate();
//并且重定向到登陆页面
response.sendRedirect("login.html");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
效果截图
一、
登陆页面:
二、
1.输入正确的用户名和密码
2.输入正确的用户名和密码后跳转到的页面
三、点退出后会跳回上面显示的登陆页面
四、输入错误的验证码以及弹出的提示
五、输入错误的用户名或密码以及提示