JavaWeb实现用户登录与注册功能

2024-09-28 03:54:13

本文实例为大家分享了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>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

JavaWeb简单用户登录注册实例代码(有验证码)

需求编写login登录界面(用户名,密码,验证码,登陆按钮,注册按钮) 设计关系数据库(编号,用户名,密码) 编写注册功能,将数据存储在数据库中.(姓名不能重复,设为主键,重复会注册失败) 编写登录功能 .首先获取验证码,先判断验证码是否正确,不正确则显示验证码错误.验证码正确后再获取用户名和密码,进行数据库的搜索比对,若正确则重定向到成功的界面,并且将用户名显示. jar包技术选型 Servlet + JSP + Mysql + JDBCTemplate + Druid + BeanUti
JavaWeb实战之用Servlet+JDBC实现用户登录与注册

一.前言使用到的技术栈: (1)JDBC (2)Servlet (3)MySQL 二.准备工作 (1)书城用户数据库与表创建 (2)编写用户类对象JavaBean (3)编写JdbcUtils对数据库进行交互(使用德鲁伊数据库连接池) (4)编写web层最终编写好的第二阶段登陆注册文件结构为 dao中定义了基础的操作数据库代码,具体功能有 1.Insert.update.delete(修改) 2.查询一个对象(返回一个对象) 3.查询一个数组对象(数组返回多个对象) 4.返回某一个特定值对象
JavaWeb实现用户登录与注册功能（服务器）

本文实例为大家分享了JavaWeb实现用户登录与注册功能的具体代码,供大家参考,具体内容如下用到的知识客户端:HTML CSS JS (JQuery) 服务器:JAVA基础 JSP Servlet JDBC Tomcat 数据库:MySQL 用到的Jar包 druid数据库连接池 dbutils JDBC数据库操作工具 MySQL jar包总体结构: 客户端数据库部分网址思路: 服务器部分采用JavaEE三层架构 (1).表现层:通俗讲就是展现给用户的界面,即用户在使用一个
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

下面通过通过图文并茂的方式给大家介绍JavaWeb实现用户登录注册功能实例代码,一起看看吧. 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp负责数据显示,javabean负责封装数据. Servlet+JSP+JavaBean模式程序各个模块之间层次清晰,web开发推荐采用此种模式. 这里以一个最常用的用户登录注册程序来讲解Servlet+JS
JavaWeb实现用户登录与注册功能(服务器)

本文实例为大家分享了JavaWeb实现用户登录与注册功能的具体代码,供大家参考,具体内容如下用到的知识客户端:HTML CSS JS (JQuery) 服务器:JAVA基础 JSP Servlet JDBC Tomcat 数据库:MySQL 用到的Jar包 druid数据库连接池 dbutils JDBC数据库操作工具 MySQL jar包总体结构: 客户端数据库部分网址思路: 服务器部分采用JavaEE三层架构 (1).表现层:通俗讲就是展现给用户的界面,即用户在使用一个
JavaWeb实现用户登录与注册功能

本文实例为大家分享了JavaWeb实现用户登录与注册的具体代码,供大家参考,具体内容如下所用知识客户端:HTML CSS JS (JQuery) 服务器:JAVA基础 JSP Servlet JDBC Tomcat 数据库:MySQL 用到的Jar包 druid数据库连接池 dbutils JDBC数据库操作工具 MySQL jar包实现效果基本为注册用户,注册成功将数据写入数据库,登录过程查看数据库中是的用户名,密码是否匹配,匹配跳转到登录成功页面,失败返回登录页面. 思路
用Python实现web端用户登录和注册功能的教程

用户管理是绝大部分Web网站都需要解决的问题.用户管理涉及到用户注册和登录. 用户注册相对简单,我们可以先通过API把用户注册这个功能实现了: _RE_MD5 = re.compile(r'^[0-9a-f]{32}$') @api @post('/api/users') def register_user(): i = ctx.request.input(name='', email='', password='') name = i.name.strip() email = i.email.
JSP实现用户登录、注册和退出功能

本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计本例使用oracle数据库创建用户表包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp
基于struts2和hibernate实现登录和注册功能

本文实例为大家分享了struts2和hibernate实现登录和注册功能,供大家参考,具体内容如下 1.该项目使用MySQL数据库,数据库名为test,表名info,如图所示: 2.配置web.xml(Struts2使用) <?xml version="1.0" encoding="UTF-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/jav
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能

之前的文章中我们已经搭建好框架,并且设计好了,数据库. 现在我们开始实现登录功能,这个可以说是Web应用最最最普遍的功能了. 先来说说我们登录的逻辑: 输入用户名.密码(validate进行前端验证)--ajax调用后台action方法--根据用户名调用业务层到数据层查询数据库信息--查询的密码跟用户输入的密码比对--shiro登录身份验证--将用户信息存入session--响应前端--前端跳转这个是我要告诉大家的姿势,还有很多很多的姿势.下面我们来看具体的代码. 首先前端验证,这里使用了jq