jsp+java servlet实现简单用户登录和注册页面(连接数据库,登录页面包含验证码,两周内免登陆等功能)

osc_rebyzmjz 2020-11-11 11:46:28
java Mysql maven Java EE


功能介绍

本项目通过使用jsp和servlet实现简单的用户登录。主要逻辑为:

  • 如果用户不存在,则首先进行注册(注册信息同步到数据库中)。
  • 进行注册后,可进入登录页面对账号进行登录。
  • 如果账号存在,则正确跳转到欢迎界面,否则提示用户账号信息输入错误。
  • 用户进行登录页面时需要填写验证码同时可勾选是否两周内免登陆。
  • 用户进入欢迎界面,则会显示这是用户第几次登录,如果不是第一次登录则会显示上次登录时间。
  • 如果用户直接进入welcome,(没有进行登录,直接打开welcome.jsp)则会跳转到登录页面,防止非法登录。

前期工作准备

1.安装了Tomcat并可以成功使用。
2.由于需要与数据库连接,本项目使用的是mysql数据库,需要引入
mysql-connector-java-5.1.9.jar包(可在官方下载或者通过maven引入mysql依赖),需要注意mysql-connector-java-5.1.9.jar需要放在C:\Program Files\Java\jdk1.8.0_201\jre\lib\ext路径下,否则会出现连接数据库异常。
引入maven依赖:


 <dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.38</version>
</dependency>

实现登录页面

创建数据库

 CREATE TABLE `usert` (
`username` varchar(20) DEFAULT NULL,
`password` varchar(20) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=gbk

此时数据库为空,无数据需要先进行注册才能登陆成功。

三个页面处理

欢迎界面(LoginServlet.jsp)

1.代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>LoginServlet</title>
</head>
<body>
<script type="text/javascript">
<%--对输入的账号信息进行判断,账号密码不能为空且必须输入验证码--%>
function validate() {

if(login.username1.value===""){

alert("账号不能为空");
return;
}
if(login.passwd.value===""){

alert("密码不能为空");
return;
}
if(login.code.value===""){

alert("请输入验证码");
return;
}
login.submit();
}
function refresh() {

login.imgValidate.src="index.jsp?id="+Math.random();
}
</script>
<form name="login" action="/LoginCl" method="post">
用户名:<input type="text" name="username1"><br>
密码:<input type="password" name="passwd"><br>
<input type="checkbox" name="keep" >两周内免登陆<br>
验证码:<input type="text" name="code" size=10>
<%--点击图片可进行验证码刷新--%>
<img name="imgValidate" src = "index.jsp" onclick="refresh()" ><br>
<%--注意此处的button和submit的区别--%>
<input type="button" value="登录" onclick="validate()">
<%
String username = null;
String password = null;
Cookie[] cookies = request.getCookies();
for (int i = 0; i < cookies.length; i++) {

if ("username".equals(cookies[i].getName())) {

username = cookies[i].getValue();
} else if ("password".equals(cookies[i].getName())) {

password = cookies[i].getValue();
}
}
if (username != null && password != null) {

response.sendRedirect("welcome.jsp?uname=" + username + "&password=" + password);
}
%>
</form>
<form action="register.jsp" method="post">
<input type="submit" value="注册">
</form>
</body>
</html>

2.页面如下:
在这里插入图片描述

验证码(index.jsp)

(点击验证码可以实现更新验证码)


<script type="text/javascript">
function refresh() {

src="index.jsp?id="+Math.random();
}
</script>
<%@ page contentType="charset=UTF-8" language="java"
import ="java.awt.*"
import ="java.awt.image.BufferedImage"
import="java.util.*"
import="javax.imageio.ImageIO"
pageEncoding="gb2312"%>
<%
response.setHeader("Cache-Control","no-cache");
//在内存中创建图像
int width=60,height=20;
BufferedImage image=new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
//获取画笔
Graphics g=image.getGraphics();
//设置背景色
g.setColor(new Color(200,200,200));
g.fillRect(0,0,width,height);
//取随机产生的验证码(4位数字)
Random rnd=new Random();
int randNum=rnd.nextInt(8999)+1000;
String randStr=String.valueOf(randNum);
//将验证码存入session
session.setAttribute("randStr",randStr);
//将验证码显示到图像中
g.setColor(Color.black);
g.setFont(new Font("", Font.PLAIN,20));
g.drawString(randStr,10,17);
//随机产生100个干扰点,使图像中的验证码不易被其他程序探测到
for (int i = 0; i < 100; i++) {

int x=rnd.nextInt(width);
int y=rnd.nextInt(height);
g.drawOval(x,y,1,1);
}
//输出图像到页面
ImageIO.write(image,"JPEG",response.getOutputStream());
out.clear();
out=pageContext.pushBody();
%>

在这里插入图片描述

登录处理页面(LoginCl.java(servlet))

业务逻辑处理页面

package Register;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.*;
import java.io.IOException;
import java.sql.*;
@WebServlet("/LoginCl")
public class LoginCl extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException,IOException {

//中文乱码解决方法
response.setContentType("text/html;charset=gb2312");
//防止非法登录 得到session
HttpSession httpSession=request.getSession(true);
//修改session的存在时间为20s
httpSession.setMaxInactiveInterval(20);
httpSession.setAttribute("pass","ok");
//获取用户名的账号和密码
String u=null;
//针对jsp 其username为username1
u=request.getParameter("username1");
String p=null;
p=request.getParameter("passwd");
//得到提交的验证码
String code = request.getParameter("code");
//获取session验证码
HttpSession session = request.getSession();
String randStr = (String) session.getAttribute("randStr");
response.setCharacterEncoding("gb2312");
//当账号信息和验证码输入正确时才可以访问
try {

//启动mysql驱动器
Class.forName("com.mysql.jdbc.Driver");
Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","123456");
String sql="select * from usert where username=? and password=?";
PreparedStatement preparedStatement = con.prepareStatement(sql);
preparedStatement.setString(1,u);
preparedStatement.setString(2,p);
ResultSet rs = preparedStatement.executeQuery();
if(!rs.next()){

response.getWriter().println("<a href=LoginServlet.jsp>抱歉:账号或密码错误,请注意核实信息重新输入</a>");
return;
}
else {

//获取到
if(code.equals(randStr)) {

String keep = request.getParameter("keep");
//勾选了两周内免登陆选项
if (keep != null) {

//创建cookie
Cookie cookie1 = new Cookie("username", u);
Cookie cookie2 = new Cookie("password", p);
//设置关联路径
cookie1.setPath(request.getContextPath());
cookie2.setPath(request.getContextPath());
//设置cookie的消亡时间 两周
cookie1.setMaxAge(2 * 7 * 24 * 60 * 60);
cookie1.setMaxAge(2 * 7 * 24 * 60 * 60);
//把cookie信息写给浏览器
response.addCookie(cookie1);
response.addCookie(cookie2);
}
//跳转到欢迎界面
response.sendRedirect("welcome.jsp?uname=" + u + " &password=" + p);
}
rs.close();
preparedStatement.close();
}
} catch (ClassNotFoundException e) {

e.printStackTrace();
} catch (SQLException e) {

e.printStackTrace();
}
}
public void doPost(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException{

this.doGet(request,response);
}
}

如果当前不存在该用户,则会输出账号密码错误等信息,存在该用户则会跳转到欢迎界面。

欢迎界面(welcome.jsp)

<%@ page import="java.util.Date" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" import="bean.*"
%>
<html>
<head>
<title>welcome</title>
</head>
<body>
<%
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html;charset=UTF-8");
HttpSession httpSession=request.getSession(true);
String val=(String)httpSession.getAttribute("pass");
//如果打开此页面则会跳转到登录页面,防止非法登录
if(val==null){

response.sendRedirect("LoginServlet.jsp");
}
%>
<jsp:useBean id="mycount" class="bean.Counter" scope="application"/>
<jsp:useBean id="user" class="bean.User" scope="session">
<jsp:setProperty name="user" property="name" param="uname"/>
<jsp:setProperty name="user" property="pd" param="password"/>
</jsp:useBean>
<h1>主界面</h1>
<%--welcome name =<%=u%> password =<%=p%><br>--%>
welcome name :<jsp:getProperty name="user" property="name" />
password:<jsp:getProperty name="user" property="pd" /><br>
<%--这是你第:<%=counter%>次访问本网站!<br>--%>
这是你第:<jsp:getProperty name="mycount" property="count"/>
次访问本网站!<br>
<a href='LoginServlet.jsp'>返回重新登录</a><br>
<%
Cookie[] cookies = request.getCookies();
if(cookies!=null) {

for (int i = 0; i < cookies.length; i++) {

if (cookies[i].getName().equals("lastAccessTime")) {

out.println("您上次访问的时间是:");
Long lastAccessTime = Long.parseLong(cookies[i].getValue());
Date date = new Date(lastAccessTime);
out.println(date.toLocaleString());
}
}
}
//用户访问过后重新设置用户的访问时间,存储在cookie中,然后发送到客户端浏览器
Cookie cookie=new Cookie("lastAccessTime",System.currentTimeMillis()+"");
//设置cookie的有效期为1min
cookie.setMaxAge(60);
//将cookie对象添加到response对象中,这样服务器在输出response对象中的内容时
// 就会把cookie也输入到客户端浏览器
response.addCookie(cookie);
%>
</body>
</html>

实现注册页面

信息注册(register.jsp)

<%--
Created by IntelliJ IDEA.
User: Lenovo
Date: 2020/10/20
Time: 9:44
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" pageEncoding="gb2312" %>
<html>
<head>
<title>register</title>
</head>
<body>
<h1>欢迎您进行注册</h1>
<script language="JavaScript" type="text/javascript">
function checkPassword() {

if (register.password1.value.length < 6 || register.password1.value.length > 20) {

alert("请注意密码长度应该不超过20同时不小于6位");
return;
}
else {

values = register.password1.value;
var flag = false;
for (var i = 0; i < values.length; i++) {

if ((values.charAt(i) >= 'A' && values.charAt(i) <= 'Z') || (values.charAt(i) >= 'a' && values.charAt(i) <= 'z')) {

if ((values.charAt(i) >= 'A' && values.charAt(i) <= 'Z')) {

for (var k = 0; k < values.length; k++) {

if ((values.charAt(k) >= 'a' && values.charAt(k) <= 'z')) {

flag = true;
break;
}
}
}
else {

for (var k = 0; k < values.length; k++) {

if ((values.charAt(k) >= 'A' && values.charAt(k) <= 'Z')) {

flag = true;
break;
}
}
}
}
}
if (flag == false) {

alert("密码必须同时包含大小写字母");
return;
}
var flag1=false;
for (var k = 0; k < values.length; k++) {

if((values.charAt(k)>='0'&&values.charAt(k)<='9')){

flag1=true;
}
}
if(flag1==false){

alert("密码中必须含有数字");
return;
}
}
register.submit();
}
</script>
<form name="register" action="registerMessage.jsp" method="post">
请输入账号:<input type="text" name="name"><br>
请输入密码(要求:必须包含大小写英文和数字无非法字符,长度大于6位小于20):<input type="password" name="password1"><br>
请选择性别:<input name="sex" type="radio" value="男" checked><input name="sex" type="radio" value="女" ><br>
请选择家乡:<select name="home" >
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="陕西">陕西</option>
</select>
<br>
请选择您的爱好:<input name="fav" type="checkbox" value="唱歌">唱歌
<input name="fav" type="checkbox" value="跳舞">跳舞
<input name="fav" type="checkbox" value="打球">打球
<input name="fav" type="checkbox" value="玩游戏">玩游戏<br>
<input type="button" value="注册" onclick="checkPassword()">
</form>
</body>
</html>

在这里插入图片描述
点击注册后则会跳转到注册成功页面,将其账号和密码进行存储到数据库中,后可以直接进行登录。

注册成功页面(registerMessage.jsp)


<%@ page language="java" pageEncoding="gb2312" %>
<html>
<head>
<title>message</title>
</head>
<body>
<h2>信息注册成功!该用户注册信息如下:</h2>
<%
request.setCharacterEncoding("gb2312");
String name=request.getParameter("name");
String password=request.getParameter("password1");
String sex = request.getParameter("sex");
String home = request.getParameter("home");
out.println("账号:"+name);
out.println("密码:"+password);
out.println("性别:"+sex);
out.println("家乡:"+home);
out.println("兴趣爱好:");
String[] fav = request.getParameterValues("fav");
for (int i = 0; i < fav.length; i++) {

out.print(fav[i]+" ");
}
try {

Class.forName("com.mysql.jdbc.Driver");
Connection con= null;
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","123456");
PreparedStatement preparedStatement = con.prepareStatement("insert into usert values(?,?)");
preparedStatement.setString(1,name);
preparedStatement.setString(2,password);
preparedStatement.executeUpdate();
out.println("<a href=LoginServlet.jsp>信息注册成功,点击此处进行登录</a>");
} catch (SQLException e) {

e.printStackTrace();
}
catch (ClassNotFoundException e) {

e.printStackTrace();
}
%>
</body>
</html>

在这里插入图片描述
(如下所示,数据添加成功)
在这里插入图片描述

功能演示

至此此项目结束,我演示一下登录时的场景。
1.数据库数据
在这里插入图片描述
2.输入数据库中没有的信息
在这里插入图片描述
在这里插入图片描述
3.账号密码正确
在这里插入图片描述
ps:需要注意一定要填写账户或者密码或者验证码,否则则会弹出错误窗口。
eg:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述











总结

此项目需要用到的知识点比较多,其中包括 jsp,servlet,mysql,cookie, Javabean等。需要将学到的web知识联系起来。有不懂的代码问题欢迎提问。

版权声明
本文为[osc_rebyzmjz]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/4385225/blog/4712389

  1. 【计算机网络 12(1),尚学堂马士兵Java视频教程
  2. 【程序猿历程,史上最全的Java面试题集锦在这里
  3. 【程序猿历程(1),Javaweb视频教程百度云
  4. Notes on MySQL 45 lectures (1-7)
  5. [computer network 12 (1), Shang Xuetang Ma soldier java video tutorial
  6. The most complete collection of Java interview questions in history is here
  7. [process of program ape (1), JavaWeb video tutorial, baidu cloud
  8. Notes on MySQL 45 lectures (1-7)
  9. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  10. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  11. 精进 Spring Boot 03:Spring Boot 的配置文件和配置管理,以及用三种方式读取配置文件
  12. Refined spring boot 03: spring boot configuration files and configuration management, and reading configuration files in three ways
  13. 【递归,Java传智播客笔记
  14. [recursion, Java intelligence podcast notes
  15. [adhere to painting for 386 days] the beginning of spring of 24 solar terms
  16. K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
  17. K8s Series Part 8 (service, endpoints and high availability kubeadm deployment)
  18. 【重识 HTML (3),350道Java面试真题分享
  19. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  20. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  21. [re recognize HTML (3) and share 350 real Java interview questions
  22. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  23. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  24. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  25. RPC 1: how to develop RPC framework from scratch
  26. 造轮子系列之RPC 1:如何从零开始开发RPC框架
  27. RPC 1: how to develop RPC framework from scratch
  28. 一次性捋清楚吧,对乱糟糟的,Spring事务扩展机制
  29. 一文彻底弄懂如何选择抽象类还是接口,连续四年百度Java岗必问面试题
  30. Redis常用命令
  31. 一双拖鞋引发的血案,狂神说Java系列笔记
  32. 一、mysql基础安装
  33. 一位程序员的独白:尽管我一生坎坷,Java框架面试基础
  34. Clear it all at once. For the messy, spring transaction extension mechanism
  35. A thorough understanding of how to choose abstract classes or interfaces, baidu Java post must ask interview questions for four consecutive years
  36. Redis common commands
  37. A pair of slippers triggered the murder, crazy God said java series notes
  38. 1、 MySQL basic installation
  39. Monologue of a programmer: despite my ups and downs in my life, Java framework is the foundation of interview
  40. 【大厂面试】三面三问Spring循环依赖,请一定要把这篇看完(建议收藏)
  41. 一线互联网企业中,springboot入门项目
  42. 一篇文带你入门SSM框架Spring开发,帮你快速拿Offer
  43. 【面试资料】Java全集、微服务、大数据、数据结构与算法、机器学习知识最全总结,283页pdf
  44. 【leetcode刷题】24.数组中重复的数字——Java版
  45. 【leetcode刷题】23.对称二叉树——Java版
  46. 【leetcode刷题】22.二叉树的中序遍历——Java版
  47. 【leetcode刷题】21.三数之和——Java版
  48. 【leetcode刷题】20.最长回文子串——Java版
  49. 【leetcode刷题】19.回文链表——Java版
  50. 【leetcode刷题】18.反转链表——Java版
  51. 【leetcode刷题】17.相交链表——Java&python版
  52. 【leetcode刷题】16.环形链表——Java版
  53. 【leetcode刷题】15.汉明距离——Java版
  54. 【leetcode刷题】14.找到所有数组中消失的数字——Java版
  55. 【leetcode刷题】13.比特位计数——Java版
  56. oracle控制用户权限命令
  57. 三年Java开发,继阿里,鲁班二期Java架构师
  58. Oracle必须要启动的服务
  59. 万字长文!深入剖析HashMap,Java基础笔试题大全带答案
  60. 一问Kafka就心慌?我却凭着这份,图灵学院vip课程百度云