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在登錄成功的時候跳轉
代碼僅供參考
覺得有用的小夥伴點個贊吧
No pains no results