本文实例为大家分享了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主页
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<%@ 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登录界面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<%@ 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 注册页面
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
|
<%@ 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功能目前只是返回首页和退出登录
1
2
3
4
5
6
7
8
9
10
|
< 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 > |
二、数据库部分
文件存储形式
实现代码:
1
2
3
4
5
6
7
8
9
10
|
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