要设计的结果如下图
首先验证码的形成，我们写一个servlet类
package 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 java.awt.*;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;
@WebServlet("/checkCodeServlet")
public class CheckCodeServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int width = 100;
int height = 50;
//1.创建一对象，在内存中图片(验证码图片对象)
BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//2.美化图片
//2.1 填充背景色
Graphics g = image.getGraphics();//画笔对象
g.setColor(Color.PINK);//设置画笔颜色
g.fillRect(0,0,width,height);
//2.2画边框
g.setColor(Color.BLUE);
g.drawRect(0,0,width - 1,height - 1);//线条的长度大概1
String str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghigklmnopqrstuvwxyz0123456789";
//生成随机角标
Random ran = new Random();
StringBuilder sb = new StringBuilder();
for (int i = 1; i <= 4; i++) {
int index = ran.nextInt(str.length());//生成一个大于等0小于str长度的随机数
//获取字符
char ch = str.charAt(index);//随机字符
sb.append(ch);//把字符放到一个字符串中
//2.3写验证码
g.drawString(ch+"",width/5*i,height/2);
}
String checkCode_session = sb.toString();
//将验证码存入session
request.getSession().setAttribute("checkCode_session",checkCode_session);
//2.4画干扰线
g.setColor(Color.GREEN);
//随机生成坐标点
for (int i = 0; i < 10; i++) {
int x1 = ran.nextInt(width);
int x2 = ran.nextInt(width);
int y1 = ran.nextInt(height);
int y2 = ran.nextInt(height);
g.drawLine(x1,y1,x2,y2);
}
//3.将图片输出到页面展示
ImageIO.write(image,"jpg",response.getOutputStream());
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request,response);
}
}
下图反应的是我们整体的设计思路，首先写一个login.jsp里面包含用户名，密码，验证码，验证码图片，登录按钮，同时还需要反应验证码错误或者密码错误的提示信息这几个部分。当我们把这个表格提交之后跳转到loginservlet页面，在这个页面获取前面jsp的用户名，密码，验证码，然后先判断验证码是否正确之后再去判断用户名和密码。
1.如果验证码不正确：
给出用户提示信息：验证码错误；转发跳转到登录页面（转发）
2.如果用户名或者密码不正确：
给出用户提示信息：密码错误；转发跳转到登录页面
3.都正确：
重定向到success.jsp页面，所以数据存储到session中
具体实现：
1.创建一个login.jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>login</title>
<%--切换验证码,加载完成后点击验证码图片--%>
<script>
window.onload=function (ev) {
document.getElementById("img").onclick=function (ev1) {
this.src="/day16/checkCodeServlet?time="+new Date().getTime();//加上一个时间戳来改变验证码
}
}
</script>
</head>
<body>
<form action="/day16/loginServlet" method="post">//表单提交到loginservlet界面
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="username"> </td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="password"> </td>
</tr>
<tr>
<td>验证码</td>
<td><input type="text" name="checkCode"> </td>
</tr>
<tr>
<td colspan="2"><img id="img" src="/day16/checkCodeServlet"> </td>
</tr>
<tr>
<td>登录</td>
<td colspan="2"><input type="submit" value="登录"> </td>
</tr>
</table>
</form>
</body>
</html>
得到下图，点击验证码图片就会改变
2.写LoginServlet
（1）.设置request的编码
（2）.获取参数
（3）.获取验证码
（4）存储信息在success.jsp上面输出
（5）.判断程序
package 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.util.Map;
@WebServlet("/loginServlet")
public class loginServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");//设置请求的格式
//2.获取参数
String username = request.getParameter("username");
String password= request.getParameter("password");
String checkCode = request.getParameter("checkCode");
//3.先获取生成的验证码，因为图片的验证码是一次单独的请求
HttpSession session=request.getSession();
String checkCode_session =(String) session.getAttribute("checkCode_session");
//删除验证码，这样返回的时候验证码就会重新刷一次
session.removeAttribute("checkCode_session");
if (checkCode_session!=null&&checkCode_session.equalsIgnoreCase(checkCode)) {//第一个是为了防止空指针
//忽略大小写
//判断用户名和密码是否正确
if ("zhangsan".equals(username) && "123".equals(password)) {/*需要调用UserDao查询数据库*/
//登录成功
//储存信息，用户信息
session.setAttribute("user",username); //重定向用session
response.sendRedirect(request.getContextPath() + "/success.jsp");
}
else{
//储存提示信息到request
request.setAttribute("login_error","用户名或密码错误");
//转发到登录界面
request.getRequestDispatcher("login.jsp").forward(request, response);
}
}
else{
//验证码不一致
//存储提示信息到request
request.setAttribute("cc_error", "验证码错误");
request.getRequestDispatcher("/login.jsp").forward(request, response);
//转发到login.jsp
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
这个时候在login.jsp中加入两个div
<div>
<%=request.getAttribute("cc_error")==null? "": request.getAttribute("cc_error")%>
//或者写下面的代码
${requestScope.cc_error}
</div>
<div>
<%=request.getAttribute("login_error")==null?"":request.getAttribute("login_error")%>
//同理也可以写成
${requestScope.login_error}
</div>
如果登录成功就重定向到succes.jsp中
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1><%=request.getSession().getAttribute("user")%>欢迎您</h1>
</body>
</html>
其实这里有一个session.setAttribute()、session.getAttribute()和request.setAttrubute()、request.getAttribute()区别：前者作用域是整个会话期间，在所有的页面都使用这些数据的时候使用。后者作用域是请求和被请求页面之间。就比如这里要获取验证码，先通过checkcodeservlet把验证码放到session中去，loginservlet可以获取此验证码，因为不能通过request.getparameter获得。
不足之处：
我这里面验证用户名和密码的时候没有用到数据库操作，就是把用户名和密码写死了：zhangsan 123；这个等后期学会了再来修改吧！
1326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
