JSP_5.16_課堂筆記

来源:https://www.cnblogs.com/ningbaby/archive/2023/05/18/17411003.html
-Advertisement-
Play Games

完整的可以與資料庫連接的登錄界面的代碼 login.jsp <%@ page language="java" contentType="text/html; UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta chars ...


完整的可以與資料庫連接的登錄界面的代碼

login.jsp

<%@ page language="java" contentType="text/html; UTF-8"
    pageEncoding="UTF-8"%>
    
<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>登錄頁面</title>
            <script src="js/jquery-3.3.1.min.js"></script>
            <style type="text/css">
                #diceng{
                    width:430px;
                    height:380px;
                    background-color:#FFFFFF33;
                    position:absolute;
                    left:50%;
                    top:50%;
                    margin-left:-215px;
                    margin-top:-190px;
                    border-radius:5px;
                }
                #zhongceng{
                    width:400px;
                    height:350px;
                    background-color:#FFFFFFFF;
                    position:absolute;
                    left:50%;
                    top:50%;
                    margin-left:-200px;
                    margin-top:-175px;
                    border-radius:5px;
                }
                #d1{
                    width:400px;
                    height:60px;
                    font-size:30px;
                    font-family:Avenir,Helvetica,Arial,sans-serif;
                    color:black;
                    display:block;
                    margin-left:40px;
                    margin-top:20px;
                    
                }
                #d2{
                    width:400px;
                    height:35px;
                    font-size:20px;
                    font-family:Avenir,Helvetica,Arial,sans-serif;
                    color:black;
                    display:block;
                    margin-left:40px;
                    
                }
                #d3{
                    width:400px;
                    height:35px;
                    font-size:20px;
                    font-family:Avenir,Helvetica,Arial,sans-serif;
                    color:black;
                    display:block;
                    margin-left:40px;
                    
                }
                #username{
                    width:280px;
                    height:40px;
                    font-size:30px;
                    font-family:Avenir,Helvetica,Arial,sans-serif;
                    color:black;
                    display:block;
                    margin-left:40px;
                    border-radius:5px;
                    
                }
                #password{
                    width:280px;
                    height:40px;
                    font-size:30px;
                    font-family:Avenir,Helvetica,Arial,sans-serif;
                    color:black;
                    display:block;
                    margin-left:40px;
                    border-radius:5px;
                    
                    
                }
                #submit{
                    width:237px;
                    height:40px;
                    margin-top: 5px;
                    background-color: #47a0fc;
                    border: 1px solid #47a0fc;
                    color: #fff;
                    font-size: 14px;
                    cursor: pointer;
                    outline: none;
                    border-radius: 2px;
                    display:block;
                    margin-left:65px;
                    margin-top:15px;
                    border-radius:5px;
                    
                }
                .bjimg {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    min-width: 1000px;
                    z-index: -10;
                    zoom: 1;
                    background-color: #fff;
                    background-repeat: no-repeat;
                    background-size: cover;
                    -webkit-background-size: cover;
                    -o-background-size: cover;
                    background-position: center 0;
                    background-image:url("https://w.wallhaven.cc/full/ex/wallhaven-ex9ork.jpg")
                    }
            </style>
        </head>
    <body>
        <div class="bjimg"></div>
        <div id=diceng>
            <div id=zhongceng>
            
                    <div id=d1>歡迎登錄優逸客實訓平臺</div>
                    <div id=d2>用戶名</div>
                    <input id=username type='text' placeholder="請輸入用戶名"></input>
                    <div id=d3>密碼</div>
                    <input id=password type="password" placeholder="請輸入密碼"></input>
                    <button id=submit>登錄</button>
            </div>
        </div>
        <script>
    $(document).ready(function(){
        $("#submit").click(function(){
            var username = $("#username").val(); // 獲取用戶名
            var password = $("#password").val(); // 獲取密碼
            if(username == "" || password == ""){
                alert("請輸入用戶名和密碼!"); // 輸入為空,提示用戶
                return;
            }
            $.ajax({
                url: "jdbclogin.jsp?username="+username+"&password="+password, // 後端處理jsp文件
                type: "GET",
                dataType:'json',
                success: function(res){
                    if(res.msg== "success"){
                        window.location.href = "main.jsp"; // 登錄成功,跳轉到主頁
                    }else{
                        alert("用戶名或密碼錯誤!"); // 登錄失敗,提示用戶
                    }
                }
            });
        });
    });
</script>
    </body>
</html>

jdbclogin.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%@page import="java.io.PrintWriter"%>
<%
    String username = request.getParameter("username"); // 獲取用戶名
    String password = request.getParameter("password"); // 獲取密碼
    PrintWriter writer = response.getWriter();
    response.setCharacterEncoding("UTF-8");
	Class.forName("com.mysql.cj.jdbc.Driver");
	Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/study?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf8", "root", "000000"); // 建立資料庫連接
	Statement stat = conn.createStatement();
	String sql = "SELECT * FROM user WHERE username='"+username+"' AND password='"+password+"'";
	ResultSet rs = stat.executeQuery(sql); // 執行查詢
	if(rs.next()){
		   writer.write("{\"msg\":\"success\"}");
		   writer.flush();
		 }else{
		   writer.write("{\"msg\":\"fail\"}");
		   writer.flush();
		 }
   	rs.close();
   	stat.close();
   	conn.close();

%>

register.jsp

<%@ page language="java" contentType="text/html; UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>註冊頁面</title>
			<script src="js/jquery-3.3.1.min.js"></script>
			<style type="text/css">
				#diceng{
					width:430px;
					height:380px;
					background-color:#FFFFFF33;
					position:absolute;
					left:50%;
					top:50%;
					margin-left:-215px;
					margin-top:-190px;
					border-radius:5px;
				}
				#zhongceng{
					width:400px;
					height:350px;
					background-color:#FFFFFFFF;
					position:absolute;
					left:50%;
					top:50%;
					margin-left:-200px;
					margin-top:-175px;
					border-radius:5px;
				}
				#d1{
					width:400px;
					height:40px;
					font-size:30px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					margin-top:20px;
					
				}
				#d2{
					width:400px;
					height:35px;
					font-size:20px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					
				}
				#d3{
					width:400px;
					height:35px;
					font-size:20px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					
				}
				#d7{
					width:400px;
					height:35px;
					font-size:20px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					
				}
				#username{
					width:280px;
					height:30px;
					font-size:30px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					border-radius:5px;
					
				}
				#password1{
					width:280px;
					height:30px;
					font-size:30px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					border-radius:5px;
					
					
				}
				#password2{
					width:280px;
					height:30px;
					font-size:30px;
					font-family:Avenir,Helvetica,Arial,sans-serif;
					color:black;
					display:block;
					margin-left:40px;
					border-radius:5px;
					
					
				}
				#submit{
					width:237px;
					height:40px;
				    margin-top: 5px;
				    background-color: #47a0fc;
				    border: 1px solid #47a0fc;
				    color: #fff;
				    font-size: 20px;
				    cursor: pointer;
				    outline: none;
				    border-radius: 2px;
					display:block;
					margin-left:65px;
					margin-top:15px;
					border-radius:5px;
					
				}
				.bjimg {
				    position: fixed;
				    top: 0;
				    left: 0;
				    width: 100%;
				    height: 100%;
				    min-width: 1000px;
				    z-index: -10;
				    zoom: 1;
				    background-color: #fff;
				    background-repeat: no-repeat;
				    background-size: cover;
				    -webkit-background-size: cover;
				    -o-background-size: cover;
				    background-position: center 0;
					background-image:url("https://w.wallhaven.cc/full/ex/wallhaven-ex9ork.jpg")
					}
			</style>
		</head>
	<body>
		<div class="bjimg"></div>
		<div id=diceng>
			<div id=zhongceng>
					<div id=d1>歡迎註冊優逸客實訓平臺</div>
					<div id=d2>用戶名</div>
					<input type='text' placeholder="請輸入用戶名" id="username"></input>
					<div id=d3>密碼</div>
					<input type="password" placeholder="請輸入密碼" id="password1"></input>
					<div id=d7>再次輸入密碼</div>
					<input type="password" placeholder="請重新輸入密碼" id="password2"></input>
					<button id=submit onclick="register()">註冊</button>
			</div>
		</div>
	<script type="text/javascript">
    		function register(){
    			var username = $("#username")[0].value;
    			var password1 = $("#password1")[0].value;
    			var password2 = $("#password2")[0].value;
            $.ajax({
                url: "jdbcregister.jsp?username="+username+"&password1="+password1+"&password2="+password2,
                type: "GET",
                dataType:"json",
                success: function(res){
                	
                    if(res.msg == "success"){
                        window.location.href = "login.jsp";
                    }else{
                        alert("註冊失敗!");
                    }
                }
            })
    }
</script>
	</body>
</html>

jdbcregister.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.Statement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.io.PrintWriter"%>
<%
    String username = request.getParameter("username");
    String password1 = request.getParameter("password1");
    String password2 = request.getParameter("password2");
    response.setCharacterEncoding("UTF-8"); //設置交換數據時的數據格式
    PrintWriter writer = response.getWriter();
    if(password1.equals(password2)){
	    Class.forName("com.mysql.jdbc.Driver");
	    
	    Connection conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/study?serverTimezone=UTC&useSSL=false&useUnicode=true&characterEncoding=utf8", "root", "000000");
	    String sql = "Select * from user where username='"+username+"'";
	    Statement stat = conn.createStatement();
	    ResultSet rs = stat.executeQuery(sql);
	        if(rs.next()){
	        	 writer.write("{\"msg\":\"fail\"}");
	             writer.flush();
	        	}else{
	    		String sql2 ="insert into user(username,password) values('"+username+"','"+password1+"')";
	    		int num = stat.executeUpdate(sql2);
	            if(num > 0){
	               		writer.write("{\"msg\":\"success\"}");
	               		writer.flush();
	             	}else{
	               		writer.write("{\"msg\":\"fail\"}");
	               		writer.flush();
	             	}
	            }
	    	}
	        else{
	        	   writer.write("{\"msg\":\"fail\"}");
	        	   writer.flush();
	            }
             
%>

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>登陸成功</title>
		<style>
		body {
		background-image: url("https://w.wallhaven.cc/full/j3/wallhaven-j3m8y5.png");
		background-size: cover;
		background-position: center center;
		font-family: 'Microsoft YaHei', sans-serif;
		color: white;
		}
		#header {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		}
		#header img {
		height: 80px;
		border-radius: 50%;
		margin-right: 20px;
		}
		h1 {
		font-size: 48px;
		margin: 0;
		font-weight: bold;
		font-style: italic;
		text-shadow: 2px 2px 4px #000000;
		}
		nav {
		background-color: rgba(0, 0, 0, 0.5);
		padding: 10px;
		display: flex;
		justify-content: center;
		}
		nav a {
		color: white;
		text-decoration: none;
		margin: 0 10px;
		font-size: 24px;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 2px;
		transition: all 0.3s ease;
		}
		nav a:hover {
		color: #00ff00;
		}
		</style>
	</head>
	<body>
		<header id="header">
			<img src="http://mms2.baidu.com/it/u=983221791,942132541&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=320&h=307" alt="Avatar">
			<h1>登陸成功!</h1>
		</header>
			<nav>
			<a href="#">首頁</a>
			<a href="#">關於</a>
			<a href="#">聯繫我</a>
			<a href="#">QQ</a>
			<a href="#">微信</a>
			</nav>
		<main>
			<p style="font-size: 60px; font-weight: bold;"></p>
		</main>
	</body>
</html>

Avatar

5.16筆記

一、JDBC回顧

JDBC技術Java用來連接操作資料庫的工具,JDBC嚴格意義上屬於Java的一種技術。JDBC連接操作資料庫時,整體一共分為七步(需要引入編程依賴)。

1、載入驅動(告訴JDBC程式,連接的是哪一個資料庫)

Class.forName(“驅動程式名”);
MySQL: com.mysql.jdbc.Driver com.mysql.cj.jdbc.Driver
Oracle: oracle.jdbc.driver.OracleDriver
SQL Server: com.microsoft.jdbc.sqlserver.SQLServerDriver

2、獲取和資料庫之間的連接—java.sql.DriverManager

Connection conn = DriverManager.getConnection(三個參數);
三個參數也成為資料庫連接三要素:
URL:資料庫的地址、連接的資料庫的名字、連接資料庫使用的參數
MySQL: jdbc:mysql://ip:port/databaseName?key=value&key=value
Oracle: jdbc:oracle:thin:@IP地址:埠號:資料庫名
SQL Server: jdbc:microsoft:sqlserver://IP地址:埠號;DatabaseName=資料庫名
用戶名: 資料庫的用戶名
密碼:資料庫的密碼

3、準備SQL語句

String sql = “xxxxx”;
JDBC操作資料庫時,一般執行的SQL語句都是DMLDQL類型的語言。
SQL語句中存在一些字元串,字元串最好使用單引號

4、創建小推車—java.sql.Statement

Statement stat = conn.createStatement();
小推車是JDBC的核心,SQL語句的執行以及執行結果的返回都是Statement實現的

5、小推車帶著SQL語句去資料庫執行SQL語句,並且返回執行結果

JDBC操作SQL,SQL一般分為兩類:DMLDQL,兩類SQL語句的執行方式以及返回結果都是不同的。
執行DML類型的SQL:--返回的是一個數字,這個數字代表資料庫受影響的行數
int num = stat.executeUpdate(DMLSQL);
執行DQL類型SQL—返回的是一個ResultSet結果集,結果集就是查詢回來的虛擬表格,
ResultSet rs = stat.executeQuery(DQLSQL);

6、Java程式處理邏輯

如果執行的是DML類型的SQL語句,Java程式只需要判斷是否執行成功即可
如果執行的是DQL類型的SQL語句,Java程式需要獲取ResultSet結果集當中封裝的虛擬表格數據。

7、釋放JDBC程式使用的資源

ResultSet Statement Connection
如果執行的是DML類型的SQL,只需要釋放兩個Statement Connection
如果執行的是DQL類型的SQL,需要釋放這三個

釋放順序:先創建的後釋放後創建的先釋放
釋放調用這三者的close()方法即可。

本文來自博客園,作者:qi_fen_zhong,轉載請註明原文鏈接:https://www.cnblogs.com/ningbaby/p/17411003.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1 理論知識 1.1 分庫分表是否必要 分庫分表確實可以解決單表數據量大這個問題,但是並非首選。因為分庫分表至少引入了三個必須解決的突出問題。 第一是分庫分表方案本身具有的複雜性。第二是本地事務失效問題,原本在同一個資料庫中可以保證強一致性業務邏輯,分庫之後事務失效。第三是難以聚合查詢問題,因為分庫 ...
  • Q1問題描述 1、 訪問貼紙等素材的時候提示“網路異常,請重試”怎麼辦? 2、 使用AI能力時,提示“errorCode:20124 errorMsg:Method not Allowed”? 解決方案 請做以下檢查: 1、 在代碼中檢查鑒權信息是否已設置。如果未設置,可以通過api_key或Acc ...
  • 前言 這兩天,我們經常逛的好多網站、app首頁都變灰了,原因大家應該都知道了 網站變灰 ①B站 ②愛奇藝 ③ 騰訊視頻 ④ csdn ⑤百度 怎麼實現的呢? 難道這些網站開發商在網站開發的時候都準備一套灰色主題的UI麽? 好奇心的驅使下,開始瘋狂的詢問度娘,果真還是找到了這麼一個網站。 ①官方文檔地 ...
  • CSS 實現磨砂玻璃(毛玻璃)效果樣式 要實現磨砂玻璃背景,可以使用 CSS3 中的 ::before 偽元素和 backdrop-filter 屬性,結合 opacity 屬性和 blur() 函數來實現。 具體實現步驟如下: 創建一個具有背景的元素,例如一個 div 元素。 div { back ...
  • 業務場景: 最近需要開發一個基於vue2的項目,再使用Electron 打包成exe文件。 實際操作時發現vue項目組件依賴最高到node16,電腦上的環境是最新的node20 忙著把node20卸載,換上node16,VUE項目是跑進來了,但是使用Electron 時候又發現需要node19才現, ...
  • 一個合格的技術人的內心要時刻謹記自己在一個企業內的價值所在,並不斷的通過技術提升來擴大價值,才可以在當下的環境中,個人價值與企業價值形成正向迴圈。那我們此次就聊一聊,前端職能如何在不同的業務場景中落地價值。 ...
  • AJAX 是Asynchronous JavaScript And XML的縮寫。 它不是一種編程語言。它是一種基於HTML、CSS、JavaScript 和 XML,讓開發更好、更快和更有互動的 Web 應用的技術。 什麼是ajax 認識前後端交互 前後端交互就是前端與後端的一種通訊方式,主要使用 ...
  • 業務場景 二輪充電業務中,用戶充電完成後在訂單詳情頁展示訂單相關信息,用戶點擊分享按鈕喚起微信小程式分享菜單,將生成的圖片海報分享給微信好友或者下載到本地,好友可通過掃描海報中的二維碼加群領取優惠。 使用場景及功能:微信小程式 生成海報圖片 分享好友 下載圖片 使用技術:Taro vue vant ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...