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

网站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();
}

5.运行效果

1.初始登录界面

2.登录成功欢迎页

3.账号密码错误提示