登录界面的实现
首先讲一下这个登录界面可实现的功能:
1.基本界面有了;
2.具有容错性,如果什么都不输入,直接点确定,会提示错误;
3.连接了数据库,建了表,可以实现注册,以及登录;
4.能够正常登陆进去;
5.如果登录的账号密码不正确,会提示重新登录。
下面讲讲具体怎么实现?
首先我们要理清思路:
1.登录界面输入用户的ID和口令;
2.然后点击确定按钮,我们先要在客户端对文本框中的东西进行验证;
3.如果格式正确,则提交到控制器进行验证,如果不存在这个用户或者密码不正确都会提示重新登录,验证正确的话,则进入登录成功的界面,否则进入登录失败的界面;
4.如果文本框的内容格式不正确,那么光标会自动停在出错的文本框里。
那么第一步,我们首先创建数据库:
在数据库应用软件中创建我们需要的数据库,并且建一个我们需要用的表。
如下图所示:
第二步,创建登录界面:
先用HTML的知识写出了基本显示,然后在提交表单之前,会先用javascript写的方法对表单元素进行验证,使其具有正确的格式;当格式正确时,才会把表单元素里的标签提交到下一个页面里。
代码如下:
denglu.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登录界面</title> </head> <body> <h2 align="center">登录界面</h2> <form name="form1" onsubmit="return check(form1)" action="denglu.jsp" method="post"> <table align="center" width="50%" border="1"> <tr><th>用户名:</th><td><input type="text" name="username"><td></tr> <tr><th>密码:</th><td><input type="text" name="userpassword"><td></tr> <tr><th colspan="2"> <input type="submit" value="登录"> <input type="reset" value="重置"></th></tr> </table> </form> </body> </html>
denglu.jsp
<%@ page language="java" contentType="text/html; charset=utf-8" import="java.sql.*"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>登录界面</title> </head> <% String name=request.getParameter("username"); Class.forName("com.mysql.jdbc.Driver"); Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","root"); Statement pstmt=con.createStatement(); ResultSet rs=pstmt.executeQuery("select * from user where username='"+name+"'"); String username,userpassword; if(rs.next()){ userpassword=rs.getString("userpassword"); } //while(rs.next()){ //username=rs.getString("username"); //userpassword=rs.getString("userpassword"); //} request.setCharacterEncoding("utf-8"); String password=request.getParameter("userpassword"); out.print(userpassword+" "+password); //if(username.equals(name)&&userpassword.equals(password)) //out.print("登陆成功!"); //else //out.print("用户名或密码错误,登录失败!"); rs.close(); pstmt.close(); con.close(); %> </html>
运行结果截图: