[简易的网站登录注册,注销退出操作]

小智RE0

已于 2023-11-18 15:05:58 修改

阅读量2k

点赞数 6

分类专栏：练习文章标签：数据库 html java

于 2021-09-30 23:39:13 首次发布

本文链接：https://blog.csdn.net/MrTumnus/article/details/120573493

版权

这篇博客展示了如何实现一个简单的网站登录、注册、注销和退出功能。前端使用HTML和JavaScript进行表单验证，限制输入规则并防止空格填充。后端采用Java处理用户信息，与数据库交互进行账户验证。在登录成功页面，提供了安全退出选项。博客内容涵盖了数据库字段设置、前端页面设计和Java处理逻辑。

摘要由CSDN通过智能技术生成

ml

先看看最终效果吧

;在登录提交时,前端页面会用JS点击事件判断;
1.首先判断的是账户框和密码框输入的是否符合规则(基本是判断不能为空,全部输空格是不允许的(用了字符串的trim()函数,将输入字符两边的空格去除,然后再判断),)然后就是密码不能超过6位(数据库的密码字段设置了最长为6位);
2.登陆时会和数据库交互判断;
3.进入成功页面后,会有安全退出;
4.不通过登录访问成功页面时;会被重新调整到登录页面;

在这里插入图片描述

注册时;鼠标离开账户输入框时(即输入框的移出事件);就会和数据库进行判断用户是否存在;
之后再提交注册时,还进行了一次判断(这里写的判断有点多余…)

在这里插入图片描述

数据库字段

创建时的数据库
仅为简易练习,所以用户表没有太多的字段

-- 创建数据库;
CREATE DATABASE IF NOT EXISTS day20219_24_test_db;
-- 删除数据库;
-- drop database if exists day20219_24_test_db;

-- 创建用户表;
-- 实现简易注册,登录功能,自己创建一个用户表,包含账号,密码,注册时间字段;
CREATE TABLE IF NOT EXISTS t_user(
        -- 主键自增;
       `id` INT PRIMARY KEY AUTO_INCREMENT COMMENT 'ID号标识',
       `account` VARCHAR(20) NOT NULL COMMENT '账户名',
        -- 密码默认6个0; 
       `password` VARCHAR(6) DEFAULT '000000' NOT NULL COMMENT '密码',
       `create_time` DATETIME NOT NULL COMMENT '创建时间'
 );
 -- 为保证登录时有可比性,先存一行数据;
 INSERT INTO t_user(id,account,`password`,`create_time`)
 VALUES(1,'小智','123456',now());

在这里插入图片描述

用到的jar包:

gson-2.1.jar
mysql-connector-java-8.0.16.jar
servlet-api.jar

部署jquery时用到
jquery.1.8.3.min.js

前端页面

前端的登录和注册页面;
实际上就是前几天写这个==> 静态的简易页面 < = =静态页面时,分隔出来的;
但是javascript判断什么的,还是修改了;(比如说之前还不能判断全是空格的情况)

登录前端页面login.html;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>登录首页</title>
    <!-- 样式表修饰 ,引入外部的样式表-->
    <link type="text/css" rel="stylesheet" href="css/login.css?" />

    <!--部署JQuery-->
    <script src="js/jquery.1.8.3.min.js" type="text/javascript"></script>
    <!-- JS事件 -->
    <script type="text/javascript">
        function toLogin(){
     
            /* 先取到账户框和密码框的值 */
            var accountVal = $("#accountId").val();
            var passwordVal = $("#passwordId").val();
            if((accountVal.trim()).length==0){
     

                //console.log((accountVal.trim()).length==0) 测试使用;
                $("#outbox_form_account_error").html("用户名不能为空!");
            }
            else if((passwordVal.trim()).length == 0 ){
     
                $("#outbox_form_password_error").html("密码不能为空!");
            }
            else if((passwordVal.trim()).length > 6){
     
                $("#outbox_form_password_error").html("密码要六位数哦!");
            }
            else{
     

                /*参数1,url地址,参数2:表单的数据转为键值对的形式,参数3:触发的回调函数,参数4,可指定返回的类型*/
               $.post("login",$("#formId").serialize(),function (data){
     

                   //JSON转JS;
                   var obj= $.parseJSON(data);

                       //判断是否存在;注意用的是用JS对象进行判断;
                       if(obj.id !=null){
     
                           // alert(data);测试时使用;
                           //存入会话;
                           window.sessionStorage.setItem("user",data);
                           //replace方法 加载一个新页面取代当前页面;
                           alert("登录成功!")
                           location.replace("success.html");

                           //不存在就提示;
                       }else if(data == 1){
     
                           $("#outbox_form_account_error").html( "注意是不是账号密码错了呢");
                       }else{
     
                           alert("啊这,服务器异常!!!")
                       }

               });
            }
        }

        /* 考虑到提示信息持久性的不能消失;就让输入框,密码框的聚焦事件去清除 */
        function reAcErr(){
     
            $("#outbox_form_account_error").html("");
        }

        function rePassErr(){
     
           $("#outbox_form_password_error").html("");
        }
    </script>

</head>
<body style="background-image: url(./img/bz.png);background-size: cover; ">

<!-- 包裹注册栏的大盒子 -->
<div id="outbox">
    <div id="outbox_welcome">
        欢迎登录
    </div>
    <!-- 填写的表单 -->
    <div id="outbox_form">
        <form id="formId">
            <!-- 账户框以及提示信息弹出位置 -->
            <div id="outbox_form_account">
                <div id="outbox_form_account_char">账户:</div>
                <div  id="outbox_form_account_in">
                    <input  id="accountId" type="text" name="account" placeholder="请输入账户名:" onfocus="reAcErr()"/>
                </div>
                <!-- 提示信息框,在页面中配合javascript事件使用 -->
                <div id="outbox_form_account_error"></div>
            </div>

            <!-- 密码框以及提示信息弹出位置 -->
            <div id="outbox_form_password">
                <div id="outbox_form_password_char">密码:</div>
                <div  id="outbox_form_password_in" >
                    <input id="passwordId" type="password"  name="password" placeholder="请输入密码:" onfocus="rePassErr()"/>
                </div>
                <!-- 提示信息框,在页面中配合javascript事件使用 -->
                <div id="outbox_form_password_error"></div>
            </div>
            <!-- 登录按钮位置 -->
            <div id="outbox_form_loginbtn">