jsp登录界面设计
实现结果:在login.jsp页面提交用户名和密码(可以验证是否为空),点击登录跳转到loginResult.jsp页面进行验证并显示结果
JSP + JDBC + MySQL
login.jsp
设计一个表单,内容为两个输入框,一个用来输入用户名,另一个用来输入密码,并有一个提交按钮
用JavaScript函数验证输入框是否都不为空
代码为:
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <script type="text/javascript"> 8 function $(id) { 9 return document.getElementById(id); 10 } 11 12 function check() { 13 var user = $("user").value; 14 var pwd = $("pwd").value; 15 16 $("userInfo").innerHTML=""; 17 $("pwdInfo").innerHTML=""; 18 19 if(user == "") { 20 $("userInfo").innerHTML="用户名不能为空!"; 21 $("user").focus(); 22 return false; 23 } 24 25 if(pwd == "") { 26 $("pwdInfo").innerHTML="密码不能为空!"; 27 $("pwd").focus(); 28 return false; 29 } 30 31 return true; 32 } 33 </script> 34 35 <style type="text/css"> 36 #userInfo{color:red;} 37 #pwdInfo{color:red;} 38 </style> 39 40 <title>登录</title> 41 42 </head> 43 44 <body> 45 <center> 46 <form action="loginResult.jsp" method="post" onsubmit="return check()"> 47 <br><br><br><br><br><br> 48 <table> 49 <tr><td>用户名:</td><td><input type="text" name="userName" id="user"><span id="userInfo" ></span></td></tr> 50 <tr><td>密码:</td><td><input type="password" name="userPwd" id="pwd"><span id="pwdInfo"></span></td></tr> 51 <tr><td></td><td><input type="submit" value="登 录"></td> 52 53 </table> 54 </form> 55 </center> 56 </body> 57 58 </html>
loginResult.jsp页面
1、利用JSP内置对象获取用户名和密码
1 String user = request.getParameter("userName"); 2 String password = request.getParameter("userPwd");
2、注册驱动MySQL的驱动程序
Class.forName(“com.mysql.jdbc.Driver”);
3、构建连接符号字
String url1 = "jdbc:mysql://localhost:3306/" + 数据库名; String url2 = "?user=" + 数据库用户名 + "&password=" + 数据库密码; String url3 = "&useUnicode=true&characterEncoding=UTF-8"; String url = url1 + url2 + url3;
4、构建数据库连接对象
Connection conn = DriverManager.getConnection(url);
5、构建SQL语句,创建数据库操作对象
String sql = "select * from loginInfo where username=?"; pstmt = conn.prepareStatement(sql); pstmt.setString(1,username);//设置值
6、执行查询,得到查询结果集
ResultSet rs = pstmt.executeQuery();
7、结果处理
如果rs.next()为true,则说明该用户名存在,继续验证密码是否正确;否则该用户名不存在
if(rs.next()) { if(rs.getString("password").equals(password)) { %><center><h1>用户 <%=rs.getString("userName")%>登陆成功!</h1></center><% } else { %><center><h1>密码错误!</h1></center><% } } else { %><center><h1>用户名不存在!</h1></center> <%}
8、释放资源
if(rs != null) { rs.close(); } if(pstmt != null) { pstmt.close(); } if(conn != null) { conn.close(); }