您的位置：首页 > Web前端 > HTML

Servlet结合Html实现登录验证(包括验证码验证)功能

2018-07-23 16:37 711 查看

Servlet生成验证码并输出:

@WebServlet(name = "yzmServlet")
public class yzmServlet extends HttpServlet {
private static final int WIDTH = 100;
private static final int HEIGHT = 40;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
BufferedImage image=new BufferedImage(WIDTH,HEIGHT, BufferedImage.TYPE_INT_RGB);
Graphics g=image.getGraphics();
//设置背景色
g.setColor(Color.CYAN);
//填充背景色
g.fillRect(0,0,WIDTH,HEIGHT);
//设置前景色
g.setColor(Color.BLACK);
//设置字体
Font font=new Font("仿宋",Font.BOLD,20);
g.setFont(font);
//获取验证码
int len=4;
String result="";
for(int x=0;x<len;x++){
char c=(char) RandomUtils.nextInt(65,91);
result=result+c;
}
g.drawString(result,20,20);
//设置干扰线条
for(int i=0;i<10;i++){
int x1= RandomUtils.nextInt(0,WIDTH);
int x2= RandomUtils.nextInt(0,WIDTH);
int y1= RandomUtils.nextInt(0,HEIGHT);
int y2= RandomUtils.nextInt(0,HEIGHT);
Color color=new Color(RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255),RandomUtils.nextInt(0,255));
g.setColor(color);
//设置线条
g.drawLine(x1,y1,x2,y2);
}
//将获取到的验证码存储到Session中
HttpSession session=request.getSession();
session.setAttribute("identifyCode",result);
//输出图片
BufferedOutputStream bos=new BufferedOutputStream(response.getOutputStream());
ImageIO.write(image,"jpg",bos);
//ImageIO.write(image,"jpg",new File("e:\\b.jpg"));
bos.flush();
bos.close();
}
}

Servlet对登录界面输入的昵称/密码/验证码进行验证:

@WebServlet(name = "identifyYzmServlet")
public class identifyYzmServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//获取输入的用户名
String username=request.getParameter("username");
//获取输入的密码
String password=request.getParameter("password");
//获取输入的验证码
String yzm2=request.getParameter("yzm01");
//获取Session对象中存取的数据
HttpSession session1=request.getSession();
String yzm1=(String)session1.getAttribute("identifyCode");
if(!username.equals("")&&!password.equals("")&&!yzm2.equals("")){
if(username.equals("Bighead")) {
if (password.equals("4214963")) {
if (yzm1.equals(yzm2)) {
response.getWriter().println("登录成功");
//登录成功后跳转到的页面
//request.getRequestDispatcher("form01.html").forward(request,response);
} else {
response.getWriter().println("验证码有误,请重新输入");
}
} else {
response.getWriter().println("密码有误,请重新输入");
}
}else{
response.getWriter().println("昵称有误,请重新输入");
}
}else{
response.getWriter().println("昵称或密码或验证码不能为空,请输入");
}
}
}

web-xml进行配置:

-<servlet>

<servlet-name>identifyYzmServlet</servlet-name>

<servlet-class>com.westos.identifyYzmServlet</servlet-class>

</servlet>

-<servlet-mapping>

<servlet-name>identifyYzmServlet</servlet-name>

<url-pattern>/ident</url-pattern>

</servlet-mapping>

-<servlet>

<servlet-name>yzmServlet</servlet-name>

<servlet-class>com.westos.untitle2.yzmServlet</servlet-class>

</servlet>

-<servlet-mapping>

<servlet-name>yzmServlet</servlet-name>

<url-pattern>/yzm01</url-pattern>

</servlet-mapping>

html实现登录界面:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login</title>
<style type="text/css">
#login{
border: 1px solid deepskyblue;
background-color: blanchedalmond;
width:400px;
height:250px;
padding-left: 100px;
padding-top: 50px;
}

</style>
<script type="text/javascript">
//用javaScript语言验证昵称和密码
//function check(){
//var name=document.getElementById("nicheng").value;
// var password=document.getElementById("mima").value;
// if(name=="Bighead"&&password=="4214963"){
// alert("登陆成功");
// window.document.login.action="form01.html";
// window.document.login.submit();
// }else{
//  alert("密码或昵称错误,请重新输入");
// }
// }
function identifyload() {
document.getElementById('myyzm').src = 'yzm01';
}
</script>
</head>
<body>
<div id="top">
<h1>登录</h1>
</div>
<div  id="login">
<form action="./ident" method="Post" name="login">
昵称:<input name="username" type="text" placeholder="请输入昵称" id="nicheng"/><br/><br/>
密码:<input name="password" type="password" placeholder="请输入密码" id="mima"/><br/><br/>
请输入验证码:<br/>
<img src="./yzm01" height="32" id="myyzm">
<button type="button" value="看不清楚,再来一张" onclick="identifyload()">看不清楚,再来一张</button>
<input name="yzm01" type="text"/><br/>
<button type="submit" value="登录" >登录</button>
<button type="reset" value="重置">重置</button>
</form>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Servlet 生成验证码

相关文章推荐

新的分享

章节导航