用Tomcat、Servlet、HTML和CSS写一个简单的登录注册页面来练手（HTML和CSS由chatGPT生成），先上效果图：
HTML CSS 信息
HTML仅仅使用Form表单给后台提交用户信息，后续会有JS版本
HTML文件
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<div class="login-container">
<div class="login-box">
<h2>Login</h2>
<!-- 提交表单方法1 -->
<!-- <form action="/login2_war_exploded/login" method="get">-->
<!-- 接口可以定义到这里， 也可以在这里定义使用的Servlet-->
<form action="http://localhost:8080/login2_war_exploded/login" method="get">
<div class="input-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div class="input-group">
<button type="submit" id="login">Login</button>
</div>
</form>
</div>
</div>
</body>
</html>
重点
可以看到我使用了8080端口，并且指定了HTTP的Get方法，数据会传输给value为login的程序处理
<form action="http://localhost:8080/login2_war_exploded/login" method="get">
提交表单的2种方式（login2_war_exploded是项目名）
<!-- 提交表单方法1 -->
<form action="/login2_war_exploded/hello" method="get">
<!-- 提交表单方法2 -->
<!-- 接口可以定义到这里-->
<form action="http://localhost:8080/login2_war_exploded/login" method="get">
CSS 文件
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
/*background: url("https://starry-lixu.oss-cn-hangzhou.aliyuncs.com/202209141908599.jpg") no-repeat center center fixed;*/
background-size: cover;
}
.login-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-box {
background: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
max-width: 400px;
width: 90%;
}
.login-box h2 {
margin-bottom: 20px;
}
.input-group {
margin-bottom: 15px;
}
.input-group label {
display: block;
font-weight: bold;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.input-group button {
background: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
.input-group button:hover {
background: #45a049;
}
LoginServlet
package com.example.login2;
import java.io.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;
@WebServlet(name = "loginServlet", value = "/login")
public class LoginServlet extends HttpServlet {
private String message;
public void init() {
message = "登录Servlet启动";
}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
// request 得到数据
// response 发送数据给客户端
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String username =request.getParameter("username");
String password =request.getParameter("password");
System.out.println("username用户名 = "+username);
System.out.println("password密码 = "+password);
//用UserServce 来简单验证
if (username.equals("user")&&( password.equals("123")) ){
PrintWriter out = response.getWriter();
response.getWriter().write("登录成功");
out.println("<html><body>");
out.println("<h1>" + "username " + username + "</h1>");
out.println("<h1>" + "password " + password + "</h1>");
out.println("</body></html>");
//携带参数 重定向（跳转页面）
response.sendRedirect("/login2_war_exploded/home.html");
}else{
response.getWriter().write("登录失败");
}
}
public void destroy() {
System.out.println("已经销毁");
}
}
- 验证的逻辑很简单，doGet方法可以得到用户名和密码。
- 如果分别扥等于user和123，就跳转到home界面。
- 如果不行，就显示登录失败。
HTML和Servlet的对应关系？
@WebServlet(name = "loginServlet", value = "/login")
Tomcat在运行的过程中，
会将所有注解了的类 创建对象，
将此对象 与value 形成一个匹配关系
原本链接： http://localhost:8080/login2_war_exploded/
启动servlet的链接 http://localhost:8080/login2_war_exploded/hello
补充：如果想启动其他网页（注意加上HTML） http://localhost:8080/login2_war_exploded/login.html
还记得这行代码吗？
<form action="http://localhost:8080/login2_war_exploded/login" method="get">
tomcat在解析请求之后，会查找login对应的对象(也就是hello-servlet)，
创建一个对象并使用doGet函数，这个就解释了HTML和Servlet的对应关系。
