当前位置：首页 > news >正文

网站3天免输入登录页面编程

news 2026/5/15 20:24:25

网站3天免输入登录页面编程

1.实验目的

掌握JSP的内置对象技术以及表单验证在服务器端的实现技术

2.实验内容

编写网站的登录页面，要求能保存用户登录成功时输入的用户名及密码信息，当同一用户 3天内再次登录网站首页时，能自动读取之前保存的用户信息判断身份是否合法，如果合法自动完成登录。如果当同一用户超过3天再次登录网站首页时，则需要重新输入用户名及密码进行身份验证，通过验证方能登录并显示欢迎信息。否则提示：身份验证失败，必须重新输入输入。

3.设计思想

整体流程：

1). 页面加载 → 读取 Cookie。
2). Cookie 存在且未过期 → 自动提交登录请求。
3). 后端 JSP 校验 → 返回 JSON（成功 / 失败）。
4). 前端根据结果渲染：登录页 / 欢迎页 / 错误提示。
5). 退出 → 清空 Cookie，回到登录页。

前后端分工：

前端（index.html）：Cookie 读写、自动登录判断、AJAX 请求、页面渲染。
后端（login.jsp）：参数接收、账号校验、JSON 返回、Session 保存。

其他：

因服务器未安装数据库，因此将以预设账户来代替从数据库中新增与读取数据库信息

4.核心代码实现

1).后端：login.jsp

<%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="java.util.*, java.io.*" %>
<%response.setContentType("application/json");response.setCharacterEncoding("UTF-8");String username = request.getParameter("username");String password = request.getParameter("password");boolean success = false;String msg = "";if (username == null || password == null || username.trim().equals("") || password.trim().equals("")) {msg = "用户名和密码不能为空";} else if (("admin".equals(username) && "123456".equals(password)) ||("test".equals(username) && "123456".equals(password)) ||("user".equals(username) && "123456".equals(password))) {success = true;msg = "登录成功";session.setAttribute("loginUser", username); // 保存登录态} else {msg = "用户名或密码错误，请重新输入";}String json = "{\"success\":" + success + ",\"message\":\"" + msg + "\"}";out.print(json);
%>

2).前端：index.html

(a).Cookie 相关核心代码

const THREE_DAYS = 3 * 24 * 60 * 60 * 1000;
function saveCookie(username, password) {let date = new Date();date.setTime(date.getTime() + THREE_DAYS);let expires = date.toUTCString();document.cookie = "username=" + encodeURIComponent(username) + "; expires=" + expires + "; path=/";document.cookie = "password=" + encodeURIComponent(password) + "; expires=" + expires + "; path=/";document.cookie = "loginTime=" + Date.now() + "; expires=" + expires + "; path=/";
}
function getCookie() {let cookies = document.cookie.split("; ");let user = "", pwd = "", time = 0;cookies.forEach(c => {let [k, v] = c.split("=");if (k === "username") user = decodeURIComponent(v);if (k === "password") pwd = decodeURIComponent(v);if (k === "loginTime") time = Number(v);});if (user && pwd && time) {return { username: user, password: pwd, loginTime: time };}return null;
}
// 清除Cookie
function clearCookie() {document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";document.cookie = "loginTime=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
}
// 判断是否在3天内
function is3DayValid(t) {return Date.now() - t <= THREE_DAYS;
}

(b).AJAX 登录请求

async function login(username, password) {let fd = new FormData();fd.append("username", username);fd.append("password", password);let res = await fetch("login.jsp", { method: "POST", body: fd });return await res.json();
}

(c).页面初始化逻辑（自动登录核心)

async function init() {let ck = getCookie();if (ck && is3DayValid(ck.loginTime)) {//Cookie有效：自动登录let ret = await login(ck.username, ck.password);if (ret.success) {renderWelcome(ck.username);return;}}//Cookie无效/过期/登录失败：显示登录页clearCookie();renderLogin();
}