好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

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主页

?

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 > &nbsp;&nbsp;

    </ 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\测试数据/;

      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 >&nbsp;&nbsp;

      < 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测试数据' )/*初始测试数据*/

三、服务器部分

点击查看： 文章链接

问题总结

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实现用户登录与注册功能的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did212863
  阅读：30次

上一篇： springMVC在restful风格的性能优化方案

下一篇：使用@PathVariable接收两个参数