콘텐츠
관련 기사
| Jsp는 간단한 로그인 및 등록 인터페이스 기능을 실현 | jsp를 사용하여 간단한 로그인 및 등록 인터페이스 기능 구현(css 미화)(소프트웨어 아이디어) - Programmer Sought |
| JDBC는 MySQL에 연결 | 아니요, 아니요, 이 블로거는 실제로 1.6w+ 단어를 사용하여 JDBC가 MySQL에 연결하는 것에 대해 이야기했으며 작성하는 데 며칠이 걸렸습니다. |
1. 앞에 씁니다.
안녕하세요~ 안녕하세요 여러분, 이 글에서 JSP를 사용하여 MySQL 로그인 등록 프로젝트에 연결하는 방법을 살펴보겠습니다. 상을 쫓다~ 며칠전에 jsp 로그인 및 등록을 위한 프로젝트를 작성하지 않았습니까? 왜 이번에도 글을 쓰세요? ㅎㅎ 걱정마세요 이번에는 확실히 지난번이랑 다르네요 효과 먼저 보시죠!
둘째, 효과 맵
데이터베이스 인터페이스
느낌이 다른가요, 하하하, 그럼 어떻게 이루어 졌는지 봅시다.
3. 실현 아이디어
먼저 일반 페이지는 로그인(로그인 인터페이스), 로그아웃(로그아웃 인터페이스), 수정(수정 인터페이스), 등록(등록 인터페이스) 이렇게 4개의 일반 페이지가 체크 페이지(체크) 에 해당함을 알 수 있습니다. , 성공 페이지(성공), 실패 페이지(실패). 설정이 끝나면 from의 action으로 넘어가서 login이라는 이름의 MySQL(데이터베이스) 테이블을 살펴보자.
넷째, 코드의 실현
1. 전체 로그인 인터페이스
먼저 기본 사용자 이름 상자, 암호 상자, 두 개의 버튼이 있는 페이지가 있습니다. 하나는 등록용, 하나는 로그아웃용이며, 코드는 다음과 같습니다.
<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>체크를 이용하여 데이터베이스에 접속한다(데이터베이스 접속 방법은 이전 글이 나와있고 관심있는 친구들은 이전 글을 읽고 맨 앞에 놓을 수 있다) 같은 이유로 여전히 5단계(거기 많지 않습니다.) 설명을 위해 위의 표에 나와 있는 기사를 볼 수 있습니다. 먼저 코드를 살펴보겠습니다.
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, 두 개의 인터페이스입니다. 이 두 파일을 살펴보겠습니다(실제로 매우 간단함).
로그인 성공 코드
<div class="form">
<h2> <h22>登录成功</h22><br>
</h2>
<fon>恭喜您成功登入 <br> 欢迎使用 <br>
<a class="a1" href="login.jsp">返回登入界面</a>
</fon>
</div>로그인 실패 코드:
<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을 업그레이드해 보겠습니다.
로그인 성공 코드
<%@ 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>
로그인 실패 코드
<%@ 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>
클릭하여 실행, 효과를 보자
여기에서 우리는 완료되었습니다. 전체 로그인 인터페이스의 효과, 동일한 이유, 코드가 유사합니다. 우리는 Dafa를 직접 cv합니다. 여기에 변경할 키 코드가 있습니다.
2. registercheck의 전체 코드
키에서 변경할 코드는 하나는 sql문 삽입이고 다른 하나는 시간 형식 변환이다.
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. logoutcheck의 전체 코드
변경할 키 코드는 sql 문을 삭제하는 것입니다.
String sql = "DELETE FROM login WHERE name =? and pass =?";4. amendcheck의 전체 코드
변경해야 할 코드는 sql 문 업데이트입니다.
String sql = "update login set pass='"+pass+"'";그런 다음 각 일반 페이지의 성공 및 실패 페이지에 의해 달성됩니다. 여기에 작은 세부 사항이 있습니다. 예외가 발생합니다. 여기 에서 테스트용 정보를 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");
}
글쎄, 전체 효과를 완료하려면 실행을 클릭하십시오.
(주의) 계속 업데이트 중...