jsp登录界面设计

Posted 2020-09-01

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jsp登录界面设计相关的知识，希望对你有一定的参考价值。

实现结果：在login.jsp页面提交用户名和密码(可以验证是否为空)，点击登录跳转到loginResult.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();
        }

以上是关于jsp登录界面设计的主要内容，如果未能解决你的问题，请参考以下文章

jsp登录界面设计

jsp登录注册代码（增删改查+网页+数据库）

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

jsp内置对象

JSP编写一个登陆界面

在 JSP 中的 <% %> 代码片段中添加链接