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語句都是DML和DQL類型的語言。
SQL語句中存在一些字元串，字元串最好使用單引號。

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

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

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

JDBC操作SQL，SQL一般分為兩類：DML、DQL，兩類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 分庫分表是否必要 分庫分表確實可以解決單表數據量大這個問題，但是並非首選。因為分庫分表至少引入了三個必須解決的突出問題。 第一是分庫分表方案本身具有的複雜性。第二是本地事務失效問題，原本在同一個資料庫中可以保證強一致性業務邏輯，分庫之後事務失效。第三是難以聚合查詢問題，因為分庫 ...
  • 【FAQ】視頻編輯服務常見問題及解答
    Q1問題描述 1、 訪問貼紙等素材的時候提示“網路異常，請重試”怎麼辦？ 2、 使用AI能力時，提示“errorCode:20124 errorMsg:Method not Allowed”？ 解決方案 請做以下檢查： 1、 在代碼中檢查鑒權信息是否已設置。如果未設置，可以通過api_key或Acc ...
  • 網站都變灰了，幾行代碼可以實現
    前言 這兩天，我們經常逛的好多網站、app首頁都變灰了，原因大家應該都知道了 網站變灰 ①B站 ②愛奇藝 ③ 騰訊視頻 ④ csdn ⑤百度 怎麼實現的呢？ 難道這些網站開發商在網站開發的時候都準備一套灰色主題的UI麽？ 好奇心的驅使下，開始瘋狂的詢問度娘，果真還是找到了這麼一個網站。 ①官方文檔地 ...
  • CSS 實現磨砂玻璃樣式
    CSS 實現磨砂玻璃（毛玻璃）效果樣式 要實現磨砂玻璃背景，可以使用 CSS3 中的 ::before 偽元素和 backdrop-filter 屬性，結合 opacity 屬性和 blur() 函數來實現。 具體實現步驟如下： 創建一個具有背景的元素，例如一個 div 元素。 div { back ...
  • 使用nvm解決node版本問題
    業務場景： 最近需要開發一個基於vue2的項目，再使用Electron 打包成exe文件。 實際操作時發現vue項目組件依賴最高到node16，電腦上的環境是最新的node20 忙著把node20卸載，換上node16，VUE項目是跑進來了，但是使用Electron 時候又發現需要node19才現， ...
  • “前端”工匠系列（二）：合格的工匠，怎麼做好價值落地
    一個合格的技術人的內心要時刻謹記自己在一個企業內的價值所在，並不斷的通過技術提升來擴大價值，才可以在當下的環境中，個人價值與企業價值形成正向迴圈。那我們此次就聊一聊，前端職能如何在不同的業務場景中落地價值。 ...
  • Express實戰個人訂閱號實現網站登錄
    AJAX 是Asynchronous JavaScript And XML的縮寫。 它不是一種編程語言。它是一種基於HTML、CSS、JavaScript 和 XML，讓開發更好、更快和更有互動的 Web 應用的技術。 什麼是ajax 認識前後端交互 前後端交互就是前端與後端的一種通訊方式，主要使用 ...
  • 使用taro+canvas實現微信小程式的圖片分享功能
    業務場景 二輪充電業務中，用戶充電完成後在訂單詳情頁展示訂單相關信息，用戶點擊分享按鈕喚起微信小程式分享菜單，將生成的圖片海報分享給微信好友或者下載到本地，好友可通過掃描海報中的二維碼加群領取優惠。 使用場景及功能：微信小程式 生成海報圖片 分享好友 下載圖片 使用技術：Taro vue vant ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類