手机版
您的当前位置: 考试资料网 > 计算机 > 网页设计 > JSP网站制作: 一个简单的登陆网页设计

JSP网站制作: 一个简单的登陆网页设计

来源:网页设计 时间:2018-07-01 点击: 推荐访问:简单jsp网页界面设计

【www.041188888.com--网页设计】

JSP网权威发布JSP网站制作: 一个简单的登陆网页设计,更多JSP网站制作相关信息请访问JSP网。

【导语】考试资料网准备了《JSP网站制作: 一个简单的登陆网页设计》,供大家参考!

                          All Rights Reserved!


前台login.html和后台verifylogin.jsp两个页面组成:
login.html内容:


<html>
  <head>
    <title>登录</title>


    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="ch-cn">
  </head>


  <body>
  <!-- Form 用来提取用户填入并提交的信息-->
  <form method="post" name="frmLogin" action="verifylogin.jsp">
  <h1 align="center">用户登录</h1><br>
  <div align="center">用户名:
    <input type="text" name="txtUserName" value="Your name"
     onfocus="if(this.value=="Your name")this.value="";"><br>密码:
    <input type="password" name="txtPassword" value="Your password"
     onfocus="if(this.value=="Your password")this.value="";"><br>
    <input type="submit" name="Submit" value="提交"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="reset" name="Reset" value="重置"><br>
  </div></form></body>
</html>


verifylogin.jsp内容:
<%@ page language="java" contentType="text/html;charset=gb2312"
 pageEncoding="UTF-8"%>


<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>登录</title>


  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="This is my page">
  <!--
 <link rel="stylesheet" type="text/css" href="styles.css">
 -->


 </head>


 <body>
  <div align=center>
  <%
   //获取用户名
   String sUserName = request.getParameter ( "txtUserName" );
   //获取密码
   String sPasswd = request.getParameter ( "txtPassword" );


   //登记JDBC驱动程序
   Class.forName ( "org.gjt.mm.mysql.Driver" ).newInstance ( );
   //连接参数与Access不同
   String url = "jdbc:mysql://localhost/LearnJSP";
   //建立连接
   Connection connection = DriverManager.getConnection ( url, "root",
     "011124" );
   //SQL语句
   String sql = "select * from userinfo where username="" + sUserName
     + "" and userpwd = "" + sPasswd + """;


   Statement stmt = connection.createStatement ( );
   ResultSet rs = stmt.executeQuery ( sql ); //返回查询结果


   //如果记录集非空,表明有匹配的用户名和密码,登陆成功
   if ( rs.next ( ) )
   {
    out.println ( "登录成功!" );
   } else
   //否则登录失败
   {
    out.println ( "用户名不存在或密码错误!" );
   }


   rs.close ( );
   stmt.close ( );
   connection.close ( );
  %>
 </body>
</html>


下面为客户端添加代码验证功能:
<html>
  <head>
    <title>登录</title>


    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="ch-cn">


  </head>
  <body>
 <!-- Form 用来提取用户填入并提交的信息-->
 <form method="post" name="frmLogin" action="verifylogin.jsp">
   <h1 align="center">用户登录</h1><br>
   <div align="center">用户名:
      <input type="text" name="txtUserName" value="Your name"
       onfocus="if(this.value=="Your name")this.value="";"><br>密码:
      <input type="password" name="txtPassword" value="Your password"
       onfocus="if(this.value=="Your password")this.value="";"><br>
      <input type="submit" name="Submit" value="提交" onClick="validateLogin();" >
       &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="reset" name="Reset" value="重置"><br>
   </div>
 </form>
 <!-- javaScript 函数 validateLogin(),用来验证用户名和密码是否为空 -->
    <script language="javaScript">
     function validateLogin()
     {
      var sUserName = document.frmLogin.txtUserName.value;
      var sPassword = document.frmLogin.txtPassword.value;
      if( sUserName=="" )
      {
       alert("请输入用户名!");
       return false;
      }
      if( sPassword=="" )
      {
       alert("请输入密码!");
       return false;
      }
     }
    </script>
  </body>
</html>



为服务器端添加代码验证功能:
<%@ page language="java" contentType="text/html;charset=gb2312"
 pageEncoding="UTF-8"%>


<%@ page import="java.sql.*"%>
<%@ page import="java.util.*"%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>登录</title>


  <meta http-equiv="pragma" content="no-cache">
  <meta http-equiv="cache-control" content="no-cache">
  <meta http-equiv="expires" content="0">
  <meta http-equiv="keywords" content="zieckey,jsp">
  <meta http-equiv="description" content="Test JSP using MySQL">


 </head>
 <body>
  <div align=center>
   <%
    //获取用户名
    String sUserName = request.getParameter ( "txtUserName" );
    if ( sUserName == "" || sUserName == null || sUserName.length()>20 )
    {
     try
     {
      response.sendRedirect ( "login.html" );
     } catch ( Exception e )
     {
     }
    }


    //获取密码
    String sPasswd = request.getParameter ( "txtPassword" );
    if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )
    {
     try
     {
      response.sendRedirect ( "login.html" );
     } catch ( Exception e )
     {
     }
    }


    //登记JDBC驱动程序
    Class.forName ( "org.gjt.mm.mysql.Driver" ).newInstance ( );
    //连接参数与Access不同
    String url = "jdbc:mysql://localhost/LearnJSP";
    //建立连接
    Connection connection = DriverManager.getConnection ( url, "root",
      "011124" );
    //SQL语句
    String sql = "select * from userinfo where username="" + sUserName
      + "" and userpwd = "" + sPasswd + """;


    Statement stmt = connection.createStatement ( );
    ResultSet rs = stmt.executeQuery ( sql ); //返回查询结果


    //如果记录集非空,表明有匹配的用户名和密码,登陆成功
    if ( rs.next ( ) )
    {
     //登录成功后将sUserName设置为session变量的UserName
     //这样在后面就可以通过 session.getAttribute("UserName") 来获取用户名,
     //同时这样还可以作为用户登录与否的判断依据
     session.setAttribute ( "UserName", sUserName );
     out.print (  "登录成功!" );
     out.print ( session.getAttribute ( "UserName" ) + " 欢迎您!" );
    } else
    //否则登录失败
    {
     out.println ( "用户名不存在或密码错误!" );
    }


    rs.close ( );
    stmt.close ( );
    connection.close ( );
   %>


 </body>
</html>



数据库中所有表的字段长度的设计标准是应该是足够用,但不浪费存储空间.
我们可以发现,上面数据库中字段限制在20个字符以内,那么程序中也应该作一个限制,
否则可能给网站出现严重的问题.
将上面源码修改如下:
    .....
    <input type="text" name="txtUserName" value="Your name"
       size="20" maxlength="20"
       onfocus="if(this.value=="Your name")this.value="";"><br>密码:
      <input type="password" name="txtPassword" value="Your password"
       size="20" maxlength="20"
       onfocus="if(this.value=="Your password")this.value="";"><br>
    .....


    .....
    if ( sUserName == "" || sUserName == null || sUserName.length()>20 )
    ....
    if ( sPasswd == "" || sPasswd == null || sPasswd.length()>20 )
    ......


这样问题就彻底解决了.


 


 

本文来源:https://www.041188888.com/js/34428/

上一篇:网页设计师考试是什么
下一篇:小菜园5篇

扩展阅读文章

考试资料网 https://www.041188888.com

Copyright © 2002-2018 . 考试资料网 版权所有 京ICP备11356960号

Top