JSP继续学习(完成一个最简单的用户登录界面)

感觉只看视频效率太低,请教了别人,于是趁着有空自己写了个简单至极的登录界面,练练手。

功能是

1登录,用户名是fengsigaoju,密码123456若不相等就报错,否则就显示登陆成功.

2注册,在判断用户名和密码为空那边花了点时间,判断新老密码各种搜索.

3一开始  <jsp:forward >一直错误,加了值就过了,也不知道为什么,有谁肯告知,万分感谢。

自学难啊...





Myjsp.jsp页面(登录界面)

<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!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 bgcolor="#e3e3e3">
<center>
<form action="check.jsp" method="post">
<table>
   <caption>用户登录</caption>
   <tr><td>用户名:</td><td><input type="text" name="username" size="20"/></td></tr>
   <tr><td>密码:</td><td><input type="password" name="pwd" size="21"/></td></tr>
   <tr><td><input type="submit" value="登录"/></td><td><input type="reset" value="重置" /></td></tr>
   </table>
   </form>
   如果您还没有注册,请单击<a href="register.jsp">这里</a>注册!
   </center>
   </body>
</html>

registe.jspr页面

<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <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">
	-->
<script language="javascript">
function isValid(form)
{
if (form.username.value=="")
 {
 alert("用户名不能为空");
 return false;
 }
if (form.password.value!=form.repassword.value)
{
alert("两次输入的密码不同!");
return false;
}
else  if (form.password.value=="")
{
alert("用户密码不能为空!");
return false;
}
else return true;
}
</script>
  </head>
 <body bgcolor="#e3e3e3">
  <center>
    <form action="check.jsp" method="post" onSubmit="return isValid(this);"><!-- onSubmitonsubmit事件会在表单中的确认按钮被点击时发生,也就是一旦被点击就会自动调用javascript代码判断是否符合标准-->
    	<table>
    		<caption>用户注册</caption>
    		<tr><td>用户名:</td><td><input type="text" name="username"/></td></tr>
    		<tr><td>密    码:</td><td><input type="password" name="password"/></td></tr>
    		<tr><td>确认密码</td><td><input type="password" name="repassword"/></td></tr>
    		<tr><td align="center"><input type="submit" value="注册"/></td><td align="center"><input type="reset" value="重置"/></td></tr>
    	</table>
    	 </form>
    </center>
  </body>
</html>

check.jsp页面

<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>用户登录</title>
 </head>
<body>
<% 
   if (request.getParameter("username").equals("fengsigaoju")&&request.getParameter("pwd").equals("123456"))
   { 
%>
  <jsp:forward page="this.jsp">
   <jsp:param name="aa" value="bb"/>
  <jsp:param name="aa11" value="bb11"/>
  </jsp:forward>
   <% 
   }
   else 
    %>
    <!--表达式遇到js就停止-->
    <script>alert("用户名或密码错误!");</script>
    </body>
    </html>

this.jsp页面

<%@ page language="java" import="java.util.*" contentType="text/html;charset=utf-8"%>
<html>
<head>
<title>成功登陆</title>
</head>
<body>
<h1 align="center">你已经成功登陆</h1>
</body></html>


  • 6
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,我可以给你提供一个基于JSP(Java Server Pages)的带有样式的登陆界面的示例代码,供你参考。 首先,我们需要一个JSP页面,名为 `login.jsp`。以下是该页面的代码: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>Login Form</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>Login Form</h2> <form action="loginAction.jsp" method="post"> <div class="user-box"> <input type="text" name="username" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="password" required=""> <label>Password</label> </div> <button type="submit">Submit</button> </form> </div> </body> </html> ``` 在这个页面中,我们使用了一个名为 `login-box` 的 `div` 元素来包裹登陆表单,并在其中添加了一个 `h2` 元素来显示标题。我们还添加了两个输入框,分别用于输入用户名和密码,并使用了 `label` 元素来标记它们。最后,我们添加了一个 `button` 元素用于提交表单,并将表单的 `action` 属性设置为 `loginAction.jsp`,即当用户提交表单时,将会跳转到名为 `loginAction.jsp` 的页面进行处理。 接下来,我们需要一个名为 `loginAction.jsp` 的JSP页面,它将用于处理登陆表单的提交。以下是该页面的代码: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String username = request.getParameter("username"); String password = request.getParameter("password"); if(username.equals("admin") && password.equals("123456")){ response.sendRedirect("welcome.jsp"); } else { %> <!DOCTYPE html> <html> <head> <title>Login Failed</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>Login Failed</h2> <p>Incorrect username or password. Please try again.</p> <form action="loginAction.jsp" method="post"> <div class="user-box"> <input type="text" name="username" required=""> <label>Username</label> </div> <div class="user-box"> <input type="password" name="password" required=""> <label>Password</label> </div> <button type="submit">Submit</button> </form> </div> </body> </html> <% } %> ``` 在该页面中,我们首先使用 `request.getParameter()` 方法获取到用户名和密码,并进行简单的验证。如果用户名和密码都正确,我们使用 `response.sendRedirect()` 方法将用户重定向到名为 `welcome.jsp` 的欢迎页面。如果用户名或密码不正确,我们将显示一个错误消息,并重新显示登陆表单供用户重新输入。在这个页面中,我们使用了与 `login.jsp` 相同的HTML和CSS样式。 最后,我们需要一个名为 `welcome.jsp` 的JSP页面,它将用于显示登陆成功的欢迎消息。以下是该页面的代码: ```jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <title>Welcome</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="login-box"> <h2>Welcome</h2> <p>You have successfully logged in.</p> </div> </body> </html> ``` 在这个页面中,我们只是简单地显示了一个欢迎消息,通知用户已经成功登陆。同样,我们也使用了与 `login.jsp` 和 `loginAction.jsp` 相同的HTML和CSS样式。 最后,我们需要一个名为 `style.css` 的CSS文件,用于定义我们的登陆界面的样式。以下是该文件的代码: ```css body { margin: 0; padding: 0; background: #333; font-family: sans-serif; } .login-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 350px; height: 420px; padding: 80px 40px; box-sizing: border-box; background: rgba(0, 0, 0, 0.5); } h2 { margin: 0 0 30px; padding: 0; color: #fff; text-align: center; } .user-box { position: relative; } .user-box input { width: 100%; padding: 10px 0; font-size: 16px; color: #fff; margin-bottom: 30px; border: none; border-bottom: 1px solid #fff; outline: none; background: transparent; } .user-box label { position: absolute; top: 0; left: 0; padding: 10px 0; font-size: 16px; color: #fff; pointer-events: none; transition: 0.5s; } .user-box input:focus ~ label, .user-box input:valid ~ label { top: -20px; left: 0; color: #03a9f4; font-size: 12px; } button[type="submit"] { display: block; background: #03a9f4; color: #fff; text-transform: uppercase; padding: 12px 30px; margin-top: 40px; font-size: 16px; text-decoration: none; letter-spacing: 2px; border-radius: 25px; transition: 0.5s; border: none; outline: none; cursor: pointer; } button[type="submit"]:hover { background: #fff; color: #03a9f4; } ``` 在这个CSS文件中,我们定义了登陆界面的样式,包括背景颜色、字体、输入框和按钮的样式等。 希望这个示例对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值