JAVA+JSP+HTML+数据库 实现网页的登录和注册（附详细代码）
受疫情的影响自己在家鼓捣点了东西，也是项目中的一部分，实现了网页的登录和注册，在大佬面前不可一提，本人只是分享自己的实现过程，希望对看到的你有所帮助。
项目的层次图：
代码：
login.jsp(登录界面实现)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Wopop</title>
<link href="./Wopop_files/style_log.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./Wopop_files/style.css">
<link rel="stylesheet" type="text/css" href="./Wopop_files/userpanel.css">
<link rel="stylesheet" type="text/css" href="./Wopop_files/jquery.ui.all.css">
<style type="text/css">
<!--
.STYLE1 {
font-size: 24px;
color: #000000;
font-weight: bold;
}
.p_left{display:inline;}
.p_right{display:inline;}
-->
</style>
</head>
<body class="login" mycollectionplug="bind">
<div class="login_m">
<div class="login_logo STYLE1">系统登录</div>
<div class="login_boder">
<div class="login_padding" id="login_model">
<form action="loginpost.jsp" method="post">
<%
Object error=session.getAttribute("error");
if(error!=null)
{
%>
<span style="color:red"><%=error %></span>
<%} %>
<h2>账号</h2>
<label>
<input type="text" id="username" name="username" class="txt_input txt_input2" onfocus="if (value =='Your name'){value =''}" onblur="if (value ==''){value='Your name'}" value="Your name">
</label>
<h2>密码</h2>
<label>
<input type="password" name="userpwd" id="userpwd" class="txt_input" onfocus="if (value =='******'){value =''}" onblur="if (value ==''){value='******'}" value="******">
</label>
<p class="forgot p_left"><a id="iforget" href="register.jsp">注册账号/</a></p>
<p class="forgot p_right"><a id="iforget1" href="javascript:void(0);">忘记密码？</a></p>
<div class="rem_sub">
<div class="rem_sub_l">
<input type="checkbox" name="checkbox" id="save_me">
<label for="checkbox">记住密码</label>
</div>
<label>
<input type="submit" class="sub_button" name="button" id="button" value="登录" style="opacity: 0.7;">
</label>
</div>
</div>
</form>
<div id="forget_model" class="login_padding" style="display:none">
<br>
<h1>Forgot password</h1>
<br>
<div class="forget_model_h2">(Please enter your registered email below and the system will automatically reset users’ password and send it to user’s registered email address.)</div>
<label>
<input type="text" id="usrmail" class="txt_input txt_input2">
</label>
<div class="rem_sub">
<div class="rem_sub_l">
</div>
<label>
<input type="submit" class="sub_buttons" name="button" id="Retrievenow" value="Retrieve now" style="opacity: 0.7;">
</label>
</div>
</div>
<!--login_padding Sign up end-->
</div><!--login_boder end-->
</div><!--login_m end-->
</body></html>
loginpost.jsp（连接数据库，验证密码和账号的正确性）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="P1.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String username=request.getParameter("username");
String password=request.getParameter("userpwd");
try {
// 加载数据库驱动，注册到驱动管理器
Class.forName("com.mysql.cj.jdbc.Driver");
// 数据库连接字符串
String url = "jdbc:mysql://localhost:3306/abc?useUnicode=true&characterEncoding=utf8&rewriteBatchedStatements=true&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true";
// 数据库用户名
String usename = "root";
// 数据库密码
String psw = "123456";
// 创建Connection连接
Connection conn = DriverManager.getConnection(url,usename,psw);
// 判断 数据库连接是否为空
if(conn != null){
String sql="select * from login where account='"+username+"' and password='"+ password + "'";
Statement stmt = conn.createStatement();
ResultSet rs=stmt.executeQuery(sql);
if(rs.next()){
response.sendRedirect("main.jsp");
}else{
session.setAttribute("error", "账号或密码错误,请重新输入");
response.sendRedirect("login.jsp");
}
// 输出连接信息
//out.println("数据库连接成功！");
// 关闭数据库连接
conn.close();
}else{
// 输出连接信息
out.println("数据库连接失败！");
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
%>
</body>
</html>
register.jsp(注册界面实现)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<!-- Head -->
<head>
<title>注册表单</title>
<!-- Meta-Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!-- //Meta-Tags -->
<!-- Style --> <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<!-- //Head -->
<!-- Body -->
<body>
<h1>注册界面</h1>
<div class="container w3layouts agileits">
<div class="register w3layouts agileits">
<h2>注 册</h2>
<form action="registerpost.jsp" method="post">
<%
Object error=session.getAttribute("error");
if(error!=null)
{
%>
<span style="color:red"><%=error %></span>
<%} %>
<label><input type="text" name="Name" placeholder="用户名" required=""></label>
<input type="text" name="Email" placeholder="邮箱" required="">
<input type="password" name="Password" placeholder="密码" required="">
<input type="text" name="Phone Number" placeholder="手机号码" required="">
<div class="send-button w3layouts agileits">
<form>
<input type="submit" value="注册">
</form>
</div>
</form>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
</body>
<!-- //Body -->
</html> 
registerpost.jsp(注册账号密码实现存入数据库)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@ page import="P1.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String name=request.getParameter("Name");
String email=request.getParameter("Email");
String password=request.getParameter("Password");
String phonenum=request.getParameter("Phone Number");
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/abc?useUnicode=true&characterEncoding=utf-8&rewriteBatchedStatements=true&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true";
String usename = "root";
String psw= "123456";
Connection conn = DriverManager.getConnection(url,usename,psw);//得到连接
out.println("<script language='javascript'>alert('数据库连接成功！');</script>");
PreparedStatement pStmt = conn.prepareStatement("select * from login where account = '" + name + "'");
ResultSet rs = pStmt.executeQuery();
if(rs.next()){
session.setAttribute("error", "该用户账号已存在,请重新输入");
response.sendRedirect("register.jsp");
}
else{
if(phonenum.length()>11){
session.setAttribute("error", "电话号码不合法，请重新注册");
response.sendRedirect("register.jsp");
}else{
PreparedStatement tmt = conn.prepareStatement("Insert into login values('" +name+ "','" +password+ "','" +email+ "','" +phonenum+ "')");
int rst = tmt.executeUpdate();
if (rst != 0){
out.println("<script language='javascript'>alert('用户注册成功！请登录');window.location.href='Login.jsp';</script>");
response.sendRedirect("login.jsp");
}
else{
session.setAttribute("error", "用户注册失败");
response.sendRedirect("register.jsp");
}
}
}
%>
</body>
</html>
main.jsp在登录成功的时候跳转
代码仅供参考
觉得有用的小伙伴点个赞吧
