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> &nbsp;&nbsp;
			</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" >
		<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>&nbsp;&nbsp;
					<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，数据库中的邮箱信息，在注册过程中不能重复。

版权声明：本文为qq_52735683原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。