JSP_5.16_课堂笔记
完整的可以与数据库连接的登录界面的代码
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>
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
