文章詳情頁

JSP動態(tài)實(shí)現(xiàn)web網(wǎng)頁登陸和注冊功能

瀏覽：143日期：2022-06-07 18:28:27

前言?

涉及到相關(guān)內(nèi)容如下：

數(shù)據(jù)庫安裝

JSP網(wǎng)頁連接數(shù)據(jù)庫

注冊和登錄的JSP頁面

數(shù)據(jù)庫

安裝教程

??軟件安裝

（可視化數(shù)據(jù)庫界面軟件安裝）拿走不謝

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í)電話"+"用戶注冊時(shí)間");    out.print("<br />");    while (true) {try {    if (!rs.next()) break;    out.println(rs.getString("名字")+"   &nbsp  "+rs.getString("年齡")+"  &nbsp "+rs.getString("身份")+rs.getString("性別")+"   &nbsp  "+rs.getString("用戶賬號")+"   &nbsp  "+rs.getString("用戶密碼")+"   &nbsp  "    +rs.getString("聯(lián)系電話")+"   &nbsp  "+rs.getString("用戶注冊時(shí)間")+"   &nbsp  "); //將查詢結(jié)果輸出    out.print("<br/>");} catch (SQLException throwables) {    throwables.printStackTrace();}//out.println(rs.getString("名字")+"   &nbsp  "+rs.getString("年齡")+"  &nbsp "+rs.getString("身份")+rs.getString("性別")+"   &nbsp  "+rs.getString("用戶賬號")+"   &nbsp  "+rs.getString("用戶密碼")+"   &nbsp  "http://+rs.getString("聯(lián)系電話")+"   &nbsp  "+rs.getString("用戶注冊時(shí)間")+"   &nbsp  "); //將查詢結(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> 登錄</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" >注冊</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" 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+""";//定義一個(gè)查詢語句  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("密碼錯(cuò)誤");</script>");response.setHeader("refresh", "0;url=login.jsp");      }    }    else    {      out.print("<script language="javaScript"> alert("用戶名錯(cuò)誤，請重新輸入");</script>");      /**       * 一秒刷新頁面一次 response.setHeader("refresh","1");這個(gè)是沒有參數(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>    <!-- Sign Up -->    <div><form action="Cregister.jsp" id="form1" method="post">    <h2>注冊</h2>    <input type="text" placeholder="名字"  name="name"/>    <input type="text" placeholder="用戶名"  name="username"/>    <input type="password" placeholder="密碼"  name="password"/>    <input type="text" placeholder="聯(lián)系電話"  name="phone"/><%--    <input type="text" placeholder="" />--%>    <button>點(diǎn)擊注冊    </button></form>    </div>     <!-- Sign In -->    <!-- <div><form action="#" id="form2">    <h2>登錄</h2>    <input type="email" placeholder="郵箱" />    <input type="password" placeholder="密碼" />    <a href="#" rel="external nofollow" >忘記密碼</a>    <button>登錄</button></form>    </div> -->     <!-- Overlay -->    <div><div>    <!-- <div><button id="signIn">登錄</button>    </div> -->    <!-- <div><a href="index.html" rel="external nofollow" ><button 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"/><%-- 實(shí)現(xiàn)0秒跳轉(zhuǎn)到登錄界面 --%>  <title>Insert title here</title></head><body><%--一、jsp:useBean的基本用法jsp:useBean是一個(gè)JSP動作指令，表示裝載一個(gè)將在JSP頁面中使用的JavaBeanjsp:useBean的最基本語法如下：其中id表示定義的JavaBean的唯一標(biāo)識，class表示定義的JavaBean的類。--%><jsp:useBean id="db" 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+"")";//定義一個(gè)插入語句  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("密碼錯(cuò)誤");</script>");//response.setHeader("refresh", "0;url=login.jsp");//      }//    }//    else//    {//      out.print("<script language="javaScript"> alert("用戶名錯(cuò)誤，請重新輸入");</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"></span>跳轉(zhuǎn)--%><%--<script type="text/javascript">--%><%--  //先聲明一個(gè)時(shí)間變量--%><%--  var count = 3;--%><%--  //聲明時(shí)間遞減的方法--%><%--  var time = function(){--%><%--    count = count - 1;--%><%--    if(count == 0){--%><%--      window.location.href="<s:url value="login.jsp"/>" rel="external nofollow" ;--%><%--    }else{--%><%--      //將時(shí)間顯示到頁面上--%><%--      $("#ss").text(count);--%><%--      //設(shè)置一個(gè)定時(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     * 這個(gè)類是數(shù)據(jù)庫廠商實(shí)現(xiàn)的JDBC一套接口里的一個(gè)類，稱之為“驅(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ù)庫廠商自行實(shí)現(xiàn)     * 由上可知，com.mysql.cj.jdbc.Driver這個(gè)驅(qū)動類，是對java.sql.Driver接口的實(shí)現(xiàn)     */    private String driverStr = "com.mysql.cj.jdbc.Driver";//上面第一點(diǎn)解釋了為什么要加cj    private String connStr = "jdbc:mysql://localhost:3306/用戶表";//這個(gè)相當(dāng)于是本地?cái)?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{    /*    載入這個(gè)類com.mysql.cj.jdbc.Driver進(jìn)JVM之后，在后續(xù)的程序中，就可以使用它。     */    Class.forName(driverStr);//載入這個(gè)類     /*    兩種不同的數(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()：運(yùn)行語句，返回是否有結(jié)果集。　　　　　　　　- executeQuery()：運(yùn)行select語句，返回ResultSet結(jié)果節(jié)　　　　　　　　- executeUpdate()：運(yùn)行insert/update/delete操作，返回更新的行數(shù)。       解釋了下面的方法的作用     */    stmt = conn.createStatement();}catch (Exception ex) {    //捕獲異常，上個(gè)學(xué)期學(xué)過    System.out.println(ex.getMessage());    System.out.println("數(shù)據(jù)連接失敗！");}     }     public int executeUpdate(String s) {// executeUpdate()：運(yùn)行insert/update/delete操作，返回更新的行數(shù)。int result = 0;System.out.println("--更新語句:"+s+"\n");try {    result = stmt.executeUpdate(s);} catch (Exception ex) {    System.out.println("執(zhí)行更新錯(cuò)誤！");}return result;    }     public ResultSet executeQuery(String s) {//運(yùn)行select語句，返回ResultSet結(jié)果節(jié)ResultSet rs = null;System.out.print("--查詢語句:"+s+"\n");try {    rs = stmt.executeQuery(s);} catch (Exception ex) {    System.out.println("執(zhí)行查詢錯(cuò)誤！");}return rs;    }    public void execQuery(String s){try {    stmt.executeUpdate(s);} catch (SQLException e) {     System.out.println("執(zhí)行插入錯(cuò)誤！");}    }     public void close() {try {    stmt.close();    conn.close();} catch (Exception e) {}    }}

上面僅展示部分代碼哦，jsp文件中的CSS樣式文件封裝在本地！

最終結(jié)果展示如下

以上就是JSP動態(tài)實(shí)現(xiàn)web網(wǎng)頁登陸和注冊功能的詳細(xì)內(nèi)容，更多關(guān)于JSP網(wǎng)頁登陸注冊的資料請關(guān)注其它相關(guān)文章！

JSP

上一條：基于javaweb+jsp實(shí)現(xiàn)企業(yè)財(cái)務(wù)記賬管理系統(tǒng)下一條：基于javaweb+jsp實(shí)現(xiàn)學(xué)生宿舍管理系統(tǒng)

排行榜

					
					django創(chuàng)建css文件夾的具體方法
Django中如何使用Channels功能
idea導(dǎo)入maven項(xiàng)目的方法
MyBatis JdbcType 與Oracle、MySql數(shù)據(jù)類型對應(yīng)關(guān)系說明
IntelliJ IDEA調(diào)整字體大小的方法
idea自定義快捷鍵的方法步驟
在JSP中使用formatNumber控制要顯示的小數(shù)位數(shù)方法
ASP中實(shí)現(xiàn)字符部位類似.NET里String對象的PadLeft和PadRight函數(shù)
ASP基礎(chǔ)入門第八篇（ASP內(nèi)建對象Application和Session）
css代碼優(yōu)化的12個(gè)技巧
ASP中if語句、select 、while循環(huán)的使用方法
				