百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

用 JSP 连接 MySQL 登入注册项目实践(JSP + HTML + CSS + MySQL)

itomcoil 2025-07-03 15:56 9 浏览

目录

一、写在前面

二、效果图

三、实现思路

四、实现代码

1、login总界面

2、registercheck总代码

3、logoutcheck总代码

4、amendcheck总代码


相关文章

一、写在前面

哈喽~大家好,这篇呢我们来看看用 JSP 连接 MySQL 登入注册项目实践,这里就可能有人问了,唉?追桑~前些天不是写了 jsp 登入注册的项目吗?怎么这次还在写呢?哈哈,您别担心,这次呢,肯定和上次不同,我们先来看看效果吧!

二、效果图

数据库界面

感觉是不是不一样了,哈哈哈,那么接下来我们来看看是怎么实现的。

三、实现思路

首先我们这里很明显,有四个总页面分别是 login(登入界面)、logout(注销界面)、amend(修改界面)、register(注册界面),这四个总页面分别对应着检查页面(check)、成功页面(success)、失败页面(fail)。建立之好后,通过 from 的 action 来进行跳转,我们先来看看 MySQL (数据库)表名叫 login。

我们这里数据库共三列,第一列叫 name (用户名)、pass(密码)、time(注册时间),name 与 pass 都是 int(整型) 类型的,time 是 varchar (可变长类型),如图。

四、实现代码

1、login总界面

首先我们先有个页面,有基本的用户名框,密码框,两按钮,一个注册,一个注销,通过 from进行跳转,代码如下

 <form method="post" action="check.jsp">
        <input type="text" name="user" style="width: 300px;height: 50px" placeholder="请输入用户名:"
        > <br>
        <input type="password" name="pass" style="width: 300px;height: 50px" placeholder="请输入密码:" > <br>
        <button type="submit" style="width:80px;height:40px; font-size: 20px" class="clear">登录</button>
        <button type="reset" style="width:80px;height:40px; font-size: 20px" class="clear">重置</button>
        <br>
        没有账号?<a href="register.jsp">点击注册</a><br>
        不想用了?<a href="logout.jsp">点击注销</a>
    </form>

用 check 连接数据库(如何连接数据库,前面文章已经给出了,有兴趣的小伙伴可以看看前面写的文章,也放在前面了) 同样的道理,还是那五个步骤(这里就不过多的解释,可以看看上面表格给出的文章),先来看看代码。

String user = request.getParameter("user"); // getParameter  与 getAttribute  区别
        String pass = request.getParameter("pass");
        // String getParameter(String name):根据参数名称获取参数值
        // getAttribute()获取的是服务器设置的数据。getAttribute() 方法返回指定属性名的属性值。
 
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            String url = "jdbc:mysql://localhost:3306/db1?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC";
            String user1 = "root";
            String pass1 = "123456";
            Connection connection = DriverManager.getConnection(url,user1,pass1);
            String sql = "select * from login where name=? and pass=?";
 
            PreparedStatement ps = connection.prepareStatement(sql);
            ps.setString(1,user);
            ps.setString(2,pass);
            ResultSet re = ps.executeQuery();
 
            if (re.next()){
                response.sendRedirect("loginsuccess.jsp");
                session.setAttribute("user",user);
            }else {
                response.sendRedirect("loginfail.jsp");
            }
 
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        } catch (SQLException e) {
            e.printStackTrace();
        }

这里 response.sendRedirect 跳转了两个页面一个 loginsuccess 和 loginfail 的两个界面,下面我们来看看,这两个文件(其实很简单)

loginsuccess 代码

 <div class="form">
                <h2> <h22>登录成功</h22><br>
                </h2>
                <fon>恭喜您成功登入 <br>    欢迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>

loginfail 代码:

<h2> <h22>登录失败</h22><br>
                </h2>
                <fon>宝~是不是账号或密码记错惹? <br>
                    <a class="a1" href="login.jsp">返回登入界面</a><br>
                    <p1><a href="amend.jsp">点击修改密码</a></p1>
                </fon>

这里我们点击运行看看效果

这里我们用两个升级 大装备(html)(css) 来美化一下我们的页面,这里我们页面美化的,用的是这位大佬的页面(博主名为键盘奏鸣曲),大家可以来看看,点击链接

HTML 代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="css.css">

<title>123</title>



</head>

<body>


<section>

<div class="color"></div>

<div class="color"></div>

<div class="color"></div>

<div class="box">

<div class="circle" style="--x:0"></div>

<div class="circle" style="--x:1"></div>

<div class="circle" style="--x:2"></div>

<div class="circle" style="--x:3"></div>

<div class="circle" style="--x:4"></div>

<div class="container">

<div class="form">

<h2>登录</h2>

<form method="post" action="check.jsp">

<div class="inputBox">

<input type="text" placeholder="姓名" name="user">


</div>

<div class="inputBox">

<input type="password" placeholder="密码" name="pass">


</div>

<div class="inputBox">

<input type="submit" value="登录">


</div>

<p class="forget">不想用了?<a href="logout.jsp">

点击这里

</a></p>

<p class="forget">没有账户?<a href="register.jsp">

注册

</a></p>

</form>

</div>

</div>

</div>

</section>

</body>


</html>

CSS 代码

/*.center{*/
/*    text-align:center;*/
/*    margin-top: 50px;*/
/*}*/
.fon{
    font-size: 40px;
}
/*body{*/
/*    background: url("images/image-2.jpg") no-repeat 0 0;*/
/*    background-size: 100% 100%;*/
/*    text-decoration:none;*/
/*}*/
 
/*input {*/
/*    background-color: transparent;*/
/*    outline: none;*/
/*    color: black;*/
/*}*/
/*.clear{*/
/*    opacity:0.3;*/
/*}*/
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
 
/* 使用flex布局,让内容垂直和水平居中 */
 
section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
 
/* 背景颜色 */
 
section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性,给图像设置高斯模糊*/
    filter: blur(200px);
}
 
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
 
section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}
 
section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}
 
section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}
 
.box {
    position: relative;
}
 
/* 背景圆样式 */
 
.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性,改变颜色。
    hue-rotate(deg)  给图像应用色相旋转
    calc() 函数用于动态计算长度值
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate,需要10s完成动画,
    linear表示动画从头到尾的速度是相同的,
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}
 
/* 背景圆动画 */
 
@keyframes animate {
    0%, 100% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}
 
.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}
 
.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}
 
.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}
 
.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}
 
.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}
 
/* 登录框样式 */
 
.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
 
.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}
 
/* 登录标题样式 */
 
.form h2 {
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
 
.form h2 h22 {
    top: -40px;
    text-align: center;
    position: relative;
    color: #fff;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
 
.form .a1, .form p1 {
    bottom: -90px;
    left: 50px;
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    text-decoration: none;
}
 
.form p1 a{
 
    position: relative;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 5px;
    /*margin-bottom: 10px;*/
    cursor: pointer;
    text-decoration: none;
}
 
.form fon {
    top: -30px;
    left: 30px;
    position: relative;
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}
/* 登录标题的下划线样式 */
 
.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}
 
.form h2 h22::before {
    content: "";
    position: absolute;
    /*left: 0;*/
    /*bottom: -10px;*/
    /*width: 0px;*/
    /*height: 3px;*/
    /*background: #fff;*/
    /*transition: 0.5s;*/
}
 
.form h2:hover:before {
    width: 53px;
}
 
.form .inputBox {
    width: 100%;
    margin-top: 20px;
}
 
/* 输入框样式 */
 
.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
 
.form .inputBox input::placeholder {
    color: #fff;
}
 
/* 登录按钮样式 */
 
.form .inputBox input[type="submit"],.form .inputBox input[type="reset"]  {
    background: #fff;
    color: #666;
    max-width: 100%;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}
 
.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}
 
.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

同样的道理我们来升级一下 loginsuccess 与 loginfail 。

loginsuccess 代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入成功界面</title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%--    <p class="fon">登入成功界面</p>--%>
<%--    <p class="fon1">恭喜您成功登入,欢迎使用</p>--%>
<%--    <a href="login.jsp">点击退出,返回登入界面</a>--%>
<%--</div>--%>
 
<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2> <h22>登录成功</h22><br>
                </h2>
                <fon>恭喜您成功登入 <br>    欢迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>
        </div>
    </div>
</section>
 
</body>
</html>

loginfail 代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登入失败界面</title>
    <link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%--    <p class="fon">登入失败界面</p>--%>
<%--    <p class="fon1">对不起,您账号或密码有误,请返回登入界面</p>--%>
<%--    <a href="login.jsp">返回登入界面</a><br>--%>
<%--    忘记密码?<a href="amend.jsp">点击修改密码</a>--%>
<%--</div>--%>
 
<section>
    <div class="color"></div>
    <div class="color"></div>
    <div class="color"></div>
    <div class="box">
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <div class="container">
            <div class="form">
                <h2> <h22>登录失败</h22><br>
                </h2>
                <fon>宝~是不是账号或密码记错惹? <br>
                    <a class="a1" href="login.jsp">返回登入界面</a><br>
                    <p1><a href="amend.jsp">点击修改密码</a></p1>
                </fon>
                
            </div>
        </div>
    </div>
</section>
 
</body>
</html>

点击运行,我们来看看效果

那么这里我们是完成了,login总界面的效果,同样的道理,代码都差不多,我们直接 cv 大法,这里就给出重点要改的代码。

2、registercheck总代码

里面要重点改的代码,一个是 sql 语句插入,另一个是时间格式转换。

tring sql = "insert into login(name, pass,time)VALUES(?,?,?)";

SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 时间转换,要不然就会是国际时间格式

String data = formatter.format(new Date());// 记录的是当前的时间

ps.setString(3,data);

3、logoutcheck总代码

3、logoutcheck总代码

里面要重点改的代码,是 sql 语句删除。

String sql = "DELETE FROM login WHERE name =? and pass =?";

4、amendcheck总代码

里面要重点改的代码,是 sql 语句更新。

String sql = "update login set pass='"+pass+"'";

然后分别是各个总页面的 success 与 fail 页面来实现好,这里有一个小细节,我们在作抛出异常,这里可以 out.println 来打印出信息来测试,可以输出在网页上,这样可以方便知道那里有异常。


catch (ClassNotFoundException e) {
            e.printStackTrace();
            out.println("1");
            // response.sendRedirect("registerfail.jsp");
        } catch (SQLException e) {
            e.printStackTrace();
            out.println("2");
            // response.sendRedirect("registerfail.jsp");

好了,点击运行,完成总效果。



































作者:一个名叫追的程序猿

原文出处
:https://blog.csdn.net/aasd23/article/details/124458396?spm=1001.2100.3001.7377&utm_medium=
distribute.pc_feed_blog_category.none-task-blog-classify_tag-16-124458396-null-null.nonecase&depth_1-utm_source=
distribute.pc_feed_blog_category.none-task-blog-classify_tag-16-124458396-null-null.nonecase

相关推荐

辣评1+1|幽默的男人运气不会太差,犯了罪的除外

一波冷空气吹来了全国大范围降温,也吹来了“年轻人不讲武德”“耗子尾汁”等爆梗。凡事有别,凡事有度。“不讲武德”换来大家津津乐道,“不讲规则”却让大家头皮发麻,更别提有些人“不通人性”“不守法律”了……...

养龟之人,不可不常备的几种龟药,必要时,可救龟命

养龟的过程中,总会出现这样那样的问题,有些新人因为不懂龟的习性或者管理不到位,容易导致自己的爱龟出问题,如果处理不及时不妥当,容易造成不必要的损失,所以,养龟的过程中,家中常备一些龟药十分必要,建议养...

宠物龟越狱摔伤了,饲主该如何正确地处理它的伤口?

昨晚有一个龟友发信息向我求救,他家的宠物龟越狱了,从高高的地方摔下来,砸在水泥板上,臀甲部位摔裂了,问我怎么处理妥当?现在就跟大家分享分享我们的实战经验:如何正确地处理宠物龟的外伤!(此处已添加圈子卡...

PS入门系列三(ps入门级教程)

PS软件基础(三)一、钢笔工具1.精细的抠图,也可以绘制精细的直线段和曲线段2.使用方法:(1)绘制直线:鼠标点击,两个点形成一条直线,按住SHIFT可绘制角度(45°的倍数)的直线。...

第一千五百一十七天:20250721(星期一.阵雨)

天是真地热啊,更加怀念东北的凉爽。即使说有新闻东北迎来了史上最热的酷署,但我依旧坚定地认为没有湖北热,至少没有湖北的闷热。上午开了一上午的会,会议室里即使有空调但可能由于人和电脑太多了,制冷效果非常一...

格力、美的、先锋和艾美特油汀取暖器拆机测试PK

人在家中坐,寒从脚底来,刷抖音的时候手脚真的是冰凉到没办法。南方的冬天,我琢磨了一下,感觉它只会慢慢折磨咱们,而且咱们南方还没集中供暖。于是就上网看了看,发现这个电热油汀可以烤袜子,好像很有用的样子,...

《photoshop教程》设计师PSD文档管理指南

这是一个重要但是容易被忽视的领域,很多设计师没有文档管理和文档规范意识。认为只有代码工作者才需要什么编码规范和版本控制系统,Photoshop作为一个应用软件,讨论这个有什么意义呢?作为工程文件,一个...

为何要坚决抵制“马保国式黑红”(抵制违规吃喝表态发言)

作者:天歌“耗子尾汁(好自为之)”“年轻人不讲武德”“我大意了啊没有闪”……最近流行的几句网络用语,都出自于马保国。然而,原本承诺退出“江湖”的他却频繁出现在公众视线,自曝拍电影、走穴参加网红活动。...

车圈父与子 看谁跟高级别车型长得更像

[爱卡汽车导购原创]故事发生在美孚小学的5W-40班。这天语文课上,老师给同学们布置作业“今天给大家布置一篇作文,题目是《长大之后我就成了你》。回去认真观察自己的父母,找出自己容貌、性格、爱好等方...

月季难养吗?药罐子、肥篓子是什么意思?养好月季连载教程(三)

大家好,我是木木。今天给大家带来月季养护系列教程的第四节(月季种植难度),这是为了给还没有入坑的花友简单介绍一下月季的种植难度,希望大家对月季的养护有一个大概的了解,不要因为感觉难度太大而望而却步,也...

Linux文件操作高频使用命令(linux文件操作高频使用命令是什么)

0.新建操作:mkdirabc#新建一个文件夹touchabc.sh#新建一个文件1.查看操作查看目录:ll#显示目录文件详细信息du-h文件/目录#查看大小pwd#显示路径查...

PS生化危机2游戏:里昂.S.肯尼迪流程攻略(里关)

浣熊镇警察局的探索克莱尔带着莎瑞逃出了浣熊镇,与和她们一起的那位警官的活跃也是分不开的,他的名字是-里昂.S.肯尼迪和克莱尔分手后一直向前跑,进警局后门停车场,先去右边值班室拿钥匙,然后打开停车场左边...

PS版在印刷过程中易出现的问题(印刷厂ps版)

PS版的任务是使图文部分尽可能精确地传到橡皮布上。图文部分亲水,非图文部分亲墨。但实际上并没有这么理想,会出现各种各样的与PS版有关的问题。下面举出一些并加以讨论。  1.版面非图文部分起脏,即非图文...

夜读|为什么我们要围观马保国?(为什么会有马保国)

张丰“打工是不可能打工的”那位去做直播了,“年轻人不讲武德”的马保国要去拍电影了。他在微博上发了条视频,解释参演原因,但网友需付费成为“真爱粉”才能看。视频中,他还推销了拳法书籍。咦?我怎么觉得,马老...

40种CAD常见问题解决方法,从此不再求人

前言:CAD软件是我们经常用到的办公软件,但是我们在用CAD软件的时候经常遇到一些棘手的问题,不知道怎么解决?这40个问题解决方法,可以收藏备用!正文:1.【Ctrl键无效之解决办法】有时我们会碰到这...