利用servlet+Javabean+JSP 实现用户登陆案例

已于 2023-11-27 10:52:02 修改
阅读量2k 收藏 29
点赞数 26
文章标签： servlet java 开发语言 jsp
于 2023-11-27 10:38:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59392294/article/details/134639244
版权

JavaWeb—用户登陆案例

项目描述

​ 完成用户登录功能，登录界面必须要有账号、密码、验证码。

项目要求

​ 后端技术要求为 Servlet.登录验证通过数据库进行验证数据库操作使用原生JDBC，前端 htmljsp、css、js 都可以，不能使用框架。代码需满足 Java 编程规范，注释需要清晰明了。

实现效果

登陆首页

登陆首页

验证码输入错误

验证码错误

登陆失败

账号密码错误

登陆成功

登陆成功

项目代码：

sheep_login.jsp

<%--
  Created by IntelliJ IDEA.
  User: Allen xu
  Date: 2023/11/25
  Time: 20:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<title>SheepGameStation - Game Login</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background: linear-gradient(to right, #008000, #ADFF2F);
        margin: 0;
        font-family: Arial, sans-serif;
    }
    .login-form {
        width: 300px;
        background-color: #ffffff;
        padding: 30px;
        border-radius: 10px;
        box-shadow: 0px 0px 20px 5px #00000050;
        text-align: center;
    }
    .login-form input {
        width: calc(100% - 20px);
        padding: 10px;
        margin-bottom: 10px;
        border: none;
        border-bottom: 1px solid #008000;
        outline: none;
        transition: border-bottom 0.3s ease;
    }
    .login-form input:focus {
        border-bottom: 2px solid #ADFF2F;
    }
    .login-form button {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
        border: none;
        color: #ffffff;
        background: linear-gradient(to right, #008000, #ADFF2F);
    }
    .login-form h1, .login-form h3 {
        margin: 5px 0;
        color: #008000;
    }
    .captcha-container {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }
    .captcha-image {
        width: 150px;
        height: auto;
        margin-bottom: 10px;
        display: none; /* Initially hide the captcha */
    }
    .refresh-captcha {
        padding: 10px;
        margin-left: 10px;
        border-radius: 5px;
        border: none;
        color: #ffffff;
        background: linear-gradient(to right, #008000, #ADFF2F);
        cursor: pointer;
    }
</style>
<!--body元素加载完成后，会自动执行名为showUsernamePlaceholder的JavaScript函数-->
<body οnlοad="showUsernamePlaceholder()">
<!-- 登录表单的容器 -->
<div class="login-form">
    <!-- 游戏平台的标题 -->
    <h1>SheepGameStation</h1>
    <!-- 游戏平台的副标题 -->
    <h3>羊了个羊游戏平台</h3>
    <!-- 登录表单的标题 -->
    <h2>Game Login</h2>
    <!-- 登录表单，提交时会发送POST请求到SheepServlet -->
    <form action="SheepServlet" method="post">
        <!-- 用户名输入框 -->
        <input id="username" type="text" name="username" required>
        <!-- 密码输入框 -->
        <input id="password" type="password" name="password" required>
        <!-- 验证码的容器 -->
        <div class="captcha-container">
            <!-- 验证码的画布 -->
            <canvas id="captchaCanvas" class="captcha-image" width="150" height="60"></canvas>
            <!-- 刷新验证码的按钮，点击时会调用generateCaptcha函数 -->
            <button class="refresh-captcha" οnclick="generateCaptcha()">Refresh</button>
        </div>
        <!-- 验证码输入框 -->
        <input id="captcha" class="captcha" type="text" placeholder="Enter Captcha" required>
        <!-- 错误消息的div，如果Servlet设置了错误消息，就会显示 -->
        <div id="errorMessage" style=" background-image: linear-gradient(to right, #FFA500, #FF0000); /* 紫金渐变背景 */
                color: white; /* 白色字体 */
                margin-bottom: 10px; /* 底部间距 */
                display: <%=(request.getAttribute("errorMessage") != null) ? "block" : "none"%>; /* 根据错误消息的有无决定显示与否 */
                padding: 5px; /* 内边距 */
                text-align: center; /* 文本居中 */
                font-family: Arial, sans-serif; /* 字体 */
                font-size: 14px; /* 字体大小 */
                border-radius: 5px;
                border-bottom: 1px solid #ffffff; /* 下划线 */">
            <!-- 显示来自Servlet的错误消息 -->
            <%= request.getAttribute("errorMessage") %>
        </div>
        <!-- 登录按钮，点击时会提交表单 -->
        <button id="loginButton" type="submit">Login</button>
    </form>
</div>
</body>

<script>
    // 获取HTML元素
    var username = document.getElementById('username');
    var password = document.getElementById('password');
    var captchaInput = document.getElementById('captcha');
    var captchaCanvas = document.getElementById('captchaCanvas');
    var ctx = captchaCanvas.getContext('2d');

    // 定义占位符文本
    var usernameText = 'Please enter username';
    var passwordText = 'Please enter password';

    // 定义计数器
    var i = 0;
    var j = 0;

    // 显示用户名输入框的占位符
    function showUsernamePlaceholder() {
        if (i < usernameText.length) {
            username.placeholder += usernameText.charAt(i);
            i++;
            setTimeout(showUsernamePlaceholder, 100);
        } else {
            // 当用户名占位符显示完毕，显示密码输入框的占位符
            showPasswordPlaceholder();
        }
    }

    // 显示密码输入框的占位符
    function showPasswordPlaceholder() {
        if (j < passwordText.length) {
            password.placeholder += passwordText.charAt(j);
            j++;
            setTimeout(showPasswordPlaceholder, 100);
        } else {
            // 当密码占位符显示完毕，生成验证码
            captchaInput.placeholder = 'Enter Captcha';
            generateCaptcha();
            captchaCanvas.style.display = 'inline-block';
        }
    }

    // 用于保存当前生成的验证码
    var currentCaptcha = '';

    // 生成验证码
    function generateCaptcha() {
        // 清除画布
        ctx.clearRect(0, 0, captchaCanvas.width, captchaCanvas.height);
        var chars = '0123456789';
        currentCaptcha = '';
        var colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF']; // 添加颜色数组
        for (var k = 0; k < 6; k++) {
            // 生成随机数字
            var digit = chars[Math.floor(Math.random() * chars.length)];
            currentCaptcha += digit;
            // 设置随机颜色和字体大小
            ctx.fillStyle = colors[k];
            ctx.font = (Math.random() * 10 + 20) + 'px Arial';
            // 保存当前状态并旋转文字
            ctx.save();
            ctx.translate(25 * k + 10, 40);
            ctx.rotate(Math.random() - 0.5);
            // 绘制文字并恢复状态
            ctx.fillText(digit, 0, 0);
            ctx.restore();
        }
        // 绘制干扰线
        for (var l = 0; l < 6; l++) {
            ctx.beginPath();
            ctx.moveTo(Math.random() * captchaCanvas.width, Math.random() * captchaCanvas.height);
            ctx.lineTo(Math.random() * captchaCanvas.width, Math.random() * captchaCanvas.height);
            ctx.strokeStyle = '#888';
            ctx.stroke();
        }
    }



    // 处理用户输入账号密码并且发出登录请求的函数
    function loginToSheepServlet() {
        // 获取并清理输入框的值
        var usernameValue = username.value.trim();
        var passwordValue = password.value.trim();
        var userInput = captchaInput.value.trim();

        // 检查用户输入的验证码是否正确
        if (userInput === currentCaptcha) {
            // 获取表单元素
            var form = document.querySelector('form');
            // 创建一个新的FormData对象
            var formData = new FormData(form);

            // 创建一个新的XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 初始化一个POST请求
            xhr.open('POST', '/SheepServlet', true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            // 发送请求
            xhr.send(formData);
            // 设置状态改变的回调函数
            xhr.onreadystatechange = function () {
                // 当请求完成时
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    // 如果响应状态码为200
                    if (xhr.status === 200) {
                        console.log("登陆成功")
                    } else{
                        // 处理其他状态码的情况
                        console.log("登陆失败")
                    }
                }
            };
        } else {
            // 如果验证码错误，显示警告信息并重新生成验证码
            alert('验证码错误，请重试。');
            generateCaptcha();
            captchaInput.value = '';
        }
    }

    // 当点击登录按钮时，调用loginToSheepServlet函数
    document.getElementById('loginButton').addEventListener('click', function (event) {
        // 阻止默认提交行为
        // event.preventDefault();
        loginToSheepServlet();
    });

</script>
</body>
</html>

User.java

package com.hbnu.sheep;

/**
 * User类用于封装数据
 * @author Allen xu
 * {@code @date} 2023/11/26 9:14
 * @version 1.0
 */
public class User {
    // 用户名
    private String username;
    // 密码
    private String password;

    /**
     * 获取用户名
     * @return 用户名
     */
    public String getUsername() {
        return username;
    }

    /**
     * 设置用户名
     * @param username 用户名
     */
    public void setUsername(String username) {
        this.username = username;
    }

    /**
     * 获取密码
     * @return 密码
     */
    public String getPassword() {
        return password;
    }

    /**
     * 设置密码
     * @param password 密码
     */
    public void setPassword(String password) {
        this.password = password;
    }
}

SheepServlet.java

package com.hbnu.sheep;
/**
 * @author Allen xu
 * {@code @date} 2023/11/26 9:14
 * @version 1.0
 */
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;

// 使用@WebServlet注解定义Servlet的访问URL
@WebServlet("/SheepServlet")
public class SheepServlet extends HttpServlet {

    // 重写doPost方法，处理POST请求
    protected void doPost(HttpServletRequest request, HttpServletResponse response){
        // 从请求中获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        //获取数据库连接
        try {
            // 加载数据库驱动
            Class.forName("com.mysql.cj.jdbc.Driver");
            // 数据库连接URL
            String url = "jdbc:mysql://localhost:3306/你的数据库名?useSSL=false&serverTimezone=UTC";
            // 数据库用户名
            String user_sql = "root";
            // 数据库密码
            String sqlps = "123456";
            // 获取数据库连接
            Connection connection = DriverManager.getConnection(url, user_sql, sqlps);
            // 创建PreparedStatement对象，用于执行SQL查询
            PreparedStatement preparedStatement = connection.prepareStatement("select * from user where account=? and password=?");
            // 设置查询参数
            preparedStatement.setString(1,username);
            preparedStatement.setString(2,password);
            // 执行查询并获取结果
            ResultSet resultSet = preparedStatement.executeQuery();
            if(resultSet.next()){
                //登陆成功设置返回状态200
                response.setStatus(HttpServletResponse.SC_OK);
                //如果验证账号密码成功，将账户存储到javabean中
                User user = new User();
                user.setUsername(username);

                // 将 User 对象存储在 Session 中
                HttpSession session = request.getSession();
                session.setAttribute("loggedInUser", user);

                // 重定向到成功页面
                response.sendRedirect("/success.jsp");
            }else {
                // 如果验证失败，设置错误信息并转发到登录页面
                request.setAttribute("errorMessage", "用户名或密码错误，请重试。");
                request.getRequestDispatcher("/sheeplogin.jsp").forward(request, response);
            }

        } catch (Exception e) {
            // 如果出现异常，抛出运行时异常
            throw new RuntimeException(e);
        }
    }
}

success.jsp

<%--
  Created by IntelliJ IDEA.
  User: Allen xu
  Date: 2023/11/26
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%-- IntelliJ IDEA创建的模板注释 --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!-- 使用jsp:useBean标签在session范围内创建一个User对象 -->
<jsp:useBean id="loggedInUser" scope="session" class="com.hbnu.sheep.User"/>

<html>
<head>
  <!-- 设置页面标题 -->
  <title>Success Page</title>
  <!-- 设置页面样式 -->
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: linear-gradient(to right, #008000, #ADFF2F);
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .success-message {
      text-align: center;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 0px 20px 5px #00000050;
    }
    h1 {
      color: #008000;
    }
  </style>
</head>
<body>
<!-- 显示成功信息 -->
<div class="success-message">
  <!-- 使用jsp:getProperty标签获取User对象的username属性，并显示在欢迎消息中 -->
  <h1>Welcome, <jsp:getProperty name="loggedInUser" property="username" /></h1>
  <p>You are now logged in!</p>
</div>
</body>
</html>

项目文档：

一、项目概述

1.1 项目背景

本项目是一个基于JavaWeb的用户登录系统，通过用户输入用户名和密码进行验证，验证成功后将用户信息存储在Session中，并重定向到成功页面。

1.2 项目结构
  • User类：用于封装用户数据，包括用户名和密码。
  • SheepServlet类：处理用户登录请求，连接数据库验证用户身份。
  • success.jsp：登录成功后跳转的页面，显示欢迎消息。
  • sheeplogin.jsp：用户登录页面，包含用户名、密码输入框和验证码功能。

二、项目详细分析

2.1 User类

User类用于封装用户数据，包含用户名和密码。通过提供获取和设置方法，实现对用户信息的操作。

2.2 SheepServlet类
2.2.1 处理POST请求

在doPost方法中，获取用户输入的用户名和密码，连接数据库验证用户身份。

2.2.2 数据库连接

通过JDBC连接MySQL数据库，执行SQL查询语句验证用户名和密码是否匹配。

2.2.3 登录成功

如果验证成功，设置返回状态为200，将用户信息存储在User对象中，并存储在Session中，然后重定向到success.jsp页面。

2.2.4 登录失败

如果验证失败，设置错误信息，并转发到sheeplogin.jsp页面。

2.3 success.jsp

在成功页面，使用JSP标签从Session中获取loggedInUser对象，显示欢迎消息。

三、操作文档

3.1 项目部署
  1. 确保已配置好Java开发环境和MySQL数据库。
  2. 导入项目到IDE中。
  3. 配置数据库连接信息（url、用户名、密码）。
  4. 启动项目，确保Tomcat服务器正常运行。
3.2 登录流程
  1. 访问sheeplogin.jsp页面。
  2. 输入用户名、密码，生成验证码。
  3. 点击登录按钮，触发loginToSheepServlet函数。
  4. 检查验证码，正确则发送POST请求到SheepServlet。
  5. SheepServlet连接数据库验证用户身份，成功则重定向到success.jsp，否则返回登录页面并显示错误消息。
3.3 注意事项
  1. 确保MySQL数据库已创建名为sheepgamestation-user的数据库。
  2. 确保数据库中存在user表，包含account和password字段。
3.4 修改页面样式
  1. 修改success.jsp和sheeplogin.jsp中的CSS样式，调整页面布局和颜色。
  2. 修改sheeplogin.jsp中的JavaScript函数，定制页面交互效果。
3.5 高级配置
  1. 实现用户注册功能，包括数据库插入新用户信息。
  2. 使用HTTPS协议加强安全性。
  3. 添加密码加密功能，存储加密后的密码。
  4. 浏览器会提示密码泄露

四、程序架构

思维导图：请添加图片描述

Allen--xu
关注
用JSP+Servlet+JavaBean模式实现简单的登录
Bamboo_Dong的博客
07-29 6065
这次涉及到四个文件: 登录页面:login.html 登录成功欢迎页面:login_success.jsp 登录失败页面:login_failure.jsp Servlet处理文件:LoginServlet.java 其实还涉及到一个文件:web.xml,这个后面再说: 下面分别介绍这几个文件:登录页面:login.html<html> <head> <title>登录</t
Jsp+Servlet+JavaBean+JDBC简单登录实例
03-15
本实例将详细讲解如何利用JavaServer Pages (JSP)、Servlet、JavaBean以及Java Database Connectivity (JDBC) 来实现这样一个简单的登录功能。 **一、JSP（JavaServer Pages）** JSP是Java的一种动态网页技术，允许...
【JavaWeb】案例：使用 Servlet 技术完成一个用户登录
专注于Java领域开发 关注我 带你玩转Java
08-22 2328
案例：使用 Servlet 技术完成一个用户登录
基于JSP + servlet + javabean的MVC简单验证登录实例
Crazy Snail
08-04 2183
功能描述：用户输入登录信息提交给Servlet进行接收，Servlet接收到请求内容后进行验证然后根据验证结果跳转到相应页面。 MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型、视图、控制器。它们各自处理自己的任务。最典型的MVC就是JSP + servlet + javabean的模式。 建立数据库为后面登录做数据准备：create
Javaweb开发 利用servlet+jsp+jdbc+tomcat数据库实现登录功能
最新发布
wuyomhchang的博客
11-14 2638
Java web的小案例，是一个登录页面，利用Login控制类和JDBC连接数据库，并判断用户名密码是否正确，项目最终部署在Tomcat上。
JSP+Servlet+JavaBean模式+实现登录注册
白洞，白色的明天在等着我们
07-26 6063
JSP+Servlet+JavaBean模式+实现登录注册
登陆实例(JSP+Servlet+JavaBean)
java619
11-01 4261
/**************************************************  *Author:Java619  *Time:2006-03-25  *E-Mail:ceun@163.com  *QQ:395676370  **************************************************/  登陆是我们在实际应用中经常用到的,我在这
JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
10-22
主要基于Servlet+JSP+JavaBean开发模式实现JavaWeb用户登录注册功能实例代码，非常实用，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
jsp+servlet+javabean实现登录例子
05-31
jsp+servlet+javabean实现登录例子
jsp+servlet+javaBean+mysql (MVC)模拟用户登录
韩世雷 程序员专栏
06-18 8063
一、登录页面 /jsp/login.jsp
JSP+Servlet+JavaBean实现登录网页实例详解
A6351958的博客
06-30 872
这篇文章主要介绍了JSP+Servlet+JavaBean实现登录网页的方法,以完整实例形式分析了JSP+Servlet+JavaBean实现登录网页所涉及的详细步骤与具体实现方法,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JSP+Servlet+JavaBean实现登录网页的方法。分享给大家供大家参考。具体如下： 这里涉及到四个文件: 1. 登录
servlet+jsp+javaBean实现登录操作
qq_44550513的博客
08-20 5475
1. javaBean+jsp+servlet (MVC)开发模式 MVC M（模型）用于处理应用程序数据逻辑的部分通常模型对象负责在数据库中存取数据。V（视图）应用程序中处理数据显示的部分通常视图是依据模型数据创建的。C（控制器）应用程序中处理用户交互的部分通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。 MVC适合用来开发web应用，下面用servlet+jsp+javaBean...
JSP+JavaBean+Servlet技术实现某网站用户注册和登录功能
04-24 3083
【问题】 乱码问题 解决页面乱码： response.setCharacterEncoding("utf-8"); 与服务器连接中的乱码 String user1 = new String(request.getParameter("tuser").getBytes("ISO8859_1"),"utf-8"); 【问题】小白问题 javabean 是从新建中弄得，但是得首先建pac
Java Web学习(30)： 使用JSP+Servlet+JavaBean实现用户登录
热门推荐
life is wonderful
08-02 1万+
实现用户登录        用户名admin，密码admin，登录成功使用服务器内部跳转到login_success2.jsp页面，并且提示登录成功的用 户名，如果登录失败则跳转到login_failure2.jsp页面。        之前我们使用JSP实现过，也JSP+JavaBean实现过，这一次我们更加细化，使用JSP+Servlet+JavaBean实现用 户登录，好多的源码也是
基于Servlet+JSP+JavaBean开发模式(MVC) 用户注册登陆模式.7z
05-22
（基于MVC模式下web端的开发，servlet负责处理用户请求，jsp负责数据显示，javabean负责封装数据。 Servlet+JSP+JavaBean模式程序各个模块之间层次清晰） 仅供初学者参考，内有文档注释，部分细节不懂者，留言即可
jsp+javabean+servlet登录示例
06-22
jsp+javabean+servlet登录示例,已调试通过,内附有机器环境配置,数据库脚本,mysql的驱动.<br> 供初学者参考
javaWeb课程实验3---JSPServlet及javabean实现简单登录注册(带验证码及自动登录)
Rightstar的博客
11-02 3395
前言 这是javaWeb课程学习的第三个实验,使用servlet实现登录注册,以及带验证码自动登录功能 实验内容 1、理解Servlet的工作原理； 2、掌握javabean在web程序中的应用； 3、掌握基于Servlet的MVC模式； 项目涉及技术 语言:html,css,javascript,java 知识点:jsp,servlet,javabean,cookie 项目内容 1.2、实现功能 1.2.1、登录(带验证码) servlet实现登录功能带验证码 1.2.2、用户自动登录(基于cooki
经典servlet+jsp+javabean登录模式举例
pan_xi_yi的博客
05-15 375
总体的结构如下图。 1 首先建立jsp页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3...
4 JSP+Servlet + JDBC 实现简单的登录验证模块
yufan的专栏
10-09 6381
数据库设计+编码+运行调试   数据库准备 ： 二话不说，上图 + JDBC 实现简单的登录验证模块" title="JSP+Servlet + JDBC 实现简单的登录验证模块" style="margin:0px; padding:0px; border:0px; list-style:none"> 文件组织如下： + JDBC 实现简单的登录验证模块"
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Allen--xu

目前打算送外卖，筹资买个爱玛

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值