content

1. Write in front

Second, the effect map

3. Realization ideas

Fourth, the realization of the code

1. The overall login interface

2. The total code of registercheck

3. The total code of logoutcheck

4. The total code of amendcheck

related articles

Jsp realizes simple login and registration interface function	Use jsp to realize simple login and registration interface function (css beautification) (software idea) - Programmer Sought
JDBC connect to MySQL	No, no, no, this blogger actually used 1.6w+ words to talk about JDBC connecting to MySQL, and it took several nights to write it

1. Write in front

Hello~ Hello everyone, in this article, let's take a look at the practice of using JSP to connect to MySQL login registration project. Some people may ask here, alas? Chasing Sang~ Didn't you write a project for jsp login and registration a few days ago? Why are you still writing this time? Haha, don't worry, this time, it's definitely different from last time, let's take a look at the effect first!

Second, the effect map

database interface

Does it feel different, hahaha, then let's see how it is achieved.

3. Realization ideas

First of all, it is obvious that there are four general pages: login (login interface), logout (logout interface), amend (modification interface), register (registration interface) . These four general pages correspond to the check page (check) , success page (success), failure page (fail). After the establishment, jump through the action of from. Let's take a look at the MySQL (database) table named login.

Fourth, the realization of the code

1. The overall login interface

First of all, we have a page with a basic user name box, a password box, two buttons, one for registration, one for logout, and jumping through from, the code is as follows

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

Use check to connect to the database (how to connect to the database, the previous article has been given, and interested friends can read the previous article and put it in the front) For the same reason, it is still the five steps (there are not too many here). For explanation, you can look at the article given in the table above), let's take a look at the code first.

        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();
        }

Here response.sendRedirect jumps to two pages, one loginsuccess and loginfail, two interfaces, let's take a look, these two files (actually very simple)

loginsuccess code

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

loginfail code:

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

Here we click run to see the effect

Here we use two upgraded equipment (html) (css) to beautify our page

HTML code

<%@ 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 code

/*.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;
}

In the same way, let's upgrade loginsuccess and loginfail.

loginsuccess code

<%@ 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> &nbsp;&nbsp; 欢迎使用 <br>
                    <a class="a1" href="login.jsp">返回登入界面</a>
                </fon>
            </div>
        </div>
    </div>
</section>

</body>
</html>

loginfail code

<%@ 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>

Click to run, let's see the effect

So here we are done, the effect of the total login interface, the same reason, the code is similar, we directly cv Dafa, here is the key code to be changed.

2. The total code of registercheck

The code to be changed in the key is one is the sql statement insertion, and the other is the time format conversion.

String 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. The total code of logoutcheck

The key code to be changed is to delete the sql statement.

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

4. The total code of amendcheck

The code that needs to be changed is the sql statement update.

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

Then it is achieved by the success and fail pages of each general page. Here is a small detail. We are throwing an exception. Here we can print out the information for testing by out.println , and we can output it on the web page, so that we can easily know. There are exceptions there.

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

Well, click Run to complete the overall effect.

(please pay attention) Continuing to update...

Connecting MySQL with JSP Login and Registration Project Practice (JSP + HTML + CSS + MySQL)

1. Write in front

Second, the effect map

3. Realization ideas

Fourth, the realization of the code

1. The overall login interface

2. The total code of registercheck

3. The total code of logoutcheck

4. The total code of amendcheck

Guess you like