Conexión de MySQL con JSP Inicio de sesión y práctica del proyecto de registro (JSP + HTML + CSS + MySQL)

Language 2022-04-28 15:43:18 views: null

contenido

 

1. Escribe al frente

En segundo lugar, el mapa de efectos

3. Ideas de realización

Cuarto, la realización del código.

1. La interfaz de inicio de sesión general

2. El código total de registercheck

3. El código total de logoutcheck

4. El código total de amendcheck

Artículos relacionados

Jsp realiza una función de interfaz de inicio de sesión y registro simple Use jsp para realizar una función de interfaz de inicio de sesión y registro simple (embellecimiento css) (idea de software) - Se busca programador
Conexión JDBC a MySQL No, no, no, este bloguero en realidad usó más de 1,6w de palabras para hablar sobre la conexión de JDBC a MySQL, y tardó varias noches en escribirlo.

1. Escribe al frente

       Hola ~ Hola a todos, en este artículo, echemos un vistazo a la práctica de usar JSP para conectarse al proyecto de registro de inicio de sesión de MySQL Algunas personas pueden preguntar aquí, ¿ay? Chasing Sang~ ¿No escribiste un proyecto para el inicio de sesión y el registro de jsp hace unos días? ¿Por qué sigues escribiendo esta vez? Jaja, no te preocupes, esta vez, definitivamente es diferente a la última vez, ¡veamos primero el efecto!

En segundo lugar, el mapa de efectos

interfaz de base de datos

Se siente diferente, jajaja, entonces veamos como se logra.

3. Ideas de realización

En primer lugar, es obvio que hay cuatro páginas generales: inicio de sesión (interfaz de inicio de sesión), cierre de sesión (interfaz de cierre de sesión), modificación (interfaz de modificación), registro (interfaz de registro) . Estas cuatro páginas generales corresponden a la página de verificación (check) , página de éxito (success), página de error (fail). Después del establecimiento, pase a la acción de De. Echemos un vistazo a la tabla MySQL (base de datos) llamada inicio de sesión.

Cuarto, la realización del código.

1. La interfaz de inicio de sesión general

En primer lugar, tenemos una página con un cuadro de nombre de usuario básico, un cuadro de contraseña, dos botones, uno para registrarse, otro para cerrar sesión y saltar desde, el código es el siguiente

    <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 la verificación para conectarse a la base de datos (cómo conectarse a la base de datos, se proporcionó el artículo anterior, y los amigos interesados ​​​​pueden leer el artículo anterior y ponerlo al frente) Por la misma razón, todavía son los cinco pasos (hay no hay demasiados aquí). Para una explicación, puede consultar el artículo que figura en la tabla anterior), echemos un vistazo al código primero.

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

Aquí response.sendRedirect salta a dos páginas, una loginsuccess y loginfail, dos interfaces, echemos un vistazo, estos dos archivos (en realidad muy simple)

código de éxito de inicio de sesión

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

código de error de inicio de sesión:

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

Aquí hacemos clic en ejecutar para ver el efecto.

Aquí usamos dos equipos actualizados (html) (css) para embellecer nuestra página

Código 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>

 codigo 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;
}

De la misma manera, actualicemos loginsuccess y loginfail.

código de éxito de inicio de sesión

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

código de error de inicio de sesión

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

Haga clic para ejecutar, veamos el efecto

 Así que aquí hemos terminado, el efecto de la interfaz de inicio de sesión total, la misma razón, el código es similar, nosotros directamente cv Dafa, aquí está el código clave para cambiar.

2. El código total de registercheck

El código que se cambiará en la clave es uno es la inserción de la instrucción sql y el otro es la conversión del formato de hora.

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. El código total de logoutcheck

El código clave que se cambiará es eliminar la instrucción sql.

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

4. El código total de amendcheck

El código que debe cambiarse es la actualización de la instrucción sql.

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

Luego se logra mediante las páginas de éxito y falla de cada página general. Aquí hay un pequeño detalle. Estamos lanzando una excepción. Aquí podemos imprimir la información para probarla con out.println , y podemos mostrarla en la página web. , para que podamos saber fácilmente Hay excepciones allí.

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

 Bueno, haga clic en Ejecutar para completar el efecto general.

(Por favor, preste atención) Continuando con la actualización... 

Supongo que te gusta

Origin blog.csdn.net/aasd23/article/details/124458396
Recomendado
Clasificación
Diario
Más
2024-05-12(22)
2024-05-11(31)
2024-05-10(32)
2024-05-09(31)
2024-05-08(18)
2024-05-07(35)
2024-05-06(4)
2024-05-05(0)
2024-05-04(17)
2024-05-03(8)

Code World

© 2018 codetd.com