zoukankan      html  css  js  c++  java
  • 登录界面的实现

    首先讲一下这个登录界面可实现的功能:

    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>
    

     运行结果截图:

  • 相关阅读:
    [tensorflow] tf.gather使用方法
    Tensorflow Dataset.from_generator使用示例
    np.random.rand()函数
    python类
    os.environ['TF_CPP_MIN_LOG_LEVEL'] = '2'
    KNN算法
    Qt编写数据可视化大屏界面电子看板11-自定义控件
    Qt编写数据可视化大屏界面电子看板10-改造QCustomPlot
    Qt编写数据可视化大屏界面电子看板9-曲线效果
    闲谈Monaco Editor-基本使用
  • 原文地址:https://www.cnblogs.com/xulei11-/p/6987526.html
Copyright © 2011-2022 走看看