JavaWeb实现简单登录功能

创建一个web项目，配置好Tomcat，java环境，并部署到idea中，安装好MySQL并导入jar包、mysql-connector的jar包、jquery的js包、servlet-api.jar

1.首先在数据库创建一个表

CREATE TABLE `user` (
  `uid` int(11) NOT NULL COMMENT '账号',
  `uname` varchar(20) DEFAULT NULL COMMENT '用户名称',
  `password` varchar(20) DEFAULT NULL COMMENT '密码',
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

2.数据库连接方法

public class JdbcTools {

    private String url = "jdbc:mysql://localhost:3306/test?characterEncoding=utf8";
    private String username = "root";
    private String password = "";

    private Connection conn;
    private PreparedStatement ps;
    private ResultSet rs;


    //创造构造函数
    public JdbcTools() {
    }

    public JdbcTools(String url, String username, String password) {
        this.url = url;
        this.username = username;
        this.password = password;
    }

    //加载驱动类
    static {
        try {
            Class.forName("com.mysql.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }

    //获取连接
    public Connection getConnection() {
        try {
            conn = DriverManager.getConnection(url, username, password);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return conn;
    }

    //添加执行查询方法
    public ResultSet executeQuery(String sql, Object... item) {
        try {
            ps = (PreparedStatement) getConnection().prepareStatement(sql);
            for (int i = 0; i < item.length; i++) {
                ps.setObject(i + 1, item[i]);
            }
            rs = ps.executeQuery();
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return rs;
    }

    //关闭资源
    public void close() {
        try {
            if (rs != null) {
                rs.close();
            }
            if (ps != null) {
                ps.close();
            }
            if (conn != null) {
                conn.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
    }

    //添加删除方法
    public int executeUpdate(String sql, Object... item) {
        int count = 0;
        try {
            ps = (PreparedStatement) getConnection().prepareStatement(sql);  
            for (int i = 0; i < item.length; i++) {
                ps.setObject(i + 1, item[i]);
            }
            count = ps.executeUpdate();
        } catch (SQLException e) {
            e.printStackTrace();
        }

        close();
        return count;
    }
    //封装集合
    public List<Map<String, Object>> select(String sql, Object... item) {
        List<Map<String, Object>> result = new LinkedList<>();
        List<String> columnList = new LinkedList<>();
        try {
            ResultSet rs = executeQuery(sql, item);
            ResultSetMetaData md = rs.getMetaData();
            for (int i = 0; i < ((ResultSetMetaData) md).getColumnCount(); i++) {
                columnList.add(md.getColumnName(i + 1));
            }
            while (rs.next()) {
                Map<String, Object> map = new LinkedHashMap<>();
                for (String column : columnList) {
                    map.put(column.toLowerCase(), rs.getObject(column));
                }
                result.add(map);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }
        close();
        return result;
    }
    //增删改方法封装
    public int update(String sql, Object... item) {
        return executeUpdate(sql, item);
    }
    public int insert(String sql, Object... item) {
        return executeUpdate(sql, item);
    }
    public int delete(String sql, Object... item) {
        return executeUpdate(sql, item);
    }
}

3.创建一个实体类

public class User {
    /**
     * 账号
     */
    private Integer uid;

    /**
     * 用户名
     */
    private String uname;

    /**
     * 密码
     */
    private String password;
public User(int uid, String uname, String password) {
        this.uid = uid;
        this.uname = uname;
        this.password = password;
}
 public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }
 @Override
    public String toString() {
        return "User{" +
                "uid=" + uid +
                ", uname='" + uname + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
  public User(){

    }
}

4.创建一个LoginDao类，用于进行查询数据库内容的具体方法，该方法继承JDBCUtils工具类

private JdbcTools jt = new JdbcTools();

    /**
     * Map转User的orm映射方法
     *
     * @param map 传入的map
     * @return User对象
     */
    public User ormUser(Map<String, Object> map) {
        User user = new User();

        if (map.get("uid") != null) {
            user.setUid((int) map.get("uid"));
        }
        if (map.get("uname") != null) {
            user.setUname((String) map.get("uname"));
        }
        if (map.get("password") != null) {
            user.setPassword((String) map.get("password"));
        }
        return user;
    }

    public User login(int uid, String password){
        String sql = "select * from user where uid=? and password=? ";
        List<Map<String, Object>> list = jt.select(sql, uid, password);
        if (list.size() == 0) {
            return null;
        }
        Map<String, Object> map = list.get(0);
        return ormUser(map);
    }

5.创建一个LoginServlet，获取login.jsp页面中的用户名密码，用于验证用户登录。

@WebServlet("/LoginServlet.do")
public class LoginServlet extends HttpServlet {

    private LoginDao loginDao = new loginDao();

    @Override
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //这个是乱码处理 改一下字符集
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        response.setContentType("text/html");


        //获取操作指令
        String action = request.getParameter("action");

        //
        if (action.equals("login")){
            //登录功能
            //1.获取前端传来的数据
            String uid = request.getParameter("uid");
            String password = request.getParameter("password");
            //2.调用数据层
            User currentUser = loginDao.login(Integer.parseInt(uid), password);
            //3.判断
            if (currentUser == null) {
                //登录失败：返回登录页，提示失败原因
                request.setAttribute("message", "登录失败！账号密码有误或无权限进行操作！");
                request.getRequestDispatcher("./jsp/login.jsp").forward(request, response);
            } else {
                //登录成功，跳向操作首页
                request.getRequestDispatcher("./jsp/index.jsp").forward(request, response);
            }
        }

    }

6.创建一个登录页面login.jsp，在表单内填写用户名和密码，用post提交到LoginServlet。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入bootstrap -->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <!-- 引入JQuery  bootstrap.js-->
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <style type="text/css">
        body {
            background: url(../images/bc2.jpg);
            background-position: top;
        }

        #login-box {
            padding: 35px;
            border-radius: 15px;
            background-color: #56666B;
            color: #fff;
        }
    </style>
</head>

<body>
<div class="container" id="body">
    <div class="row" style="margin-top: 260px; ">
        <div class="col-md-4 col-md-offset-2"><span id="message"
                                                    style="color: red;text-align: center;">${message}</span></div>
        <br>
        <div class="col-md-4 col-md-offset-2" id="login-box">
            <form class="form-horizontal" role="form" action="LoginServlet.do?action=login" id="loginForm" method="post"
                  autocomplete="off">
                <div class="form-group">
                    <label for="username" class="col-sm-3 control-label">用户</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="username" placeholder="请输入名字" name="uid"
                               required>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-3 control-label">密码</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="password" placeholder="请输入密码"
                               name="password" required>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-3 col-sm-9">
                        <button type="submit" class="btn btn-default btn-info" style="width:100%;">登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script>
    $(document).ready(function () {
        $(".form-control").focus(function () {
            $("#message").css("display", "none");
        });
    });
</script>

</html>