JSP動態(tài)實現(xiàn)web網(wǎng)頁登陸和注冊功能
目錄
前言?
涉及到相關(guān)內(nèi)容如下：
數(shù)據(jù)庫安裝
jsp網(wǎng)頁連接數(shù)據(jù)庫
注冊和登錄的jsp頁面
數(shù)據(jù)庫
??
??軟件安裝
（可視化數(shù)據(jù)庫界面軟件安裝）拿走不謝
鏈接?提取碼：qwer
jsp網(wǎng)頁連接數(shù)據(jù)庫
配置mysql文件
??
首先要將mysql-connector-java-5.0.8-bin.jar 拷到apache-tomcat-10.0.12-windows-x64\apache-tomcat-10.0.12\lib文件目錄下
創(chuàng)建jsp文件，連接數(shù)據(jù)庫，并讀取出數(shù)據(jù)顯示在jsp網(wǎng)頁中
<%@ page language="java" contenttype="text/html; charset=utf-8"
pageencoding="utf-8"%>
<%@ page import="java.sql.*"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>insert title here</title>
</head>
<body>
<%
try {
class.forname("com.mysql.jdbc.driver"); 驅(qū)動程序名
//com.mysql.jdbc.cj.driver也是ok的
string url = ""; //數(shù)據(jù)庫名 ？后面的是為了指定字符的編碼、解碼格式。
string username = "root"; //數(shù)據(jù)庫用戶名
string password = "123456"; //數(shù)據(jù)庫用戶密碼
connection conn = drivermanager.getconnection(url, username, password); //連接狀態(tài)
if(conn != null){
out.println("數(shù)據(jù)庫連接成功！");
out.print("<br />");
statement stmt = null;
resultset rs = null;
string sql = "select *from 用戶名;"; //查詢語句
stmt = conn.createstatement();
rs = stmt.executequery(sql);
out.print("查詢結(jié)果：");
out.print("<br />");
out.println("名字"+" "+"年齡 "+" "+"身份"+"性別"+"用戶賬號"+"用戶密碼"+"練習(xí)電話"+"用戶注冊時間");
out.print("<br />");
while (true) {
try {
if (!rs.next()) break;
out.println(rs.getstring("名字")+"   "+rs.getstring("年齡")+"   "+rs.getstring("身份")+rs.getstring("性別")+"   "+rs.getstring("用戶賬號")+"   "+rs.getstring("用戶密碼")+"   "
+rs.getstring("聯(lián)系電話")+"   "+rs.getstring("用戶注冊時間")+"   "); //將查詢結(jié)果輸出
out.print("<br/>");
} catch (sqlexception throwables) {
throwables.printstacktrace();
}
// out.println(rs.getstring("名字")+"   "+rs.getstring("年齡")+"   "+rs.getstring("身份")+rs.getstring("性別")+"   "+rs.getstring("用戶賬號")+"   "+rs.getstring("用戶密碼")+"   "
// +rs.getstring("聯(lián)系電話")+"   "+rs.getstring("用戶注冊時間")+"   "); //將查詢結(jié)果輸出
// out.print("<br/>");
}
}
else{
out.print("連接失敗！");
}
}
catch (classnotfoundexception e) {
e.printstacktrace();
}
// catch (sqlexception e)
// {
// e.printstacktrace();
// }
%>
</body>
</html>
連接成功，頁面顯示如下
注冊和登錄的jsp頁面
新建login.jsp文件
<!doctype>
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html>
<head>
<meta charset="utf-8"/>
<title> login</title>
<link rel="stylesheet" type="text/css" href="../project/newlogin.css" rel="external nofollow" />
<link rel="stylesheet" type="text/css" href="../project/font-awesome.css" rel="external nofollow" />
</head>
<body>
<form id="indexform" name="indexform" action="check.jsp" method="post">
<div id="login_box">
<h2 style="color: #a0ebad;"> 登錄</h2>
<div id="form">
<div >
<i >賬號</i>
<input type="text" placeholder="賬號" name="username">
</div>
<div >
<i>密碼</i>
<input type="password" placeholder="密碼" name="password">
</div>
</div>
<button type="submit" value="登錄">登錄</button>
<div id="sign-in">
<a href="register.jsp" rel="external nofollow" style="color:white;">注冊</a>
</div>
</div>
</form>
</body>
</html>
新建check.jsp
<%@ page import="java.sql.*" language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%>
<!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>
<jsp:usebean id="db" class="mysql.dbutil" scope="page"/>
<%
request.setcharacterencoding("utf-8");
string username=(string)request.getparameter("username");//獲取login頁面輸入的用戶名和密碼
string password=(string)request.getparameter("password");
string sql="select * from 用戶名 where 用戶賬號="+"'"+username+"'";//定義一個查詢語句
resultset rs=db.executequery(sql);//執(zhí)行查詢語句
try {
if(rs.next())
{
//將輸入的密碼與數(shù)據(jù)庫密碼相比對，執(zhí)行相應(yīng)操作
if(password.equals(rs.getobject("用戶密碼"))){
//上節(jié)課的習(xí)題中的第二種跳轉(zhuǎn)方式
response.sendredirect("../project/index.html");
}
else{
//js中的alert可以彈出窗口
out.print("<script language='javascript'> alert('密碼錯誤');</script>");
response.setheader("refresh", "0;url=login.jsp");
}
}
else
{
out.print("<script language='javascript'> alert('用戶名錯誤，請重新輸入');</script>");
/**
* 一秒刷新頁面一次 response.setheader("refresh","1");這個是沒有參數(shù)的情況下自動刷新
* 二秒跳到其他頁面 response.setheader("refresh","2;url=o");
*/
response.setheader("refresh", "0;url=login.jsp");
}
} catch (sqlexception throwables) {
throwables.printstacktrace();
}
%>
</body>
</html>
創(chuàng)建register.jsp文件?
<!doctype html>
<%@ page contenttype="text/html;charset=utf-8" language="java" %>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注冊界面</title>
<script src="../project/register.js" async></script>
<link rel="stylesheet" type="text/css" href="../project/register.css" rel="external nofollow" >
</head>
<body>
<div class="container right-panel-active">
<!-- sign up -->
<div class="container__form container--signup">
<form action="cregister.jsp" class="form" id="form1" method="post">
<h2 class="form__title">注冊</h2>
<input type="text" placeholder="名字" class="input" name="name"/>
<input type="text" placeholder="用戶名" class="input" name="username"/>
<input type="password" placeholder="密碼" class="input" name="password"/>
<input type="text" placeholder="聯(lián)系電話" class="input" name="phone"/>
<%-- <input type="text" placeholder="" class="input" />--%>
<button class="btn">
點擊注冊
</button>
</form>
</div>
<!-- sign in -->
<!-- <div class="container__form container--signin">
<form action="#" class="form" id="form2">
<h2 class="form__title">登錄</h2>
<input type="email" placeholder="郵箱" class="input" />
<input type="password" placeholder="密碼" class="input" />
<a href="#" rel="external nofollow" class="link">忘記密碼</a>
<button class="btn">登錄</button>
</form>
</div> -->
<!-- overlay -->
<div class="container__overlay">
<div class="overlay">
<!-- <div class="overlay__panel overlay--left">
<button class="btn" id="signin">登錄</button>
</div> -->
<!-- <div class="overlay__panel overlay--right">
<a href="index.html" rel="external nofollow" ><button class="btn" id="signup">注冊</button></a> -->
<!-- </div> -->
</div>
</div>
</div>
</body>
</html>
新建cregister.jsp文件?
<%@ page import="java.sql.*" language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%>
<!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">
<meta http-equiv="refresh" content="0;url=login.jsp"/><%-- 實現(xiàn)0秒跳轉(zhuǎn)到登錄界面 --%>
<title>insert title here</title>
</head>
<body>
<%--
一、
jsp:usebean的基本用法
jsp:usebean是一個jsp動作指令，表示裝載一個將在jsp頁面中使用的javabean
jsp:usebean的最基本語法如下：
其中id表示定義的javabean的唯一標(biāo)識，class表示定義的javabean的類。
--%>
<jsp:usebean id="db" class="mysql.dbutil" scope="page"/>
<%
request.setcharacterencoding("utf-8");
string name=(string)request.getparameter("name");
string username=(string)request.getparameter("username");//獲取register頁面輸入的用戶名和密碼
string password=(string)request.getparameter("password");
string phone=(string)request.getparameter("phone");
string sql="insert into 用戶名(名字,用戶賬號,用戶密碼,聯(lián)系電話) values"+"('"+name+"',"+"'"+username+"',"+"'"+password+"'"+",'"+phone+"')";//定義一個插入語句
db.execquery(sql);//執(zhí)行插入語句
// try {
// if(rs.next())
// {
// //將輸入的密碼與數(shù)據(jù)庫密碼相比對，執(zhí)行相應(yīng)操作
// if(password.equals(rs.getobject("用戶密碼"))){
// response.sendredirect("../project/index.html");
// }
// else{
// out.print("<script language='javascript'> alert('密碼錯誤');</script>");
// response.setheader("refresh", "0;url=login.jsp");
// }
// }
// else
// {
// out.print("<script language='javascript'> alert('用戶名錯誤，請重新輸入');</script>");
// response.setheader("refresh", "0;url=login.jsp");
// }
// } catch (sqlexception throwables) {
// throwables.printstacktrace();
// }
%>
<body>
<%--<img id="aa" src="<s:url value="/dangdang/productimages/1.jpg"/>"/>--%>
<%--還有<span id="ss">跳轉(zhuǎn)--%>
<%--<script type="text/javascript">--%>
<%-- //先聲明一個時間變量--%>
<%-- var count = 3;--%>
<%-- //聲明時間遞減的方法--%>
<%-- var time = function(){--%>
<%-- count = count - 1;--%>
<%-- if(count == 0){--%>
<%-- window.location.href="<s:url value='login.jsp'/>" rel="external nofollow" ;--%>
<%-- }else{--%>
<%-- //將時間顯示到頁面上--%>
<%-- $("#ss").text(count);--%>
<%-- //設(shè)置一個定時器，每隔一秒自動遞歸調(diào)用自己一次--%>
<%-- settimeout(time, 1000);--%>
<%-- }--%>
<%-- };--%>
<%-- time();--%>
<%--</script>--%>
</body>
</html>
創(chuàng)建dbbean.java文件
package mysql;
import java.sql.*;
public class dbutil {
/**
* 一、
* mysql5及之前的版本使用的是舊版驅(qū)動"com.mysql.jdbc.driver"
* mysql6以及之后的版本需要更新到新版驅(qū)動，對應(yīng)的driver是"com.mysql.cj.jdbc.driver"
* 二、
* com.mysql.cj.jdbc.driver
* 這個類是數(shù)據(jù)庫廠商實現(xiàn)的jdbc一套接口里的一個類，稱之為“驅(qū)動類”，它的繼承樹如下所示：
* ————com.mysql.jdbc.driver extends com.mysql.cj.jdbc.driver
* ————com.mysql.cj.jdbc.driver extends nonregisteringdriver
* ————public class nonregisteringdriver implements java.sql.driver
* 三、
* java.sql是sun官方提供的包，java.sql.driver是sun提供的一組用于連接數(shù)據(jù)庫的接口之一，由數(shù)據(jù)庫廠商自行實現(xiàn)
* 由上可知，com.mysql.cj.jdbc.driver這個驅(qū)動類，是對java.sql.driver接口的實現(xiàn)
*/
private string driverstr = "com.mysql.cj.jdbc.driver";//上面第一點解釋了為什么要加cj
private string connstr = "jdbc:mysql://localhost:3306/用戶表";//這個相當(dāng)于是本地數(shù)據(jù)庫的url（地址）
private string dbusername = "root";//數(shù)據(jù)庫的賬號
private string dbpassword = "123456";//數(shù)據(jù)庫的密碼，需要大家自行修改，在控制臺上用sql語句可以修改
private connection conn = null;
/*
- statement：
由createstatement創(chuàng)建，用于發(fā)送簡單的sql語句（不帶參數(shù)）
statement createstatement() throws sqlexception；
*/
private statement stmt = null;
public dbutil()
{
try
{
/*
載入這個類com.mysql.cj.jdbc.driver進jvm之后，在后續(xù)的程序中，就可以使用它。
*/
class.forname(driverstr);//載入這個類
/*
兩種不同的數(shù)據(jù)庫軟件的連接方式：
-mysql
connection con = drivermanager.getconnection("jdbc:mysql://host:port/database", "user", "password");
-oracle
connection con = drivermanager.getconnection("jdbc:oracle:thin@host:port/database", "user", "password");
*/
conn = drivermanager.getconnection(connstr, dbusername, dbpassword);
/*
常用的statement方法
- execute()：運行語句，返回是否有結(jié)果集。
- executequery()：運行select語句，返回resultset結(jié)果節(jié)
- executeupdate()：運行insert/update/delete操作，返回更新的行數(shù)。
解釋了下面的方法的作用
*/
stmt = conn.createstatement();
}
catch (exception ex) {
//捕獲異常，上個學(xué)期學(xué)過
system.out.println(ex.getmessage());
system.out.println("數(shù)據(jù)連接失敗！");
}
}
public int executeupdate(string s) {
// executeupdate()：運行insert/update/delete操作，返回更新的行數(shù)。
int result = 0;
system.out.println("--更新語句:"+s+"\n");
try {
result = stmt.executeupdate(s);
} catch (exception ex) {
system.out.println("執(zhí)行更新錯誤！");
}
return result;
}
public resultset executequery(string s) {
//運行select語句，返回resultset結(jié)果節(jié)
resultset rs = null;
system.out.print("--查詢語句:"+s+"\n");
try {
rs = stmt.executequery(s);
} catch (exception ex) {
system.out.println("執(zhí)行查詢錯誤！");
}
return rs;
}
public void execquery(string s){
try {
stmt.executeupdate(s);
} catch (sqlexception e) {
system.out.println("執(zhí)行插入錯誤！");
}
}
public void close() {
try {
stmt.close();
conn.close();
} catch (exception e) {
}
}
}
上面僅展示部分代碼哦，jsp文件中的css樣式文件封裝在本地！
最終結(jié)果展示如下
以上就是jsp動態(tài)實現(xiàn)web網(wǎng)頁登陸和注冊功能的詳細內(nèi)容，更多關(guān)于jsp網(wǎng)頁登陸注冊的資料請關(guān)注碩編程其它相關(guān)文章！
JSP實戰(zhàn)