- A+
完整
的可以与数据库
连接的登录界面
的代码
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" alt="JSP_5.16_课堂笔记") } </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" alt="JSP_5.16_课堂笔记") } </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()方法即可。