jsp 通过数据库验证登陆密码-原创手记-慕课网

项目名称：checkLogin
功能实现：验证用户登录密码
开发工具：myeclipse、sequel pro
实现步骤：
1.数据库设计
2.登陆页面
3.验证页面
4.登陆成功和登陆失败页面
5.总结

数据库设计
数据库名 db_users
数据表名 tb_user
属性 id, userName，password
sql语句

CREATE DATABASE db_users;
USE db_users;
CREATE TABLE tb_user(
id INT PRIMARY KEY AUTO_INCREMENT;
userName VARCHAR(40) NOT NULL UNIQUE;
password VARCHAR(32) NOT NULL;
);
INSERT INTO tb_user VALUES(NULL,'admin','admin');

登录页面
样式实现环境mbp13 chrome浏览器

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>用户登录</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet"
    href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script
    src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style>
#header {
    text-align: center;
    color: white;
    height: 300px;
    background-color: rgb(50, 50, 50);
    padding: 150px 140px 100px 50px;
}

h1 {
    font-size: 70px;
}

img {
    position: absolute;
    left: 790px;
    top: 135px;
}
form{
    margin-top: 20px;
}

</style>

<!-- <script type="text/javascript">
    function checkUserName(obj){
        var userName = obj;
        var check = document.getElementById("userName");
        if(userName.trim().length == 0){
            check.innerHTML = "用户名不能为空";
            check.focus;
        }else{

        }
    }
</script> -->
</head>

<body>
    <div id="header">
        <h1>
            Wide Admin
            <h1>
                <img src="picture/cloud_logo.png" alt="图片无法显示" / width="140px"
                    height="130px" />
    </div>

    <form class="form-inline text-center" role="form" action="checkLogin_page.jsp"
        method="post">
        <div class="form-group">
            <label>用户名:<input type="text" class="form-control"
                name="userName"></label>
        </div>
        <div class="form-group">
            <label>密码<input type="password" class="form-control"
                name="password"></label>
        </div>
        <div class="form-group">
            <label><input type="submit" class="form-control btn-primary"
                value="登陆"></label>
        </div>
    </form>
</body>
</html>

验证页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.ResultSet"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>登陆验证</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

</head>

<body>
    <%!//声明链接数据库所需参数
    String DBDriver = "com.mysql.jdbc.Driver";
    String URL = "jdbc:mysql://localhost:3306/db_users?useUnicode=true&characterEncoding=utf8&useSSL=false";
    String USER = "root";
    String PASSWORD = "fyz123456";
    String sql = "SELECT * FROM tb_user WHERE userName = ?";
    boolean flag = false;
    Connection conn = null;
    PreparedStatement pstt = null;
    ResultSet rs = null;
    %>

    <%
        //获取用户提交表单数据
        String userName = request.getParameter("userName");
        String password = request.getParameter("password");
    %>
    <%
        //链接数据库根据用户名查询密码 是否匹配 并进行重定向跳转
        try {
            out.println("<h1>1</h1>");
            Class.forName("com.mysql.jdbc.Driver");
            out.println("<p>加载驱动成功</p>");
            conn = DriverManager.getConnection(URL, USER, PASSWORD);
            pstt = conn.prepareStatement(sql);
            pstt.setString(1, userName);
            rs = pstt.executeQuery();
            if (rs.next()) {
                if (rs.getString("password").equals(password)) {
                    flag = true;
                } else {
                    flag = false;
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }

        if(flag){
            request.getRequestDispatcher("success.jsp").forward(request, response);
        }else{
            request.getRequestDispatcher("failure.jsp").forward(request, response);
        }
    %>
</body>
</html>

登陆成功页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>登陆成功</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>

  <body>
    <<h1>恭喜您登陆成功</h1>
  </body>
</html>

登陆失败页面

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>登录失败</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>

  <body>
    <<h1>对不起 登录失败</h1>
  </body>
</html>

总结
1.实现用户登录页面所需的html css技能点数不足，图片的位置和大小自适应未实现
2.连接数据库 jar包放在WEB-INF/lib目录下，build path
3.登陆页面的js验证账号密码不能为空未实现