JavaWeb实现⽤户登录与注册功能
本⽂实例为⼤家分享了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<html>
<head>
<meta charset="UTF-8">
<title>⾸页</title>
<base href="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="localhost:8080/book_war_exploded/">
<link type="text/css" rel="stylesheet" href="${tPath}/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="${tPath}/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="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(!st(username)){
$("Msg").text("⽤户名不合法");
return false;
}
//判断⽤户密码是否合法
//获取⽤户密码
var password=$("#password").val();
/
/获取⽤户密码匹配的正则表达式
var zzpassword=/^[a-z0-9_-]{6,18}$/;
//如果不符合正则
if(!st(username)){
$("Msg").text("⽤户密码不合法");
return false;
}
//确认密码
var repwd=$("#repwd").val();
if(repwd!==password){
$("Msg").text("两次密码不⼀致");
return false;;
}
//电⼦邮件
var email=$("#email").val();
var zzemail=/[1-9]\d{7,10}@qq\/;
if(!st(email)){
$("Msg").text("邮箱格式不符");
return false;
}
//验证码
//去掉验证码前后空格
var code=$("#code").val();
code=$.trim(code);
if(code!=="6n6np"){
$("Msg").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="${tPath}/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" id="code" name="code"/>
<img alt="" src="static/img/code.bmp" >
<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')/*初始测试数据*/
三、服务器部分
点击查看：
问题总结
1、客户端部分遇到的bug⾸先就是在注册，登录，主页之间进⾏页⾯跳转的过程中由于没有加⼊<base>标签总是在⼀个⽹页
可以显⽰跳到另⼀个页⾯就会产⽣404错误，通过将所有页⾯<base>标签固定为<base
href="localhost:8080/book_war_exploded/">统⼀跳转的基准以解决。
2、利⽤JQuery在注册页⾯判断注册结果是否符合注册的格式要求，采⽤正则表达式进⾏判断。
3、数据库中的邮箱信息，在注册过程中不能重复。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论