JSP/Servlet Web 学习笔记 DayThree —— 实现一个登陆小界面

项目说明

  利用JSP、HTML、JS实现了一个简易的登陆系统。根据前两天的所学,实现了如下功能:

  a)用户名、密码验证(不基于数据库,只做一个简单的表单数据获取并验证)

  b)页面访问次数统计

  c)验证用户名、密码为空的提醒弹窗

  d)一个简易的根据输入错误次数来实现的防恶意登陆的小弹窗

相关知识点:

  a)主要利用form的POST方法传递数据,在此之外再基本利用<jsp:param>标签配合<jsp:forward>传递其他的相关数据。

  b)此外JavaScript可以完美嵌套于JSP文件中,适当地使用IF语句配合JS中的函数进行页面交互。

项目源码

  登陆页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login Page</title>
</head>
<body>
<%! String msg=""; 
    int count=0;%>
<h2>简易的登陆系统验证</h2>
<p>访问次数:<%=count+1 %></p><br>
<hr>
<p>正确的登录名:adim 密码:12345</p>
<br>
    <p><% out.println(msg); %></p>
    <form method=post action="Login.jsp">
        用户名:<input type="text" name=usr> <br>
        密码:  <input type="password" name=pasw> <br>
        <input type="radio" name=type value=1>管理员
        <input type="radio" name=type value=2 checked>普通用户
        <br> 
        <input type="submit" value="提交">
        <input type="reset" value="清空">
</form>
    <%
      count=count+1;
      String usrn=request.getParameter("usr");
      String passWord=request.getParameter("pasw");
      String type=request.getParameter("type");
      if(usrn!=null&&passWord!=null)
      {
          
          if(usrn.equals("adim")&&passWord.equals("12345"))
          {
              count=0;
              msg=""; %>  
          <jsp:forward page="success.jsp">
                <jsp:param name="UsrName" value="<%=usrn %>" />
                <jsp:param name="Class" value="<%=type %>" />
            </jsp:forward>
        <%}else{
            if(usrn.equals("")||passWord.equals("")){
                out.println("<Script>");
                   String message="用户名或密码不能为空!";
                   out.println("alert('"+message+"')");
                   out.println("</Script>");
                   count=0;
            }
              msg="PassWord or UsrName is Wrong!";
              if(count>=5){
                   out.println("<Script>");
                   String message="您当前错误次数过多,请稍后再试!";
                   out.println("alert('"+message+"')");
                   out.println("</Script>");
              }
          }
      }%> 
      

</body>
</html>

  登陆成功页面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>WelCome!</h1>
    <hr>
    <%String usr=request.getParameter("UsrName");
      String type=request.getParameter("Class");
      String Classify="";
      if(type.equals("1")){
          Classify="管理员";
      }else{
          Classify="普通用户";
      }
      out.println("<p>"+usr+"</p>");
      out.println("<a href=''>进入"+Classify+"页面</a>");
    %>
    
</body>
</html>

 效果图:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏緣來來來

Django添加favicon.ico图标

所谓favicon,即Favorites Icon的缩写,让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站。

1231
来自专栏林德熙的博客

win10 uwp App-to-app communication 应用通信 发送数据文件启动

这篇文章都是乱说的,如果觉得有不好的,可以发我邮箱 本文主要讲如何让两个应用之间传输消息,也就是我们经常用的分享。我们可以使用的有剪辑版、UWP分享、Uri启动...

861
来自专栏企鹅号快讯

使用技巧精讲

1、快速建立连接 单击顶部活动菜单栏上的“快速建立连接按钮”(Alt+Q),如图1 图1 单击按钮后,弹出图2所示的窗口 ? 图2 Protocol:默认SSH...

2145
来自专栏烂笔头

Linux笔记:使用Vim编辑器

目录[-] Vi编辑器是Unix系统上早先的编辑器,在GNU项目将Vi编辑器移植到开源世界时,他们决定对其作一些改进。 于它不再是以前Unix中的那...

3644
来自专栏Samego开发资源

初识NodeJS服务端开发之NodeJS+Express+MySQL

2712
来自专栏Jerry的SAP技术分享

关于SAP UI5数据绑定我的一些原创内容

第6篇文章:https://blogs.sap.com/2015/10/25/how-i-do-self-study-on-a-given-fiori-cont...

1595
来自专栏移动端周边技术扩展

Vue.js学习笔记(3)

1192
来自专栏盟主来了

vscode源码的一点点笔记

1623
来自专栏转载gongluck的CSDN博客

超级强大的vim配置(vimplus)

最近在重新配置Vim,也在GitHub上找了三个star和fork数目很高的方案,在这里分享给大家: https://github.com/amix/vimr...

5.2K9
来自专栏守望轩

Visual Studio 2008 每日提示(二十六)

#251、在文件中保存扩展名的映射 原文链接:You can save your file extension mappings to a file 操作步骤...

3534

扫码关注云+社区