JavaWeb实现用户登录与注册功能
作者：奈何桥下的一道光线√ 时间：2022-08-30 17:23:48
本文实例为大家分享了JavaWeb实现用户登录与注册的具体代码，供大家参考，具体内容如下
所用知识
客户端：HTML CSS JS （JQuery）
服务器：JAVA基础 JSP Servlet JDBC Tomcat
数据库：MySQL
用到的Jar包 druid数据库连接池 dbutils JDBC数据库操作工具 MySQL jar包
实现效果基本为注册用户，注册成功将数据写入数据库，登录过程查看数据库中是的用户名，密码是否匹配，匹配跳转到登录成功页面，失败返回登录页面。
思路：
1、先写前端登录注册界面，把前端的基本外观框架完成
2、数据库创建用户信息表，储存注册用户的信息
3、服务器部分采用JavaEE三层架构
(1)、表现层：通俗讲就是展现给用户的界面，即用户在使用一个系统的时候他的所见所得。
(2)、业务逻辑层：针对具体问题的操作，也可以说是对数据层的操作，对数据业务逻辑处理。
(3)、数据访问层：该层所做事务直接操作数据库，针对数据的增添、删除、修改、查找等。
一、客户端部分
文件存储形式
实现代码：
index.jsp主页
<％@ page contentType="text/html;charset=UTF-8" language="java" ％>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<base href="http://localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" >
</head>
<body>
<div id="header">
<img class="logo_img" alt="" src="static/img/logo.gif" >
<div>
<a href="pages/user/login.jsp" >登录</a> |
<a href="pages/user/regist.jsp" >注册</a>
</div>
</div>
<div id="bottom">
<span>
hunustNiu
</span>
</div>
</body>
</html>
login.jsp登录界面
<％@ page contentType="text/html;charset=UTF-8" language="java" ％>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<base href="http://localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css" >
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎登录</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>会员</h1>
<a href="pages/user/regist.jsp" >立即注册</a>
</div>
<div class="msg_cont">
<b></b>
<span class="errorMsg">请输入用户名和密码</span>
</div>
<div class="form">
<form action="${pageContext.request.contextPath}/loginServletl" method="post">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名" autocomplete="off" tabindex="1" name="username" />
<br />
<br />
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码" autocomplete="off" tabindex="1" name="password" />
<br />
<br />
<input type="submit" value="登录" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
hunustNiu
</span>
</div>
</body>
</html>
regist.jsp 注册页面
<％@ page contentType="text/html;charset=UTF-8" language="java" ％>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<base href="http://localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="static/css/style.css" rel="external nofollow" rel="external nofollow" >
<script type="text/javascript" src="static/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 页面加载完成之后
$(function (){
$("#sub_btn").click(function (){
//判断用户名称是否合法
//获取用户昵称
var username=$("#username").val();
//获取用户昵称匹配的正则表达式
var zzusername=/^\w{5,12}$/;
//如果不符合正则
if(!zzusername.test(username)){
$("span.errorMsg").text("用户名不合法");
return false;
}
//判断用户密码是否合法
//获取用户密码
var password=$("#password").val();
//获取用户密码匹配的正则表达式
var zzpassword=/^[a-z0-9_-]{6,18}$/;
//如果不符合正则
if(!zzusername.test(username)){
$("span.errorMsg").text("用户密码不合法");
return false;
}
//确认密码
var repwd=$("#repwd").val();
if(repwd!==password){
$("span.errorMsg").text("两次密码不一致");
return false;;
}
//电子邮件
var email=$("#email").val();
var zzemail=/[1-9]\d{7,10}@qq\.com/;
if(!zzemail.test(email)){
$("span.errorMsg").text("邮箱格式不符");
return false;
}
//验证码
//去掉验证码前后空格
var code=$("#code").val();
code=$.trim(code);
if(code!=="6n6np"){
$("span.errorMsg").text("验证码错误");
return false;
}
});
})
</script>
<style type="text/css">
.login_form{
height:420px;
margin-top: 25px;
}
</style>
</head>
<body>
<div id="login_header">
<img class="logo_img" alt="" src="static/img/logo.gif" >
</div>
<div class="login_banner">
<div id="l_content">
<span class="login_word">欢迎注册</span>
</div>
<div id="content">
<div class="login_form">
<div class="login_box">
<div class="tit">
<h1>注册</h1>
<span class="errorMsg"></span>
</div>
<div class="form">
<form action="${pageContext.request.contextPath}/registServlet" method="post">
<label>用户名称：</label>
<input class="itxt" type="text" placeholder="请输入用户名"
autocomplete="off" tabindex="1" name="username" id="username" />
<br />
<br />
<label>用户密码：</label>
<input class="itxt" type="password" placeholder="请输入密码"
autocomplete="off" tabindex="1" name="password" id="password" />
<br />
<br />
<label>确认密码：</label>
<input class="itxt" type="password" placeholder="确认密码"
autocomplete="off" tabindex="1" name="repwd" id="repwd" />
<br />
<br />
<label>电子邮件：</label>
<input class="itxt" type="text" placeholder="请输入邮箱地址"
autocomplete="off" tabindex="1" name="email" id="email" />
<br />
<br />
<label>验证码：</label>
<input class="itxt" type="text" style="width: 150px;" id="code" name="code"/>
<img alt="" src="static/img/code.bmp" style="float: right; margin-right: 40px">
<br />
<br />
<input type="submit" value="注册" id="sub_btn" />
</form>
</div>
</div>
</div>
</div>
</div>
<div id="bottom">
<span>
hunustNiu
</span>
</div>
</body>
</html>
login_succe.jsp 和regist_success.jsp功能目前只是返回首页和退出登录
<div id="header">
<img class="logo_img" alt="" src="static/img/logo.gif" >
<div>
<a href="index.jsp" >注销</a>
<a href="index.jsp" >返回</a>
</div>
</div>
<div id="main">
<h1>欢迎回来 <a href="index.jsp">转到主页</a></h1>
</div>
二、数据库部分
文件存储形式
实现代码：
CREATE DATABASE users
CREATE TABLE users(
id INT PRIMARY KEY AUTO_INCREMENT,
username VARCHAR(25) UNIQUE,
PASSWORD VARCHAR(25),
email VARCHAR(30) UNIQUE
)
SELECT *FROM `users`
INSERT INTO `users`(`username`,`password`,`email`) VALUES('niu123','niu123','190177@qq.com')/*初始测试数据*/
三、服务器部分
点击查看：文章链接
问题总结
1、客户端部分遇到的bug首先就是在注册，登录，主页之间进行页面跳转的过程中由于没有加入<base>标签总是在一个网页可以显示跳到另一个页面就会产生404错误，通过将所有页面<base>标签固定为<base href="http://localhost:8080/book_war_exploded/">统一跳转的基准以解决。
2、利用JQuery在注册页面判断注册结果是否符合注册的格式要求，采用正则表达式进行判断。
3、数据库中的邮箱信息，在注册过程中不能重复。
来源：https://blog.csdn.net/qq_52735683/article/details/119831220
标签：JavaWeb,登录,注册
0
投稿猜你喜欢
Android开发AsmClassVisitorFactory使用详解
2023-07-22 05:34:53
WinForm实现移除控件某个事件的方法
2021-09-25 02:57:58
C#对JSON与对象的序列化与反序列化
2022-09-07 12:05:08
一文带你深入了解Java泛型
2022-02-10 05:38:02
Android开发实现判断通知栏是否打开及前往设置页面的方法
2022-10-21 10:43:45
Android实现定时任务及闹钟
2023-05-20 13:34:45
c# socket编程udp客户端实现代码分享
2023-06-16 05:03:31
Android 自定义闪屏页广告倒计时view效果
2021-10-13 16:26:39
Activiti流程图查看实例
2022-09-10 17:51:44
Mac OS上安装Tomcat服务器的简单步骤
2022-11-26 21:06:42
response对象的使用(实例讲解)
2023-11-30 12:23:22
Android观察者模式实例分析
2022-07-24 09:21:32
mybatis in foreach 双层嵌套问题
2023-11-24 12:55:47
java实现时间与字符串之间转换
2022-07-06 07:17:31
Android实现沉浸式状态栏功能
2022-10-25 23:19:36
Java 实现微信和支付宝支付功能
2023-03-08 23:18:04
JavaWeb 中Cookie实现记住密码的功能示例
2023-04-06 05:06:48
unity学习教程之定制脚本模板示例代码
2022-02-18 05:07:08
C#设计模式之Builder生成器模式解决带老婆配置电脑问题实例
2021-07-09 03:22:59
Android巧用DecorView实现对话框功能
2022-07-14 14:03:40
