创建用户登录页面login.jsp和登录检查后端程序（LoginServlet.java，该类应该在包servlet中）

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: rgb(235, 235, 235);
        }
        
        form {
            width: 400px;
            height: 320px;
            background-color: white;
            padding: 20px;
            box-sizing: border-box;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            /* 相对于现在所处位置的位移变化，x便偏移自己宽度的50%，y偏移自己高度的50% */
        }
        
        h2 {
            margin-bottom: 20px;
            text-align: center;
        }
        
        form input {
            width: 100%;
            height: 30px;
            display: block;
            margin-bottom: 20px;
            padding-left: 10px;
            box-sizing: border-box;
        }
        
        .mya {
            width: 100%;
            height: 30px;
            margin-bottom: 20x;
        }
        
        .mya a:nth-child(1) {
            float: left;
        }
        
        .mya a:nth-child(2) {
            float: right;
        }
        
        button {
            width: 100%;
            height: 40px;
            background-color: rgb(235, 235, 235);
            border: none;
        }
        
        button:active {
            box-shadow: 0 0 3px rgb(173, 172, 172);
            /* x偏移  y偏移  模糊值 颜色 */
        }
    </style>
</head>

<body>

    <form action="">
        <h2>登录界面</h2>
        <input id="username" type="text" placeholder="请输入账号">
        <input id="password" type="password" placeholder="请输入密码">
        <div class="mya">
            <a href="">忘记密码</a>
            <a href="">注册</a>
        </div>
        <button id="login-btn" type="button">登录</button>
    </form>

    <!-- 
        js引入方式：
        1、写在body标签里面，通过script包起来
        2、引入外部js文件  再通过script的src属性引入进来 
    -->

    <script>
        // let 定义一个变量
        let username = document.getElementById('username')
        let password = document.getElementById('password')
        let loginBtn = document.getElementById('login-btn')
            // js里面不允许出现 - 

        //一般的交互事件
        // onclick 点击事件
        // onmousemove  鼠标移入事件
        // onmouseout  鼠标移出事件
        // ondblclick  双击事件
        // onfocus  input框获取焦点事件
        // onblur  失焦事件


        loginBtn.onclick = function() {
            let usernamevalue = username.value
            let passwordvalue = password.value
                // console.log(usernamevalue, passwordvalue)
                // 便于检查的时候判断是否成功
            if (!usernamevalue) {
                return alert('请输入正确的用户名')
                    //return 跳出当前函数，并且返回后面的值
            }
            console.log(usernamevalue, passwordvalue)

        }
    </script>
</body>

</html>

User.java

package Entity;
import java.util.ArrayList;
public class User {
    private String name;
    private int number;
    private char code;
    private String character;
    private String status;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getNumber() {
        return number;
    }
    public void setNumber(int number) {
        this.number = number;
    }
    public char getCode() {
        return code;
    }
    public void setCode(char code) {
        this.code = code;
    }
    public String getCharacter() {
        return character;
    }
    public void setCharacter(String character) {
        this.character = character;
    }
    public String getStatus() {
        return status;
    }
    public void setStatus(String status) {
        this.status = status;
    }
    ArrayList<User> UserList;
}

参考一下，可以这样写。


package cn.test.loginServlet;

import java.io.IOException;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import com.mchange.*;
import cn.test.domain.User;
import cn.test.utils.DataSourceUtils;

public class LoginServlet extends HttpServlet {

    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");

        QueryRunner queryRunner = new QueryRunner(DataSourceUtils.getDataSource());
        String sql = "select * from user where username=? and password=?";
        User user = null;
        try {
            user = queryRunner.query(sql, new BeanHandler<User>(User.class), username, password);
            // System.out.println(user);
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

        if (user != null) {
            response.getWriter().write(user.toString());
        } else {
            response.getWriter().write("sorry you username or password is Error!");
        }
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}