使用jsp完成一个带有样式的登陆界面
时间: 2024-02-12 11:07:21 浏览: 29
好的,我可以给你提供一个基于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文件中,我们定义了登陆界面的样式,包括背景颜色、字体、输入框和按钮的样式等。
希望这个示例对你有所帮助。